Articles & Tools

You're reading my blog on the art, business and culture of web site design. After you enjoy this article, check out my portfolio and get in touch to learn how I can make your next web project your best yet.

3 Steps to Designing a Great Mobile Web Site

Designing a great mobile site is about much more than a smaller screen size.What separates a great mobile web site from more of the same? It's a deep understanding of how mobile users interact with the web – what they're looking for, what makes life easy for them, and how to address their needs as quickly and painlessly as possible. Mobile design is more than just converting a web site for a smaller screen size – it also means revisiting all your site's pages and content to make them as relevant as possible for visitors on the go.

In today's article, I'll walk you through the best practices for choosing content and creating a design for a mobile site, and I'll hook you up with two great resources to get you started on a mobile design today.

Step 1: Deliver the info your mobile visitors need right now

The first question to answer as a mobile designer is what information on-the-go users will most need from your site – and in the case of many businesses, that means the address and contact information need to be at the forefront of your mobile design. While this information might be buried in small text in the footer or on a contact page on the desktop version of the site, it's often the primary reason a user would hit the site on their phone. If you're looking up a restaurant where you'll be meeting friends after work, you probably want the address, cross-streets, phone number or closest metro stop – not a fancy introductory slideshow or detailed PDF of the dinner menu.

Mobile users are looking for the basics, and the design should deliver that information with an understanding of the urgency of many mobile web site visits.

Since so much of the mobile web is centered around finding or contacting people and businesses, there are a few cool tricks built into the operating systems that a mobile-optimized site can take advantage of. Here are a few examples of powerful buttons or links to add to a mobile home page:

  • Call Us – Clicking the button or link launches the phone app directly
  • E-mail us – Launches the e-mail app directly
  • Map It – Launches the maps app directly, with the address of the business pre-populated
  • Make a Reservation – Launches the OpenTable app or web site for restaurant reservations
  • Download a Coupon – Links to a PDF that the user can show on their phone to get a discount

You can even add buttons to send a text message or launch the iPhone App store, if those options make sense with your client's marketing plan. A home page that takes advantage of these items provides a much smoother experience for mobile users, and definitely makes a good impression on these tech-savvy visitors.

Step 2: Streamline your content for the mobile web

Now that we've got a functional home page that highlights the most valuable information, it's time to think about the approach for interior pages. On some sites, such as magazine or article-based sites, it may make sense to duplicate all the site's content in a mobile-friendly format. That way, if a friend e-mails me a link to an article and I view the e-mail on my phone, I'll be redirected to a mobile version of the article without having to jump to a new page or navigate to the same article from the home page. This is great for sites that have a lot of content and a lot of social link sharing.

For many small and medium business sites, though, it might not make sense to duplicate everything word-for-word on the mobile site. Instead, a trimmed-down site could include three or four interior pages that highlight the key talking points for the business, perhaps even with copy that is written with the shorter attention span and fast pace of a mobile user in mind. These pages can be written and designed with the goal of initiating an immediate phone call or e-mail from the potential customer, especially since we know they are literally a click away from calling for more information.

When a user visits a regular page's URL in a mobile browser, we can redirect them automatically to the mobile version of that page – and optimize that page's content for the mobile experience.

Every site will be different, but the key takeaway is this: for sites that are very content-heavy, make sure not to allow your users to get lost just because they're viewing the article on a mobile device. And for less frequently updated or content-rich sites, optimize your content and copy to provide for a quick mobile read, and then push the user to your desired “call to action,” whether that's a call, e-mail or in-person visit.

Step 3: Dig in to the technical details

Now that we understand the big design and organization concepts behind the creation of a mobile site, let's spend some time on the nitty-gritty of the technical side of things. The first and most obvious change you'll need to make in your design is the size – the mobile screen is much smaller than your desktop or laptop monitor. That means that rather than building sites that are up to 980 pixels wide, you're working with just 320 pixels (that's the narrowest dimension for an iPhone-optimized site). This will change a lot of your design techniques, but you can still maintain the same look and feel while providing an optimized mobile experience.

