Using EverWeb’s ‘Show on Device’ Feature

EverWeb version 2.9 introduced the new ‘Show on Device’ feature, which does exactly what it says: It allows you to set on which device types an object will appear. ‘Show on Device’ can be found in the Metrics Inspector in the new ‘Responsive’ section and features four checkboxes: ‘Show on Mobile’, ‘Show on Tablet’, ‘Show on Desktop’ and ‘Show on Wide Desktop’. By default, all four device types are checked for all objects when they are added to the page in the Editor Window. There’s also a ‘Breakpoints’ button which allows you to set the maximum device width of each device type.

Although ‘Show on Device’ is in the ‘Responsive’ section of the Metrics Inspector, you can still use its features if you are working with a fixed width layout if you need to.

Why Use Show On Device
Show on Device lets you choose which objects will appear on which device types. By default when you add an object to a page, the object will be displayed on all device types. However, when using Responsive Web Design you may have the problem where what you display to the visitor on a large desktop device may be different to what you want displayed on a mobile device. Using Show on Device solves this problem and gives you the design flexibility to determine what gets displayed and when it gets displayed.

Using Show On Device
Responsive Web Design always focuses on content first whatever the device type you are currently viewing the page upon. Wide desktop devices are able to cater for a lot of detailed, in-depth content as opposed to mobile devices which typically have relatively little content that focus more on the ‘big picture’ rather than on detail. So, the first decision is to decide which content from the large desktop do you want to see on the mobile device? Which content should be removed as you scale the page down? Simply uncheck the ‘Show On Mobile’ option when you don’t want a particular object displayed on that device type.

The second decision you may want to make is the opposite of the first. Do you need to add content that is specific and exclusive to mobile devices and will never appear on any other device types? You may find that yourself creating mobile specific content where Show on Device is only ticked for mobile devices.

The third decision you may want the changing level of detail in the content as the device type changes. For example, you may have a big headline article full of detail on your page. This is great on desktop devices but you may want a scaled down version for mobile devices. In this case you may have used a Text Section widget so start by duplicating the widget. For the original widget, uncheck ‘Show on Mobile’. For the duplicate widget, first edit the content so that it only contains what you want to see on a mobile device (in this example, less text). Once you have done edited the duplicate Text Section widget, deselect all of the ‘Show on Device’ options except for mobile. When you view the page and start to reduce the page width, eventually the mobile content will replace the desktop content.

Hidden Objects
When using the Show on Device feature in EverWeb, you probably will want the Window-> Show Hidden Objects menu option set on. This is useful as when an object is not visible on a certain device type, for example for an object that has Show on Device unchecked for mobile, it replaced by a grey rectangle with a cross through it when the Editor Window is at the page width used for mobile devices. When you increase the page width to tablet device width or higher, the object will display. If you don’t want to see hidden objects at all, uncheck the Window-> Show Hidden Objects menu option. This is useful when you want to see a ‘clean’ view of your page.

When you hide objects they can still be found if necessary. Secondary click on an empty area of the page and a menu of options will appear. When you have hidden objects on the page, a ‘Hidden Objects’ menu option appears. Select the hidden object you want to view. If there are no hidden objects on the page, the ‘Hidden Objects’ menu option is not be displayed.

Using Show On Device on Fixed Width Websites
Whilst Show On device will mainly be used for responsive websites, it can also be of use on fixed width sites e.g. when you have a desktop page, you may want to show fewer objects when viewing the page is viewed on tablet devices. In this case, checking or unchecking the ‘Show on Tablet’ option could be easier than creating a specific page for tablet devices.

Show on Device is a great and easy to use feature that lets you control how content is displayed on different device types.