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!