RI.gov and Responsive Design

  • 1,190 views
Uploaded on

 

More 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 http://wp.me/p2bnl2-mf
    Are you sure you want to
    Your message goes here
No Downloads

Views

Total Views
1,190
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
9
Comments
1
Likes
2

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 1. RESPONSIVE DESIGN Case Study at RI.gov 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. 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. FOR MORE INFORMATION www.ri.gov/design/ www.ri.gov/mobile/
  • 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. RESOURCES ‣ Responsive Web Design by Ethan Marcotte abookapart.com ‣ Luke Wroblewski lukew.com ‣ Josh Clarke globalmoxie.com