Okay, here we go. Here are the basic things you have to know to create a mobile-friendly website.
- Auto-Detect mobile Phones – Mobile-friendly websites automatically detect that users are on a mobile device and then display the appropriate version of the site.
- Clear Calls to Action – The most important features of the site should be at the top of the page and should include clear calls to action.
- Avoid Mobile-Unfriendly elements – The design should avoid mobile-unfriendly elements such as flash, large images, video, and complex layouts.
- Fluidity – Design with a fluid layout that will gracefully adapt to a range of typical mobile screen resolutions.
- Touch Interface – Touch screens don’t have hover states. It is all about fingers tapping, so don’t build a site that requires users to move their mouse over menus or other elements. Also, make sure links and other clickable elements are big enough to tap with a fingertip.
- Scrolling – Limit scrolling to one direction. The site should only scroll vertically. Having to manage a page that scrolls horizontally and vertically is difficult to navigate.
- One Window – Avoid pop-ups and new windows. A user’s entire experience should take place in a single window.
- Simple Navigation – Simplify your navigation. Typically, a site’s traditional navigation is too complex for a mobile site.
- Clean Code – Most desktop webs browsers allow a lot of leeway when rendering HTML and will usually display a site correctly, even if the code has flaws. Mobile browsers usually have less room for error, so there is an added value to having clean, simple code.
- Use Alt Tags – Sometimes images won’t load, either because of issues with the mobile browser or because a user’s connection is too slow. Always include descriptive alt tags for images, in case they don’t load.
- Label Forms – Some modern websites embed form labels inside the form field. On mobile, it is much more difficult to keep track of the fields, and users often make use of “next/previous” buttons built into the keyboard. Without clear labels alongside the form fields, ti might be impossible to know what information is supposed to be in which field.
- Escape Hatch – Sometimes users just need to use your normal site. If possible, always have a link back to the original, full site and from your desktop site to your mobile site.
Number 13 – None of this will work unless you optimize the site correctly. See tomorrow.
