monkeytalk fall 2012 - responsive web design
DESCRIPTION
A quick introduction to responsive web design by MonkeyshotTRANSCRIPT
![Page 1: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/1.jpg)
Responsive Web Design
Quick Start Guide
![Page 2: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/2.jpg)
Serge Hufkens UX designer
![Page 3: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/3.jpg)
© Prometheus, Ridley Scott
“Big things… have small beginnings”
![Page 4: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/4.jpg)
Definition
Responsive Web Design (RWD) is web design in which a site is crafted to provide an optimal user experience across all devices (everything with a screen) hat tip to wikipedia
![Page 5: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/5.jpg)
![Page 6: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/6.jpg)
Let there be no mistake Adaptive vs Responsive web design
Hat tip to Aaron Gustafson & Brad Frost
ADAPTIVE
THIS IS RESPONSIVE
![Page 7: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/7.jpg)
© 2001: A Space Odyssey, Stanley Kubrick & Arthur C. Clarke
“Why?”
![Page 8: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/8.jpg)
© NFL Network
![Page 9: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/9.jpg)
Conclusion
• There’s a growing mainstream
expectation that you can simply get
all your content from any device.
• We expect content to flow seamlessly,
follow us throughout the day.
![Page 10: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/10.jpg)
Let’s tackle that with some philosophy!
![Page 11: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/11.jpg)
© Enter the Dragon, Bruce Lee, Robert Clouse
![Page 12: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/12.jpg)
and there’s even more…
![Page 13: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/13.jpg)
Wroblewski’s Theorem
![Page 14: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/14.jpg)
“Anything that can be connected to the internet, will be.”
![Page 15: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/15.jpg)
![Page 16: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/16.jpg)
![Page 17: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/17.jpg)
Why go responsive?
“We do responsive web design, but we don’t do it for the sake of being trendy. We do it because we believe it’s the way websites should be made. This is an opportunity for us to finally embrace the dynamic medium we build for. The web is not fixed width.” - Ben Callahan
http://seesparkbox.com/foundry/you_say_responsive_i_say_adaptive
![Page 18: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/18.jpg)
fact
RWD is hard
![Page 19: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/19.jpg)
© Frank Zappa
![Page 20: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/20.jpg)
Open your mind
• Everything has changed and continues to do so, fast
• Accept it and move on • Loose the myths • Get some new skills • Make mistakes • Time will tell • Be proud to be a part of it
![Page 21: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/21.jpg)
BECOMING RESPONSIVE
![Page 22: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/22.jpg)
© Eén, Dagelijkse kost
3 basic ingredients
![Page 23: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/23.jpg)
3 basic ingredients • A flexible grid – The design has fluid layout elements that
change on browser size
• Conditional images & other media – The design uses one or more techniques to
scale images and media so that the design performs well across devices
• Media queries – Conditional code that changes items on a
page based on device detection or browser width
![Page 24: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/24.jpg)
Viewport, media queries and breakpoints
![Page 25: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/25.jpg)
© Andy Clarke
![Page 26: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/26.jpg)
© Culy.nl, Sergio Herman
3 advanced ingredients
![Page 27: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/27.jpg)
3 advanced ingredients • Advanced elements – A basic fluid grid is the priority; but to be
fully responsive we must often cover slideshows, tables, tabs, multi-column type, custom widgets, forms, and more.
• Touch input – Touch input is a critical development
component as we move away from a mouse-first model of human-computer interaction
• RESS and server-side conditionals – Heavy lifting for user agent detection and
conditional media deployment is done by the server, not the device.
![Page 28: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/28.jpg)
THINGS TO GET IT ON
![Page 29: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/29.jpg)
Wireframes? full wireframes for each breakpoint
Pros: • most thorough method • no page element left
unexplored • may be the best
solution for retrofitting because it provides the most detail
Cons • takes the longest • it’s static! • with a slow-decision
group, prepare for a long process
![Page 30: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/30.jpg)
Wireframes? responsive prototypes
Pros: • gets specific about
repositioning and content without promising every detail
• one asset per template instead of three or four
Cons • requires someone on
the team have front-end skills
• may not prevent the need for more detailed wireframes
![Page 31: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/31.jpg)
![Page 32: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/32.jpg)
Flexible grids grids, grids everywhere…
• Play around with the many grid systems online to get a good feel what they do…
• Examples…
![Page 33: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/33.jpg)
http://lessframework.com/
![Page 34: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/34.jpg)
http://foundation.zurb.com/
![Page 35: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/35.jpg)
http://goldengridsystem.com/
![Page 36: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/36.jpg)
http://goldengridsystem.com/
![Page 37: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/37.jpg)
Conditional images Take a look at this to get started
http://adaptive-images.com/
![Page 38: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/38.jpg)
About design Split it
Layout Atmosphere
![Page 39: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/39.jpg)
Design your atmosphere Styletiles, (html) style guides, …
http://styletil.es/ http://www.bbc.co.uk/guidelines/gel/
![Page 40: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/40.jpg)
Responsive design patterns Lot’s of examples available
• provide effective examples at the beginning of a project so that you’re not rethinking the wheel.
![Page 41: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/41.jpg)
http://bradfrost.github.com/this-is-responsive/
![Page 42: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/42.jpg)
http://www.lukew.com/ff/entry.asp?1514
![Page 43: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/43.jpg)
http://jasonweaver.name/lab/offcanvas/
![Page 44: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/44.jpg)
Responsive typography Don’t neglect it, it’s your content!
• “Setting web type in Photoshop is a waste of time” — Andy Clarke
• Test on real devices (don’t scale your browser)
• Be careful with line lengths (keep it readable)
![Page 45: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/45.jpg)
http://informationarchitects.net/blog/responsive-typography-the-basics/
![Page 46: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/46.jpg)
http://blog.typekit.com/2011/11/09/type-study-sizing-the-legible-letter/
![Page 47: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/47.jpg)
http://typecast.com/
![Page 48: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/48.jpg)
Performance is also by design Issues for RWD
• Over downloading – Download & hide, download & shrink, excess
DOM
• Poor networks – High latency, variable band width, packet
loss
![Page 49: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/49.jpg)
Issue #1 The average weight of a web page today?
Source: http://httparchive.org/
images javascript
flash
HTM
L
CSS
other
1 MB
82%
![Page 50: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/50.jpg)
Issue #2 How many requests requires the average website?
85
Source: Guy Podjarny & HTTP Achive
Cable modem
0.4 sec Cell network
4.2 sec
10 x slower
![Page 51: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/51.jpg)
• Reduce asset size – HTML/CSS compression, image compression,
try to avoid images, minification, avoid bulky frameworks
• Reduce requests – Browser cache, concatenate JS & CSS,
localStorage, data:URI, conditional loading • Speed-up page render – Avoid DOM reflows & repaints, defer loading of
javascript, lazy load javascript, touch beats on click, …
So optimize! By doing following
![Page 52: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/52.jpg)
Something about our tools
“The framework for what a page is has changed considerably even in the past few years, though our applications for designing those frameworks are still stuck in the web of yore, and largely dictated by their use for print design.”
- Jason Santa Maria
![Page 53: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/53.jpg)
![Page 54: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/54.jpg)
© Brad Frost
![Page 55: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/55.jpg)
Feel like reading?
![Page 56: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/56.jpg)
Thanks! @sjesch
![Page 57: Monkeytalk Fall 2012 - Responsive Web Design](https://reader033.vdocuments.mx/reader033/viewer/2022060110/5561e860d8b42af10c8b4f5d/html5/thumbnails/57.jpg)
Credit where credit’s due The true heroes of this presentation…
Andy Clarke
Luke Wroblewski
Jeremy Keith
Josh Clark
Ethan Marcotte
Brad Frost
Jason Santa Maria
Dave Olsen & Doug Gapinski
Tim Kadlec
Everybody I forgot…