In episode 6 of The Big Web Show, Luke Wroblewski gives his “Mobile First” talk, explaining his philosophy for designing for mobile, the challenges, and a look at the road ahead. Luke explains that because of the limitations on mobile, developers are forced to really optimize the user experience for mobile. Often times this mobile experience turns out much better than on the desktop, where the “gluttony of resources” results in distracting and excessive webpages.
The frontend engineer lives at the intersection between design and engineering, and this is perhaps nowhere more true than in the world of mobile. In order to make a usable desktop website, an engineer must have at least some sense of design, and fortunately a lot of this has been standardized over the years. But the world of mobile is full of more unknowns, and the field is changing rapidly, especially lately from the shift away from older feature phones to the focus on smartphones. As such, the mobile engineer has to be on their toes in the sense of both design and engineering.
The focus of this article is on mobile design in general. I’m by no means an expert, but these are some things I’ve found to be essential and basic topics. Hopefully you will find this useful!
Mobile websites should only have one column of main content. This point is stressed again and again in mobile design, and for good reason: the paradigm of multi-column layouts is fairly well-entrenched in desktop design, but it’s simply not an option for a well-designed mobile site.
To illustrate this point, the following two images are both 320 pixels wide, which is a common smartphone width in portrait mode. The image on the left is the Yahoo! front page (yahoo.com) in its three-column fixed width desktop size, and the image on the right is Yahoo! mobile’s front page (m.yahoo.com):
This might not be a fair comparison, as the desktop version isn’t optimized for mobile, so you can’t even read the text without zooming in. However, even if the size of the text was increased, it’s apparent that three columns is just too much, both because of screen width concerns as well as concerns about too much content. There’s simply too much information being crammed down the user’s throat. Chances are the user only wants to check a few things and then put the phone back in their pocket, and this three-column version of the site is preventing them from doing that.
It’s helpful to think of a webpage as being composed of modules. If you’re converting a desktop website into a mobile site then you must essentially think of the website as bits of rearrangeable components:
What you’re doing is essentially grabbing your most important components and making sure they appear at the top, then stacking each module on top of each other. And don’t forget we do have variable screen widths on mobile (even on phones themselves, since they can be either in portrait or landscape mode), so we should be sure that each module is taking up 100% of the available screen space. In more technical terms, yes, this means we have to make a fluid layout.
It’s important to be both clear and concise in presentation. On the desktop we can get away with a certain amount of screen bloat, but users always appreciate simple sites when they come across them. This is a huge part of what made Google so successful: users came to the site for one thing, search, and the site was kept simple to facilitate that interaction.
As it turns out, it’s quite hard to be clear and concise. I like to compare this to writing papers for school. Often we were given assignments that needed to be a minimum of X amount of words or pages, and it was sometimes challenging to find information to meet this minimum. Fortunately (or unfortunately) many students developed a highly refined skill of BSing to fill the word limit. But were you ever given an assignment where there was a word/page MAXIMUM? This turns out to be much harder to write for, mostly because you can’t BS it. You have to identify the fluff, the nonessential bits, and surgically remove them from your paper. (As a side note, in the area of computer science, notice how many HUGE tomes there are out there compared to smaller books. I would venture to guess that engineers have a hard time being concise.)
This is just the problem we now face with mobile. We know how to fill up webpages with fluff: add an RSS feed here, add a module that ties into Facebook there, add another feed here, stick a relatively unimportant module there, add an excessive amount of social sharing buttons, and presto, we have a website that looks pretty active. But how does that translate to mobile? The questions you’re forced to ask yourself are: “do I really need this data feed displayed here?”, “do I need this huge Facebook module here taking up space?”. Or more positive questions like “what are the things users will come to my site to check, and how do I make it easier for them to find those things?”.
In the case of the last question, it’s easy to see from the above screenshots what Yahoo mobile thought was most important: Mail, Search, and News, all of which are visible at the top of the page. Think about your website’s main two or three features and try to make those just as visible.
W3C Mobile Web Best Practices 1.0
Tips and Tricks for developing Mobile Widgets
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks
You’re no mobile developer unless you have the tools to develop on mobile! And while it’s good to own at least one of the smartphones you’re developing on, it’s probably unrealistic to think that you’re going to go out of your way to buy several other unlocked smartphones just to test with. So you should have the next best thing: an SDK!
But an SDK is just one of the tools of the trade. Here’s links to more things to get you started!
Short of having access to a real phone, the next best thing is to have an emulator/simulator. And good news: all the major smartphones have SDKs available for you!
iPhone SDK (Mac OS X only) – the quintessential SDK for the quintessential smartphone. Includes iPhone simulator.
Android SDK (Mac OS X, Windows, and Linux)
Palm webOS SDK (Mac OS X, Windows, and Linux) – emulator for Palm Pre, Pixi, etc. Also check out Ares, the browser-based tool for creating web apps.
Firefox Mobile emulator (aka Fennec) – mobile version of Firefox being developed for new Nokias and soon Androids
Opera Mobile emulator – this is the fastest emulator of the bunch, in terms of downloading and launching the program. Painless installation.
Opera Mini Simulator (Browser-based Java applet) – In-browser simulator. Note that Opera Mini is different than Opera Mobile.
Windows Phone 7 Series emulator
For a more complete list, see Maximiliano Firtman’s Mobile Emulators & Simulators: The Ultimate Guide
These are services which allow you to test on actual devices in a lab.
Keynote MITE (Mobile Interactive Testing Environment) (Windows only) – a glorified user agent switcher. Doesn’t have testing of real devices.
DeviceAnywhere (Java-based software that runs on Windows and Mac OSX) – a service that lets you test on actual mobile devices sitting in labs around the world. It has a tendency to be a bit clunky, but there’s no real alternatives on the market. Only subscribe to this if you intend on supporting more than just smartphones.
I’ve created a separate entry for the mobile libraries and frameworks now available.
The concept is simple: use what you know to create an app with HTML/CSS/JS and turn it into a marketable native app with one of these “wrapper” services.
PhoneGap
appcelerator’s Titanium Mobile
QuickConnectFamily
Rhomobile (HTML-based)
Many websites sniff a browser’s user agent to detect if it’s a mobile device. As a developer this presents a challenge, because a lot of development is done on a desktop browser. With a user agent switcher, a developer can masquerade their desktop browser as a mobile browser.
Firefox addon: User Agent Switcher
Safari: Enable the Develop toolbar (click on Safari -> Preferences -> Advanced) and click on Develop -> User Agent. Select a predefined user agent or enter a custom agent by selecting “Other…”
Chrome: There is no easy way to do this (note that the one user agent switcher extension for Chrome doesn’t work). Currently the only way is to set command line flags:
To change the user agent of Chrome in Windows:
Example Target: “C:\Documents and Settings\Username\Local Settings\Application Data\Google\Chrome\Application\chrome.exe” ––user-agent=”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)”
To change the user agent of Chrome in Mac OSX:
Example command: /Applications/Google\ Chrome.app/Contents/MacOS/Google\ Chrome ––user-agent=”Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1)”
On the server side, mobile detection is mostly done by user agent sniffing (thus the need for the user agent switchers above), but there are a few other methods.
“Lite” user agent detection: these methods implement a simple server-side function (commonly in PHP) to detect common mobile user agents. There’s a few versions, mostly based on code by Andy Moore. There’s one implemented in the WordPress Mobile Pack and a similar one described on the Nokia developer forums.
WURFL (Wireless Universal Resource File) – a 10+ year old project that is still being used and gaining momentum. It’s beneficial because it’s open source and it offers a lot of valuable information about devices.
DeviceAtlas – essentially a commercial version of WURFL
Everybody’s human. All this new cutting-edge stuff isn’t exactly bug-free. Help squash bugs by reporting them on the project’s website. For best results, show a simplified example of the bug in action (try not to post big hunks of code!).
WebKit Bugzilla
Android: Report bugs
Keep up to date! There’s new stuff happening all the time on the mobile web.
QuirksBlog – blog of Peter-Paul Koch (PPK), who is known for documenting and researching cross-browser inconsistencies. As of the last several years he’s been focusing on documenting mobile browser bugs.
Daring Fireball – John Gruber’s blog with a cultlike following. Frequently reports on mobile happenings, especially stuff relating to Apple.
Surfin’ Safari – The WebKit Blog
Android Developers blog
IE for Windows Phone Team Weblog
Opera Mobile Blog
Inside BlackBerry – The Official BlackBerry Blog
Yahoo! Mobile Blog
Google Mobile Blog
Yahoo! Blueprint – framework for normalizing cross-browser issues across thousands of devices
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks
Use this:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
This series of posts is intended to introduce web developers to basic techniques for designing for the mobile web. It assumes at least a basic knowledge of creating desktop websites.
Ok, so you’ve settled down to learn how to write a website for a mobile device using your current knowledge of building desktop websites. So you start off with some pretty basic HTML:
<!doctype html>
<html>
<head>
<title>Hello world!</title>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
Ok! You can’t get much simpler than that. You check it out and it looks good on all the desktop browsers, since there’s really no opportunity yet for any cross-browser inconsistencies. And then you check it out on your mobile device:
Hello World on the iPhone
Doh! Where’d we go wrong? The text is obviously way too small to read without zooming in.
This is the first lesson in making mobile websites: width is your enemy. This is the first of many countless problems with device width you will encounter. Fair warning.
If you think about it logically, it seems to make sense: mobile Safari took a look at the page and assumed it was a document designed for the desktop, which is true of the vast majority of websites. So it gave the website a width of 980 pixels and presented it zoomed out. Which is why we can’t read anything until we zoom into the page.
But this is no good! What we need to do is tell the browser that this webpage is optimized for mobile. And this is where the viewport metatag comes into the picture.
Now we tweak our Hello World just a bit…
<!doctype html>
<html>
<head>
<title>Hello world!</title>
<meta name="viewport" content="width=device-width"/>
</head>
<body>
<p>Hello world!</p>
</body>
</html>
And we get this…
Hello World with the Viewport tag
Much better! By setting the viewport width equal to “device-width”, we’re essentially telling it that the device width is 320px, not the default value of 980px that it guessed. If we set width=320 it would achieve the same result on the iPhone and a few other smartphones, but not all phones have this exact width, so it’s best to simply set device-width and let the mobile browser figure it out.
This viewport metatag is supported on many smartphones, from iPhone to Android to webOS (Palm) to even Internet Explorer Mobile, Opera Mini and Opera Mobile.
At the end of the day here’s what the standard viewport looks like, as grabbed from m.yahoo.com:
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no"/>
EDIT: It’s been discussed a bit, and it seems that preventing the user from scaling the page (pinch zooming) isn’t necessarily desirable. So here’s a version of the tag that allows the user to pinch zoom:
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
In addition to solving our biggest concern with the width of the content, the viewport tag has more options to play with:
| Property | Description |
| width | Width of the viewport in pixels (or device-width). If width isn’t set, it defaults to a desktop size (980px on mobile Safari). |
| height | Height of the viewport in pixels (or device-height). Generally you don’t need to worry about setting this property. |
| initial-scale | (0 to 10.0) Multiplier that sets the scale of the page after its initial display. Safe bet: if you need to set it, set it to 1.0. Larger values = zoomed in, smaller values = zoomed out |
| minimum-scale | (0 to 10.0) The minimum multiplier the user can “zoom out” to. Defaults to 0.25 on mobile Safari. |
| maximum-scale | (0 to 10.0) The minimum multiplier the user can “zoom in” to. Defaults to 1.6 on mobile Safari. |
| user-scalable | (yes/no) Whether to allow a user from scaling in/out (zooming in/out). Default to “yes” on mobile Safari. |
Unfortunately the viewport tag is relatively new and as such isn’t universally supported, especially if you’re working on older feature phones. But there are some older methods at your disposal for identifying your website as optimized for mobile:
<meta name="HandheldFriendly" content="true"/>
This tag was originally used to identify mobile content in AvantGo browsers, but has now been made the general standard for identifying mobile websites. However, it’s unknown what range of browsers support this meta tag.
Another tag at your disposal is a Windows-proprietary meta tag that also took root and eventually became used as another means of identifying mobile content. The drawback with this tag is that a specific width must be given, which doesn’t make it as flexible as the viewport tag (see above). Again, it’s unknown what the support for this tag is:
<meta name="MobileOptimized" content="320"/>
Lastly, your website will be identified as a mobile optimized site if your doctype is either XHTML-MP or WML. However, this is becoming less and less the case these days, as browsers begin to support good old HTML4.01 and HTML5+.
(info for this section comes from Beginning Smartphone Web Development)
The official Android documentation lists a special property they’ve added to the meta tag: target-densitydpi. This property essentially allows developers to specify which screen resolution the page has been developed for, or more specifically how to handle the scaling of media such as images.
Here’s an example of the tag in action:
<meta name="viewport" content="target-densitydpi=device-dpi" />
Safari HTML Reference: Supported Meta Tags
Mobile META Tags
Part 1: The viewport metatag
Part 2: The mobile developer’s toolkit
Part 3: Designing buttons that don’t suck
Part 4: On designing a mobile webpage
Part 5: Using mobile-specific HTML, CSS, and JavaScript
Part 6: Dealing with device orientation
Part 7: Mobile JavaScript libraries and frameworks