HTML and CSS Reference
In-Depth Information
TERMINOLOGY
CONFUSION!
Yo u w e re p ro b a b l y w of w e d w h e n yo u i r s t re a d t h e d e l i c i of u s b u z z w of rd - l a d e n t i t l e of f t h i s c h a p t e r. I i n c l u d e d
both “responsive design” and “adaptive design” because you'll probably hear these two terms and vari-
ous other word combinations to describe the techniques this chapter covers in your travels around the
interwebs.
In fact, I was confused about when to use which term. So, after doing a bit of research on the subject, the
best distinction between “adaptive” and “responsive” that I came up with is as follows:
Responsive design
refers to the use of technologies like media queries and flexible units to create flex-
ible web page/app layouts that are optimized to suit different-sized viewports.
Adaptive design
is pretty much another term for “progressive enhancement,” which of course was
deined in Chapter 1, and examples have been shown throughout the topic. Adaptive design refers to
any design that allows a website to adapt and provide an acceptable experience in browsers of different
abilities. You could think of responsive design as a subset of adaptive design.
Yo u ' l l a l s o h e a r t h e t e r m “ m o b i l e w e b ” q u i t e a l o t , e s p e c i a l l y f ro m m a n a g e r t y p e s ; i t 's u s e d t o d e s c r i b e t h e
web created for mobile devices, or some such thing. I recommend that you stay away from this term as
much as possible.
Designer and all-round “good bloke” Stephen Hay summed it up nicely when he said:
“There is no mobile
web. There is only the web, which we view in different ways. There is also no desktop web. Or tablet web.
Thank you.”
Creating different sites for different devices is not really the right way to think about accessing web content;
you should strive to optimize the same content for different devices.
A better way to think about “mobile” is a state of being rather than a device. When users are mobile, they
are more likely to be using various devices to browse the web, have less bandwidth available, and be inter-
ested in different information and functionality. This leads to a separate set of requirements for people who
are stationary and those who are on the move. Therefore, different versions of your site will require differ-
ent UX work.