Remember to keep buttons and links large and easily touchable – just think about all the times you've accidentally pressed the wrong button or dialed the wrong number because your thumbs were just a little too big. Also keep in mind that “hover” states of items, such as links, will not be as easily accessed (if they can be seen at all) on mobile devices, and consider removing those from your designs. There are lots of fancy JavaScript tools that allow you to simulate iPhone screen transitions on your site (so the page neatly slides from right to left, for example), but for starters, build a simple, clear and stripped-down version of the design, and make sure the most important content is easily accessible for those of us with oversized thumbs.

One of the big drawbacks of iPhone development (and something that iPhone's competitors are racing to beat them on) is the fact that Flash is not supported in any way. Most designers and developers are moving away from Flash as a presentation tool, but it's still an important part of web video, audio and other media. If you want to include these types of media on the mobile site, you'll need to use an HTML 5 player. This will work with the most newer mobile browsers and provide your users with a streamlined experience so they're not running into Flash errors or getting pushed out to other applications to watch video. The process for setting up HTML 5 video is a bit different than Flash, but still something that we can easily integrate into a mobile site.

One last thing: Even though it's generally better for a user on a smartphone to see the mobile-optimized version of a site, there are exceptions to every rule. For that reason, it's good practice to include a “view full site” link at the bottom of your mobile site, allowing a user who wants or needs the content on the desktop version of the site to get there even after being redirected to the mobile site.

What about the iPad?

While you don't need to redesign your whole site for a tablet, there are a few things to watch out for.We've covered smartphones, but that brings up another question: what about the mobile phone's bigger cousin, the tablet (and, most commonly, the iPad)? In most cases, it's not necessary to display the mobile version of a site on the iPad – because the screen is larger, the regular version of the site will do just fine. What's more, many iPad users will be accessing your site with less urgency than phone users – they're just as likely to be sitting on their couch at home than trying to look up your address while flagging down a cab.

The exception is with sites that use a lot of advanced JavaScript – Gmail and many other Google applications are a good example. In these cases, the advanced scripts might crash or otherwise mess up the iPad or tablet's browser, so the development team has created a streamlined tablet version of the site. This is also a good place to consider any functionality that might require the “hover” effect – again, it won't be readily available on a tablet (or, if it is, it will be much less helpful in terms of the user experience). If you have big parts of your site that are hover-centric, it might be valuable to redesign those specifically for tablet users.

What's next?

If you've got a client who would benefit from a mobile version of their site, it's a great way to add value to a project and help your clients make life easier for their mobile customers. Attractive, easy-to-use mobile sites can be both a valuable addition to your client's marketing strategy and a way to build prestige and goodwill among tech-savvy and mobile customers. They're also easy and fun to design, develop and play with after they're online.

If you're looking for some design material, check out this great collection of mobile icon sets – it will get you designing with big fingers in mind in no time. And for even more inspiration, check out CSSiPhone, a site that compiles some of the best iPhone-optimized designs from around the web.

And, as always, if you have any questions on best practices on mobile design or development, don't hesitate to get in touch! I'm always available and ready to rock on your next great project.

Thanks for being a part of the Howard Development & Consulting community!

About the Author

Rob Howard

Rob Howard is the web developer design firms count on. As the founder of Howard Development & Consulting, he works exclusively with designers and creative firms to deliver top-notch HTML/CSS, JavaScript, ExpressionEngine and Wordpress content management system development. He's built sites for Harvard, MIT, The World Bank and the U.S. Holocaust Memorial Museum, and his work has been praised in BusinessWeek, Entertainment Weekly and PC Magazine.

← More Articles & Tools

Get in Touch
Ready to learn more?
Contact Rob today at (720) 708-6590 or info@howarddc.com.