Responsive Mobile Layout

Swipe Navigation

Lazy Load Slider

Images Reduced To
720 x 480

Height 480px

Design

The mobile page has the same content as the full/tablet version - a full width responsive header, a responsive navigation, a responsive width, fixed height Hero slider and a responsive content widget with built in footer.
In this case the slider has been switched to a lazy loading swipe slideshow.

Media

The main reason for having a separate version of each page for visitors who are using mobile phones is to make it easier to make much smaller media files available. This allows increased download speed over wireless networks and helps to conserve the visitor's data allowance.
The Hero slider uses the same images as the full site/ tablet version but they are reduced from 280 KB in size to 100 KB.
The slider height has been reduced to 480px so that the full height of the image is visible when viewed on the smallest iPhone.
Where possible, all images should be lazy loading on this version of the site - not just those in sliders.
Even more important, is to make much smaller video files available for mobile users.
Video files can be huge - especially if they are HD for use in Hero widgets or where fullscreen is allowed. It is essential to reduce the file size to the minimum possible to maintain reasonable quality.
Even more essential is to use a widget which inserts a poster image and prevents the video from downloading along with the rest of the page content. Otherwise, the visitor has to use up a chunk of their data allowance even if they don't watch the video!

Layout

Both versions of this page use four widgets to create the content. Since three of these can be copied over from the full/tablet version of the site, the mobile page is quick and easy to create.
Mobile pages should, in general, have less media content, icons created from CSS rather than images and CTA style link tabs instead of text links.
All user inputs should have a minimum height of 28px and a width of at least 32px for fingertips and 40px for thumbs. Any links on a mobile site - including those in the navigation - whose height is less than 28px will be penalised by Google.

Images

Apart from reducing their file size, the main focus with images that will be viewed on a smart phone is the aspect ratio.
If the intent is to make the page viewable in portrait mode, images should be square or portrait mode. If they are to be viewed in landscape mode, make sure the aspect ratio is high enough for the smallest screen size.

Slideshows

Autolay sliders are not a good idea in any situation and should never be used on a mobile site.
Slideshows using thumbnail images are unnecessary and lightbox sliders are not practical.
A lazy loading, swipe slider with captions and alt text and images sized to suit the intended device orientaion are the best option.
If lazy loading is not used, the total number of images on the page - including those in the slideshow - should not exceed twelve.

© EverWeb Widgets -