Designing for the Mobile Web

Editor’s Note: This article is an excerpt from Designer’s Web Handbook by Patrick McNeil. Like what you read here? Then you’ll want to add the book to your design library.

The mobile web is one of the hottest topics and an area of great uncertainty. Devices change constantly, and the market is exploding with a vast array of screen sizes and features. Developers are still settling into how to build for the current devices, much less the ones coming. And, of course, designers are still figuring out how to properly design around a platform with such specific technical limitations and boundaries.

In many ways, mobile development is like the early web. There is a ton of experimentation with a lot of trial and error. The good news is that the mobile web is being built on a much more solid base than when the web started.

This single-column layout is standard for mobile web content. Notice how easy the streamlined page is to use and that the actionable buttons are really easy to find and touch.

Want to develop your web design career? Get the information and inspiration you need at the 2013 HOW Design Conference, where a dedicated Interactive Design track will help you transition from print to web design.

How to Approach Mobile Design

When it comes to mobile design, there are two fundamental approaches that greatly impact the designer.

Do Nothing

Yup, you can do absolutely nothing to target the mobile web. In fact, many people argue that you should serve up the exact same experience on mobile devices as on the desktop. After all, many devices can handle a standard website with ease. There are, of course, minor things to consider to ensure the mobile version works well. But in many cases you can get away with doing nothing.

Create a Mobile-Optimized Version

This ultimately means writing code to ensure a site renders ideally on a mobile device. In such cases we need to know what the basic parameters are to design around. In particular, what size should we design for? And to be clear, this is where things get really fuzzy.

In this case, almost everything becomes a button. Notice how extremely simple it is to touch and navigate to an article of interest.

One of the more notable examples of this is that iPhones started with a 320px × 480px screen to work with. However, with the release of the iPhone 4 Retina Display, the screen resolution doubled to 640 × 960. What does this mean for the designer? Well, unfortunately there is no clear answer. Because even if you design optimized for the iPhone, what do you do about the host of other devices out there?

The end result is that you will have to adapt your process to the skills and focus of your team. Up until the release of the new iPhone, one could design around a 320px × 480px screen rather safely. But with the new, higher-resolution screens, one should design a standard 320 × 480 version as well as a doubled up 640 × 960 version. Fortunately, there are easy ways to target the higher-resolution screens with higher-resolution graphics.

Though it uses a horizontal navigation, this site is a single column that focuses on the content and less on the fancy containers.

Designing for Tablets

Tablets are nothing new, and yet, with the launch of the iPad, the market for them has exploded. Now there are countless devices coming out by various competitors, and the tablet is actually finding its place in the world. (Note that my commentary here is focused solely on creating websites that are optimized for the iPad and other tablets, and not on creating native apps to run on them.)

Let’s start with the iPad, because frankly speaking, this is the primary candidate at this time. When it comes to considering the iPad, you have two main options.

Do Nothing

The first is to do nothing. The iPad has a screen size of 1024px × 768px, which is conveniently the commonly accepted smallest screen size for the desktop. This means that most sites that function well for the desktop computer will function well on the iPad.

Create an iPad-Optimized Version

The second option is to design a site specifically styled to work well on the iPad. In such situations, this is either the entire goal of the project or it is a huge add-on that the client will budget for. Either way, the project becomes a task all unto its own. I highly recommend that you don’t make your first stab at this with a paid client project.

The biggest consideration in either case is the technology limitations. Most significantly, Flash technology does not run on iPads at this time. This is not the case for all devices, but it certainly is for the iPad. So forget the Flash and focus on the core technologies that power these sites: CSS3 and HTML5.

And, of course, the market is not limited to the iPad; many other devices are emerging. Some of the more notable ones are Android and BlackBerry based. By the time this book is published, though, there will no doubt be even more devices available. The portable device market is changing so fast you will be hard-pressed to keep up.

Designing for Other Devices: TVs, Google TV, etc.

There are tons of new devices showing up that bring the web to new places. Most notable of these are Internet-ready TVs and TV-oriented devices like those that use Google TV. The real moral of the story is to realize that your site will likely be showing up on all sorts of devices and browsers, far beyond what your client might ever even comprehend. In many ways, there is almost nothing you can really do. There are just too many variables to accommodate for. Perhaps someday we will finally have the proverbial computer in the door of our refrigerators; if so, chances are it will be surfing the web.

The Future of Mobile Design

So, what do we do? Well, we embrace the best practices and do our best to make extremely functional websites. This will inevitably lead to sites that have a chance of functioning well across various platforms. Part of my hope here was to open your eyes to the ever-increasing range of platforms and the complexities they can present. Fortunately, the very definition of most projects will outline which aspects of all of this are even a concern. In many ways this should illustrate why it is so important to have a basic understanding of how things will ultimately work. This should also help us see why designing experimental interfaces and ignoring conventions are dangerous undertakings.

MORE WEB DESIGN RESOURCES:

  • Learn web design from the expert instructors at HOW University. See our rotating schedule of web design training courses, including hands-on training in coding for web designers, designing WordPress websites, information architecture and more.
  • Want to grow your web design career? Build your skills and knowledge of interaction design with our superior library of web design books. Visit MyDesignShop.com for new releases and discounts.

If you are still finding your footing in the interactive design world, Patrick McNeil will be at HOW Design Live helping conference attendees create their own career roadmap from Print designer to Interactive designer. Visit HOW Design Live for more information.

COMMENT