Mobile Web Design: Best Practices

Aug 18 2010 by Alexander Dawson | 39 Comments

Mobile Web Design: Best Practices

The explosion in user adoption of mobile devices has revolutionized the web. Though designing for the Mobile Web follow similar principles to designing websites, we must consider some notable differences.

For one, current mobile device networks don’t run in the same speed as broadband devices.

In addition, there are also a myriad of ways our mobile web designs are displayed in, from touch screens to netbooks, which make even the smallest desktop monitors look like giants.

Some might argue that going mobile isn’t necessary yet, however, what no one will disagree with is that it’s an inevitable turn in the profession of people who make and run websites.

If you’re considering developing mobile web designs (or pushing an existing one onto the Mobile Web), this article should help you get to grips with the growing trend of mobile design.

Delivering the Design

One of the early elements that need to be considered for producing a mobile-device-friendly site is the way the experience will be delivered.

Complications in Delivery Method

The ideal scenario would be that each device simply scales and adapts to your existing website — and some devices, such as the iPhone, are able to because of their built-in web browser. But because of so many devices out there, a cross-device mobile design is difficult to make.

If you thought that developing sites that work on most web browsers such as IE, Firefox, Chrome, and Safari was tough — try developing one for iPhones, BlackBerrys, Palm Pres, Androids, Motorola devices, Nokia devices, and — the list appears bottomless!

For desktop-based web designs, you only had one markup language to deal with: HTML. But on the Mobile Web, there is also WML and then platforms such as iOS for Apple devices and Android for Android devices.

Complications in Delivery MethodWML used to limit our design creativity, but we have more flexibility these days.

Adapting a Web Design to Support Mobile Devices

One option to pushing a site to the Mobile Web is to simply create or modify your existing code and design to work well on mobile devices, or building from scratch with mobile devices in mind.

With a bit of CSS3 (using media queries), for example, you can rescale the dimensions of your layout depending on the user’s device.

The problem is — you guessed it — not all devices support CSS3. So you may have to resort to using server-side device detection (e.g. HTTP headers to sniff out the user agent) or using JavaScript (e.g. modifying the DOM to rescale your layouts). But again, some devices might not support these techniques.

Adapting a Web Design to Support Mobile DevicesMaking an existing layout scale depending on the viewport is as simple as a few lines of CSS3.

Redirect Mobile Users to a Mobile Version of the Site

Another method for delivering a mobile design is to build an especially optimized layout for handheld devices. You can build this yourself or use a web service such as Mobify.

Compared to the first method, this is the better format for delivery as you can create an experience specifically for your mobile users without taking away from the experience of desktop users.

For this to work, you will have to route traffic on your site depending on the user’s browser agent. For example, if a mobile device user visits your site (yousitename.com), then they will automatically be redirected to, say, mobile.yoursitename.com or m.yoursitesname.com.

Adapting a Web Design to Support Mobile DevicesA separate mobile site can mean squeezing out the extra bytes for faster rendering.

Tips on Redirection

Whichever route you decide to go down, it’s important that:

  • Visitors know that a mobile-friendly version of your site is available
  • Visitors can have the choice between a mobile version or the normal version

While forcefully redirecting or changing the layout for your end-users may seem like a good idea, it can lead to frustrations, so there should be ways in which a mobile device user can view the normal site design, and vice versa.

A simple solution would be to provide a link that goes to either version of a website. For example, on Six Revisions, you can find a link to the mobile version (m.sixrevisions.com) in the footer of the regular website, and conversely, a link to the regular website is provided at the footer on the mobile version. Whether you’re a mobile device user or a desktop user, you have access to both sites.

Structure and Code

The next thing that we need to consider is the structural code (markup and styles) that goes on behind the scenes.

  • Do you go with a mobile-friendly language like WML or the XHTML mobile profiles?
  • Do you build an app for iPhones, and then one for the Android?
  • How does the cost and speed associated with mobile device web browsing affect the way you should develop your design?
  • What about modern standards like HTML5 and CSS3?

These are just some of the questions that we all have in this relatively uncharted and undeveloped territory.

