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 vs landscape) or pixel density (Apple’s Retina displays vs an old desktop monitor).
FLUID GRIDS Fluid grids enable designers to create ﬂexible multi-column layouts that are based on percentage values, rather than pixels. End result: Designs that stretch and shrink to ﬁt the browser.
FOR MORE INFORMATION www.ri.gov/design/ www.ri.gov/mobile/
STATS ‣ Mobile trafﬁc at RI.gov: 11.38% of all portal trafﬁc 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
RESOURCES ‣ Responsive Web Design by Ethan Marcotte abookapart.com ‣ Luke Wroblewski lukew.com ‣ Josh Clarke globalmoxie.com
A particular slide catching your eye?
Clipping is a handy way to collect important slides you want to go back to later.