$30 off During Our Annual Pro Sale. View Details »

Embrace The Vertical

Embrace The Vertical

The future of height-based media queries. An argument for thinking beyond the width and supporting prototypes.

CSS Conf Presentation - https://www.youtube.com/watch?v=rNoMgCn4E-U

Antoine Butler

May 27, 2014
Tweet

Other Decks in Programming

Transcript

  1. EMBRACE THE VERTICAL
    The Future of Height-Based Media Queries
    ANTOINE BUTLER
    Front End Developer, HZDG
    @aebsr / aeb.sr

    View Slide

  2. View Slide

  3. EMBRACE THE VERTICAL
    The Future of Height-Based Media Queries

    View Slide


  4. “What do you want to know about
    vertical media queries?”

    View Slide

  5. WHAT’S A
    VERTICAL
    MEDIA QUERY?
    UH…

    View Slide

  6. Good question.

    View Slide

  7. But first, what’s a media query?

    View Slide

  8. A media query allows you to tailor your
    layout based on any number of conditions
    against a media type.

    View Slide

  9. AVAILABLE CONDITIONS
    Aspect ratio, Orientation, Resolution, Color and Size
    Aspect Ratio
    Orientation
    Resolution
    Color
    Size

    View Slide

  10. LET’S TALK

    ABOUT SIZE.
    It’s not just the width that ma ers.

    View Slide


  11. – Chris Coyier
    “Measuring width is a nice practical example of
    media queries, but it isn't the only thing
    available.”
    css-tricks.com/css-media-queries/

    View Slide

  12. View Slide

  13. @media (max-width: 600px)

    View Slide

  14. @media (max-height: 600px)

    View Slide

  15. So What?

    View Slide

  16. 1. Content size is variable not intrinsic.

    View Slide

  17. 2. Increases scrolling.

    View Slide

  18. 3. Device* fragmentation

    View Slide

  19. NETBOOKS AND APPLES
    AND ANDROIDS, OH MY!

    View Slide

  20. REMEMBER THIS?
    http://opensignal.com/reports/fragmentation-2013/

    View Slide

  21. View Slide

  22. BETTER?

    View Slide

  23. BEST?

    View Slide

  24. 4. Squishy isn’t good enough.

    View Slide

  25. IT’S A DODGEBALL…
    UNLESS

    View Slide


  26. “Squishy is a legacy solution, but it is the
    foundation of responsive web design.”
    – Me

    View Slide

  27. FLUID CIRCA 1999

    View Slide

  28. AND THAT’S HOW WE GOT HERE.

    View Slide

  29. So, what do we do?

    View Slide

  30. ADAPT
    Or die trying.

    View Slide


  31. “Smart organizations will see this as a benefit,
    not a drawback, and will use this chance to make
    a be er website, not just a squishy one.”
    – Karen McGrane
    http://alistapart.com/column/responsive-design-wont-fix-your-content-problem

    View Slide

  32. So, what are vertical media queries again?

    View Slide

  33. An adaptive solution.

    View Slide

  34. MEAT & POTATOES
    HTML & CSS

    View Slide

  35. Wikipedia.com
    Long Form Reading

    View Slide

  36. Users of supported mobile devices are
    automatically redirected to the official mobile
    version of Wikipedia.
    http://en.wikipedia.org/wiki/Help:Mobile_access

    View Slide

  37. View Slide

  38. MOBILE VS DESKTOP
    Accordion Layout
    Center Images
    Serif Font
    Simplified Navigation

    View Slide


  39. Article Title



    Introductory text...
    Section Title

    Lorem ipsum dolor....


    View Slide


  40. Article Title
    <figure>

    figure>
    Introductory text...
    Section Title

    Lorem ipsum dolor....


    View Slide

  41. bit.ly/WikiProto

    View Slide

  42. article {
    font: 300 1em/1.6 sans-serif;
    }
    !
    article h2 {
    border-bo om: 1px solid #000;
    }
    !
    article figure {
    float: right;
    text-align: center;
    }

    View Slide

  43. View Slide

  44. /* roughly 650px to target small screens */
    !
    @media screen and (max-width: 40em) {
    figure {
    width: 100%;
    }
    }
    !
    @media screen and (max-height: 40em) {
    article {
    font-family: serif;
    }
    !
    article section {
    display: none;
    }
    }

    View Slide

  45. View Slide

  46. BENEFITS OF AN ADAPTIVE
    WIKIPEDIA.COM
    No Device Detection
    Single Code Base
    SEO & Sharability

    View Slide

  47. vw.com
    Sticky ‘Vertical’ Nav

    View Slide

  48. New requirements.

    View Slide

  49. 1. Primary navigation must support up to 6 items.

    View Slide

  50. 2. Secondary navigation must support an unlimited

    number of items.

    View Slide

  51. 3. Keyboard accessible

    View Slide

  52. View Slide

  53. bit.ly/StickyNav

    View Slide

  54. !







    Link Text





    View Slide

  55. @theme: #C2D6EB;
    @nav-font-size: 0.6875em; // 11px
    @nav-size: 8.636363636em; // 95px
    @logo-height: 10.454545455em; // 115px
    @drawer-width: 21.363636364em; // 235px
    @highlight-num: 6;
    @min-num: 3;

    View Slide

  56. nav {
    transition: all 0.15s;
    transform: translateX(-@drawer-width);
    position: fixed;
    background: #fff;
    width: unit(@nav-size + @drawer-width, em);
    top: 0;
    bo om: 0;
    text-transform: uppercase;
    font-weight: bold;
    font-size: @nav-font-size;
    le er-spacing: -0.036363636em;
    }

    View Slide

  57. a {
    padding: 1.5em;
    border-bo om: 0;
    font-weight: normal;
    display: block;
    color: #666;
    transition: all 0.15s;
    text-decoration: none;
    img, span {
    margin-le : 0.5em;
    margin-right: 0.5em;
    display: inline-block;
    vertical-align: middle;
    }
    }

    View Slide

  58. ul {
    width: @drawer-width;
    overflow: scroll;
    &:a er {
    content: '';
    width: 1px;
    height: 100%;
    position: fixed;
    background: lighten(@theme, 10%);
    top: 0;
    right: @nav-size;
    }
    }

    View Slide

  59. View Slide

  60. !
    // --------------------------------------------------------
    // Calculate offsets, account for first link being the logo
    // --------------------------------------------------------
    @offset: @highlight-num + 1;
    @min-offset: @min-num + 1;

    View Slide

  61. .highlight(@height: @nav-size) {
    display: table;
    position: absolute;
    right: 0;
    a {
    display: table-cell;
    border-bo om: 1px solid lighten(@theme, 10%);
    color: darken(@theme, 40%);
    height: @height;
    width: @nav-size;
    padding: 0.75rem;
    text-align: center;
    vertical-align: middle;
    img {
    margin: 0 auto;
    display: block;
    width: auto;
    }
    span { margin: 0.5em inherit }
    }

    View Slide

  62. View Slide

  63. // --------------------------------------------------------
    // Position "primary" navigation links
    // --------------------------------------------------------
    !
    .position-nav (@index) when (@index =< @offset) {
    li:nth-child(@{index}) {
    top: unit(@logo-height + (@nav-size * (@index - 2)), em);
    }
    !
    .position-nav(@index + 1);
    }
    .position-nav (@index) when (@index > @offset) {
    .position-more(@index);
    }
    !
    .position-more(@index) when (@index > @min-offset) {
    .more {
    top: unit(@logo-height + (@nav-size * (@index - 2)), em);
    }
    }

    View Slide

  64. nav {
    li:first-child {
    .highlight(@logo-height);
    top: 0;
    img {
    max-width: 100%;
    }
    }
    li:nth-child(-n+@{min-offset}) {
    .highlight();
    }
    .position-nav (2); // nth-child to start with
    }

    View Slide

  65. // --------------------------------------------------------
    // Generate media queries
    // --------------------------------------------------------
    !
    .add-media-query (@index) when (@index > @min-num) {
    @total-nav-height: (@nav-size * @index + @logo-height);
    @fraction1: (@total-nav-height / 100);
    @fraction2: (@nav-font-size * 100);
    @root: unit((@fraction1 * @fraction2), em);

    }

    View Slide

  66. .add-media-query (@index) when (@index > @min-num) {

    !
    nav {
    @media screen and (min-height: @root) {
    li:nth-child(-n+@{index}) { .highlight() }
    }
    !
    @media screen and (max-height: @root) {
    .position-more(@index);
    }
    }
    .add-media-query(@index - 1);
    }
    !
    .add-media-query (0) {}
    .add-media-query (@offset);

    View Slide

  67. View Slide

  68. WHAT ELSE CAN WE DO?
    Single Page Navigation
    Galleries
    Scrolling Sites
    Takeovers

    View Slide

  69. EMBRACE THE VERTICAL
    @aebsr hzdg.com

    View Slide