Your SlideShare is downloading. ×
0
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
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
RI.gov and Responsive Design
Upcoming SlideShare
Loading in...5
×

Thanks for flagging this SlideShare!

Oops! An error has occurred.

×
Saving this for later? Get the SlideShare app to save on your phone or tablet. Read anywhere, anytime – even offline.
Text the download link to your phone
Standard text messaging rates apply

RI.gov and Responsive Design

1,254

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,254
On Slideshare
0
From Embeds
0
Number of Embeds
3
Actions
Shares
0
Downloads
10
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

×