Responsive webdesign has become a catch-all term for making
your website work well at low resolutions.

Smartphones revolutionized the mobile web, and tablets are
throwing another wrench into the gears with their
growing popularity. With all things considered, a website today
could be experienced on a low resolution smartphone, a medium
resolution tablet, or a high resolution desktop or laptop. When
you throw retina displays into the mix, the number of potential
screen sizes is dizzying. Ideally, your website will look and
function gracefully on all of the above, at any
resolution.

Responsive webdesign in itself is the process of making a
website work on very small screens, very large screens, and at
any resolution in between.

Over the last few years, the industry has collectively
developed a shortlist of common best practices. Many of these
practices focus on retrofitting websites intended for high
resolution down to lower sizes. Others start at mobile and work
up to the larger viewports, optimizing as needed. All of these
practices can generally be categorized as either responsive or
adaptive layouts.

Responsive vs adaptive layouts

Responsive layouts generally perform better than adaptive
layouts, but in some cases (complex webapps for example) an
adaptive approach could serve users better. Either way, the
goal is to make your website always look its best at the
desired resolution.

Most people choose to use media queries to do this, as “http://caniuse.com/css-mediaqueries” class=”external” rel=
“nofollow”>they are rock solid unless you need support for
IE8 or below. For those of us who still have an audience in IE6
– 8 though, Scott Jehl has created a “https://github.com/scottjehl/Respond” class=”external” rel=
“nofollow”>JavaScript polyfill called Respond.js that will
make things work.

Before, many webdesigners had minimal communication with
developers until the handoff. Now though, designers and
developers have to work together through both the design and
development process in order for everything to go smoothly.
From user analytics to what can or can’t be rearranged when
changing viewports—designers and developers are closer than
ever, if not the same person. If you’re looking for inspiration
as to what responsive or adaptive layouts look like, “http://mediaqueri.es/” class=”external” rel=
“nofollow”>MediaQueri.es is a popular webdesign gallery
that displays four viewports of a website.

Adaptive layout design & development

When the idea of responsive webdesign first started gaining
ground, adaptive techniques dominated for a while. It’s easier
to transition into designing and developing for these layouts,
although they require more work than their responsive
conterparts. This is also the route many people take when
retrofitting an existing website to be mobile friendly. Because
of the nature of adaptive layouts, they give much more control
over the design of the website. You only have to design for
specific viewports, and browsers only display the highest one
that will fit in it’s width. These layouts are the ones that
“snap” when adjusting as you resize your browser window. In
fact if you resize your window to be smaller than 1024 pixels,
you’ll see this sudden change I’m talking about as the layout
of this website adjusts to focus on a medium resolution
viewport.

Adaptive design

When designing for an adaptive development approach, the work
is fairly easy. Before responsive webdesign became a thing, you
simply designed one layout and then developed it. Now, you’ll
design for multiple viewports, and develop them. Generally,
it’s easier to start at low resolution viewports and work your
way up. If you start with high resolution viewports and go
down, things could end up a little…compact. And by the time you
reach mobile, cluttered.

The number of viewports you design for is entirely up to you
and the developer, work out a battle plan based on your users.
If current site analytics show users mostly using low and
medium resolution viewports, plan for those. You want at least
three: one for low resolution viewports (smartphones), medium
resolution viewports (tablets), and one for high resolution
viewports (desktops and laptops). Ideally, planning for six is
the standard, having a high and low resolution layout for each
of the three viewports listed above. However, having too many
more than that will make the development and maintenance too
much to handle, so be wary.

Adaptive development

Developing an adaptive layout is actually quite simple as well.
Assuming you’ve worked with the designer (or are the designer)
from the get-go it’s just like developing a traditional
website. You’ll start by developing the site at a mobile low
resolution viewport. Once you get that done, we’ll use media
queries to expand the layout for higher resolution viewports.
Below are low, medium, and high resolution viewport media
queries:

/* Mobile low and high resolution viewports */ @media (min-width: 320px) { ... } @media (min-width: 480px) { ... }

/* Tablet low and high resolution viewports */ @media (min-width: 768px) { ... } @media (min-width: 1024px) { ... }

/* Desktop low and high resolution viewports */ @media (min-width: 1080px) { ... } @media (min-width: 1440px) { ... }

This is where the “snap” comes from in the adaptive approach.
Since we’re targeting multiple common viewport resolutions,
going from one to the other when resizing the window may cause
the layout to jump. As I mentioned before, adaptive design
& development is only highly useful for retrofitting or for
complex webapps. Designing and developing for this many layouts
for independent viewports is much more of a hassle if it isn’t
needed.

