RESPONSIVE DESIGN  Case Study at RI.gov            Hillary Hartley                   NIC Inc.
WHAT IS RESPONSIVE DESIGN? ‣   CSS Media Queries ‣   Fluid Grids ‣   Flexible Assets
CSS MEDIA QUERIES Media Queries enable designers to add CSS based on different screen sizes, device orientation (portrait ...
FLUID GRIDS Fluid grids enable designers to create flexible multi-column layouts that are based on percentage values, rathe...
FLEXIBLE ASSETS Flexible assets covers content that is not text, or served up as part of the design by way of CSS. This in...
RI.gov & RESPONSIVE DESIGN ‣ Launched 2012   (Adaptive fixed-width design launched 2011) ‣ Built for mobile first ‣ Mobile i...
FOR MORE INFORMATION www.ri.gov/design/ www.ri.gov/mobile/
STATS ‣ Mobile traffic at RI.gov: 11.38% of all portal traffic   More than double since last year ‣ Market share for smartph...
RESOURCES ‣ Responsive Web Design by Ethan Marcotte  abookapart.com ‣ Luke Wroblewski  lukew.com ‣ Josh Clarke  globalmoxi...
RI.gov and Responsive Design
RI.gov and Responsive Design
RI.gov and Responsive Design
RI.gov and Responsive Design
RI.gov and Responsive Design
RI.gov and Responsive Design
RI.gov and Responsive Design
RI.gov and Responsive Design
Upcoming SlideShare
Loading in...5
×

RI.gov and Responsive Design

1,291

Published on

Published in: Technology, Design
1 Comment
2 Likes
Statistics
Notes
  • 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 http://wp.me/p2bnl2-mf
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
No Downloads
Views
Total Views
1,291
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
Comments
1
Likes
2
Embeds 0
No embeds

No notes for slide

Transcript of "RI.gov and Responsive Design"

  1. 1. RESPONSIVE DESIGN Case Study at RI.gov Hillary Hartley NIC Inc.
  2. 2. WHAT IS RESPONSIVE DESIGN? ‣ CSS Media Queries ‣ Fluid Grids ‣ Flexible Assets
  3. 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. 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. 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. 6. RI.gov & 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.
  7. 7. FOR MORE INFORMATION www.ri.gov/design/ www.ri.gov/mobile/
  8. 8. STATS ‣ Mobile traffic at RI.gov: 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 http://bit.ly/gIqKm9 ‣ 378K iPhones sold per day (By comparison 371K babies born per day worldwide) Source: http://www.lukew.com/ff/entry.asp?1506
  9. 9. RESOURCES ‣ Responsive Web Design by Ethan Marcotte abookapart.com ‣ Luke Wroblewski lukew.com ‣ Josh Clarke globalmoxie.com
  1. A particular slide catching your eye?

    Clipping is a handy way to collect important slides you want to go back to later.

×