Adapting a Web Design to Support Mobile DevicesNew devices may not support the same code as older mobile handsets.

Choices

Choosing the right language for a mobile-friendly website is paramount; while older devices before the smartphone revolution only support WML (which is pretty basic) the W3C produced a mobile-friendly version of XHTML (referred to as the XHTML Mobile Profiles).

Luckily, due to the speed in which mobile device manufacturers have taken to giving a complete and robust web experience, you can often simply use regular HTML or XHTML — if you don’t want to be held back by mobile profiles or WML.

However, it’s important to underscore the fact that it’s still worth considering WML if you feel your visitors have old phones. Remember, though, you’ll be adding more web zombies that we’ll all have to deal with some day.

Use your site statistics and carry out some website analytics to help you come up with an educated decision.

Adapting a Web Design to Support Mobile DevicesEvery browser will have its own level of support (it’s not all about the device itself).

Speed and Cost (to the User)

Ultimately, whichever language you choose, the primary considerations you need to think about is speed and user cost.

It’s well known that most mobile internet providers cap connections, and therefore bandwidth has now become a limited and valuable resource.

Even worse is the issue that roaming charges outside of the country you reside in can be expensive, which is a reason to keep the sizes of everything on your site as low as possible.

With caps, costs and speed issues, the need to keep markup as clean, small and standards-based as possible is important.

Speed and Cost (to the User)Roaming charges from mobile web providers can get pretty expensive.

Because of the speed in which adoption is occurring for new technologies, the ability and future of using languages like HTML5 and CSS3 is not out of the question — taking into account that your code degrades gracefully, of course.

Many providers such as Apple provide firmware upgrades that improve how the device will function, which means older devices may be able to take advantage of modern standards. But this situation is analogous to IE6 users refusing to upgrade to modern versions like IE8, therefore, ensure you always research before you implement — then test, test and test again!

Layout Essentials

If there’s one issue that mobile devices have in spades, it’s the issue of how to lay out your web pages. A design’s layout in mobile devices is problematic because:

  • Mobile devices come in all shapes and sizes
  • Mobile devices have different levels of quality and resolutions
  • Mobile devices may or may not support zooming, others scroll content
  • Scrolling in mobile devices is more difficult because of their small screen

The goal of a mobile web design’s layout is to allow the least amount of burden to the user’s ability to find (and quickly read) what they’re looking.

Essentially, your layout will be important to making your mobile presence a success.

Layout EssentialsDue to the lack of space on many screens, single column designs may be required.

Simplicity

One of the main concepts to an effective mobile web layout is simplicity. It goes without saying that the more information you pile into a small space, the harder it becomes to read and the more scrolling that will be required.

With such limited space to contend with, multi-column layouts often break because the required space to meet the needs of the content cannot span beyond the physical space of the viewport unless passive zooming and scaling comes into play.

Therefore, it pays to use a single column layout.

Avoid Scrolling

Some mobile devices, like the iPhone and iPad, have the ability to adjust a web page’s zoom depending on the orientation of the device (portrait or landscape mode), which reduces the need for scrolling; but not all devices have this ability.

Avoid ScrollingHaving to scroll down a content-heavy page isn’t a fun experience on cell phones.

We all know that horizontal scrolling isn’t a good idea — especially on the iPad where scrollbars don’t show up until you attempt to scroll — so avoid this situation in your mobile web designs.

Avoid ScrollingA good mobile design should have a clean layout with simple navigation options.

Size of Navigation and Clickable Objects

Another key component is the issue of navigation and clickable regions, which is predominantly a problem with touchscreen mobile devices.

I’m sure if any of you have big hands, you are well aware of what a pain typing on a handheld keyboard can be or how hard it is to click on something small on the screen without having to zoom into it.

Ensuring that your mobile layout has large and easy-to-press links and clickable objects will be essential in streamlining the experience.

Reducing the amount of clicks required to achieve an action — which is a good practice regardless of whether or not you’re designing a mobile site — is all the more important in mobile web designs.

Content Design

With the cost of browsing the web and caps on data allowances being put in place (along with speed issues), the most costly component of a website is the content. Knowing how to reduce excess images, text and media can be the difference between a 50KB design and a 2MB layout of crippling intensity.

