stretching the rules: respond 2015
TRANSCRIPT
Stretching the rules !
RESPOND, 2015
@webfliccy
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
http://www.guidebookgallery.org/pics/articles/thexeroxstararetrospective/fig1.big.jpg
Xerox Star, 1982
http://www.guidebookgallery.org/pics/articles/thexeroxstararetrospective/fig1.big.jpg
Windows 8, 2012
RWD
• Flexible grid
• Flexible images
• Media queries
The critics
–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.
“
”
Device Lab
Device Lab
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){…}
Our arsenal
Sydney Opera House, competition scheme
Sydney Opera House, competition scheme
Sydney Opera House, competition scheme
Operating System
Browser
Input type
Screen width
3.5" | 4" | 4.7" | 5" | 5.5" | 5.7" …
http://www.xda-developers.com/
Connection speed
Implementation?
• Content-led
• Consider vertical space
Media queries
Vertical media queries
.carousel { width: 100%; height: auto; } !
@media (max-height: 466px) { .carousel { height: 140px; } }
Implementation?
• Content-led
• Consider vertical space
• Modular
Media queries
Modular
• Object-oriented CSS
• Pre-processors
• AMD JavaScript libraries
• Web components
Media Queries
Viewport Grid ModulesTemplate
Page anatomy
Element Queries
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/
The other-side
• unreliable user-agents
• not a natural fit
• past pain
Whatever happened to RESS?
RWD=
Web designDONE RIGHT
@webfliccy
Thanks for listening!