Sparks from a sparkler

10 Best Practices for Mobile Web Development

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.

From the technical side of things, be sure to minify your CSS and JavaScript files and use as few of them as possible. Most browsers only download up to three assets simultaneously, so if you have 20 images, 3 CSS files, and 5 JS files, then you’ll be better off consolidating those resources. Small images, such as icons, can be moved into a single image sprite. CSS and JS can be merged into one file each. And JavaScript files should be added just before the </body> tag so that they don’t delay the loading of the rest of the page. There are always exceptions and occasions where you need to break these rules, but at least make the attempt to minimize the amount of content that your mobile visitors need to download – they’ll thank you.

Don’t Forget about Retina

Okay, now we have a little conundrum. The small images we’re serving up to our mobile visitors look ugly on the latest iPhones and high pixel-density displays. To remedy this, we need to use bigger images, but that slows down our load times. Really smart people are working on HTML solutions that involve a way to tell the browser when to download larger images based on the screen size, but at the moment, we need to rely on JavaScript to make this happen. There are some polyfills (code that provides features not available in a browser) for the proposed picture element, but these will become obsolete as the HTML 5 standards and browser support evolve.

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.