Content DesignLess is more on a mobile device; less content equals more likely to read.

Text Content

Of all the components of a site, none plays a more vital role than the text.

But while content is king even on handheld devices — the need for scrolling, small file sizes, quick readability and bandwidth restraints means that we have to reengineer our copy to ensure that it’s useful on such devices.

If your design is simply a modification/adaptation of your existing layout (the first method of delivery), you could decide to hide unnecessary text, images or media (even though they’ll still download, it will improve readability). The real advantages come from a separate design where you can purge the marketing talk and excessive content.

Images

When working with a small screen, large CSS background images or byte-heavy infographics can be problematic. While some handheld devices have larger displays where this is not an issue, and while the ability to zoom into graphics on devices like the iPhone shouldn’t go without some credit, unnecessary bulk for visual embellishments certainly needs to have a good clean up.

ImagesLarge images sap a lot of bandwidth; consider scaling them back for smaller screens.

Reducing the resolution and dimensions of your images can literally be the difference between 50KB and 500KB — bandwidth consumption that’s worth saving.

Video/Audio

It’s inevitable in the modern web that utilizing audio and video will be needed. Even with the bandwidth issues that exist, you shouldn’t stop using these richer forms of content, as they can be great, especially on handheld mobile devices that have excellent video/audio quality such as the iPhone or iPod Touch. But just like with everything else, moderation and smart usage is key.

There are a few considerations you should make when utilizing video and audio:

  • The format you use: Beware of Flash and other closed formats that aren’t compatible on some devices
  • The file size of video and audio: Optimize your files
  • Don’t automatically download video/audio files until requested: For bandwidth savings
  • Don’t auto-play: It’s annoying; in fact, don’t do this even outside of mobile devices

Other Issues to Consider

Finally, it’s important we address the best practices when it comes to scripting, plugins (like Flash and Silverlight), and developing web apps.

Knowing what to cut and what to keep will help enhance your mobile user’s experience and also ensure that your mobile website is functional across most/all devices.

Other Issues to ConsiderAllow your code to degrade gracefully as you can’t rely on any technologies success rate.

Interaction in Mobile Devices vs. Personal Computers

An important point to make is that we interact differently with a mobile design screen versus a regular computer screen.

With the lack of a mouse and the way our hands gesture to instigate actions and reactions, the traditional interaction patterns we’re accustomed to, such as hovering over a link (for example), is different.

Consideration must be given to how such functions are affected by a change in interfaces.

Proprietary Technologies and Plugins

The move of Apple to block Flash from their devices underscores the problems of becoming dependent on proprietary plug-in components — closed technologies that other companies can’t or won’t support.

Proprietary Technologies and PluginsAdobe Flash isn’t supported on the iPhone, iPad or iPod Touch, which is problematic.

Apple’s decision against Flash can be a harbinger of things to come, setting a precedence about the way mobile device manufacturers welcome third-party technologies into their own. Other technologies like Silverlight or Java may not work as intended — or may later be blocked as well.

While many developers may use this as an excuse not to develop on these platforms, the best course of action is simply to ensure that their mobile websites degrades gracefully.

Proprietary Technologies and PluginsBuilding an app may be useful if internet access is unavailable (for any reason).

Web Services with Persistent Internet Connections

Even though the availability of web-based services are fantastic, I do worry that the dependence on a constant and reliable (always on) web connection is very much going to be a problem for web apps at the current state of mobile device networks.

While there have been moves towards local storage mechanisms, for now, web apps that rely on persistent internet connections could affect mobile device users due to the capabilities of their networks.

For example, the fact that there are still "dead zones" — places where mobile phones don’t have service — can affect the user’s interaction, such as in cases where his or her signal suddenly drops in the middle of performing a task.

It’s worth considering the idea of developing an app for your service which can function both offline and online (learn how by reading this offline HTML5 iPhone app tutorial).

Testing Your Mobile Website

If you’ve ever been into a store that sells phones, it can be downright shocking how diverse the screens, devices and contract plans can be.

Testing Your Mobile WebsiteThere are a wide range of emulators for simulating your designs.

