BRADFROST-SQUISHY-What is Responsive Design

What is Responsive Design?Responsive design allows end users to view web pages at multiple screen widths without the restrictions of fixed-width viewing. This makes sites visually and functionally more accessible via mobile devices, tablets and smaller browsers without hampering optimal browser sizes for desktop web-based viewers. The average screen size for base users has been going up over the years but web standards for average screen width is 1024x768 pixelsi.

Responsive Pattern Library 1 is meant to be a comprehensive collection of responsive interface patterns created by and collected for the community.

Description Based on SXSW Presentation “Beyond Squishy: The Truth About Responsive Design” Responsive web design has hit the scene like a bomb, and now designers everywhere are showing off to their bosses and peers by resizing their browser windows. "Look! The site is squishy!" While creating flexible layouts is important, there's a whole lot more that goes into truly exceptional adaptive web experiences. This session will introduce the Principles of Adaptive Design: ubiquity, flexibility, performance, enhancement and future-friendliness. We need go beyond media queries in order to preserve the web's ubiquity and move it in a future-friendly direction.

Speaker: Brad Frost

Full Slides: http://www.slideshare.net/bradfrostweb/beyond-squishy-the-principles-of-adaptive-design-17070713

1 http://bradfrostweb.com/blog/web/this-is-responsive/

(Quote by Jeff Croft)

(Responsive Web Book by Jeremy Keith)

Principles of Adaptive Design (vs. Responsive):

1. Ubiquity2. Flexibility3. Performance4. Enhancement5. Future Friendly

(Quote by Stephanie Rieger)

“Content Parity Trumps all?” brad asks. Then inquires further, “But what about mobile context?” And what is mobile context? Yes, on the go is still true but it is not the only time people use mobile.

(76% of users access mobile while waiting in line reference on compete.com)

(86% of users access mobile devices while watching tv reference on compete.com)

(80% of users access mobile during general downtime reference on compete.com)

I find it interesting that these percentages do not add up to 100%.

(69% access mobile in retail stores reference on compete.com)

(39% while #poopin reference on compete website)

(The hay stack)

(Semi-responsive Example)

(Article the Dao of Responsive Web)

(Web site sizes)

(Responsive demo by Brad Frost)

(71% of mobile users expecting mobile sites to load as fast if not faster than desktop sites by compuware.com)

(74% of mobile visitors who will abandon a site if it takes longer than 5 seconds to load by gomez.com)

The average site page size is 1.3MB according to (http://httparchive.org) but could be smaller.

(86% of responsive website whose small screen view weighs as much as the large screen view (and should not) by guypo.com)

An Example of a site with issues:

(A Quote from Christian Heilmann from the HTML5 Dev Conference)

(Performance as Design by Brad Frost)

(Mobile web Performance testing tool)

(Mobile First Responsive Web Design)

(Jeremy Keith at the Smashing Conference "The Spirit of the Web")

(Even Obama Couldn't Use His own site -- Stephanie Rieger on problems with the white house responsive design)

(Quote byChristian Heilmann)

Not everything needs to be the next facebook, but it does need to show up and quickly. Don’t have waiting upon waiting bars. If it doesn’t need to be fancy, just make it work… faster.

(Improve performance -- Twitter)

(Future Friendly)

(John Clark Global Moxie Quote)

(http://bit.ly/mobilefirstrwd – Demo) (http://bit.ly/rwdtutorial - tutorial)

(http://bit.ly/rwdanatomy - walkthrough)

GET TO THE MEAT:

(Design Interactive Retina Revolution - http://blog.netvlies.nl/design-interactive/retina-revolution)

NOT:

(PEW INTERNET.org Reports on 79% of people using smartphones in stores)

Good Examples:

BAD CAROUSEL:

Great that you can see that it is a carousel because of the overlaying product but needs an arrow or something for non-touch screens

(Helping improve the mobile web -- facebook)

(A lighter social share - http://filamentgroup.com/lab/socialcount/)

(Mobilevs local)

(Mobile -- http://bradfrostweb.com/blog/mobile/a-tel-tale-sign)

i