It is easy to slap together a quick fix for a mobile site – simple device detection, some css3 for variable width and maybe some fancy buttons. This does not address the problems with different devices, user experience and accessibility issues. There are some standards that should be followed to make your site look better and be more enjoyable to use.
Page size and text alternatives
As in the Mobile and Drupal 7 blog post, I wrote that large pages are bandwidth hogs, and that ends up draining the users data limit. Another issue is that large pages make it hard to navigate around; you are constantly scrolling to read the page and the info is not present clearly. The user may miss important information, not understand what you are offering, or get frustrated at the page mechanics. Users disabilities will only be able to access small parts of the page at a time and it will not provide a friendly layout or content size to the user.
Objects without text or captions are not mobile friendly; they also pose a accessibility problem. Sound adds enhancements to a lot of things, but if you are in a library, or at work, you might not want sound blaring from those tiny speakers. If you have a video on a mobile site, it is important that there are captions or some type of text alternative that provides users the info that is in the video. There are a couple of reasons why you might want to provide a text alternative. First, users with hearing disabilities need an alternative to sound. The text should provide the same information as what the multimedia would have provided. Secondly, text consumes a lot less data then videos and images. It is good practice to have an alternative to downloading massive videos and images.
User interface, experience and scripts
I hated this with older Blackberries and websites: It took forever to scroll to the main part of the site and flicking though impatiently meant I would often miss what I was looking for. It is important to proved a 'skip to main content' link for users on your mobile site, especially if your site has lots of links, menus and ads. If your site has lots of menu's and links, non touch screen device users will feel annoyed and lost without being able to jump to the main content. It is also bad practice for accessibility standards. Users should be able to get to the content quickly and without getting lost.
While scripts can enhance a site, care must be taken that your mobile site does not rely on scripts too much. Scripting can be turned off or not supported for your user's mobile device. Your site will not keep a consistent functionality between different mobile device and the user will get frustrated with a non functional features.
That nice interactive scrolling feature bar looks nice on a desktop site. On a mobile device, it can become distorted, hard to view and dent the user's wallet with its constant loading. It also poses a challenge to navigate whether on a touch or non touch device. Keep sideshows, drop-downs, changing features and accordion pages off on a mobile site. They are hard to navigate, and hard to read on small devices.
These are just some best practices for a mobile site, and are not just Drupal related. You can read more about mobile and accessibility standards at W3C.
- Web development
- Web design
- World Wide Web
- Computing
- Accessibility
- .mobi
- Drupal
- Cascading Style Sheets
- Web accessibility
- Computer accessibility
- Technology Internet
- desktop site
- non touch device
- mobile device
- mobile device



Add new comment