Responsive layout design & development

As of today, responsive design and development is the de-facto
approach to use. While it offers less control over the layout
compared to an adaptive approach, it’s much less work to
implement and maintain as you technically only have one layout.
It’s also more customized for the website too, and this is the
key selling point. You’ll be able to make your own breakpoints
based upon when your design breaks or doesn’t look as intended.

Responsive layouts also include fluid layouts. Before
responsive webdesign caught on, fluid systems were popular –
layouts using percentages for widths. While they certainly
worked well in most cases, that was before we had smartphones
and tablets. Now, most fluid layouts are augmented by media
queries at very low and very high resolutions. Otherwise you
could end up with highly compact or immensely large layouts.

Responsive design

While you have a very simple guide to follow with adaptive
design, responsive design isn’t so clear cut. There is heated
debate that designing in the browser is the best way
to go about it—designing and developing at the same time. Since
you’re essentially going to take all viewports into
consideration when designing, there is more work involved on
the design side. Ideally, we want to keep the viewports in
mind, but not design for any particular one. If possible, try
to meet at a middle ground; Focus on mid resolution viewports
while keeping in mind the layout will need to adjust for lower
and higher resolutions later.

It’s exceedingly important to use existing user analytics if
you have them. If your site already has analytics that
demonstrate your audience primarily reads from low resolution
viewports, design with a focus on those. Target your
audience, even if that means ignoring some of the best
practices out there. In the end, your website is going to be
serving them, not the people aggregating these ‘best’
practices.

Responsive development

Once the design phase is complete, development is where the
real fun begins. As mentioned before, if you have analytical
data of your typical audience, start there. Once you get your
layout developed, you’ll use media queries to make it
responsive. Instead of defining set viewports though, you’ll
instead manually resize your browser until the layout breaks.
When that happens, that is your breakpoint width—add a media
query to fix the break in design and continue on resizing.
Ideally, you’ll be doing this from a high resolution device so
you can see all viewports. Once you ensure you have support for
low and high resolution viewports, move on to testing.

Custom or mixed layout types

Rarely, You may encounter a website that uses a custom
solution, such as WebdesignerDepot. Generally speaking, the
majority of the web falls into either the responsive or
adaptive groups as outlined above, but sometimes people get
creative and make their own solution. WebdesignerDepot does so
by starting with the standard low, medium, and high
breakpoints, then supplementing as needed inbetween when the
layout breaks. On top of that, the layout is also fluid in
nature up to a set max resolution. With this in mind, get
creative and build something that breaks the norm!

Browser testing responsive and adaptive websites

Unfortunately, there really isn’t any good solution to browser
testing these layouts yet. The best way to go about
testing is to do it manually: loading up the page on your
phone, tablet, laptop, and anything else around. You can also
use a viewport spoofer in your browser if it supports such an
extension. “https://chrome.google.com/webstore/detail/ripple-emulator-beta/geelfhphabnejjhdalkjhgipohgpdnoc”
class=”external” rel=”nofollow”>Ripple Emulator is an
extension I use in chrome to test some low resolution
viewports. While it’s certainly inconvenient to manually test
on devices, it gives a more accurate impression of the
functionality your site has. UI that looks alright on an
emulator, may actually perform quite poorly on an actual
device.

In conclusion

As extensive as this article is, this is simply a primer on the
subject of layout types. There is a lot of information about
responsive webdesign methods not included in this article;
Optimizing UI elements & typography, responsive images
& media, device pixel ratios, and much more isn’t explained
here. However, there are plenty of sources for such knowledge,
in much more information dense forms. Since the idea of
responsive webdesign came around, we’ve contributed to an
exceedingly vast wealth of knowledge on the subject. I hope by
explaining the difference between layout types here, you’ll be
able to better have a handle on the idea of a responsive web…
without getting lost down the rabbit hole.

The community is constantly creating new techniques and
constructing creative solutions to problems we’re only just
starting to encounter. So while there is a vast wealth of
information available about responsive webdesign out there,
it’s a concept still in it’s infancy. While best practices and
common use cases are easy to conform to, being creative and
paving your own solution is always encouraged. If you have any
tips or suggestions for those of us just getting into, or
extending our knowledge of responsive webdesign and
development, spark a discussion below!

Featured image/thumbnail, uses “http://www.shutterstock.com/pic-174310718/stock-vector-horizontal-conceptual-illustration-of-responsive-web-design-with-a-laptop-a-tablet-and-a-smart.html”
class=”external” rel=”nofollow”>responsive image via
Shutterstock.

<pre><code class="language-css">p { color: red }</code></pre>