Bridging the Gap

Designing Rich User Experiences for Mobile, Desktop, and Everything in Between

An eGuide by Integration New Media +1 514 871 1333 | [email protected] | http://www.INM.com

Table of Contents
Introduction ............................................................................................................. 3 Being Responsive ...................................................................................................... 4 The Page as a Constraint ............................................................................................ 4 On Being Flexible ...................................................................................................... 5 Embracing the Future ............................................................................................... 6 Discretion is Advised ............................................................................................... 8 About this eGuide .................................................................................................... 8 About INM ................................................................................................................ 8

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between

The Dream

Weve all been there before: You start a new project. It has to be beautiful, easy to use and accessible on a wide variety of devices, from desktop computers to tablets and smartphones. And of course, it has to be done on a limited budget.

The Reality

Youre left with the enormous challenge of providing a solution that satisfies all of these requirements, without costing a fortune.

If developing a custom solution tailored to each device isnt feasible, youre left with two choices: either optimize your solution for one or a handful of devices, while delivering a compromised solution for the rest, or design a less than ideal, lowest common denominator solution which works across all platforms. Neither solution is optimal, and you find yourself in the envious position of explaining these realities to the stakeholders. In this familiar scenario the project begins at the bottom of a long, uphill battle between technological constraints, expectations and budget.

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between

...developing separate versions of the same website for each new device that comes along is a never ending game.

Being Responsive
Responsive web design is a new approach to building websites and web applications first proposed by Ethan Marcotte, that helps to mitigate these challenges. By leveraging the latest web standards, along with careful planning and a fresh perspective it is possible to adapt our methodologies to the constantly evolving web development landscape. It enables organizations to create beautiful user experiences that are optimized for a wide range of devices, while minimizing the need for costly device-specific development iterations. Before we dive into the specifics, lets provide some context.

The Page as a Constraint

Borrowed from the world of print design, the term page is used to describe the physical area within which content is placed on a website. The height and width of the page is set as a constraint, and it varies depending on the device that is being designed for. In the early days of the web, there was only one device that needed to be addressed: the desktop computer. Designers and developers could easily get away with building a single website that fit comfortably on the vast majority of peoples monitors. The number of resolutions at the time was relatively few. With the emergence of smartphones and mobile browsing, it became necessary to define two sets of fixed screen resolutions, and to switch between them depending on the device. The result is a desktop viewing size, and a mobile viewing size. Development takes place in two silos, one for mobile, and one for desktop. In essence, two separate websites are created with very limited cross over. This makes sense within a limited range of devices. But what happens when more and more devices are added, like for example, an iPad or a netbook? The approach of developing separate versions of the same website for each new device that comes along is a never ending game. So the question becomes, how can we adapt the design and development process to accommodate todays reality of ever-changing screen resolutions and devices?

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between

On Being Flexible
The answer lies in the way in which we design with the page as a constraint. In the world of print, the page is something that never changes, its size is set permanently from the beginning of the process and print designers are forced to adapt their designs to fit within these limitations. The page that web designers manage is the browser window itself, which isnt fixed at all. In fact, the browser window can be resized dramatically, allowing for a wide degree of flexibility in how content can be displayed. Traditional fluid layouts are able to accommodate a limited degree of flexibility, however they arent robust enough to satisfy the wide variation of available screen sizes. In order to achieve true flexibility and fluidity across platforms, we look to responsive web design.

The example below uses a traditional fluid layout. Although this technique offers more flexibility than a fixed layout, the design still breaks when viewed at very low resolutions.

http://www.lacantina.co.nz/v

1024px

320px

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between

Embracing the Future

By utilizing the latest HTML5, CSS3, and Javascript techniques, responsive web design allows designers and developers to embrace this inherent fluidity from the ground up. As the size of the browser window changes, the content can simply reflow, resize and re-position itself on a sliding scale from the smallest phone to the largest desktop computer. For example, on wider screens a list of images can be displayed very large and in a row. As the browser window size decreases, these same images can be scaled down and presented in a column instead. Buttons become more prominent, and sidebars are dropped off. Device detection and separate stylesheets can be kept to an absolute minimum because the content is configured based on the size of the browser window using a CSS3 technique called a media query. Using media queries, content can be optimized across a range of resolutions, dramatically reducing time spent on

By embracing the fluid nature in which browsers render code, it is possible to optimize a single design for a wide range of screen resolutions.

http://3200tigres.wwf.fr

1024px

800px

320px

http://cleanairchallange.com

1024px

800px

320px
6

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between

device specific layouts. In essence it is device agnostic. Coupled with fluid grids and flexible images, media queries form the technical backbone of responsive web design. By embracing the fluid nature in which browsers render code, it is possible to optimize a single design for a wide range of screen resolutions, which in turn can be used as a way to implicitly target specific groups of devices. Used in conjunction with a limited set of stylesheets and conditional statements for older browsers, it is possible to achieve a very high degree of customization while minimizing the need for device-specific coding. These tools, along with a smart, content-focused design strategy, can save time during development, while simultaneously future-proofing your designs for the inevitable release of new devices with less common resolutions.

http://www.dolectures.com

Although it was built using responsive design principles, navigating this website on a mobile device could be improved with larger navigation buttons to accomodate touchscreen users and smaller screen resolutions.

Simply making a website responsive doesnt mean that it will be usable on every device.

320px

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between

Discretion is Advised
While responsive web design addresses the growing challenge of multi-device web design, it should be applied carefully, always with the larger business objectives in mind. While responsive web design There may still be a case to develop device-specific layouts, addresses the growing challenge due to the unique ways in which people use certain devices. of multi-device web design, It might not be feasible to develop a responsive layout that it should be applied carefully, makes sense for both netbooks and iPads, both of which always with the larger business have drastically different interface patterns and use cases. objectives in mind. The iPad should be optimized for touch, while netbook users will have a trackpad and a physical keyboard. Each device can have its own unique characteristics. For example, standard text links are extremely cumbersome to use on an iPad, making larger buttons a much better design choice. This in turn may require a completely different layout that simply cannot be accomodated using responsive design. Responsive web design should not be used as a blanket substitute for device-specific interfaces. Simply making a website responsive doesnt mean that it will be usable on every device. Special considerations must be made to accomodate the particularities of each device. If done properly, however, it can be an effective technique to provide consistency and fluidity to a design when viewing across a range of resolutions. Responsive web design is more than leveraging a few new tools, it requires a new way of thinking about the way in which content is displayed on the web. In order to provide user friendly web solutions across an ever-increasing number devices, we must look beyond device-centric designs and adopt methodologies which address the fundamentally fluid nature of digital media.

About this eGuide

This eGuide is the first in a new series of UX-centric pieces looking at how to think innovatively and apply UX best practices within your organisation.

About INM
Integration New Media (INM) helps companies create rich user experiences in both online and offline environments. With projects ranging from website design and rich internet applications through to interactive sales and marketing tools and online libraries, INM has developed solutions for organizations large and small in a variety of different industries. A well-known player for over 20 years, the company offers project consulting and programming services as well as a successful line of products that includes some of the best-known plug-ins for Adobe Director. For more information, please visit http://www.INM.com. Integration New Media, Inc. (INM) 1600 Rene-Levesque Blvd. West, Suite 900 Montreal, QC, H3H 1P9 http://www.INM.com

Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between