Mobile Website Essentials
Depending on which part of the planet your target audience lives on, up to 50% of your visitors will be using mobile devices.
Remember that these vistors will not even see your website if the pages take longer than 3 seconds to download on a 3g connection.
Mobile device users are usually busy, impatient and on the move so a lot of thought needs to be put into a mobile design. The design will be radically different from the traditional one for reasons explored in this section of the EverWeb Codebox.
A mobile design needs a lot more thought and care in planning. Get rid of all the background shapes and images and focus on clarity and readabilty.
Text blocks should be small, sharp and easily read. Define content blocks and use white space to separate them.
Use web safe fonts. Hosted fonts take too long to load. 15px is the minimum font size and 16px is better. Experiment with line height between 1.0 and 1.5 for maximum clarity.
Use HTML headings to draw attention to important info and to break up large tracts of text.
Click NOT Hover
Text, Fonts and Readability
One point to remember is that visitors using larger tablets such as the iPad are going to see the conventional version of the site so most of this info applies. It is essential to test the conventional site on one of these devices to make sure everything works as planned. Some of the items that won't work are...
Hovers such as mouseover images, buttons and dropdown menus.
iFrames won't scroll and will appear at full height.
The user experience will vary depending on orientation. Test in both portrait and landscape mode.
If any page doesn't load in under 3 seconds on a wireless connection, go back and cut out all the unnecessary items.
Make sure that every user input can be stabbed with a finger tip. Buttons should be at least 30px by 30px and should replace text hyperlinks where possible.
Text hyperlinks should be created using HTML and CSS and the method of increasing the target area using padding is shown on the next page.
Trash The Graphics
Never use shapes for backgrounds, buttons and navigation. The only images used on a mobile site should be photos.
Note that, for every shape image created, EverWeb will also create a much larger retina version.
Finger sized buttons are essential and every page needs a Home and a Back to the Top button. Again, using CSS and HTML rather than images is essential. Find out how to create them HERE or get the Button Widget. A back to the top button is essential and the Smooth Scroll Widget makes for a much better user experience.
The page about Mobile Links deals with the essential mobile specific buttons - home, email, phone and back to the top.
The prime feature on a mobile site is the Call To Action (CTA). These buttons need descriptive text to let the visitor know what is going to happen when they tap it. It's worth studying some successful commercial mobile sites to see how they design, use and position the CTAs.
Once the site has been published for a while, look at the analytics to see which pages are getting the most views. Also, note those that should be getting hits but aren't. Use this info to create better CTAs and position them more strategically.