RI.gov and Responsive Design

RESPONSIVE DESIGN Case Study at RI.gov

Hillary HartleyNIC 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 vs landscape) or pixel density (Apple’s Retina displays vs an old desktop monitor).

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.

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)

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.

FOR MORE INFORMATION

www.ri.gov/design/www.ri.gov/mobile/

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

RESOURCES

‣ Responsive Web Design by Ethan Marcotteabookapart.com

‣ Luke Wroblewskilukew.com

‣ Josh Clarkeglobalmoxie.com