Mac SEO Blog

EverWeb version 2.9 introduced ‘Show on Device’, a feature that lets you choose on which device types you want an object to be displayed upon.

Using Show on Device is a great way to tailor your page content specifically for use on mobile through wide desktop devices. For example, you have placed four Text Section widgets directly under each other on your page. When viewing on a desktop computer, you want all four widgets, but on a mobile phone you only want to see three of them as you do not want your visitors to have to scroll through too much information.

Show on Device can be used in either fixed or responsive website designs, although it is probably be more useful in the latter.

Using Show on Device: Example #1

To recreate the example above, follow the steps below:

1. Start by adding a new Blank Responsive page to your EverWeb project.
2. Next add a Responsive Row widget to the page and within this add four Text Section widgets.
3. Style each Text Section widget as desired e.g. add an image, some text and button to each.
4. Make the settings for all the Text Section widgets the same as each other for a uniform look.  
5. Next select the Text Section widget that you do not want displayed on  mobile devices.
6. Go to the Metrics Inspector tab and uncheck the ‘Show on Mobile’ option in the ‘Responsive’ section.
7. To see how this work adjust the width of the EverWeb application itself. As you reduce the right hand margin of the app, the page in the Editor Window automatically reorganises itself.
8. Eventually the Text Section widget you chose to hide on mobile devices will become hidden and will be replaced in the top left of the Responsive Row widget by a grey box with an ‘X’ through it, indicating that at this width the Text Section object is hidden.
9. Preview to test that the objects display correctly at all widths before publishing.

Using View Options with Show on Device

Use the Window, Show Hidden Objects menu option to hide or reveal hidden objects.

To select a hidden object, secondary click in the Editor window and go to the Hidden objects menu option. Select the object you want to see.

Using Show on Device: Example #2

In the second example I am going to ‘replace’ one object with another as the browser width narrows.

In this example I have a full width FlexBox widget inside of a Responsive Row widget on my page. The FlexBox widget contains a lot of text. This is fine when viewed on a desktop device, but on a mobile device I want to show less text. The steps below show you how you can achieve this easily:

1. Start by selecting the FlexBox widget and duplicating it.  You can quickly do this by secondary clicking on the FlexBox widget and selecting ‘Duplicate’ from the menu.
2. Next, secondary click on the duplicate FlexBox widget.
3. Use the ‘Embed In’ option to check to make sure that the duplicate widget is embedded in the Responsive Row widget.
4. Add the duplicated widget in to the Responsive Row widget that contains the original FlexBox widget. Select the Responsive Row widget from the ‘Embed In’ menu choices if the widget has not already been automatically added to the Responsive Row widget.
5. In the duplicate widget, I now remove most of the text, as this widget will only be displayed on a mobile device.
6. Now go to the Metrics Inspector and set the object to ‘Full Width’.
7. Unchecking the  ‘Show on tablet, desktop and wide desktop’ option 
8. Select the original FlexBox widget and uncheck only the ‘Show on Mobile’ option. Keep the other three options checked.
9. Preview to see the results. When you reduce the browser width, the original Flex~box widget will be displayed until you reduce to the browser to a width suitable for mobile devices. When this happens, the duplicated FlexBox widget with less text will display instead of the original widget with the full text.

Video Walkthrough

Checkout our YouTube channel for a video walkthrough of how to use ‘Show on Device‘.

If you have any questions or comments about this blog post, please let us know and we will do our best to help!

EverWeb on Social Media

You can also find EverWeb on the following social media platforms:

Facebook

Flipboard

YouTube

Twitter handle @ragesw