Modern Layouts: Getting Out Of Our Ruts
In the early years of the web, there was a lot of variation and experimentation with where to put content on a web page. Then, it seems we all settled into a handful of patterns and stayed there for over a decade. It wasn’t until the arrival of responsive design that new ideas for page layout started appearing. Now with new CSS properties for layout landing in browsers, we may be about to see a bigger renaissance in layout design patterns. How can we better use the space inside the glass rectangle? What layout innovations could help users better find and focus on what they want? Take a walk through where we’ve been, where we might be going, and how we can better design for the true medium at hand. This talk features practical examples of what's newly possible, along with access to a code repo for you to play with later.
Resources
- Demo for this talk
- Code for this talk
- The Original Pizzahut.com
- Space Jam
- Microsoft’s 1994 homepage
- BBC News Politics 97
- The September Issue
- All Websites Look the Same by Dave Ellis
- Can I Use
- Adobe’s CSS Shapes Gallery at CodePen
- CSS Shapes Extension for Chrome
- Tutorial on how to use the CSS Shapes Extension by Razvan Caliman (who created it)
- The Web Ahead 81: Changing the Shapes with Sara Soueidan
- Vote for Shapes - Microsoft
- Vote for Shapes - Mozilla
- Opera Mini
- Multicolumn layout in the wild: Tim Berner’s Lee article
- “Judy Blume Knows All Your Secrets,” NYTimes Magazine Cover Sheet example
- Jen’s Experiment with Viewport Units
- CSS Trick’s Complete Guide to Flexbox
- Flexbox running on Chrome Dev Site
- Rachael Andrew on CSS Grid
- Mark Boulton on The Web Ahead
- Nathan Ford’s article on layout
- Gridset
- Karen McGrane’s Adapting Ourselves to Adaptive Content
- Bill Cunningham New York
Presented At
-
Ampersand
Nov 13, 2015
-
HOW Interactive
Nov 5, 2015 to Nov 7, 2015 -
Future of Web Design NYC
Nov 2, 2015 to Nov 4, 2015 -
An Event Apart San Francisco
Nov 2, 2015 to Nov 4, 2015 -
Future of Web Design SF
Oct 28, 2015 to Oct 30, 2015 -
Push Conference
Oct 22, 2015 to Oct 23, 2015 -
UIE Virtual Seminar
Oct 15, 2015
-
An Event Apart Austin
Oct 5, 2015 to Oct 7, 2015 -
Responsive Field Day
Sep 25, 2015
-
An Event Apart Chicago
Aug 31, 2015 to Sep 2, 2015 -
An Event Apart Washington DC
Aug 10, 2015 to Aug 12, 2015 -
An Event Apart San Diego
Jun 8, 2015 to Jun 20, 2015 -
SFHTML5 Meetup
May 20, 2015
-
An Event Apart Seattle
Mar 30, 2015 to Apr 1, 2015 -
Responsive Web Design Summit
Mar 11, 2015
-
CSS Dev Conf
Oct 12, 2014 to Oct 14, 2014 -
BlendConf
Sep 11, 2014 to Sep 13, 2014 -
Generate Conference
Jun 20, 2014
Alternative Videos
- Watch an extended 90 minute version at UIE’s All You Can Learn Library
- Presented at SFHTML5 Meetup, May 2015. (Sorry about the sound problems)