Crafting a Mobile Web Strategy

Douglas Borenstein is a consultant in Slalom’s User Experience Practice. He specializes in visual design and user interface development with an emphasis on mobile projects.

Douglas Borenstein is a consultant in Slalom’s User Experience Practice. He specializes in visual design and user interface development with an emphasis on mobile projects.

There are many benefits to optimizing a website for mobile and non-traditional[1] devices. The primary advantage to optimizing a site is to create a better customer experience—75% of people prefer a mobile optimized site, while 96% say they have been to sites that are not optimized for mobile.[2]  Customers won’t return to a site, recommend a brand, or make purchases if they have a negative experience. While more than half of the Fortune 500 companies have a mobile app, less than 30% have optimized their site for mobile.[3] This presents a huge opportunity for those companies that consider their customers’ needs and optimize their sites to present the best experiences.

While apps can be an important part of a mobile strategy, this paper focuses on the mobile web aspect due to the web’s presence on so many devices. Mobile web, which is simply the web on non-PC or small-screen devices, introduces many new challenges and may cause companies to rethink some of their online goals and strategies. But having a mobile web strategy and incorporating it into all projects will ultimately create better experiences for everyone and lead to success in the form of sales, conversions, and an improved brand impression.

Baby Steps Are Okay

The first consideration when crafting a mobile web strategy is determining where to start. While it would be great to completely redesign sites from scratch, this often isn’t possible due to time, budget, and other constraints. Rather than wait for the perfect opportunity to redo the site (which rarely occurs), make incremental updates whenever and wherever possible.

For example, since most people view emails on a mobile device, optimizing emails as well as pages the email links to is a great starting point. Another place to optimize would be product or article pages, especially if those links are being shared via email or social media, as customers are consuming this content from their mobile devices. If there are new pages—stand-alone pages or microsites for new products, promos, or advertisements—those can be optimized and created in a mobile friendly way as well. Use analytics to determine which pages users are accessing from mobile devices and make sure those are optimized. The starting point doesn’t matter; the key is working toward becoming fully and permanently optimized.

Be Wary of the M-dot Approachcell

­There are multiple options for publishing mobile content, however the two biggest are m-dot and responsive. M-dot refers to the creation of a separate mobile site, typically m.yoursite.com, and content may or may not be the same as the full site. A responsive site is built using flexible, fluid techniques so the same content is presented in a tailored view for different devices. The responsive approach conforms to the One Web[4] theory recommended by the W3C as a best practice for mobile devices. The m-dot approach, however, raises concerns. Redirecting to an m-dot URL will cause SEO and performance issues. It requires separate sites and code bases, each tailored for a specific type of device, which requires a significant amount of work and overhead to create and maintain. When links to the m-dot site are shared, users may end up seeing the wrong version of the site.

Another problem with m-dot sites is that they often do not have the full content and features of the regular site, so users are forced to click “View Full Site” links and to get directed to a site that is not optimized for their devices in order to complete tasks. Users expect the same content regardless of what device they’re on, so if features are removed, it does them a disservice. Due to these concerns, the rest of this post will focus on responsive design as a mobile strategy.

Define a New Process

PROCESSImplementing a responsive design causes workflow and process changes as well as a new way of thinking about the web. The traditional waterfall approach of planning, wireframes, comps, code, test, and launch does not make sense when crafting a responsive design for a variety of devices. It is costly and time consuming to create visual design comps for every supported device because a responsive design will never be pixel-perfect on every device. Instead, a flexible, agile approach is a much more successful workflow for responsive designs.

First, create a content inventory and outline the user goals and stories. There is no reason to think about specific devices at this point, since a successful responsive site will support all of them. Once the content is complete, the next step is to design and prototype. A common starting point is to sketch wireframes and low-fidelity designs. From there, it is easy to prototype in the browser. This makes it easier to see how the layout responds on different devices and to plan for breakpoints. It also mitigates the need for as many visual design comps. It is important to continuously test, iterate, and refine these prototypes as they are built. During these build cycles, more visual design elements are introduced and developed, and a design pattern library is built. The most important things are to get the designs in the browser and to continuously test and iterate.

Determine a Content Strategy

At the beginning of each project a content strategy must be determined. Mobile first is a popular strategy today because it focuses on small screens and mobile users and forces the prioritization of key tasks and content. While mobile first recommends streamlining tasks and content, it’s important to remember that mobile is not the lite version of a site. If content is not important enough to be displayed on the mobile version of the site, is it important enough to be on the site at all?

Traditional mobile-use cases such as location-based, time-wasting or short-duration tasks might exclude users. Providing the full features and content to all users will better serve everyone, regardless of device. Another strategy is the content everywhere approach. This methodology states that as devices and channels multiply, content should go more places, more easily. It is a philosophy to stop creating single-purpose content and make something that’s future-ready, flexible, and reusable. Since content will go anywhere and everywhere it should be appropriate for all devices and audiences.

Choose a Navigation Patternnavigation

Navigation is a key aspect of any website. However, it is often one of the more difficult aspects in a responsive design. Brad Frost created a great library of responsive patterns for both simple[5] and complex[6] navigation. This library is a great reference of navigation options and provides the pros and cons of each approach. It is also essential to note that well-designed navigation will often look different on different types of devices and will use media queries to accomplish these different views. Changing the navigation presents an opportunity to revisit content and make sure all of the navigation options presented make sense and add value.

Update Media

