Your SlideShare is downloading. ×
  • Like and Responsive Design
Upcoming SlideShare
Loading in...5

Thanks for flagging this SlideShare!

Oops! An error has occurred.


Now you can save presentations on your phone or tablet

Available for both IPhone and Android

Text the download link to your phone

Standard text messaging rates apply and Responsive Design



Published in Technology , Design
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • Hello World ! Do you know that, under certain circumstances, your competitor can be your partner ? Look for example Google and B②B Moon Day ! They are supposed to be one competitors' and your competitor as well because they are promoting what one like you would like to promote as well ! But who is B②B Moon Day ? Want to know more ? It is very easy: Just try this: Cut and paste B②B Moon Day in you favorite search engine !… Then visit
    Are you sure you want to
    Your message goes here
No Downloads


Total Views
On SlideShare
From Embeds
Number of Embeds



Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

    No notes for slide


  • 1. RESPONSIVE DESIGN Case Study at Hillary Hartley NIC Inc.
  • 2. WHAT IS RESPONSIVE DESIGN? ‣ CSS Media Queries ‣ Fluid Grids ‣ Flexible Assets
  • 3. CSS MEDIA QUERIES Media Queries enable designers to add CSS based on different screen sizes, device orientation (portrait vs landscape) or pixel density (Apple’s Retina displays vs an old desktop monitor).
  • 4. FLUID GRIDS Fluid grids enable designers to create flexible multi-column layouts that are based on percentage values, rather than pixels. End result: Designs that stretch and shrink to fit the browser.
  • 5. FLEXIBLE ASSETS Flexible assets covers content that is not text, or served up as part of the design by way of CSS. This includes: ‣Images ‣Video ‣Object / Javascript / iFrames (example: an embedded YouTube clip)
  • 6. & RESPONSIVE DESIGN ‣ Launched 2012 (Adaptive fixed-width design launched 2011) ‣ Built for mobile first ‣ Mobile isn’t the light version. Mobile is the website. ‣ Uses Fluid grids, flexible assets and CSS media queries ‣ No server side detection ‣ Entire design done without development resources* * With the exception of some really awesome javascript written by the lead developer.
  • 8. STATS ‣ Mobile traffic at 11.38% of all portal traffic More than double since last year ‣ Market share for smartphones / mobile devices will eclipse desktop sales this year Source: Morgan Stanley Research ‣ 378K iPhones sold per day (By comparison 371K babies born per day worldwide) Source:
  • 9. RESOURCES ‣ Responsive Web Design by Ethan Marcotte ‣ Luke Wroblewski ‣ Josh Clarke