With the future set to bring even more mobile devices into the fray, and because we are at the mercy of corporations that want to gain or maintain their competitive edge, the standardization of these web-enabled devices is unlikely to occur.

Therefore, it’s up to our common senses to do what we can to ensure that the widest possible audience can access and use our site in a way that’s functional and enjoyable.

Testing with Mobile Device Emulators

With such diversity in the mobile device landscape, it goes without question that you should test your designs on as many platforms as you can manage. Below is a list of emulators that will simulate certain devices for you to be able to test your work.

Simple, Small and Speedy

While much of what I discussed in this article is straightforward advice, common sense is a major factor that dictates how we build interfaces.

Back in the 56k modem days, we had speed issues to contend with. We also had monitors that were limited in resolution and color. Many ISPs capped our bandwidth and internet access. Some internet connections would drop if you have an incoming phone call to your house. So for those of you older-generation developers — you should be in familiar territory.

For now — and until mobile network infrastructure improves and connectivity is widely available — simple, small and speedy are the three main principles we should abide by.

Related Content

About the Author

Alexander Dawson is a freelance web designer, author and recreational software developer specializing in web standards, accessibility and UX design. As well as running a business called HiTechy and writing, he spends time on Twitter, SitePoint’s forums and other places, helping those in need.

39 Comments

Peter J

August 18th, 2010

Its interesting to see how mobile web browsing has change over the years, especially back in the days when the classic pocket pc’s still existed and mobile websites were completely different. Nowadays there is just so much choice between having to make things compatible with each device.

anthony

August 18th, 2010

Some good tips here. I think a big one is making a mobile friendly version available, especially if your site gets a lot of traffic. Some sites don’t even have a mobile version, but I think people are starting to catch on.

Manmohanjit Singh

August 18th, 2010

Never make a mobile site phone specif unless its some kind of app. Even my site, is just plain text with a few images here and there.
http://manmohanjit.com/?style=mobile

It looks exactly like the original site:
http://manmohanjit.com/?style=normal

But a great example of a iPhone mobile site would be
http://neowin.net/
They have talented devs.

cancel bubble

August 18th, 2010

“try developing one for iPhones, BlackBerrys, Palm Pres, Androids, Motorola devices, Nokia devices, and — the list appears bottomless!”

You need to be looking at your stats to see what mobile clients you’re getting. You’re not just developing for these, you’re also *testing*.

I work in Enterprise-land for a HUGE health system. We get A LOT of traffic and our mobile audience is practically non-existent. I look into this quite a bit because I would love to jump on the mobile bandwagon, last week I looked and we weren’t even getting 400 hits on iPhone/iPad/iPod Touch. This doesn’t even register as .01% for us. Android was significantly less.

Re: media queries, there’s an interesting article on that here:

CSS Media Query for Mobile is Fool’s Gold
http://www.cloudfour.com/css-media-query-for-mobile-is-fools-gold/

Has anyone used the emulators mentioned above? Specifically:

# Android emulator
# Blackberry emulator
# iPhone / iPad / iPod Touch emulator

I’m curious how they compare to having the real devices/OS’

Jean-Philippe

August 18th, 2010