Another important consideration for a responsive design is media. This includes text, images, videos, and tables. Text is inherently responsive and will flow to fill its container. However, consider font sizes and make sure they are an appropriate size on all screens; an optimal length is 50-75 characters per line.[7] Images are a bit more difficult. While it is possible to use CSS to simply scale your images, there are ways to do more in terms of image optimization and multiple techniques[8] exist. Providing slightly different images for different sizes and resolutions can have performance benefits and can allow more visual control or art direction to present the best image. Finally, if there are features such as carousels or thumbnails, consider the effectiveness on smaller screens or if a single image should be used instead.

As higher-resolution and retina screens become more common, they will need to be considered as well. Videos can be scaled easily using CSS. Finally tables often present headaches because of the number of columns that must be resized and fit into smaller screens. The Filament Group has come up with one solution[9] to show important data on small screens and all data on larger screens, while allowing users to customize the view. This isn’t the only option, and the key is to consider all the media on the site and make sure it’s accounted for on all screens.

Don’t Forget About Adsads

Advertisements are probably the most difficult aspect of a responsive design because they are often created and served by third parties even though the IAB standard sizes suggest a fixed approach. One solution is to change the model in which ads are sold at the enterprise level, charging across all designs and sizes, rather than for a particular ad unit. This solution allows an appropriate ad size to be chosen based on the device.

In cases when this isn’t possible, responsive techniques allow ads to be resized or moved on the page to ensure as much success as possible.[10] Additionally, it might make sense to use simple ads, such as text or images on mobile devices instead of rich media or popover ads. Since ads are often a key part of sites, accounting for them should be important to mobile web strategy.

Time to Code

A responsive design can take advantage of new techniques and technologies including HTML5 and CSS3.  HTML5 is primarily used to markup and outline content while CSS3 is used to style web pages. Semantic markup is important because it provides structure to the content. In addition, the content is likely to display better on devices that are not capable of advanced design and functionality, such as feature phones, e-readers, or smart appliances. HTML5 also introduces new functionality such as audio/video support, Bluetooth, gyroscope, and location-based services.

Using CSS for presentation has key benefits. First it allows you to present content using fluid design principles, allowing content to flow and fill the available space on any device—the first step in a responsive design. A new concept introduced in CSS3 is media queries that allow pages to be tailored via variables (ex: device width). Designers can specify things such as one-column on small screens or two-columns on larger screens.

The viewport meta tag is also a very powerful tool in responsive designs. It allows developers to set the initial page zoom or specify that the page width adapts to the device width[11] and whether the user should be able to zoom. Unfortunately, if used incorrectly, the viewport tag can introduce more problems than it solves such as zooming in to a portion of the page and preventing users from adjusting their view. Overall, these techniques allow sites to be built in such a way that the content is accessible to users regardless of the device used to access it.

Select Appropriate Breakpoints

CSS3 media queries allow a site to be tailored for different devices. While it seems simple to select breakpoints based on a site’s most common devices and resolutions, this would be shortsighted. Instead, breakpoints should be chosen in a more natural fashion. Whenever an aspect of the site fails (be it text, images, navigation, etc.) a breakpoint should be added. This is a more future-friendly approach, as today’s popular devices and resolutions may not exist in the future.

Additionally, there are options when selecting the units when implementing breakpoints—pixels and Ems. Using pixels is a device-based approach; 360px for mobile, 720px for tablets, and 1080px for desktop. Taking the natural breakpoint approach allows you to specify based on content using Em units, which are based on font-size. If users set a custom font size or zoom, the site will work just fine when the breakpoints are done via Ems, but not necessarily if they are specified in pixels. The best approach is to create content- and design-based breakpoints in Ems and insert one whenever things start looking awkward.

Consider Performance

A responsive design needs to be responsive in terms of performance as well as style and design. With users accessing sites on the go and over cellular networks, speed is even more important. Users expect sites to load as fast on mobile devices as desktops. After 4-6 seconds, they abandon the page and conversions go down.[12]  When implementing a responsive design, test it on slower networks, and optimize the number of http requests and file sizes. Also be careful using third-party libraries or frameworks if they are not necessary, as they can become bloated with unused features. Be sure to make site performance a part of the strategy so users are able to quickly access content, complete tasks, and are not left frustrated and waiting on pages to load.

Final Thoughts

Organizations recognize the need to make their content available on multiple devices. The one-web philosophy and responsive design emerge as best practices to help companies accomplish this goal. Slalom is committed to staying at the forefront of these emerging techniques. By working with companies to develop and implement strategies that address today’s challenges, it enables them to capitalize on these opportunities. The concepts I discussed represent just some of the choices available when crafting a mobile strategy. The most important thing is to examine your process, workflow, and content to determine the strategy that works best for your organization.


[1] Televisions, video game systems, smart appliances, cars and anything else that has or may have an Internet connection and web browser.

About dborenstein
Douglas Borenstein is a consultant in Slalom’s User Experience Practice. He specializes in visual design and user interface development with an emphasis on mobile projects. Douglas has a passion for emerging techniques and technologies as well as crafting compelling designs and experiences. You can email him at douglasb@slalom.com and follow him on Twitter at twitter.com/dborenstein.

2 Responses to Crafting a Mobile Web Strategy

  1. I enjoy what you guys tend to be up too. Such clever work and exposure!
    Keep up the awesome works guys I’ve added you guys to my personal blogroll.

  2. Mickey Mixon says:

    Superb! This is so new to me. Thanks for posting I can get the needed information.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s

%d bloggers like this: