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

Modern Layouts: Getting Out of Our Ruts

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 are 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.

Live demo: http://labs.thewebahead.net/thelayoutsahead/
Code repo: https://github.com/jensimmons/thelayoutsahead

Presented at:

2015
An Event Apart, Seattle
An Event Apart, San Diego
An Event Apart, DC
An Event Apart, Chicago
An Event Apart, Austin
An Event Apart, San Francisco
Future of Web Design, San Francisco
Future of Web Design, New York
Ampersand, Brighton
Responsive Field Day, Portland
HOW Interactive, Boston
Push Conference, Munich
SFHTML5 Meetup, San Francisco
UIE Virtual Seminar, online
Responsive Web Design Summit, online

2014
Generate, New York
Blend Conf, Charlotte
CSS Dev Conf, New Orleans, Winner of Best Conference Presentation

Response to this talk: https://storify.com/jensimmons/

Interested in having me present this talk at your conference or company? Ping me at http://thewebahead.net/contact. Video available on request, for your consideration.

I am also creating a one- or two-day workshop version. Ask me about it.

Jen Simmons

June 09, 2015
Tweet

More Decks by Jen Simmons

Other Decks in Technology

Transcript

  1. MODERN LAYOUTS
    Getting Out of Our Ruts
    THE WEB AHEAD
    thewebahead.net
    JEN SIMMONS
    @jensimmons

    View full-size slide

  2. 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

    View full-size slide

  3. A
    C
    B
    A C
    B
    A
    C
    B
    A
    C
    B

    View full-size slide

  4. The medium shapes
    the medium.

    View full-size slide

  5. There’s a world of
    Graphic Design
    older than the web.

    View full-size slide

  6. Layout should
    serve the content.

    View full-size slide

  7. Jeremy Keith

    Jeremy Keith lives in
    Brighton, England where he
    makes websites with the
    splendid design agency
    Clearleft.

    View full-size slide

  8. img {
    float: left;
    margin-right: 2em;
    margin-bottom: 0.5em;
    }

    View full-size slide

  9. img {
    float: left;
    margin-right: 2em;
    margin-bottom: 0.5em;
    shape-outside: circle();
    }

    View full-size slide

  10. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Shapes, Level 1
    March 20, 2014
    w3.org/TR/css-shapes-1

    View full-size slide

  11. shape-outside: circle();
    shape-outside: ellipse();
    shape-outside: border-box;
    shape-outside: inset(0px round

    120px) border-box;
    shape-outside: url(http://

    example.com/image.jpg);
    shape-margin: 30px;

    View full-size slide

  12. labs.thewebahead.net

    View full-size slide

  13. github.com/jensimmons/thelayoutsahead

    View full-size slide

  14. img {
    width: 50%;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    shape-outside:
    ellipse(50% 50%);
    }

    View full-size slide

  15. img {
    width: 50%;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    border-radius: 100px;
    }

    View full-size slide

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

    View full-size slide

  17. img {
    width: 60%;
    float: left;
    margin-right: 30px;
    margin-bottom: 30px;
    shape-outside:
    polygon(50% 0,
    100% 50%,
    50% 100%,
    0 50%);
    }

    View full-size slide

  18. Shapes Level 1 — NOW!
    shape-outside: foo();
    Shapes Level 2 — Later
    shape-inside: foo();

    View full-size slide

  19. Vote for CSS Shapes!
    https://bugzilla.mozilla.org/
    show_bug.cgi?id=1040714
    https://wpdev.uservoice.com/forums/257854-internet-
    explorer-platform/suggestions/6263716-shapes

    View full-size slide

  20. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Exclusions, Level 1
    Jan 15, 2015
    w3.org/TR/css3-exclusions

    View full-size slide

  21. Use Absolute Positioning
    to place an item (or CSS Grid).
    Then add property wrap-flow:
    wrap-flow: both;

    View full-size slide

  22. main {
    transform: 

    rotate(-10deg);
    }

    View full-size slide

  23. h1 {
    transform:

    rotate(-90deg);
    }

    View full-size slide

  24. h1 {
    float: left;
    padding-bottom: 200px;
    transform: 

    rotate(-45deg);
    shape-outside: 

    polygon(nonzero,
    -58px 80.55%, 75.95% -70px,
    89.55% -33.65%, -13.4%
    121.45%);
    }

    View full-size slide

  25. main {
    width: 300px;
    }
    @media (min-width: 500px) {
    main {
    background: red;
    transform: rotate(-10deg); }
    }
    @media (min-width: 700px) {
    main {
    background: green;
    transform: rotate(-20deg); }
    }
    @media (min-width: 900px) {
    main {
    width: 400px;
    background: blue;
    transform: rotate(-30deg); }
    }

    View full-size slide

  26. transform: rotate

    View full-size slide

  27. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Transforms, Level 1
    Nov 26, 2013
    w3.org/TR/css-transforms-1

    View full-size slide

  28. Multiple Column
    Layout

    View full-size slide

  29. article {
    max-width: 500px;
    margin: 0 auto;
    }

    View full-size slide

  30. article {
    column-count: 2;
    column-gap: 2em;
    }

    View full-size slide

  31. article {
    // column-count: 2;
    column-width: 200px;
    column-gap: 2em;
    }

    View full-size slide

  32. img {
    width: 100%;
    }
    article {
    column-width: 200px;
    column-gap: 2em;
    column-rule: 

    1px solid #444;
    }

    View full-size slide

  33. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Multicolumn Layout
    April 12, 2011
    w3.org/TR/css3-multicol

    View full-size slide




  34. Grace Hopper
    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...


    View full-size slide

  35. img {
    float: left;
    margin-right: 2em;
    width: 50%;
    }
    div {
    padding: 2em;
    }

    View full-size slide

  36. img {
    float: left;
    margin-right: 2em;
    // width: 50%;
    height: 100vh;
    }
    div {
    padding: 2em;
    }

    View full-size slide

  37. img {
    float: left;
    margin-right: 2em;
    width: 50vw;
    height: 100vh;
    }
    h1 {
    font-size: 6vw;
    }

    View full-size slide


  38. Full-height “Cover
    Sheets” are the new Splash
    Page

    Lorum ipsum article
    content…

    View full-size slide

  39. header {
    border: 20px solid #000;
    background: yellow;
    padding: 3em 6em;
    }
    h1 {
    font-size: 10vw;
    margin-top: 0;
    text-align: center;
    }

    View full-size slide

  40. header {
    border: 20px solid #000;
    background: yellow;
    padding: 3em 6em;
    height: 100vh;
    }
    h1 {
    font-size: 10vw;
    margin-top: 0;
    text-align: center;
    }

    View full-size slide

  41. Viewport Units

    View full-size slide

  42. 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

    View full-size slide

  43. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Values and Units,
    Level 3
    July 30, 2013
    w3.org/TR/css3-values

    View full-size slide

  44. header {
    border: 20px solid #000;
    background: yellow;
    min-height: 100vh;
    padding: 3em 6em;
    }
    h1 {
    font-size: 10vw;
    margin: 0;
    text-align: center;
    }

    View full-size slide

  45. header {
    border: 20px solid #000;
    background: yellow;
    min-height: 100vh;
    }
    h1 {
    font-size: 10vw;
    margin: 0;
    }

    View full-size slide

  46. header {
    border: 20px solid #000;
    background: yellow;
    min-height: 100vh;
    display: flex;
    }
    h1 {
    font-size: 10vw;
    margin: auto;
    }

    View full-size slide

  47. header {
    border: 20px solid #000;
    background: yellow;
    min-height: 100vh;
    display: flex;
    }
    h1 {
    font-size: 10vw;
    margin: auto;
    }

    View full-size slide

  48. header {
    border: 20px solid #000;
    background: yellow;
    min-height: 100vh;
    display: flex;
    align-items: center;
    justify-content: center;
    }
    h1 {
    font-size: 10vw;
    // margin: auto;
    }

    View full-size slide

  49. header {
    border: 20px solid #000;
    background: yellow;
    min-height: 100vh;
    display: flex;
    align-items: flex-end;
    justify-content: flex-end;
    }
    h1 {
    font-size: 10vw;
    margin: 0;
    }

    View full-size slide

  50. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Flexible Box Layout, Level 1
    May 14, 2015
    w3.org/TR/css-flexbox-1

    View full-size slide

  51. CSS Grid Layout

    View full-size slide

  52. Working Draft Last Call
    Candidate

    Recommendation
    Proposed

    Recommendation Recommendation
    CSS Grid Layout, Level 1
    March 17, 2015
    w3.org/TR/css-grid-1

    View full-size slide

  53. Old School
    Floats

    View full-size slide

  54. Dynamic
    Grids

    View full-size slide

  55. When Can I Use This
    in Production?
    (aka on a Real Website)

    View full-size slide

  56. Why Did You Tell Me About 

    All This Stuff 

    I Totally Can’t Use Yet?

    View full-size slide

  57. Do Websites Need To Look
    Exactly The Same in Every
    Browser?

    View full-size slide

  58. DoWebsitesNeedToLook

    ExactlyTheSameinEvery

    Browser.com

    View full-size slide

  59. Progressive
    Enhancement

    View full-size slide

  60. When Can I Use This?
    Later
    Shapes Level 2
    Exclusions
    Grid Layout
    Maybe Never
    Regions
    What Was That 

    You Mumbled?
    Fragmentation
    Figures
    Overflow
    (???…)
    Now
    Shapes Level 1
    Flexbox
    Viewport Units
    5 Years Ago
    Rotation
    Multicolumn Layout
    Dynamic Grids
    (odd numbers of columns, 

    ratio grids)

    View full-size slide

  61. Hardest part is
    changing our thinking,
    not our CSS.

    View full-size slide

  62. Magazines
    and
    The Web

    View full-size slide

  63. Translate.
    Don’t Transfer.

    View full-size slide

  64. (*Totally stolen from Karen McGrane’s incredible talk, Adapting Ourselves to Adaptive Content.)

    View full-size slide

  65. The most
    dangerous phrase
    in the language is
    ‘We’ve always done
    it this way.’ 

    — Grace Hopper

    View full-size slide

  66. One Last Story

    View full-size slide

  67. THE WEB AHEAD
    thewebahead.net
    JEN SIMMONS
    @jensimmons
    Thank you!
    Workshops. Consulting. Design.
    Come talk to me.

    View full-size slide