There may be some argument
over whether responsive or adaptive designs are better, but in many cases
responsive design is going to be chosen for budgetary purposes (at least
today).
That means designers need
to become familiar with the concepts and some basic guidelines for their
responsive designs.
In the early days of the
internet a website had to work on a monitor. As long as it performed reasonably
well on a laptop screen it would work on every other PC to a reasonable extent.
Devices today range from
those with tiny screens (like a smartphone) right through to huge monitors. The
user experience needs to be catered for on each of these and that’s where
responsive design comes in.
What
is responsive web design?
Responsive web design
(RWD) is a web development approach that creates dynamic changes to the
appearance of a website, depending on the screen size and orientation of the
device being used to view it.
RWD is one approach to the
problem of designing for the multitude of devices available to customers,
ranging from tiny phones to huge desktop monitors.
Responsive Web design is
the approach that suggests that design and development should respond to the
user’s behavior and environment based on screen size, platform and orientation.
Concept
of responsive web design
Responsive design is a way
of developing web properties so that the device they are used on determines the
way that the site will be displayed.
It’s normally done using
the principle “mobile first” – i.e. the experience is defined on mobile
platforms such as smartphones and tablets and then scaled up to larger screens.
The need for this approach
is being driven by the understanding that more and more people are accessing
the mobile web and in many markets now – smartphone access to the net is much
greater than traditional PC access.
Mobile devices offer
different capabilities to desktop/laptop environments too, such as
touchscreens, GPS data, accelerometers, etc. Finally, mobile forces designers
to think simply.
The experience on mobile
is very limited thanks to the screen real estate. Sidebars, adverts, social
media inputs, etc. are difficult, if not impossible to accommodate.
So the mobile experience
needs to be an exercise in simplicity with complexity only being allowed when
the screen real estate allows for it. RWD has potential advantages over
developing separate sites for different device types.
The use of a single
codebase can make development faster, compared to developing 3 or 4 distinct
sites, and makes maintenance easier over time, as one set of code and content
needs to be updated rather than 3 or 4.
RWD is also relatively
“future-proof” in that it can support new breakpoints needed at any time.
Major
principles of responsive web design
There are three main
principles that drive responsive design. Of course, there are other principles
that come into play in certain designs but these are three that bind all
responsive sites:
·
Fluid
grid systems
·
Flexible
text & images
·
Media
queries
Fluid
Grid System:
The grid is a crucial
element for creating a responsive layout. Now, grids aren’t anything new.
Web designers have used
grids for building websites since the beginning. However, in the past, these
grids were fixed width and didn’t lend themselves to support a fluid website
layout.
A fluid grid used for
responsive sites will ensure that the design is flexible and scalable. Elements
will have consistent spacing, proportion, and can adjust to a specific
screen-width based on percentages.
With a fluid grid, users
will have the best experience on whatever screen they view your responsive
website on.
Flexible
Text & Images:
The way to display text
varies depending on what device a user is viewing your site on, but it should
be readable no matter what. On mobile responsive websites, there is an
opportunity to increase font size and line height (the spacing between each
line of text) for legibility.
Flexible text and images
adjust within a website layout width, according to the content hierarchy set
with the CSS (stylesheet). Text can now be legible regardless of the end user’s
device. With a flexible container (within the grid), text can wrap with an
increase in font size on smaller devices.
Flexible images can prove
to be more challenging because of load times on smaller device browsers. But
these images can scale, crop, or disappear depending on what content is
essential to the mobile experience.
Media Queries:
This is code that powers
the flexibility of a layout on responsive websites. Media queries specify the
CSS to be applied accordingly, depending on a device’s breakpoint (for example,
iPhone portrait orientation or iPad landscape orientation, etc.).
Media queries allow for
multiple layouts of a design, which use the same HTML-coded web page.
The idea is that you can
then use a media query to specify when the screen real estate should be
rearranged. You will find that this works best with a “mobile first” approach
where you define what you want on mobile and then scale up from there.
The CSS might look like
this:
@media screen and
(min-width: 480px) { /* .larger screen sizes here.. */ }
You could then define a series of these CSS commands for each “breakpoint”. That’s when each layout becomes broken on a specific screen size.
You’ll need to test
content to see where breakpoints occur and plan them. Eventually, you may find
you can predict breakpoints based on the screen resolution of a device.
Features
of responsive web design
Responsive Web design
requires a more abstract way of thinking. However, some ideas are already being
practiced: fluid layouts, media queries and scripts that can reformat Web pages
and mark-up effortlessly (or automatically).
But responsive Web design
is not only about adjustable screen resolutions and automatically resizable
images, but rather about a whole new way of thinking about design. There are
also few features plus additional ideas which we have to consider in making
responsive web design:
·
Filament group’s responsive images
·
Touch screen and cursors
·
Focusing on content
·
Relevant screen resolutions
Filament
group’s responsive images:
This technique, presented
by the Filament Group, takes this issue into consideration and not only resizes
images proportionately, but shrinks image resolution on smaller devices, so
very large images don’t waste space unnecessarily on small screens.
The JavaScript file
inserts a base element that allows the page to separate responsive images from
others and redirects them as necessary. When the page loads, all files are
rewritten to their original forms, and only the large or small images are
loaded as necessary.
With other techniques, all
higher-resolution images would have had to be downloaded, even if the larger
versions would never be used. Particularly for websites with a lot of images,
this technique can be a great saver of bandwidth and loading time.
This technique is fully
supported in modern browsers, such as IE8+, Safari, Chrome and Opera, as well
as mobile devices that use these same browsers (iPad, iPhone, etc.).
Touch
screens and cursors:
Touch screens are becoming
increasingly popular. Assuming that smaller devices are more likely to be given
touchscreen functionality is easy, but don’t be so quick.
Right now touchscreens are
mainly on smaller devices, but many laptops and desktops on the market also
have touchscreen capability. For example, the HP Touch smart tm2t is a basic
touchscreen laptop with traditional keyboard and mouse that can transform into
a tablet.
Touchscreens obviously
come with different design guidelines than purely cursor-based interaction, and
the two have different capabilities as well. Fortunately, making a design work
for both doesn’t take a lot of effort.
Touchscreens have no
capability to display CSS hovers because there is no cursor; once the user
touches the screen, they click. So, don’t rely on CSS hovers for link
definition; they should be considered an additional feature only for
cursor-based devices.
Focusing
on content:
Content prioritization is one
key aspect to doing responsive design well. Much more content is visible
without scrolling on a large desktop monitor than on a small smartphone screen.
If users don’t instantly
see what they want on a desktop monitor, they can easily glance around the page
to discover it. On a smartphone, users may have to scroll endlessly to discover
the content of interest. Smart content prioritization helps users find what
they need more efficiently.
Relevant
screen resolutions:
As you can see, there is a wide range of resolutions, so neither mobile, neither tablet nor desktop is dominating the market share right now—this tells the designers should consider all of them when thinking about responsive web design.
- 360x640 (small mobile): 22.64%
- 1366x768 (average laptop): 11.98%
- 1920x1080 (large desktop): 7.35%
- 375x667 (average mobile): 5%
- 1440x900 (average desktop): 3.17%
- 720x1280 (large mobile): 2.74%
Just as with device breakdown, we should segment the data by location to match the user demographics of our target audience. It’s also worth catering to resolutions that are gaining popularity, because while some screen sizes are currently not that common, they may be in the future.
This will help responsive
designers craft future proof UX that will work even when the market share
changes.
Considering
performance
Performance can also be an
issue with responsive design. RWD delivers the same code to all devices,
regardless if the piece of code applies to that design or not.
Changes to the design
occur on the client-side, meaning each device — the phone, tablet or computer —
receives the full code for all devices and takes what it needs.
To truly assess the user
experience of a responsive design, do not test your responsive designs only in
the comfort of your own office, on your high-speed connection.
Venture out into the wild
with your smartphone— between tall buildings in a city, in interior conference
rooms or basements, in remote areas with spotty connectivity, in known trouble
spots for your own cell-phone’s network connection — and see how your site
performs in varied conditions.
The goal of many
responsive designs is to give equivalent access to information regardless of
device. A smartphone user does not have an equivalent experience to a desktop
user if download times are intolerable.
Creating
usable experience
Because responsive design
relies on shuffling elements around the page, design and development need to
work closely together to ensure a usable experience across devices.
Responsive design often
turns into solving a puzzle — how to reorganize elements on larger pages to fit
skinnier, longer pages or vice versa. However, ensuring that elements fit
within a page is not enough.
For a responsive design to
be successful, the design must also be usable at all screen resolutions and
sizes. When elements move around the page, the user experience can be
completely different from one view of the site to the next.
It is important that
design and development teams work together not to just determine how the
content should be shuffled around, but to also see what the end result of that
shift looks like and how it affects the user experience.
Browser
& device testing for responsive web design
Make sure a responsive
design layout is compatible with all relevant browsers and retains the
integrity of your user experience & design.
Don’t rely only on
dragging the browser in and out to test a responsive web design for mobile; try
viewing a site on as many physical devices as you can.
Conclusion
Responsive design is a
tool, not a cure-all. While using responsive design has many perks when
designing across devices, using the technique does not ensure a usable
experience (just as using a gourmet recipe does not ensure the creation of a
magnificent meal.)
Responsive design teams have
to create a single site that supports many devices, but need to consider
content, design and performance across devices to ensure usability.
Written By – Umme Amara Shaikh
Social