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
3. EMBRACE THE VERTICAL The Future of Height-Based Media Queries
4. “ “What do you want to know about vertical media queries?”
5. WHAT’S A VERTICAL MEDIA QUERY? UH…
6. Good question.
7. But first, what’s a media query?
8. A media query allows you to tailor your layout based on any number of conditions against a media type.
9. AVAILABLE CONDITIONS Aspect ratio, Orientation, Resolution, Color and Size Aspect Ratio Orientation Resolution Color Size
10. LET’S TALK
 ABOUT SIZE. It’s not just the width that ma ers.
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/
13. @media (max-width: 600px)
14. @media (max-height: 600px)
15. So What?
16. 1. Content size is variable not intrinsic.
17. 2. Increases scrolling.
18. 3. Device* fragmentation
19. NETBOOKS AND APPLES AND ANDROIDS, OH MY!
20. REMEMBER THIS? http://opensignal.com/reports/fragmentation-2013/
22. BETTER?
23. BEST?
24. 4. Squishy isn’t good enough.
25. IT’S A DODGEBALL… UNLESS
26. “ “Squishy is a legacy solution, but it is the foundation of responsive web design.” – Me
27. FLUID CIRCA 1999 <table style="width: 100%"></table>
28. AND THAT’S HOW WE GOT HERE.
29. So, what do we do?
30. ADAPT Or die trying.
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
32. So, what are vertical media queries again?
33. An adaptive solution.
34. MEAT & POTATOES HTML & CSS
35. Wikipedia.com Long Form Reading
36. Users of supported mobile devices are automatically redirected to the official mobile version of Wikipedia. http://en.wikipedia.org/wiki/Help:Mobile_access
38. MOBILE VS DESKTOP Accordion Layout Center Images Serif Font Simplified Navigation
39. <div id="content"> <h1>Article Title</h1> <div class=“thumb”> <img src=“…” /> </div> <p>Introductory text...</p> <h2 aria-role="content_block_0">Section Title</h2> <div id="content_block_0"> <p>Lorem ipsum dolor....</p> </div> </div>
40. <article> <h1>Article Title</h1> <figure> <img src=“…” /> </figure> <p>Introductory text...</p> <h2 id=“section-1">Section Title</h2> <sections> <p>Lorem ipsum dolor....</p> </sections> </article>
41. bit.ly/WikiProto
42. article { font: 300 1em/1.6 sans-serif; } ! article h2 { border-bo om: 1px solid #000; } ! article figure { float: right; text-align: center; }
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; } }
46. BENEFITS OF AN ADAPTIVE WIKIPEDIA.COM No Device Detection Single Code Base SEO & Sharability
47. vw.com Sticky ‘Vertical’ Nav
48. New requirements.
49. 1. Primary navigation must support up to 6 items.
50. 2. Secondary navigation must support an unlimited
 number of items.
51. 3. Keyboard accessible
53. bit.ly/StickyNav
54. ! <nav> <ul> <!— Logo —> <li><a href=“"><img src=“…”/></a></li> <li> <a href=“"> <img src=“…” /> <span>Link Text</span> </a> </li> <li>…</li> </ul> </nav>
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;
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; }
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; } }
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; } }
60. ! // -------------------------------------------------------- // Calculate offsets, account for first link being the logo // -------------------------------------------------------- @offset: @highlight-num + 1; @min-offset: @min-num + 1;
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 } }
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); } }
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 }
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); … }
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);
68. WHAT ELSE CAN WE DO? Single Page Navigation Galleries Scrolling Sites Takeovers
69. EMBRACE THE VERTICAL @aebsr hzdg.com