Summary (Quick Links): Tips for Good Mobile Web Design | Don’t Do This | List of Sites with Good Mobile Design | How to Test Mobile Sites | How to Measure Mobile Sites | Bonus: Send Email as SMS

Why Is Mobile Web Design Different from Desktop Web Design?

The difference is the way you use these:

  • Desktop (and laptops) websites are used while you sit at a desk or on a couch. With few distractions, you can concentrate, which lets you navigate fairly complex sites. We’ve become used to Amazon and Facebook. It took years of testing to get to that point. On desktop, you’re researching, shopping, or just browsing. You can take your time. You can open multiple screens and compare. You have a fast DSL connection and pages open instantly.
  • In contrast, mobile websites are used while you’re standing or moving. It’s hard to concentrate. Mobile screens are tiny. Even a Samsung Galaxy’s large screen is small in comparison to any laptop computer. And you’re using your finger to click on links. You’re at a street corner and you want to find a restaurant. You’re in the back of a taxi and you need to find the hotel. On mobile, you have only seconds. Try typing in that long street address by pressing the screen. Mobile is also slow. Often, people are connecting via Wifi, and if they’re in a cafe or airport, that’s a shared connection, which makes it yet slower. Even with 4G or whatever, mobile is slow.

You can not offer the same desktop website to your mobile visitors. They will be frustrated and abandon your site.

Tips for Good Design of Mobile Sites

  • Use large buttons. Use different colors for each button
  • Place navigation buttons at the top and bottom of the page
  • The About Us and Contact page are your most-visited pages (use analytics to verify this), so put that information at the top of the page.
  • Due to bandwidth limits, mobile sites must open quickly. Yes, we’re back to 1995: web pages for mobile should be 25 KB or less.
  • Make the site as a single page, with nav buttons that jump to sections on the page. This avoids the need to load new pages.
  • Make sure swipe and pinch-zoom works. I’ve seen apps without this and it’s very annoying to navigate.
  • Don’t write too much (don’t do what I’m doing with this page! 🙂 ) It’s hard to read long pages on mobile. Write your text. Cut it by half. And cut by half again.
  • On the contact page, make everything clickable. Click the phone button and it calls. Click the address and you get a map. Click the email and it opens email. Click the SMS button to send a SMS text message.
  • For visitors on tablets, add a button that brings them to the desktop version of the site (e.g., “View Full Site”)

Tablets are not-this, not-that. They’re not like desktop devices, but they’re not like smart phones. Usually, a desktop website works on on tablet, but you don’t really use tablets for in-depth research or comparison. It’s hard to open multiple windows, it’s slow, etc. I rarely buy via Amazon on my tablet. It’s very difficult to select movies at Netflix (you can watch them, but it’s hard to select them.) Test your site on a tablet and see if you need to make changes.

Don’t Do This with Mobile Web Design

A short list of things you really shouldn’t do in a mobile site.

  • Don’t use drop-down menus. They are hard to navigate while walking.
  • Don’t use too much graphics. Pages must open quickly.
  • Don’t use 2-point fonts. Don’t force people to zoom in, which makes it harder to navigate.
  • If you have a vertical list of links, separate them with double space (as I did in the list below). That’s easier to click with your finger.
  • Don’t use the desktop site for mobile users. On a desktop webpage with DSL connection, it’s easy to click links and click back (or press the back button). But on a mobile site, you quickly lose overview and it takes time to reload the pages. People get frustrated and they abandon your site.

Sites with Good Mobile Design

