When creating a web site for multiple screens and devices, many options need to be explored to determine how to create the best web experience while maintaining a consistent and optimal user experience. With the variety of devices used to view the web already, from phones and desktop computers, to netbooks and tablets, this list will only continue to grow.
With so many options, how do you decide?
The speed of technological developments introduces new devices into the market very frequently. While this can be exciting, new capabilities bring new ways to interact with the user, which can make it more difficult to target all the variations. No two projects are ever the same so it often boils down to which options are right for the current needs.
With a recent project here at Teehan+Lax, we decided to start the discussion using a simple visualization and listed different options to examine the pros and cons for each alternative. It was helpful to see how different selections could target the same devices to decide which option or combination of options would work better for the specific project.
Mobile vs. Desktop
When designing for multiple screens, determining a starting point is key. From there, the design can be scaled up or down, adapting the design and flow accordingly. For many years, the 960 grid was sufficient for targeting the most common resolution sizes. However, with the exponential increase in the use of the web on mobile devices, is it better to approach a mobile first strategy?
There are vast differences in the amount of space available for mobile browsing versus desktop browsing; starting with mobile first forces you to decide what’s most important and can therefore impact the design and content strategy greatly.
When thinking beyond the desktop, another consideration for mobile should include whether to add enhancements such as touch gestures. Although, if touch navigation is available, there should also be an alternate call to action such as a button or link in the event that the touch actions are not immediately discoverable by all users. For example, Twitter’s mobile site for the iPad uses a two-column layout that gives the option of swiping the second column to the left to close it; alternatively you can use the back button.
Responsive Web Design vs. Mobile Web Site
With the introduction of Ethan Marcotte’s responsive web design approach, there’s been a flurry of excitement around the idea that one website could target multiple screens. Fluid websites are nothing new but with the introduction of CSS3 media queries, one site can now adapt gracefully between different resolution sizes and respond accordingly to the context being viewed by the user. Fluid grid designs also allow for a consistent multi-screen experience while maintaining one codebase.
While responsive web design is a great alternative to creating a separate desktop and mobile site, it’s not simply about changing fonts and images to fit smaller or larger screens. This concept requires collaboration between designers and developers to determine how to redistribute the elements. Content strategy is also important to determine how content is shifted or even removed based on how each device is used. Even for a single website, upon the initial creation, three to five mockups will be needed to plan the layout for all the different target resolutions. Also, some additional work is required to ensure that older browsers that don’t support CSS3 will degrade gracefully.
A good resource to see responsive web design in action is http://mediaqueri.es.
The main drawback for creating a separate desktop and mobile site would be the need to maintain two sites’ content and codebase. However, this may still be the best option for content heavy sites that require more simplicity or a layout for mobile users that goes beyond shifting and scaling content. Flickr is a great example of how the desktop site includes the whole kitchen sink while the mobile site simplifies the homepage to a basic search and login, while adding additional content in a tabbed structure. Responsive web techniques wouldn’t be the right approach for developing a desktop and mobile design that’s so distinct such as this.
Web app vs. native apps
If you decide to go with a separate desktop and mobile site, there is yet another option to consider: Native apps or web apps?
Native apps are specific to the device and can access the phone’s resources such as the address book, geolocation, and camera. It also doesn’t need to be connected to the internet, although some features may require a connection. Also, it can gain visibility and be monetized through the phone’s marketplace. However, native apps are built in the specific programming language of the device (Objective-C for iPhones, Java for Android for example), which can make it expensive and time consuming to maintain and develop different apps for various devices in a variety of languages. Native apps also require third party approval by the phone’s store, and can be a long process and in some cases, the app does not get approved.
So what’s the verdict?
Going through so many options may feel overwhelming and guess what? There are no right or wrong answers. There are those who would argue that some techniques are better than others but it really boils down to target audience, target device usage, resources, time and budget. Whatever the final strategy may be, one cannot assume that a multi-screen approach is a thing of the future. It is here, now.