Mobile devices now make up 28 percent of total web traffic, but many websites look and behave poorly on phones. I’m sure you’ve experienced the frustration of trying to use a website on your phone that was not designed for mobile. Take a look at these examples of sites that could do a much better job for their mobile visitors. The pages and fonts are so small that you must zoom in to the point context is lost. Too often, sites have problems like this, with important pages and functionality that don’t work at all.
Until recently, the best solution was to build multiple versions of your site for each type of device. This solution was expensive and time-consuming, and it required a lot of duplication of content. A new approach has emerged, called responsive web design. Responsive web design means you build your site only once, but you do so in a way that lets it look and work great on phones, tablets, and PCs.
How does responsive web design work?
Simply put, you design your content and layout so that, as the screen size changes, the content and layout rearrange themselves on the webpage to fit into the new space. Here’s an example of the same website on three different screen sizes:
Here is the same website when viewed on a tablet-sized device:
Here it is when viewed on a phone:
Key things to notice:
- The content is the same on all three screens, but the page layout changes and images are shrunk down in size or cropped.
- The menus at the top of the desktop page won’t work so well on mobile. So, on a mobile device, the whole menu shrinks down to one small button, often called a hamburger. You click this button to see the whole menu, and you click it again to hide it.
You can experiment with this effect yourself, right on your desktop. Go to this site that we built, http://www.caradigm.com, and change the width of your browser window. As your browser window gets narrower, you see the layout change.
How does a responsive design affect website content?
If you want a mobile-friendly website, keep the small screen experience in mind when creating website content. Those lengthy, clever headlines and voluminous paragraphs that some marketers are tempted to write simply don’t work on mobile. Nor do highly detailed images and complex page layouts, such as product comparison tables and diagrams. Some considerations for creating content that works across all screens include:
- If you have a significant mobile audience, pick content and features based on activities that these users commonly do, such as read on the bus or save content for deeper review later.
- Write your headlines for mobile first—a shorter headline will always work on the desktop, but a longer headline will not always work on mobile devices.
- Break your body copy up into smaller, more easily consumed chunks of information. This is a web content best practice anyway, but it’s even more critical for mobile readers.
- Plan your page layout using grids. Grids work well in responsive design because content in columns and rows can easily be placed in a new layout with fewer columns, without breaking the flow of content.
- If you use a lot of photography or images for branding, of course you’d prefer to preserve that creative approach and to keep it consistent across all screens. But the requirements of showing an image on a 14-inch-wide screen desktop are much different from those for a 2-inch-wide phone screen. One effective approach is to use photography and images that work well when the left and right sides are cropped. Then you still have the high-impact widescreen image on the desktop, and you have a carefully cropped and sized image for mobile devices—one that still communicates your brand but does so in a more compact way.
- If you have highly complex images, diagrams, and other visual communication elements, plan on having simpler alternatives that can appear on smaller screens—or eliminate them entirely.
Doesn’t this limit my design options?
Yes, but within reason and for a good cause. We’ve all gotten used to designing websites for which we have complete control over where everything appears. We can have all kinds of fancy overlapping elements with drop shadows, gradient shading, complex layout of content, and highly interactive animations. But the reality is that many of your users are irritated by this kind of design on mobile devices. They require a different approach. Some considerations for mobile design include:
- Stick to the grid. Modern responsive design frameworks require that the design be done on a grid. Don’t design elements that don’t fit within the grid. Try to track down a Photoshop template file that was created for the responsive framework your development team has selected.
- Select images much more carefully to support either scaling up and down or that can be cropped to work well with different aspect ratios and screen sizes.
- Design for fingers. Fingertips are generally between 40 and 80 pixels wide, meaning that click targets should be a minimum of 30 to 40 pixels in size.
- Think about the mobile experience while designing the desktop. Don’t tack mobile design onto the end of your design process. Doing so will just result in rework.
- Create lightweight designs that load quickly.
- Consider letting your developer do the initial mobile design. This may seem crazy, but it can be quite effective to have your developer build a few pages out of your desktop design and then see how they look on mobile. You can use that as a starting point for tweaking the mobile experience. This works because your developer will be using a mobile framework, such as Bootstrap or Foundation, which automatically lays out your desktop experience for mobile. This is a lot less work than building duplicate Photoshop files for mobile for every page template on the site (a method which isn’t even feasible when your framework won’t cooperate with your ideas).
Here’s an example of a Bootstrap-compatible design in Photoshop on a 12-column grid:
What else should I know?
There are a few key considerations that marketing managers and site managers should understand before working with developers on a mobile site, including:
- Ideally, you select your responsive design framework before beginning site design. This enables you to communicate the framework requirements to the designer and allows the designer to create a design that works well with your selected framework. The framework might have certain settings for gutters, margins, and column layouts. There may be Photoshop templates you can deliver to the designer. And the framework will have predefined controls such, as drop-downs and edit boxes.
- After you receive completed desktop designs, ask your developers to build the first few pages of the desktop experience. You might also consider mobile first. This design approach states that designing for mobile first actually produces a better, more customer focused desktop site.
- Test those desktop pages on narrower viewports, and work with the designer to tweak the mobile design. You may find that your responsive framework does a pretty good job but that it needs some additional work to match the overall site design. You may also find that some elements of the desktop design need to be changed because they will never work well on mobile.
- Although frameworks do a lot of the device and browser compatibility work for you, you still need to test and tweak, at least on the iPhone with iOS 7, Android 2.3 and 4.x, Android tablets, iPads and iPad minis, and Surface tablets. And, on the desktop, you should cover Chrome, Internet Explorer (9, 10, and 11), and Firefox.
Building websites for different sized screens is a critical step for most organizations that value traffic to their sites. By planning ahead for mobile content, creating designs that work on the desktop and the phone, and building a responsive website using a framework, you can produce a beautiful, functional site that delights your visitors.