1. Responsive Design
- How it works & when to use it -

2. 1.
2.
3.
4.
How It Works
Successful Examples
Pro’s & Cons
Conclusion

3. Traditional Technique
Fixed width and center it in the
page. But when thinking
flexibly, you need to translate a
design created in Photoshop into
something more fluid, something
more proportional.

4. What is Responsive Design?
Target
Context = Result

5. Creating Flexible Grid
Target
Context =Result
Main content area: 420px.
Container: 637px.
420 ÷ 637 = 0.659340659.
Move the decimal over two places
to the right, and we get 65.9340659%

6. “Building a flexible grid isn’t entirely about the math.
It’s about becoming context-aware:
better understanding the ratio-based relationships
between element and container.”
-Ethan Marcotte
(http://alistapart.com/)

7. Fluid Content
Images
Video

8. Successful Examples
http://www.hubspot.com
http://www.spotify.com

9. Pros:
Content Updating - Good for sites containing informational content only, sites with few pages, and sites
without any advanced functionality or interactivity (i.e. not an e-commerce site). Site managers can
update information and designs on one website and all versions of that site (i.e. tablet, mini-tablet, large
phone, small phone) are automatically updated
Scales For All Devices – Content, tables, and many other graphical assets will automatically scale depending on
the devices’ screen resolution. No need to place mobile redirect codes on a desktop site

10. Cons:
Negative SEO – Google still looks at a mobile site made with RWD and sees a desktop site. Therefore, the RWD
mobile site doesn’t benefit from Google’s 2011 decision to reward advertisers that send search traffic to
mobile websites
Same Content – Much of the desktop site’s content (copy, images, tables, etc.) doesn’t render correctly on
mobile devices – you need mobile-specific content. Mobile content needs to be more focused since
mobile shoppers are easily distracted. Mobile is a new channel and it needs different content. Would you
want your Facebook page automatically generated from the content on your desktop site?
Same Merchandising – Mobile shoppers behave differently from shoppers sitting comfortably in front of a
computer. A RWD mobile site does not allow a business to offer different promotions for mobile shoppers.
Research reports that many shoppers will turn to a mobile site if they can get something they cannot get
on the regular site
Longer Development Times – Switching a website over to using RWD takes considerable time to develop. It’s
easier to build the site from scratch using RWD, but most sites are already coded.
Slower Load Times – Pages take more time to load on mobile sites using RWD since some content (mentioned
above) was not built for mobile and loads slower. For example, RWD knows how to scales down an image
but does not actually reduce the file size. This results in slower mobile page loads and unhappy mobile
shoppers. Further, true mobile versions of a website contain less code (HTML, CSS, Javascript). They are
made with the full requirements of the specific mobile device in mind, which results in faster page load
times.