MobileAwesomeness.com has over 150 examples (June 2012) of mobile websites. I looked only at sites with 4 or 4.5 stars. Here’s a list (sorted alphabetically), along with my comments. There may be other good sites; if you see some, let me know. (And yes, look at these sites with your mobile device.)

  • AureusMedical.com: The design forces you to go from one page to the next. No quick menus. You have to return to the main menu. The Contact Us page has good use of icons.
  • Autoricambimenei.it: The important information is front and center.
  • BASF.com: Complex structure, but nice clean design.
  • ButlerTill.com: The essentials are on the front page.
  • CruiseSaintLawrence.com: Clean design, good graphics, and easy-to-navigate.
  • LatinRougeCleaning.com: Okay, here’s something cool. It’s a great idea to make the mobile site as one long page. No need to navigate or load new pages. The shortcut menu at the top is a good idea (but it doesn’t work. Need to fix that.) The same site works on both desktop and mobile.
  • Mobiento.com: Another one-page site, and perhaps too long, but interesting use of side scroll to show products. If you’re selling products, look at this site.
  • MoireMarketing.com: Pretty good overall.
  • Mungo.com: On the Contact Us page, the links are large buttons. But it lacks a link to a map.
  • Peapod.ca: Excellent one-page site, with nice use of colors.
  • StLouisCommunity.com: Pretty good overall.
  • TimHortons.com: Good use of graphics to convey information. But poor navigation.
  • UncorkedStudios.com: Another good one-page site. Perhaps too much text.
  • VisitSiouxFalls.com: A city guide. Good use of colors and buttons, but the navigation is still based on clicking forward and backwards.

See also Google’s Tips for Mobile Design. It goes into a few technical details.

How to Test a Mobile Site

Mobile means just that: mobile, as in moving. Test the site by using it while you’re walking on a busy street. Yes, there will be lots of distractions, it’ll be hard to see the small screen, and it’ll be hard to click buttons. That’s the point. People use mobile while walking, standing outside a restaurant, in a store, or driving (you really shouldn’t do that.) Mobile is also used by the pool in bright sunlight and in bed with the lights off. Alex, a games developer at Sony, tests mobile sites by using only one hand.

How to Measure Your Mobile Traffic

Use analytics to compare your desktop and mobile users. Any of the major analytics tools, such as Webtrends, IBM Coremetrics, Adobe Omniture, or Google Analytics can give you data.

First, analytics can show you the ratio of desktop to mobile users. When more than 10% of your visitors are coming via mobile devices, it’s time to build a mobile site.

Second, analytics will show you the “bounce rate”, which means how many people come to your site but abandon without a single click. If it’s higher than 40%, you have a problem. To lower the bounce rate, redesign elements of your site.

Finally, track your conversions. If you’re using Google Adwords or any form of marketing, track your marketing and your results (by orders, revenue, etc.) If mobile is profitable, it justifies additional time and investment.

Bonus: How to Send Email by SMS to Your Phone

So you can set up an email link to let people send an email to your email account. It’s just as easy to set it up to send the email to your cell phone as an SMS message. People can contact you instantly, wherever you are. (And yes, at any time. If your business is the type where customers are up all night, you might get SMS messages at 3 AM.)

Here are the email addresses for email-to-SMS. If your phone number is 333.555.1111 and your cell phone service is T-Mobile, then use the email address 3335551111@tmomail.net to send an email to your phone as SMS.

  • T-Mobile (Example) 3335551111@tmomail.net
  • ATT (Example) 3335551111@mobile.att.net
  • Verizon Wireless (Example) 3335551111@vtext.com
  • Sprint PCS (Example) 3335551111@messaging.sprintpcs.com

You can use this in your list of contact links, e.g., Phone: 333.555.1111, Email: Bob@Smith.com, SMS: 3335551111@tmomail.net

If you want to send SMS to someone, but you don’t know his cell carrier, you can send to all four email addresses. The wrong ones will simply disappear.

Is Mobile Really Finally Here?

Back in 2001-2002, we were convinced mobile was about to happen. The PalmPilot was a great PDA. Apple hadn’t even begun its White Period, so no iPods or iPhones yet. I wrote one of the first design guides to mobile on PDAs (it’s still on the web at Andreas.com/PDA/Design. Now it’s 2012 and mobile is finally here. As in everything else, China and Europe are 3-4 years ahead. More than half of US phones are smart phones (nobody says PDA anymore) and it’ll go to 90% by 2013. So it’s time to switch your web strategy from desktop to mobile.

Summary (Quick Links): Top | Tips for Good Mobile Web Design | Don’t Do This | List of Sites with Good Mobile Design | How to Test Mobile Sites | How to Measure Mobile Sites | Bonus: Send Email as SMS