The days of fine-grained link acquisition with a mouse or trackpad pointing device are being eclipsed. If you haven’t designed a mobile version of your website or aren’t thinking about how to re-factor your site for a mobile touch experience, now’s the time to do so. And if you aren’t considering mobile Safari as your primary target, you’re not paying attention.
Don’t believe me? Than you should look at the data around PC shipment forecasts, smartphone shipment forecasts, tablet/mobile shipment forecasts, and correlate that against desktop browser market share and mobile browser market share.
Designing for this emerging mobile web isn’t hard – there are just some new constraints you need to keep in mind.
Offer a non-desktop version of your site and a way to view it. XKCD sums this up nicely. I swap back and forth depending on what I’m doing at the moment. Choice is good.
Allow zooming. This one frustrates me to no end. Someone, somewhere thinks, “Oh, mobile experience! I better set fixed widths for everything so the proportions don’t get wacky.” And then I visit a mobile site where I can’t zoom a picture. Fail.
Touch targets need to be around 6mm or larger and you need to provide some space around clustered links, otherwise click acquisition becomes hard. This also means using larger fonts for links in some cases.
Just don’t do cascading or flyout menus or navigational items. Getting proper render across all browsers is tough and accidental touch inputs tend to be high, so menus/navs that collapse on touch outside of target areas will frustrate users. I’ve wanted to throw my phone to the ground when dealing with finicky nav flyouts.
Go easy on the Javascript. The Javascript engines in mobile browsers are much better than they used to be even a year ago, but highly complex scripts will slow things down. I access my WordPress dashboard via the mobile web sometimes, and it’s s-l-o-w to render due to all the Javascript.
Dump extraneous text. Focus on the task or action and minimize the use of text so you can use the limited UI space for other elements. For mobile, I’m in, I’m out. I’m not doing deep research. If I can’t find things quickly, I move on.
Optimize, compress, and be sparing with graphics. Graphics chew up bandwidth, which most people still pay for on their data plans and slow down page render times. Don’t even get me started about sites that render out a 2MB PDF for some pages…
Check your CSS on your target platform(s). There are wide variances in CSS rendering across mobile experiences. I keep running into sites that don’t re-flow or re-paint correctly when I zoom. It makes sites unusable.
Pay attention to keyboard input scope. Every now and then, I run into a site that notices I’m on a mobile browser and I get a different keyboard for input. It’s a nice detail that makes password or email entry that much easier. Just be consistent between fields, because I get screwed up and annoyed when the keyboard changes when I change field focus.
Don’t be clever with ad placement. Look, most of us need to work for a living, myself included, (notwithstanding a few rich, dirty hippies,) but that doesn’t mean you should make your ads look like the rest of your content or place them right next to high profile touch click targets to garner some extra clicks.
Lastly, make stuff bigger and simpler. Screen sizes are smaller than desktops – duh. Strip things down to the basics and make the remainder larger. Consider re-factoring your information architecture and remove extraneous pages. Think easy and fast.
There! Get to work. 😉
Heather Kilbourn 