EverWeb Widgets HTML5

Designing A Website For Smart Phones

Click the arrow to view a screenshot of the page on an iPhone...

Layout

A typical smart phone device like an iPhone has a screen width of 320px. To allow for slightly larger screen widths, this design uses a page width of 360px.
The individual blocks are 360px wide and have been transfered from the iPad version with the box shadow and some other non essential styles removed.
The objects on this version of the site are going to appear a little smaller than in EverWeb so the font sizes have been increased by 1px to compensate.
Note that the iPad navigation has been changed to a tap to open and close icon style to save space.
Tap the CTA button below to find out more about the various navigation widgets and how to use them…

Navigation Widgets

Fonts & Sizes

Unless you can host your own fonts, it's better to stick with those from the web safe list.
Using Google hosted fonts is not a sensible option for websites that will be downloaded over mobile networks with data limits. Be kind to your visitor's wallet!
The minimum font size for any website is 15px using a font like Helvetica and 16px is much better. This is not carved in stone and the font size will depend on the font family. 15px Verdana is roughly equal to 16px Helvetica.
Font size needs to be increased proportionally for mobile devices if the website page width is wider than the device's screen width.
This content block has been transfered from the iPad website. Its 360px width is squeezed down to 320px on an iPhone so the font size is increased to 16px to maintain readability.
Tap the CTA button below for more info about HTML5 elements.

HTML5 Elements

Images

Inserting Images HTML5 Figure
Caption In Figcaption Element

All images should be inserted using a figure element with alt text and a figcaption for maximum SEO value.
This section image widget provides for an HTML heading, the image with alt text, a figcaption and a paragraph of descriptive text.
To make sure the image is indexed properly, its content must be desribed using keywords in all three places.
Images should be portrait if possible with a 3:4 aspect ratio to allow as much as so that they fill the screen but leave room for the caption.
Only use retina @2x images if high quality & maximum detail are essential.
Tap the button below for more widgets for inserting images.

Image Widgets

What's Missing?

The sidebar from the iPad page has been left out. All non essential items should be removed from the smart phone version of the website. This shortens the scrolling distance and prevents extraneous items having to be downloaded over wireless data networks.