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

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