Alexander,
Thanks for this article, and the main points you focused.
I quite totally agree with you concerning the pitfalls to avoid.
Imho, thre’s one thing which neeeds _really_ to be adressed.
As far as I can see in this brand new dev field, most developers handle mobile devices development as porting a web site to safari or chrome, without acessing hardware specific issues (page flip, page switching, link size, ajax request, adaptative GUI.
A web site, as original, sexy and beautiful as it can be, will stay a “basic” web site, even watched on a mobile device.
Things have to change, and javascript / CSS3 / HTML5 are way from beeing exploited correctly.
I proposed an article to Jason, covering this field.
Wait and see.

Jean-Philippe

Alexander Dawson

August 18th, 2010

Thanks for the responses everyone!

@Manmohanjit Singh: I couldn’t disagree more. Sites that are content heavy won’t get the full benefit from just a few visual tweaks. As both speed and bandwidth are in short supply in much of the mobile-sphere, it’s a bad move to just to adapt a site and leave mass scrolling and bloating behind.

@cancel bubble: While I agree with means-tested solutions in principle, I always try to promote the wider dream of trying to make a site as unbiquitously available as possible. Of course most of us don’t have those kind of resources or time on our side, but spending 5 minutes with an emulator or device could make all the difference to a visitor.

@Jean-Philippe: The main problem is that devices implement hardware specific functions in very different ways. I would strongly discourage attempting to leverage mobile hardware unless you can guarantee that it won’t interfere with other device implementations or their expected “reactions”.

PS: I’ve used all the emulators myself, there are some small differences in how they function, such as how the iPhone emulator shows scrollbars in place of gesture scrolling, but that’s too be expected. I’m actually very impressed with the iPhone / iPad solution in particular, which against my lovely iPhone4 actually does render things very accurately indeed.

Pontus Ekman

August 18th, 2010

Nice article. You can’t stress “Don’t auto-play” enough.
Good collection of emulator links at the end.

Gregor McKelvie

August 18th, 2010

Are we seriously saying the people (soon) will not be browsing the internet on a desktop? Surely there is always going to be a need for a website as we know it today? Or at least for a long time to come.

The Wired wrote yesterday that the “web is dead” – replaced by apps and the mobile web. In my opinion certain services and sites lend themselves better to apps and mobile, but others are just better on a larger screen.

Great guide though – thanks

Also check out this for designing for different platforms – http://hicksdesign.co.uk/

Kristy Fifelski

August 18th, 2010

Thanks for the article. We’ve got a great mobile site at http://www.Reno.gov. I’ve compiled a list of U.S. city, county and state mobile websites if you’re interested in the direction government is going: http://www.kristyfifelski.com/2010/06/government-mobile-websites/

Aynex

August 18th, 2010

Great article! Can you suggest some resources to learn more about mobile web design?

Jean-Philippe

August 18th, 2010

Alexander,

Thanks for the answer.
Here were my specifics thoughts about hardware.
There’s a few things in common, you’ll find in thoses devices: touchscreen gestures and orientation managment. That’s two main points (the first one through touch/move/start/cancel events and the 2D canvas) the second one through a basic event (rotationchange) we can handle.
I’m pretty sure we can go far beyond simply porting web sites to tablets devices. :)
You may want to have a look at my blog for a more explicit explanation of my thoughts, through a short demo video and source code downloading.

Nice article, by the way. I agree a lot to your point of view

Ross Chapman

August 18th, 2010

The problem is — you guessed it — not all devices support CSS3.

Though I haven’t tested it extensively, it seems that the css3-mediaqueries-js library should buttress support for css3 media queries.

Daquan Wright

August 19th, 2010

Looks like fun, although I’d have to think this is the substance nightmares are made of, lol. =P

david

August 19th, 2010

Thanks for posting, really interesting stuff.

app developer

August 19th, 2010

Hi Alexander
Thanks for a great article.
It made me smile to look at the list of mobile device emulators… reminded me why it took Apple coming along with a single platform to enable smartphones to take-off.
Some of the other manufacturers and software makers – notably RIM and MS) sadly still don’t seem to get the importance of one standard!
@CancelBubble
You’re in health care – the take-up of iPhone in your users is probably huge; if you made part of the site iPhone friendly – latest news, or similar – or create an app for it and then publicise it on the site I think you’d find it was very popular and would then have the hits to justify making the rest of your content iPhone/smartphone friendly…

Hiren

August 19th, 2010

with the invention of smart phones and PDA’s, many people search the web from these devices and it is vital that companies start accommodating out towards the mobile communications market., i’ve found a product that creates the website as an app called sencha touch, a great way to breakthrough to the mobile web world and making the web pages look like native apps on the smart phones.

Philippe Alves

August 19th, 2010

What do you know? Yesterday I was thinking about it. I love your timing, man! Thanks for this article guys, this is really helpful.

Shane

August 19th, 2010

Really interesting read!! I think that if your site cannot be viewed on a mobile device it may be the start of the end!!!

Thanks!!

david

August 20th, 2010

