Intro to @viewport & other new Responsive Web Design CSS features
From meta viewport to @viewport and from device-pixel-ratio to the resolution media query: various responsive design hooks are undergoing standardization, allowing for future-proof sites that work well in different contexts. In addition, new CSS features like object-fit, relative length units and so on are increasingly supported by browsers as well, and allow for more versatile responsive design solutions. In my talk, I will look at these features and explain how they can be used in websites today.
“Gerstner defined a design “programme” as a set of rules for constructing a
range of visual solutions. Connecting his methodology with the new field of
computer programming, Gerstner presented examples of computer-
generated patterns that were made by mathematically describing visual
elements and combining them according to simple rules.”
— Ellen Lupton, Thinking with Type (2nd edition), 2010, Princeton Architectural Press, p165
Karl Gerstner, Programme entwerfen, 2007. Copyright 2007 Lars Müller Publishers — used with kind permission.
FFWD to today
Image from http://www.html5rocks.com/en/tutorials/tooling/synchronized-cross-device-testing/ by Addy Osmani for HTML5 Rocks. CC-BY 3.0.