Responsive Mobile Website
The mobile website widgets create elements and containers for creating a responsive mobile version of the website
The widget examples should be viewed on a suitable device, in the iOS Simulator or in a desktop browser using responsive mode.
The image below shows the three different sizes of iPhone and the screen width in portrait and landscape mode. It should be obvious that a fixed width web page design is not going to perform well on the various sizes of phone.
For a design to work on different devices, the page width has to vary from 320px to 414px in portrait mode and up to 736px in landscape. This is achieved by giving the items 100% width with a maximum width setting.
The maximum width setting is used to control the width of an item when viewed in landscape mode. For example, an image with an aspect ratio of less than 4:3 will be partially hidden when viewed in landscape mode so its maximum width setting should be set to prevent the height from expanding more than the device screen width which is actually the screen height in landscape mode.
Items such as videos are played in full screen mode anyway so it is not necessary to set their maxium width to any more than about 480px.
It should now be obvious why it is essential to use the iOS Simulator to test all the pages of the mobile version of the site!
Go to the Testing page in the Info section of this site to find out how to download, install and use the simulator and use Chrome, Firefox and Safari in responsive mode.
A fully responsive page can be created using one of the header/navigation widgets and a responsive container which has a built in footer.
See the Mobile Container section to view the widgets.
A responsive container can also be placed below a fixed height item or small items such as a heading which don't vary in height when the device width is changed.
When using the mobile elements, the items need to be placed properly to avoid any overlapping when viewed on devices or different width and orientation.
Refer to the Responsive page to find out about page settings and how to lay out items to prevent overlaps.
EverWeb's built in redirect to send visitors using mobile phones isn't appropriate for use with these widgets since it will redirect those using the largest size of iPhone to the full version of the site.
The Mobile Redirect widget can be used on the full site to redirect those using phones and to the mobile one and on the mobile site to redirect those using tablets and computers to the full site.