I think designer need to at least start thinking about designing for mobile interfaces, due to their popularity. A List Apart is a great example of simple and effective mobile design.

Thanks for posting.

Gregg Dickson

August 20th, 2010

Thanks for all the links to the emulators!! We have been doing native apps but most clients are now interested in doing HTML5 apps (once we explain the whole thing) that work on iPhone and Android. We are playing around with the Sencha Touch framework. It looks cool!

G

maisWebHosting

August 21st, 2010

Hi, first i want to thank you for the emulators links. Now i can test my websites in that emulators as the easy way.

The mobile browsers in the next months are gonna change BIG! And the mobile phone that offers the best mobile browser is gonna win and the market will follow him.

At this moment for me the iPhone Safari mobile browser is the winner. Shows the website like it shows in the computer but with mobility that iphone offers. And that’s why the iPhone is the current best seller.

Thanks for the post!

Lisa M Fuqua

August 23rd, 2010

I loved the article. I recently started designing for mobile devices and have run into a few of these problems. But quite a few of these tips I have not run into so hopefully now I’ll be able to avoid making those mistakes, lol. Thanks for the information, especially the list of emulators, very informative!

Lisa

August 23rd, 2010

We are finding a growing percentage of visitors through phones to our sites, and clients seem to want to show friends their websites on their phones, so article has very valid points. LT

jay

August 24th, 2010

definitely a lot of information and appreciate the links. it’s mentioned that some phones may not support javascipt … is there a list on this? are we talking more outdated ones that are still WAPping or is there a known key provider that has blocked it? i’ve googled and more info in this realm would be very helpful.

Denis

September 9th, 2010

Very useful info. I think that mobile browsing will be the future of internet so we must prepare

Matt

November 4th, 2010

Thanks for the great article. A lot of good info and resources. I’m still trying to figure out one aspect which you mention. I’ve created a lightweight version of a client’s web site that I want to redirect mobile users to. On the mobile web site I want to include a link to the main version. How do I keep it from redirecting to the mobile site again?

Gemma

April 13th, 2011

Thanks for the article. I will bookmark it.

As for the Javascript issue, well this is where making sure your site functions properly without relying on JS comes in. Graceful degradation is key. If your site cannot function without JS then you have a problem and it’s time to start thinking outside of the box.

daniel1336

June 29th, 2011

Useful! Thanks for posting.

Bob Duncan

June 30th, 2011

I recommend taking a look at the adaptive content methodology as described by the W3: http://www.w3.org/TR/mobile-bp/#bpgroupnavlinks

Mick

August 31st, 2011

Very interesting post. The list of phone emulators is a real help.

Jack

October 6th, 2011

Thanks so much for posting, really useful list of phone emulators which is just what I was after, seeing as the mobile browsing market is just getting bigger and bigger.

Many thanks :-)

Zulkifli

October 7th, 2011

thanks,, nice information… ;)
now, i’m studying how to make a mobile website

Dan Henderson

October 9th, 2011

Thanks Alexander. Good collection of info there. And the list of phone emulators is very handy. Is this list, or any other, kept up to date with emulators.

Mark Hardy

October 30th, 2011

Call me ‘bloody minded’ but I’m so tired of making sites work in ‘x’ browser, ‘y’ device…

Sometimes I get to thinking it’s about time manufacturers of these ‘new’ devices actually made them work properly with existing technology.

Yup, I’m getting ‘long in the tooth’ and cantankerous, but gimme a break.

Carlos Canas

November 2nd, 2011

Do I have to scroll all the way down to submit a comment. Your page is too long.

Ethan

November 7th, 2011

Thanks. Great resource. More and more businesses are starting to catch on. Especially large corporations.

soumya

November 17th, 2011

Can you throw some lights on the best practices that we have to use for developing Help (user help) content for mobile devices?

thanks in advance

Alexander

November 25th, 2011

Alexander,
Many thanks for this thoughtful and readable presentation!

Hari

December 2nd, 2013

Hi Alexander,
Thanks for great article, there are lot of useful info’s here. Which one will you be personally prefer a seperate mobile version of a website or a responsive design.

Thanks in advance.

Leave a Comment

Subscribe to the comments on this article.