responsive web designer155.aisites.com/wp-content/uploads/2013/07/web_design... · 2013-07-11 ·...

Web Design Industry Overview Presenter: Erikk Ross (eross@aii.edu)

• 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.

http://www.envato.com/

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:

Facebook

Twitter

Pinterest

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/