Upgrade to Pro — share decks privately, control downloads, hide ads and more …

Modern Layouts: Getting Out of Our Ruts // CSS ...

Jen Simmons
October 13, 2014

Modern Layouts: Getting Out of Our Ruts // CSS Dev Conf

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.

There's a live demo for you at: http://labs.thewebahead.net/thelayoutsahead/
All the code is at: https://github.com/jensimmons/thelayoutsahead

Feedback on this presentation: https://storify.com/jensimmons/modern-layouts-at-css-dev-conf

Jen Simmons

October 13, 2014
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. The most prominent result from the new eyetracking studies is

    not actually new. We simply confirmed for the umpteenth time that banner blindness is real. —Jakob Nielsen, August 20, 2007, Banner Blindness: Old and New Findings
  2. Noise to Noise Ratio “Sure. There's definitely some excellent original

    work in there — in the middle of all those ads.” Merlin Mann
  3. 1.

  4. shape-outside: circle(); shape-outside: elipse(); shape-outside: border-box; shape-outside: inset(0px round 120px)

    border-box; shape-outside: url(http:// example.com/image.jpg); shape-margin: 30px;
  5. img { width: 50%; float: left; margin-right: 30px; margin-bottom: 30px;

    border-radius: 100px; shape-outside:border-box; shape-margin: 30px; }
  6. img { width: 60%; float: left; margin-right: 30px; margin-bottom: 30px;

    shape-outside: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); }
  7. 2.

  8. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS

    Transforms Module level 1 Nov 26, 2013, “refining” w3.org/TR/css-transforms
  9. 3.

  10. <main role="main"> <img src="../images/GraceHopper.jpg"> <div> <h1>Grace Hopper</h1> <p>Grace Murray Hopper

    (December 9, 1906 – January 1, 1992) was an American computer scientist and United States Navy rear admiral. A pioneer in the field, she was one of the first programmers of the Harvard Mark I computer, and invented the first compiler for a computer programming language...</p> </div> </main>
  11. Anyplace you might use em, rem, %, px you can

    instead use: vh viewport height vw viewport width vmin smaller viewport number vmax larger viewport number
  12. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS

    Values and Units Module level 3 July 30, 2013 w3.org/TR/css-values
  13. 4.

  14. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS

    Multicolumn Layout Module April 12, 2011 w3.org/TR/css-multicol
  15. 5.

  16. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS

    Exclusions Module Level 1 Oct 1, 2013 dev.w3.org/csswg/css-exclusions
  17. 6.

  18. Working Draft Last Call Candidate Recommendation Proposed Recommendation Recommendation CSS

    Grid Layout Module Level 1 May 13, 2014 w3.org/TR/css3-grid-layout
  19. Text 504-229-6828 with #modlayouts 5 Comment! Jen Simmons The Web

    Ahead thewebahead.net Follow @jensimmons to get these slides!