![Page 1: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/1.jpg)
Web Design Industry Overview Presenter: Erikk Ross ([email protected])
![Page 2: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/2.jpg)
• Mobile Devices • Responsive Web Design • Flat Design • Fixed Header Bars • Minimalist Landing Pages • Infinite Scrolling • Single Page Design • Full Screen Photography
![Page 3: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/3.jpg)
Mobile Devices
![Page 4: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/4.jpg)
Flickr: Roberrific, sucelloleiloes, minitechnet, IQ computer services
![Page 5: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/5.jpg)
1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion in
2013. (Gartner) 64% of mobile phone time is spent on apps
(Nielsen 2012) 1 in 8 pageviews are from mobile devices Over 400 million smartphones in the US alone at
the end of 2011 Apple has paid developers $5 billion Tablet sales were over 119 million in 2012 and
are expected to be 370 million in 2016 (Gartner 2012)
![Page 6: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/6.jpg)
Mobile web will be bigger than desktop Internet use by 2015. --Morgan Stanley
![Page 7: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/7.jpg)
Responsive Web Design
![Page 8: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/8.jpg)
How do you design a web site that works well on all devices?
![Page 9: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/9.jpg)
![Page 10: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/10.jpg)
![Page 11: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/11.jpg)
![Page 12: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/12.jpg)
http://www.anderssonwise.com/ http://css-tricks.com/
![Page 13: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/13.jpg)
A flexible, grid-based layout Flexible images and media Media queries, a module from the CSS3
specification.
![Page 14: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/14.jpg)
Responsive Web Design by Ethan Marcotte
157 pages $9 for the e-book www.abookapart.com Go buy it now, I’ll wait
![Page 15: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/15.jpg)
Frameworks do all of the hard work for you
Bootstrap Foundation
![Page 16: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/16.jpg)
Ethan Marcotte’s article that coined the term http://www.alistapart.com/articles/responsive-web-design/
Responsive Web Design, the book http://www.abookapart.com/products/responsive-web-design
Fluid Images, by Ethan Marcotte (Chapter 3 of the book) http://www.alistapart.com/articles/fluid-images/
Fluid Grids, by Ethan Marcotte http://www.alistapart.com/articles/fluidgrids/
Responsive Web Design, another article by Ethan Marcotte http://www.netmagazine.com/features/responsive-web-design
CSS3 Media Queries http://webdesignerwall.com/tutorials/css3-media-queries
Mediaqueries.es, a list of sites using Responsive Web Design techniques http://mediaqueri.es/
Recorded Presentation on Responsive Web Design by Erikk Ross http://er155.aisites.com/2013/07/presentation-responsive-web-design/
![Page 17: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/17.jpg)
Flat Design
![Page 18: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/18.jpg)
Function over style. Moving away from skeuomorphism. Skeuomorphism = making a digital element
reflect it’s real life counterpart.
![Page 19: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/19.jpg)
![Page 20: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/20.jpg)
![Page 21: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/21.jpg)
![Page 22: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/22.jpg)
![Page 23: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/23.jpg)
![Page 25: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/25.jpg)
Flat Design Examples http://fltdsgn.com/
What is Flat Design http://gizmodo.com/what-is-flat-design-508963228
Flat Design: An In-Depth Look http://www.awwwards.com/flat-design-an-in-depth-look.html
Has Flat Design Made Our Sites Too Simple? http://www.webdesignerdepot.com/2013/06/has-flat-design-made-our-sites-too-simple/
![Page 26: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/26.jpg)
Fixed Headers
![Page 27: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/27.jpg)
![Page 28: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/28.jpg)
Fixed header that is always visible at the top of the page.
Social Networking sites, blogs CSS
position: fixed
![Page 29: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/29.jpg)
http://www.fullstopinteractive.com/ http://robedwards.org/ http://ryanscherf.net/
![Page 30: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/30.jpg)
Minimalist Landing Pages
![Page 31: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/31.jpg)
Generally geared towards sites that sell products.
![Page 32: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/32.jpg)
http://pictopro.com/ https://www.tumblr.com/ http://www.giftrocket.com/
![Page 33: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/33.jpg)
Infinite Scrolling
![Page 34: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/34.jpg)
No more paging of search results. Examples:
Yahoo
![Page 35: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/35.jpg)
Single Page Design
![Page 36: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/36.jpg)
All content is on a single page. Usually scrollable Examples
http://www.amarianodesign.com/ - Student
http://bryanconnor.com/
http://www.theworldwelivein.co.uk/
![Page 37: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/37.jpg)
Full Screen Photography
![Page 38: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/38.jpg)
Large photo as the background of a site. Usually scales based on the size of browser
window. Examples:
http://bryanconnor.com/
https://www.tumblr.com/
http://ryanscherf.net/
![Page 39: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/39.jpg)
Google these for more info Retina/HD graphics support
QR Codes
Social Media Badges
CSS3 Animations
Vertical Navigation
Parallax Scrolling
CSS Transparency
Sliding Panels
![Page 40: Responsive Web Designer155.aisites.com/wp-content/uploads/2013/07/Web_Design... · 2013-07-11 · 1.7 billion mobile phones sold in 2012 Smartphone sales expected to hit 1 billion](https://reader033.vdocuments.us/reader033/viewer/2022042914/5f4f975b94e4a4122532484d/html5/thumbnails/40.jpg)
You can download this Powerpoint from http://er155.aisites.com/