Mac SEO Blog

Responsive Web Design is a great way to build a website in EverWeb that is consistent across all devices. You only need to design one page which will adapt to all device types. You no longer need to develop and maintain separate mobile pages in your website. The trade off, though, is that you have to put more care and attention in to your page design than you might have done before.

When developing your website, it may be easier to think of designing pages for use on desktop computers rather than designing pages for mobile devices. This makes sense, as it may be easier to take objects out of your design as you shrink the page down towards mobile device sizes, rather than adding objects in to the page as you upscale from a mobile page towards a desktop page size.

This design approach is generally fine, but can cause some problems when viewing your page on a mobile device. You may find that the page scrolls horizontally beyond the right hand margin of the mobile device creating a gap to the right of the page.

What Causes The Page to Drift Horizontally?

Ideally, the page should fit the horizontal dimensions of all devices it is displayed upon. The basic problem is that on a mobile device, a desktop page width is being used so the page does not behave in a responsive manner. There are a couple of easy ways to solve this problem which we will come to later, but first, it is important to discuss how the problem is caused in the first place.

Factoring In Minimum Device Width

One important factor to be aware of when designing responsive pages is the width of the smallest device that you are designing for. Typically the smallest device type that your website will be displayed upon will be an iPhone SE. The iPhone SE has a horizontal display width of 320 pixels so when designing your pages consider this value as it will help make your pages fit perfectly on the vast majority of devices, both mobile and desktop.

You usually do not need to consider maximum page width, unless you have objects that are too widely spaced out on the page. Our blog, ‘Using Content Maximum Width‘ delves in to this in more detail as does our video, Content Maximum Width, on YouTube.

When adding full width objects to the page, you do not need to consider minimum device width as such objects automatically scale to the available screen width. However, in some instances, you may need to check that the ‘Full Width’ checkbox is still checked in the Metrics Inspector. The ‘Full Width’ checkbox can become unchecked when using the Responsive Row widget. For example, when adding a full width widget inside the Responsive Row widget (e.g. a Text Section, FlexBox or Navigation Menu widget), be careful to make sure that the ‘Full width’ checkbox is still checked if you still want the object to be full width.

Usually, you do not need to add full width objects in to a Responsive Row widget, but there may be specific instances where you may want to do this.

If the object inside the Responsive Row widget is not at full width, it will actually be a fixed width object instead. So, for example, if you have a FlexBox widget that is 1000 pixels wide, on an iPhone SE you will be able to scroll 1000 pixels horizontally across the page.

To solve this issue, either check the Full Width checkbox in the Metrics Inspector to make the object full width or reduce the width of the FlexBox widget down to 320 pixels or less.

Minimum Design Width For Different Device Types

You may be thinking that objects on your page are now limited to a 320 pixel maximum width. Actually, this is not the case as some widgets will automatically scale content according to the device the page is being viewed upon.

The FlexBox and Text Section widgets are good examples of automatic scaling. For example, in the Widget Settings of the FlexBox widget, set Minimum Width, Default Width and Maximum Width values to ‘100%’ for images. This will scale the image properly on all device types. That is all you need to do!

Using Show On Device For Different Device Types

If you are not using widgets such as those mentioned above, you may need an alternative method to make sure that objects appear at the right size on all device types. This is where ‘Show On Device’ in the Metrics Inspector is very useful. For example, you have an image inside a Responsive Row widget that you want to display properly on all device types. Select the image and make it 300 pixels wide in the Metrics Inspector and check ‘Show on Mobile’ in the ‘Responsive’ section. Uncheck the other three Show on Device options. The image will probably disappear as it is only visible on mobile devices. You can see the image outline by using the Window-> Show Hidden Objects menu. Also, if you reduce the width of the Editor window enough the image will appear.

Add the same image from the Assets List into the Responsive Row widget. This time make it 600 pixels wide. In the ‘Responsive’ section of the Metrics Inspector check ‘Show on Tablet’ and uncheck the other three options. Again the image may disappear but you will see its outline displayed if you have the ‘Show Hidden Objects’ menu option set on.

Finally, add the same image a third time and make it e.g. 775 pixels wide. Check ‘Show on Desktop’ and ‘Show on Wide Desktop’. Uncheck the other two options.

When you preview the page, you will notice that as you shrink the size of the browser window, the image in the Responsive Row will be fit properly for all device sizes, i.e. 300 pixels wide on a mobile device, 600 pixels wide on a Tablet and 775 pixels wide on desktop and wide desktop devices.

Testing Your Responsive Pages

When finished, it is recommended that you preview the page in Safari’s Responsive Design Mode. Safari has possibly the best responsive design browser feature. To enable it in Safari, go to the Safari-> Preferences menu. Click on the Advanced button then check the ‘Show Develop menu in menu bar’ box. Close the Preferences dialog box. You will now see the ‘Develop’ menu in Safari’s menu bar. Use the Develop-> Enter Responsive Design Mode menu option to test your website’s pages against different device types.

Responsive Design can be challenging, but with a bit of thought and creativity, problems such as horizontal page drift can be easily resolved.

If you have a comment or question about this blog post, please let us know in the Comments Section below!

EverWeb on Social Media

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

Facebook

Flipboard

YouTube

Twitter handle @ragesw