mixd rwd workshop
Post on 24-Dec-2014
91 Views
Preview:
DESCRIPTION
TRANSCRIPT
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?
Who are we?
Who are we?
Who are we?
Who are we?
What is Responsive Web Design?
http://www.flickr.com/photos/brad_frost/7387759388/
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
What is Responsive Web Design?
What is Responsive Web Design?
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
http://www.flickr.com/photos/brad_frost/7387824246/
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
http://www.flickr.com/photos/ixdoslo/4947697567/
“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
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
Resolution Independence
Optimisation
Optimisation
Five Key Principles
Be Device Agnostic
Be fluid
Build Mobile first
Be Resolution independent
Optimise, optimise, optimise
Design Process
Design Process
Design Process
http://www.flickr.com/photos/brad_frost/7387721458/
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
Design Process
Design Process
Design Process
Design Process
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Working responsively
Let’s start!
top related