Responsive Design Presentation
-
Upload
eugen-figursky -
Category
Internet
-
view
241 -
download
1
Transcript of Responsive Design Presentation
More Statistics
In 2011, there were 835 million smartphone users, 5.6 billion feature phone users (Business Insider)
Global internet usage will more than double by 2015, and most of these users will be mobile
In December 2011, 47.6% of the total mobile audience in the U.S. used apps, 47.5% used mobile browsers; in Europe
What exactly is RWD?
“Responsive Web Design (RWD) is an approach to web design in which a site is crafted to provide an optimal viewing experience—easy reading and navigation with a minimum of resizing, panning, and scrolling—across a wide range of devices (from desktop computer monitors to mobile phones)”
Wikipedia
Responsive is NOT Mobile
Respond to environments
Different devices, same content
Single deliverable, many destinations
Layout Types
Adaptive - Fixed width layout Responsive - Fluid width layout Mixed - Fixed/Fluid width layouts (fixed for large & medium, fluid for small)
Adaptive Layout
Fixed width Width changes depending on screen resolution Breakpoints Less flexibility
Breakpoints
Standard 1600+ (large desktop) 1200 (desktop) 980 (tablet landscape) 760 (tablet portrait) 480 (mobile landscape) 320 (mobile portrait)
Custom 1400 1100 860 600 380 240
Examples
http://www.warface.co.uk http://www.bloominteriordesign.com.au http://2011.dconstruct.org http://foodsense.is http://www.anderssonwise.com http://www.cacaotour.com/
Resources
http://cssglobe.com/post/5914/90-new-and-high-quality-photoshop-web-layout-tutorials
http://elliotjaystocks.com/blog/a-better-photoshop-grid-for-responsive-web-design/
http://www.smashingmagazine.com/responsive-web-design-guidelines-tutorials/
http://www.smashingmagazine.com/2011/07/22/responsive-web-design-techniques-tools-and-design-strategies/
http://blog.teamtreehouse.com/beginners-guide-to-responsive-web-design