Improving mobile support should also improve a user's experience when they use lower powered browsers like those in game consoles, web-enabled TVs, and in-car browsers. These browsers will work much better with lightweight sites than bloated sites.
And don't forget that in some parts of the world, a slow wireless network connection and lower-end handset may be the norm or even the only option for most people.
Improved mobile support is being added in the next major release of CSS HTML Validator. As part of that, I have done some research to come up with some tips, advice, and "best practices" that will be given in the new "Mobile" message category when mobile checking is enable.
Please comment on any of them. Any suggestions for more, or to improve the ones below would be great. Also, please let me know if you think any of them might be getting out-of-date or might not be that useful.
I plan to choose one of these and display it randomly when mobile messages & checking is enabled, similar to the SEO tips that are displayed when SEO checking is enabled.
- Use flexible designs that respond to differences in viewport size.
- Limit or avoid unnecessary JavaScript animations. Consider CSS animations instead (but they'll be ignored on browsers that don't support them).
- Limit or avoid the use of large or bloated JavaScript libraries, especially when not necessary.
- Always use valid, well structured, logical, terse, meaningful, and efficient markup, with proper headings and sub-headings. Check the markup for errors and for possible improvements (like with CSS HTML Validator).
- When designing a new layout, design for mobile first, then use @media queries and JavaScript to progressively enhance the style or layout for more capable browsers, like desktop browsers.
- Be sure to use appropriately sized and compressed images. Images that are unnecessarily large reduce performance and increase data transfer.
- Use the power of @media queries. Don't try to design a site layout without first being familiar with them.
- Avoid downloaded fonts because they may not be supported. If they are supported, then they take additional time and data transfer to download.
- Compress content (especially images) where possible, remove redundant and unnecessary whitespace in HTML and CSS, and avoid sending unnecessary data. This will increase performance and reduce data transfer.
- Avoid fixed widths and absolute units (like "px") in favor of relative widths (like percents and "em") wherever possible.
- Include an icon (129x129 is recommended) called 'apple-touch-icon.png' or 'apple-touch-icon-precomposed.png' in your website root folder. This icon can be used by iOS to represent your web application or webpage, like when a user saves a web page to their home screen.
- Consider using CSS3 gradients instead of background images to increase performance and reduce data transfer.
- Consider using CSS3 rounded corners and CSS3 gradients instead of button images to increase performance and reduce data transfer.
- Avoid Flash content. Many mobile devices and even some desktops don't support it. If you must use it, then make sure it's not essential for the main function or purpose of the page, or provide a redirection mechanism to a non-Flash alternate site.
- Avoid large pages that may require excessive scrolling or excessive memory use. Consider splitting up long pages into usable but limited size portions with 'next' and 'previous' buttons, but don't make pages too short either.
- Test mobile sites on actual devices as well as emulators. Test on as wide a range of real devices and emulators as is practical.
- Don't use excessive navigation at the top of a page; use basic (minimal) navigation instead. If needed, more navigation can be placed at the bottom of the page. This allows for quick and easy access to the content of the page without scrolling.
- Design websites so that frequently accessed information can be easily reached with a minimum number of page retrievals (ideally 4 or less). This is good practice for any website, not just mobile ones.
- Limit the number of externally linked resources (such as images, style sheets, scripts, and other objects) to a minimum to reduce load time and data transfer.
- Ensure that page content is suitable for use in a mobile context. Use clear and simple language and be brief and direct. Limit the content to what the user requested and provide appropriate (the most useful or desirable) information first. Don't overload the user with extraneous and excessive information and advertising.
- Layout the page so that page scrolling is limited to one direction. If an object causes scrolling in another direction, then it should not cause the remainder of the page to also require scrolling in that other direction.
- Content that is central to the meaning of the page should appear before content that is not. Avoid excessive clutter before the meaningful content, including excessive navigation, advertising, decorative materials, etc.
- Use color and contrast that is sufficient for mobile users. Don't rely or depend on color, as some devices may not support color, or, for those that do, the color may be hard to see. Also, make sure sufficient contrast is used. Mobile screens, as well as the lighting under which they are viewed, can vary significantly.
- Use style sheets to control layout and presentation, and keep the style sheets small. If supporting mobile devices that may not support style sheets, then make sure pages can be read and used when there is no support for style sheets.
- Encode HTML, CSS, and script documents using UTF-8, and indicate that in the HTTP 'Content-Type' header. Example HTTP header: Content-Type: text/html; charset=utf-8
- Any error messages provided to the user should be informative, clear, and concise to the non-technical user. The error message should indicate whether the error is likely to be temporary or permanent, and should provide an easy way for the user to go back, retry, and/or to return home to the main part of the application.
- Because input is generally harder on mobile devices, minimize input that requires typing. Consider selection lists, radio buttons, checkboxes, and other controls that do not require typing, and provide default values and selections where possible. Use the "inputmode" attribute on "input" and "textarea" elements where appropriate.
- Use the 'Vary' HTTP header when redirects are based on the user-agent and test all redirects to make sure they're not faulty. For example, don't redirect mobile users to a desktop site and vice versa, and don't redirect Android phone users to a mobile site while failing to redirect iPhone or Windows Phone users. Make sure users end up on the page they're looking for.
- Increase your website's speed! Users don't like to wait around for slow sites. A website's speed is very important for a positive user experience, and is especially important on mobile sites. There are many techniques to reduce page size and weight. Be familiar with them and use as many as possible.
- If using different desktop and mobile sites then beware of bad or irrelevant cross-linking between the two sites. Users should not unexpectedly be sent to a desktop site from a mobile site and vice versa. When the cross-link is desired, make sure that the link takes the user to the correct, relevant, and equivalent page, and not simply the homepage of the other site.
- If using different desktop and mobile sites then include links to the desktop site on every mobile page so users can easily switch to the standard/desktop site (and vice versa). Remember the user's choice in a cookie or in localStorage.
- To make pages appear faster, place "script" elements as far down in the source as possible and/or use the "async" and "defer" attributes if you can. This is because browsers pause to download and run scripts when encountered.