stretching the rules: respond 2015
TRANSCRIPT
![Page 1: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/1.jpg)
Stretching the rules !
RESPOND, 2015
@webfliccy
![Page 2: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/2.jpg)
![Page 3: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/3.jpg)
Tim Berners-Lee, the inventor of the world wide web, outside his office at the Massachusetts Institute of Technology in 2000. Photograph: Ed Quinn/Corbis
![Page 4: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/4.jpg)
http://www.guidebookgallery.org/pics/articles/thexeroxstararetrospective/fig1.big.jpg
Xerox Star, 1982
![Page 5: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/5.jpg)
http://www.guidebookgallery.org/pics/articles/thexeroxstararetrospective/fig1.big.jpg
Windows 8, 2012
![Page 6: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/6.jpg)
RWD
• Flexible grid
• Flexible images
• Media queries
![Page 7: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/7.jpg)
The critics
![Page 8: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/8.jpg)
–Jeffrey Zeldmann
If Ethan hadn’t included three simple executional requirements […] the concept
might have quickly fallen by the wayside […] The simplicity, elegance, and completeness of the package—here’s why, and here’s how
—sold the idea to […] hundreds of thousands.
“
”
![Page 9: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/9.jpg)
Device Lab
![Page 10: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/10.jpg)
Device Lab
![Page 11: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/11.jpg)
Media queries /* Extra Small Devices, Phones */ @media only screen and (min-width : 480px){…} /* Small Devices, Tablets */ @media only screen and (min-width : 768px){…} /* Medium Devices, Desktops */ @media only screen and (min-width : 992px){…} /* Large Devices, Wide Screens */ @media only screen and (min-width : 1200px){…}
![Page 12: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/12.jpg)
Our arsenal
![Page 13: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/13.jpg)
Sydney Opera House, competition scheme
![Page 14: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/14.jpg)
Sydney Opera House, competition scheme
![Page 15: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/15.jpg)
Sydney Opera House, competition scheme
![Page 16: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/16.jpg)
Operating System
![Page 17: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/17.jpg)
Browser
![Page 18: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/18.jpg)
Input type
![Page 19: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/19.jpg)
Screen width
3.5" | 4" | 4.7" | 5" | 5.5" | 5.7" …
http://www.xda-developers.com/
![Page 20: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/20.jpg)
Connection speed
![Page 21: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/21.jpg)
Implementation?
• Content-led
• Consider vertical space
Media queries
![Page 22: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/22.jpg)
Vertical media queries
.carousel { width: 100%; height: auto; } !
@media (max-height: 466px) { .carousel { height: 140px; } }
![Page 23: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/23.jpg)
Implementation?
• Content-led
• Consider vertical space
• Modular
Media queries
![Page 24: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/24.jpg)
Modular
• Object-oriented CSS
• Pre-processors
• AMD JavaScript libraries
• Web components
![Page 25: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/25.jpg)
Media Queries
![Page 26: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/26.jpg)
Viewport Grid ModulesTemplate
Page anatomy
![Page 27: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/27.jpg)
Element Queries
![Page 28: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/28.jpg)
Element Queries<script src="assets/js/ResizeSensor.js"></script> <script src="assets/js/ElementQueries.js"></script> .story[max-width~="250px"] { padding: 5px; background: #bbffeb; } ! .story[max-width~="250px"] .story__lead { float: none; margin: 0 0 10px 0; width: 100%; } .story[max-width~="250px"] .story__lead img { width: 100%; }
http://marcj.github.io/css-element-queries/
![Page 29: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/29.jpg)
The other-side
• unreliable user-agents
• not a natural fit
• past pain
Whatever happened to RESS?
![Page 30: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/30.jpg)
RWD=
Web designDONE RIGHT
![Page 31: Stretching the rules: Respond 2015](https://reader033.vdocuments.mx/reader033/viewer/2022042818/55ab84a81a28ab9e798b4747/html5/thumbnails/31.jpg)
@webfliccy
Thanks for listening!