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 | Services@INM.com | 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 2

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: 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.


...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, 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?


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/v

1024px 320px


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 By embracing the fluid nature
screens 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 a
be scaled down and presented in a column instead. Buttons single design for a wide range
become more prominent, and sidebars are dropped off. Device of screen resolutions.
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 800px 320px

http://cleanairchallange.com

1024px 800px 320px


device specific layouts. In essence it is device agnostic.
Coupled with fluid grids and flexible images, media http://www.dolectures.com
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.

320px


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 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 900
Montreal, QC, H3H 1P9
http://www.INM.com


Bridging the gap

Recommandé

Recommandé

Contenu connexe

Dernier

Dernier (20)

En vedette

En vedette (20)

Bridging the gap