mixd rwd workshop

DESIGNING FOR DEVICESAn Introduction to Responsive Web Design

http://www.flickr.com/photos/brad_frost/7387824246/



Who are we?

Aaron@_acthomas

Jason@thecodezombie

Who are we?

What is Responsive Web Design?





“A responsively designed website is flexible to the conditions in which it will be viewed, in order to offer every user an optimised experience.”

– The Mixd definition


http://www.channel4.com/news/

















http://www.starbucks.com/
















Where it all started

http://www.flickr.com/photos/superpope/4835946664



Where it all started

Five Key Principles

Be Device Agnostic

Be fluid

Build Mobile first

Be Resolution independent

Optimise, optimise, optimise

Device Agnostic




Device Agnostic

Screen size? Resolution?

Connection speed?

Touch enabled? JavaScript?

The Web is Fluid

http://www.flickr.com/photos/ixdoslo/4947697567/



The Web is Fluid


“The web has always been fluid; we’ve just wasted a good number of years forcing fixed pixels onto an inherently responsive framework. The time to stop is now.

– Elliot Jay Stocks, 2013



http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/

http://elliotjaystocks.com/blog/responsive-web-design-the-war-has-not-yet-been-won/

The Web is Fluid

px%emrem

Mobile First

http://www.flickr.com/photos/brad_frost/7387767300



Mobile First

Mobile First

O N E W E B

Mobile First

Resolution Independence

Optimisation

Five Key Principles

Be Device Agnostic

Be fluid

Build Mobile first

Be Resolution independent

Optimise, optimise, optimise

Design Process

Design Process

“designers waste a shitload of time creating fully fleshed-out comps of what a website could look like [...] It’s an increasingly-pathetic process that makes less and less sense in this multi-device age.”

- Brad Frost, 2013

Design Process

Working responsively

Let’s start!

mixd rwd workshop

Documents