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

Revolutionize Your Page (40min, Fall 2016)

Jen Simmons
September 23, 2016

Revolutionize Your Page (40min, Fall 2016)

All the links for more information, along with a video of this presentation, are at: http://jensimmons.com/presentation/revolutionize-your-page-real-art-direction-web

Jen Simmons

September 23, 2016
Tweet

More Decks by Jen Simmons

Other Decks in Design

Transcript

  1. Revolutionize Your Page: Real Art Direction 
 on the Web

    Jen Simmons labs.jensimmons.com thewebahead.net @jensimmons
  2. “ ” The vast majority of editorial [design] has at

    its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
  3. “ ” The vast majority of editorial [design] has at

    its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
  4. “ ” The vast majority of editorial [design] has at

    its heart the idea of communicating an idea of story through the organization and presentation 
 of words (arranged into display and body text) and visuals. — Cath Caldwell & Yolanda Zappaterra Editorial Design, page 8
  5. @supports (initial-letter: 4 ) or (-webkit-initial-letter: 4 ) { p::first-letter

    { color: rgba(255,190,150,0.9); font-weight: bold; margin-right: 0.5em; -webkit-initial-letter: 4; initial-letter: 4; } }
  6. // layout using old-technology @supports (display:grid) { // overrides to

    undo old layout // layout using new-technology }
  7. 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
  8. 1 2 3 4 5 6 grid-column: 1 / 2;

    grid-row: 1 / 2; grid-column: 5 / 6; grid-row: 1 / 2; grid-column: 2 / 4; grid-row: 2 / 3; grid-column: 3 / 5; grid-row: 3 / 5; 1 2 3 4 5 grid-column: 1 / 2; grid-row: 4 / 5;
  9. Place each item into a specific cell/area Let the browser

    place everything using autoplacement algorithm
  10. body { background: #F0F0F0; } main { display: grid; grid-template-columns:

    repeat(auto-fit, minmax(280px, 1fr)); } figure { margin: 0; } img { display: block; width: 100%; box-shadow: -1px 0px 0px rgba(0,0,0,0.06); }
  11. 11 8 9 10 7 6 5 1 2 3

    4 auto placement algorithm
  12. 13 11 8 9 10 7 6 5 1 2

    3 4 12 grid-auto-flow: dense;
  13. Behind a flag Just Works On Its Way Chrome Chrome

    Canary Opera Opera Developer Firefox Firefox 
 Dev Edition Safari Technical Preview Firefox 
 Nightly Edge Safari