responsive web designer155.aisites.com/wp-content/uploads/2013/07/web_design... · 2013-07-11 ·...
TRANSCRIPT
Web Design Industry Overview Presenter: Erikk Ross ([email protected])
• Mobile Devices • Responsive Web Design • Flat Design • Fixed Header Bars • Minimalist Landing Pages • Infinite Scrolling • Single Page Design • Full Screen Photography
Mobile Devices
Flickr: Roberrific, sucelloleiloes, minitechnet, IQ computer services
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)
Mobile web will be bigger than desktop Internet use by 2015. --Morgan Stanley
Responsive Web Design
How do you design a web site that works well on all devices?
http://www.anderssonwise.com/ http://css-tricks.com/
A flexible, grid-based layout Flexible images and media Media queries, a module from the CSS3
specification.
Responsive Web Design by Ethan Marcotte
157 pages $9 for the e-book www.abookapart.com Go buy it now, I’ll wait
Frameworks do all of the hard work for you
Bootstrap Foundation
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/
Flat Design
Function over style. Moving away from skeuomorphism. Skeuomorphism = making a digital element
reflect it’s real life counterpart.
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/
Fixed Headers
Fixed header that is always visible at the top of the page.
Social Networking sites, blogs CSS
position: fixed
http://www.fullstopinteractive.com/ http://robedwards.org/ http://ryanscherf.net/
Minimalist Landing Pages
Generally geared towards sites that sell products.
http://pictopro.com/ https://www.tumblr.com/ http://www.giftrocket.com/
Infinite Scrolling
No more paging of search results. Examples:
Yahoo
Single Page Design
All content is on a single page. Usually scrollable Examples
http://www.amarianodesign.com/ - Student
http://bryanconnor.com/
http://www.theworldwelivein.co.uk/
Full Screen Photography
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/
Google these for more info Retina/HD graphics support
QR Codes
Social Media Badges
CSS3 Animations
Vertical Navigation
Parallax Scrolling
CSS Transparency
Sliding Panels
You can download this Powerpoint from http://er155.aisites.com/