EverWeb Widgets HTML5

Designing A Website For iPad Style Tablets

Click the arrow to view a screenshot of the page on an iPad

Layout

A typical tablet device like an iPad or iPad Mini has a screen width of 768px. To make calculation a little easier, this web page is 780px wide.
The individual blocks are 360px wide since the same content is going to be used on the smart phone version of the website - with the box shadow and some other non essential styles removed.
This block is postioned 15px from the left hand edge of the page. The one to the right is positioned 405px on the X-axis placing it 15px from the right hand edge of the page and forming a 30px gutter in the middle to provide visual separartion for the elements.
The objects on this version of the site are going to appear at virtually the same size as seen in EverWeb since there is not much difference between the page width and the device screen width. The smart phone version is going to be a little wider so some adjustment of sizes will be made.
Tap the CTA button below to find out more about HTML5 text content 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 will be used on the smart phone version of the site. Since its 360px width will be squeezed down to 320px, the font size will be increases to 16px to maintain readability.
Tap the CTA button below for more info about HTML5 elements.

Text Widgets
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 described using keywords in all three places.
Images can be landscape like the one above for tablets but portrait is better for smart phones.
Using a retina image should not be considered obligatory since the increased file size needs to be considered along with the download speed of the page file.
Tap the button below for more widgets for inserting images.

Heading

This is a sidebar created using the HTML5 aside text wrap widget.
An aside is used for content that provides supplementary information which, while not essential to the sense of the page document, helps to expand on the subject.
For example, an aside would have links to, and quotes from, other sources.
A sidebar can also be used to hold dated material, advertisements and other non essentials which could be omitted from the smart phone version of the website where space is at a premium.
Text hyperlinks should be avoided on mobile websites since the visitor is using a fingertip rather than the precision of a cursor.
Mobile browsers don't recognise the hover state so there is not much point in using it.
The user inputs on a mobile site need to have a minimum dimension of 30px for width and height.
Note how the main navigation blocks on this page are almost 40px high and more than wide enough for beefy fingers.
Text hyperlinks are rplaced by CTA (call to action) buttons. These providde a much easier target for finger tapping and it's a well known fact that visitors are more likely to follow this type of link.
CTA's are an essential tool for marketing products and services.

Image Widgets
Text Wrap Widgets

Navigation Buttons

These simple buttons make it a lot easier for visitors to navigate the website. They provide an easy way to smooth scroll to the top, go to next/previous page and get back to the home page without unnecessary scrolling. The buttons are created using pure CSS so they don't load the page with excess shape images which slow download time. Tap the buttons below to see mobile button and navigation widgets.

Navigation Widgets
Mobile Website Button Widgets