responsive web design
This page demonstrates principles and techniques of responsive web design. The phrase was coined by Ethan Marcotte in a May 2010 article on alistapart.com. He recognized that with the strategic use of an existing, then-underutilized css rule — the media query — one could efficiently script changes in the presentation of a site based on differences in web-displaying devices such as screen sizes, resolutions, and device features.
Responsive web design is a combined approach to designing adaptive web sites that involves fluid layouts, flexible images and media queries.
What Are Media Queries?
They are a simple way to feed different CSS rules to devices based on the characteristics of user’s device. Media queries themselves don’t actually do anything; the CSS rules within them specify changes for how to build, display or present responsive/adaptive designs. They're mainly — but not exclusively — for feeding styles based on differenes in viewport size (browser width). In the CSS coding sequence, media queries typically come at end of CSS rules.
This demo page link contains examples of some media queries that have been put to use for visual and organizational changes based on screen size changes. Here is a good beginner's guide to css Grid, which includes the use of media queries for responsive web adaptation: A Beginners Guide to CSS Grid Layout (by Tony Thomas).
Click here to view a media query demo page.
instrinsic web design
The phrase, “instrinsic web design” was coined by Jen Simmons at An Event Apart conference in the fall of 2018. She recognized that CSS Grid is now possible to be paired with many other new possibilities that essentially break open the creative potential of graphic design on the web to a similar/same degree as in print.
Intrinsic web design includes New Possibilities for graphic flexibility, such as adding and removing white space, overlapping, image wrapping and text reflowing, enlarging and shrinking, etc. It’s a much more graphically elastic and capable period for the web than in the past. Her conference presentation can be viewed here: Simmons’ Intrinsic Web Design (2018).
Click here to view a demo of instrinsic techniques by Jen Simmons.