EverWeb Widgets

Responsive Page Layout

Setting up a page template for a responsive design is different from creating a fixed width one. A template is not a master page. It is a page that is set up with basic items and then duplicated whenever a new page is required.
For a responsive mobile site, either of the Mobile Header widgets should be used and set to "Always on top" using the Arrange menu or the Metrics inspector. This is to ensure that the mobile drop down menu is above all the content items in the stacking order. For a fully responsive site, the Elements Header Nav widget should be used.

responsive page layout

Page Inspector Settings
Responsive pages are created by setting the page content width to that of the narrowest device which in practice is the width of the smallest iPhone. The page settings are shown in the screenshot to the left.
Items are made responsive by checking the Full Width box in the Metrics inspector and setting a maximum width.
The maximum width setting is important on fully responsive sites for controlling the width of the items when viewed at a wide browser setting on a large screen. It can also be used to prevent items like images, sliders and videos from spreading too wide when viewed on a mobile phone in landscape mode.
The maximum width for a responsive mobile site should be set at 736px. To include tablets in portrait mode use 799px and for tablets in landscape use 1059px.
The maximum width for a fully responsive site should be set to control the width of media items such as slideshows, banner images and videos.
Before attempting a responsive design, it's important to realise how the elements change in size and move in relation to each other.
A media element - image, slideshow or video - will increase/decrease both in width and height in response to changes in browser or device width whereas a text block will increase in height as the width is decreased and vice versa. A responsive width, fixed height obviously has no height change.
If individual elements are placed on the page, they must be spaced out vertically at a suitable distance so that they don't overlap at any given width.
Individual items should be layed out at the page content width and aligned vertically before the "Full Width" box is checked. Once the Full Width control has been checked, the items must not be moved again and the page should be tested "live" to make sure the layout works. Go to the Testing page for more info.
If too much space is required between items, the maximum width setting can be reduced.
Responsive Containers
Far better results can be achieved by using responsive containers for the page content in conjunction with the built in footer and a suitable header/navigation widget.
A fixed height item such as a full width fixed height banner image or slider can be placed above the responsive container.
Resist the urge to create the responsive mobile version of the site as a minified clone of the full site. It needs to be completely different with less content, smaller media files and touch compatible user inputs.

© EverWeb Widgets -