bridging the gap

8
Bridging the Gap Designing Rich User Experiences for Mobile, Desktop, and Everything in Between An eGuide by Integraon New Media +1 514 871 1333 | [email protected] | hp://www.INM.com

Upload: inm2

Post on 22-Nov-2014

687 views

Category:

Technology


4 download

DESCRIPTION

With a variety of consumer devices in all different sizes and resolutions, many organizations are creating versions of their site for different platforms or are turning toward native mobile apps as an alternative strategy. This eGuide looks at how responsive web design can help you create websites that work on any device, at practically any resolution. Readers will learn: What responsive design is and why should you consider it for your site? How it works? When would you build a responsive site? What user experience challenges it presents? What technologies are used to create responsive sites? What limitations exist or cautions should you take?

TRANSCRIPT

Page 1: Bridging the gap

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

Page 2: Bridging the gap

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

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

Page 3: Bridging the gap

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

The Reality

If developing a custom solution tailored to each device isn’t feasible, you’re 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.

The Dream

We’ve 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.

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

Page 4: Bridging the gap

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

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, let’s 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 people’s 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 today’s reality of ever-changing screen resolutions and devices?

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

Page 5: Bridging the gap

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

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 isn’t 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 aren’t 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.

320px1024px

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

Page 6: Bridging the gap

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

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.

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

http://3200tigres.wwf.fr

1024px 320px800px

http://cleanairchallange.com

1024px 320px800px

Page 7: Bridging the gap

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

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.

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 doesn’t mean that it will be usable on every device.

http://www.dolectures.com

320px

Page 8: Bridging the gap

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

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. There may still be a case to develop device-specific layouts, due to the unique ways in which people use certain devices. It might not be feasible to develop a responsive layout that makes sense for both netbooks and iPads, both of which have drastically different interface patterns and use cases. 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 doesn’t 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 900Montreal, QC, H3H 1P9http://www.INM.com

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.