There’s a great deal of information on creating websites for mobile – some good and some bad. As a web developer working on desktop and mobile sites, I’ve learned that there really isn’t a replacement for experience, but there is some general advice that I can share that will hopefully help you avoid some of the bad practices that many developers are using in their transition to mobile web development.
Make it Fast
Let’s face it – small screens, slow networks, and limited memory really hamper a web developer’s ability to deliver a phenomenal experience to mobile devices. There are some compromises to be made, because while your website may look awesome on your latest iGadget connected to the 4-Triple-G network, you need to consider that the audience you’re trying to reach may be stuck with older technology.
So, reconsider that 5 MB banner image and fancy Flash animation and ask yourself if those things really add value to your visitors or customers. Bloated, slow-loading mobile sites may seem par for the course with many of the latest responsive design techniques, but odds are that you aren’t the only guy in town providing your product or service; so if your site is loading slowly, you may be losing potential business. This doesn’t mean that a mobile site should be plain jane lame – just that you need to rethink the content you’re providing and how your design can take best advantage of the limited space.
Don’t Forget about Retina
For now, my recommendation is to find a happy medium. Test in both standard and high pixel-density displays to reach a common area where your images look nice and have a reasonable file size.
Fixed-width Designs are Out
Mobile devices are typically smaller than most desktop computers, but there is a wide range of screen sizes. Even phones, which have similar physical dimensions, vary widely in their resolution – anywhere from 320 pixels wide to over 1,000 pixels wide. If you were to create a fixed-width design that worked well on the smaller phones, it would be terribly small on the larger ones.
Fluid design is when the page’s layout stretches to fill the available width of the screen, and that’s the pattern you need to be using with mobile design – unless you only plan to support a very specific set of devices.
Use Good Navigation Patterns
Mega menus and other large navigation sections are popular on desktop browsers but they don’t translate well to small screens. Drop-down menus that appear on hover don’t work on touch screens, and large menus take up valuable screen space. A common menu pattern for mobile devices is to include a small icon, consisting of three horizontal lines near the top of the page. Tapping the icon causes a menu to expand. Of course, you aren’t limited to this menu pattern, but if you’re considering anything outside the box, make sure that it’s accessible and intuitive to use.
Reconsider Device Detection
Device detection is when you check the user agent header that is sent with an HTTP request and make a decision based on it. Typically, it’s used to serve a different page to desktop or mobile devices. However, with the proliferation of support for responsive design, it’s becoming more common to create one website for both desktop and mobile. In fact, I would go so far as to say that unless your mobile audience has drastically different needs than your desktop audience, you should be relying more on responsive design than device detection. For example, when I visit a website on my laptop and find something interesting, I may decide to check it out later on my phone during a long bus ride or a boring wait at the DMV. But if the website is completely different on my phone, then we may have a problem.
With all of the new types of mobile devices, it’s also getting harder to reliably detect devices accurately, and you may end up sending your mobile site to desktop browsers and vice versa. Having a site that simply adjusts its layout to fit any size screen without removing features and content makes life much easier for everyone.
Take Advantage of Mobile Features
Many mobile devices have functionality not available on larger computers, such as the ability to make a call from a website or extremely precise geolocation. Make sure to take advantage of these features by linking all of the phone numbers on your website or providing a map with directions to your business from the user’s current location.
Use Large Buttons and Fonts
Speaking of mobile specific features, remember that most of these devices have touch screens, and your finger isn’t as accurate as a mouse pointer. Trying to activate a small link or button can be difficult on touch devices, especially if they are very close to other links and buttons.
Try to use a 14-pixel font size at minimum. Although it’s tempting to use smaller fonts to fit as much information in the small screen area as you can, you’re only making it more difficult to read. Pixels on mobile devices are often much smaller than larger screens, so your 10-pixel font may be fine on desktop browsers but could be almost indiscernible on small screens.
New Windows are Evil
Maybe that heading is a slight exaggeration, but almost any accessibility expert will tell you that there are few cases when it is advantageous to open a new window. In a desktop browser, a new window or tab being opened can often go unnoticed, and when the user wants to return to the previous page, he goes to click the Back button, but – gasp – it’s disabled! A savvy person may realize that they need to close the tab/window, but you would be surprised at how many people either try retyping the URL or go to Google to find the site again.
On mobile devices, this situation is exacerbated by the fact that each device handles new windows differently and websites generally take up the full screen, meaning the user has to locate the window management button or find a menu in the OS so that they can return to the previous window.
If you think this practice keeps visitors on your site, you’re wrong. It just makes your site harder to find again. Stop doing it!
Don’t Use Tables and iFrames Either
HTML tables and iframes don’t work well on mobile devices. There just isn’t enough room on the screen for them to fit in most cases. Instead of tables, try changing the layout of your data to fit in a list view, or if necessary, use a smaller, more vertically oriented table.
As a replacement for iframes, consider aggregating the content from an RSS feed with Ajax, or if that isn’t an option, perhaps you can simply provide a link to the page instead of embedding it in your own page.
Mobile Users Aren’t Second Class Citizens
It’s been said multiple times before, but if you aren’t catering to a mobile audience, you’re missing out on a large percentage of visitors and potential customers. Maybe “mobile first” isn’t the best approach for your business, but you can’t simply ignore it or provide a second rate experience and expect to remain competitive. The fact is that millions of people are now accessing the Internet through a variety of screen sizes and interaction methods, and we need to make sure that our websites are accessible and useful to everyone.