Bridging the GapDesigning Rich User Experiences for Mobile, Desktop, andEverything in Between                        An eG...
Table of Contents          Introduction .....................................................................................
The Dream                                                        We’ve all been there before:                             ...
...developing separate versions of the same                                               website for each new device that...
On Being Flexible                                                   The answer lies in the way in which we design with the...
Embracing the FutureBy utilizing the latest HTML5, CSS3, and Javascript techniques,responsive web design allows designers ...
device specific layouts. In essence it is device agnostic.Coupled with fluid grids and flexible images, media             ...
Discretion is AdvisedWhile responsive web design addresses the growingchallenge of multi-device web design, it should be a...
Upcoming SlideShare
Loading in...5
×

Bridging the gap

485

Published on

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?

Published in: Technology, Business
0 Comments
0 Likes
Statistics
Notes
  • Be the first to comment

  • Be the first to like this

No Downloads
Views
Total Views
485
On Slideshare
0
From Embeds
0
Number of Embeds
0
Actions
Shares
0
Downloads
6
Comments
0
Likes
0
Embeds 0
No embeds

No notes for slide

Bridging the gap

  1. 1. Bridging the GapDesigning Rich User Experiences for Mobile, Desktop, andEverything in Between An eGuide by Integration New Media +1 514 871 1333 | Services@INM.com | http://www.INM.com
  2. 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 Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 2
  3. 3. 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.The Reality You’re 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 isn’t feasible, you’re left with two choices: eitheroptimize your solution for one or a handful of devices, while delivering a compromised solution for therest, 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 tothe stakeholders. In this familiar scenario the project begins at the bottom of a long, uphill battle betweentechnological constraints, expectations and budget. Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 3
  4. 4. ...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, let’s provide some context. The Page as a Constraint Borrowed from the world of print design, theterm “page” is used to describe the physical area within which content is placed on a website. The heightand 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 vastmajority of people’s monitors. The number of resolutions at the time was relatively few. With the emergenceof smartphones and mobile browsing, it became necessary to define two sets of fixed screen resolutions, andto switch between them depending on the device. The result is a desktop viewing size, and a mobile viewingsize. Development takes place in two silos, one for mobile, and one for desktop. In essence, two separatewebsites are created with very limited cross over. This makes sense within a limited range of devices. Butwhat happens when more and more devices are added, like for example, an iPad or a netbook? The approachof developing separate versions of the same website for each new device that comes along is a never endinggame. So the question becomes, how can we adapt the design and development process to accommodatetoday’s reality of ever-changing screen resolutions and devices? Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 4
  5. 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.http://www.lacantina.co.nz/v1024px 320px Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 5
  6. 6. Embracing the FutureBy utilizing the latest HTML5, CSS3, and Javascript techniques,responsive web design allows designers and developers toembrace this inherent fluidity from the ground up. As the sizeof the browser window changes, the content can simply reflow,resize and re-position itself on a sliding scale from the smallestphone to the largest desktop computer. For example, on wider By embracing the fluid naturescreens a list of images can be displayed very large and in a row. in which browsers render code,As the browser window size decreases, these same images can it is possible to optimize abe scaled down and presented in a column instead. Buttons single design for a wide rangebecome more prominent, and sidebars are dropped off. Device of screen resolutions.detection and separate stylesheets can be kept to an absoluteminimum because the content is configured based on the sizeof the browser window using a CSS3 technique called a mediaquery. Using media queries, content can be optimized across arange of resolutions, dramatically reducing time spent on http://3200tigres.wwf.fr 1024px 800px 320px http://cleanairchallange.com 1024px 800px 320px Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 6
  7. 7. device specific layouts. In essence it is device agnostic.Coupled with fluid grids and flexible images, media http://www.dolectures.comqueries form the technical backbone of responsiveweb design. By embracing the fluid nature in whichbrowsers render code, it is possible to optimize asingle design for a wide range of screen resolutions,which in turn can be used as a way to implicitly targetspecific groups of devices. Used in conjunction with alimited set of stylesheets and conditional statementsfor older browsers, it is possible to achieve a very highdegree of customization while minimizing the need fordevice-specific coding. These tools, along with a smart,content-focused design strategy, can save time duringdevelopment, while simultaneously “future-proofing”your designs for the inevitable release of new deviceswith 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. 320px Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 7
  8. 8. Discretion is AdvisedWhile responsive web design addresses the growingchallenge of multi-device web design, it should be appliedcarefully, always with the larger business objectives in mind. While responsive web designThere may still be a case to develop device-specific layouts, addresses the growing challengedue 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 businesshave drastically different interface patterns and use cases. objectives in mind.The iPad should be optimized for touch, while netbookusers will have a trackpad and a physical keyboard. Eachdevice can have its own unique characteristics. For example,standard text links are extremely cumbersome to use onan iPad, making larger buttons a much better design choice. This in turn may require a completely differentlayout that simply cannot be accomodated using responsive design. Responsive web design should not be usedas a blanket substitute for device-specific interfaces. Simply making a website responsive doesn’t mean thatit will be usable on every device. Special considerations must be made to accomodate the particularities ofeach device. If done properly, however, it can be an effective technique to provide consistency and fluidity to adesign 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 theway in which content is displayed on the web. In order to provide user friendly web solutions across anever-increasing number devices, we must look beyond device-centric designs and adopt methodologies whichaddress the fundamentally fluid nature of digital media.About this eGuideThis eGuide is the first in a new series of UX-centric pieces looking at how to think innovatively and apply UXbest practices within your organisation.About INMIntegration New Media (INM) helps companies create rich user experiences in both online and offlineenvironments. With projects ranging from website design and rich internet applications through to interactivesales and marketing tools and online libraries, INM has developed solutions for organizations large and small ina variety of different industries. A well-known player for over 20 years, the company offers project consultingand programming services as well as a successful line of products that includes some of thebest-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 Bridging the Gap eGuide: Designing rich user experiences for mobile, desktop, and everything in between 8

×