Using The EverWeb Full Width Widgets

Website Design For All Devices

A website which offers a quality visitor experience on all devices - computer, tablet and smart phone - needs to be either a responsive design or a trisite.
A Responsive design is one which rearranges the layout depending on the viewing device width.
A Trisite Design design offers three different versions of the website to suit the device type and directs the visitor to the appropriate one based on the screen width of their device or their browser width.

Touch Trisite Widgets

Touch Widgets

The Touch widgets are designed to allow creating three versions of the website quickly and efficiently.
The widgets group items in HTML5 containers which allow them to be quickly adjusted in size and copy/pasted from one version of the site to the others.
The media widgets are designed specifically for touch & swipe control.

Flex Widgets

EverWeb Flex Widgets

The Flex widgets create fully responsive web pages which can be viewed on all device types - computer, tablet and smart phone.
This system is more suited to advanced EverWeb users who can base their website design on containers which reposition themselves depending on the device or browser width.

Full Width Widgets

Full Width Responsive Widgets

The Full Width widgets create a full site with items that are responsive down to the page content width.
If the content width is kept below 800px, the site will also be suitable for tablet users.
The Full Width widgets work best when combined with the Touch widgets to create the tablet and smart phone versions.

What Is Responsive Design?

In simple terms, items are made responsive by giving them a percentage width and an "auto" height. Although some items can have 100% width, most would look ridiculous when viewed on a large screen width a wide browser setting. To avoid this, items are centered on the page and given a maximum width.
To see the responsive action of the items on this page, vary the browser width from full screen width do to the page content width which will be indicated by the appearance of the horizontal scrollbar at the bottom of the browser window.

Using Full Width Widgets

While the Full Width widgets can create a responsive look and feel to a page design it is important to realise their limitations. When an item like this text box expands and contracts with variations in browser width, the height varies too.
In a truly responsive design such as those created using the Flex widgets, the items below will move up/down the page to accomodate these changes in height. Since items inserted onto the EverWeb design canvas are given a fixed vertical position, this is not possible.
Many of the widgets have been designed to employ a fixed height as can be seen from the exampls on this demo site. Others, like this text box, have varying height and this needs to be compensated for.
The variance in height can be reduced by setting a realistic maximum width for the text box and also by spacing items out vertically to avoid overlap at narrower browser settings or when the page is viewed on a tablet device in portrait mode.

Designing For iPad

If there isn't separate version of the site for tablet users, the full site page will work OK as long as certain factors are taken into consideration.
Make sure the page content width is no wider than 980px. Lower is better and 780px is best.
The wider the maximum width setting for an item like a text box, the more vertical spacing it requires from the item below it.
Module widgets should have a width setting which is less than one third of the page content width and may require some extra height.
Use one of the Full Width Header widgets and make sure the checkbox next to "Tap to close" is checked so that visitors can close the navigation menu dropdowns on touch devices.
Make sure that the navigation links are given enough top/bottom padding to give them a minimum of 28px in height when viewed on an iPad or other tablet device.
Do NOT use text hyperlinks. Use image links or CTA buttons like the ones on this page.
Test all the pages on an iPad device using the iOS Simulator.

The widgets used on this page are included in the Full Width widget pack.

EverWeb Widgets