Mobile Website Design 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.
Create graphics with HTML and CSS using the Rectangle and Circle widgets.
Note that, for every shape image created, EverWeb will also create a much larger retina version.
Use the Line and Shape widgets for horizontal and vertical lines and shapes such as directional arrows.
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. Create them with the Button widget or use the Mobile Buttons.
A back to the top button is essential and this can be seen on the NEXT page along with widgets to create smooth scrolling anchors, home, email, phone, back to the top and image hyperlinks.
The page about Mobile Links deals with several types of button to replace text hyperlinks and make the mobile website more user friendly.