RI.gov and Responsive Design
-
Upload
hillary-hartley -
Category
Technology
-
view
106 -
download
2
description
Transcript of RI.gov and Responsive Design
![Page 1: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/1.jpg)
RESPONSIVE DESIGN Case Study at RI.gov
Hillary HartleyNIC Inc.
![Page 2: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/2.jpg)
![Page 3: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/3.jpg)
![Page 4: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/4.jpg)
![Page 5: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/5.jpg)
![Page 6: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/6.jpg)
WHAT IS RESPONSIVE DESIGN?
‣ CSS Media Queries
‣ Fluid Grids
‣ Flexible Assets
![Page 7: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/7.jpg)
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).
![Page 8: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/8.jpg)
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.
![Page 9: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/9.jpg)
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)
![Page 10: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/10.jpg)
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.
![Page 11: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/11.jpg)
![Page 12: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/12.jpg)
![Page 13: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/13.jpg)
![Page 14: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/14.jpg)
FOR MORE INFORMATION
www.ri.gov/design/www.ri.gov/mobile/
![Page 15: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/15.jpg)
STATS
‣ Mobile traffic at RI.gov: 11.38% of all portal trafficMore 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
![Page 16: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/16.jpg)
![Page 17: RI.gov and Responsive Design](https://reader034.fdocuments.in/reader034/viewer/2022042814/54c7be0d4a7959ea488b4595/html5/thumbnails/17.jpg)
RESOURCES
‣ Responsive Web Design by Ethan Marcotteabookapart.com
‣ Luke Wroblewskilukew.com
‣ Josh Clarkeglobalmoxie.com