Responsive design


Published on

Published in: Technology, Design
  • Be the first to comment

  • Be the first to like this

No Downloads
Total views
On SlideShare
From Embeds
Number of Embeds
Embeds 0
No embeds

No notes for slide

Responsive design

  1. 1. Responsive Design - How it works & when to use it -
  2. 2. 1. 2. 3. 4. How It Works Successful Examples Pro’s & Cons Conclusion
  3. 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. 4. What is Responsive Design? Target Context = Result
  5. 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. 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 (
  7. 7. Fluid Content Images Video
  8. 8. Successful Examples
  9. 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. 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.