Responsive Web Design has been around for a while. How about a recap?
View Slide
RESPONSIVEWEBDESIGN RECAP
WHAT
Design and development should respond tothe user’s behavior and environment basedon screen size, platform and orientation.
WHY
There are more devicesconnected than people inthe world today.http://www.bizjournals.com/prnewswire/press_releases/2014/10/06/NY30877
http://blogs.worldbank.org/africacan/more-cell-phones-than-toiletsMore people have accessto mobile than to runningwater and toothbrushes.
Get your content ready togo anywhere because it’sgoing to go everywhere.- http://bradfrost.com/blog/web/for-a-future-friendly-web/
IT’S ABOUTCONTENT-FIRST
http://commons.wikimedia.org/wiki/File:Content_is_like_water.png
IT’S ABOUT BEINGFUTURE FRIENDLY
https://www.flickr.com/photos/brad_frost/7387824246/in/set-72157630163121422
IT’S ABOUTCONSISTENCY
http://opensignal.com/reports/fragmentation.php (2012)
SO WHAT CAN WE DO?
DO NOTHINGOPTION 1
BUILD AN APPOPTION 2
http://xkcd.com/1174/
http://appvswebsite.com/
DO BOTH(IF YOU CAN)
BUILD A SEPARATE MOBILE SITEOPTION 3
GO RESPONSIVEOPTION 4
HOW
4 GIFS TO WARM UPhttp://blog.froont.com/9-basic-principles-of-responsive-web-design/
3 STEPSRECIPE
1. FLUID WIDTH2. FLEXIBLE MEDIA3. MEDIA QUERIES
ADAPTIVE VS FLUIDEXAMPLE
MAKING IT FLUIDTARGET / CONTEXT = RESULT
300px
300px940px
300px940px300/940 = 0.319148936
300px940px300/940 = 0.31914893631.9148936%
LET MEDIA TAKEMORE AVAILABLE SPACE
PrintMonochromeWidthHeightAspect RatioOrientationAnd more…
PrintMonochromeWidthHeightAspect RatioOrientationAnd more…@media (min-width: 600px) {}
LOAD MENOT YETNOT YET
LOAD MELOAD MELOAD ME
Know yourBreakpoints
Breakpoints. Break. Points. Points atwhich things break in your design.http://www.markboulton.co.uk/journal/theinbetween“
Start small.
Increase the width.
Identify problems.
Add a breakpointand fix it.
Keep going!
The importance ofMOBILE FIRST
IGNORING MOBILE FIRST WILLPROBABLY BITE YOU LATER
ITS OK TO DESIGN ITIN THE BROWSER
UX DesignCode
The web’s greatest strength, is oftenseen as a limitation, as a defect.http://alistapart.com/article/dao
It is the nature of the web to beflexible.http://alistapart.com/article/dao
It should be our role as designers and developersto embrace this flexibility, and produce pageswhich, by being flexible, are accessible to all.http://alistapart.com/article/dao
The journey begins by letting goof control, and becoming flexible.http://alistapart.com/article/dao