Modern Layouts: Getting Out of Our Ruts — Generate NYC

In the early years of the web, there was a lot of experimentation and variation in 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 may be 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 could better design for the true medium at hand.

Transcript

1. Modern Layouts: Getting Out of Our Ruts @jensimmons
14. ATTACK OF THE EVEN-WIDTH GRID SYSTEMS
15. ATTACK OF THE BLOG SHAPE
19. The web wasn’t always this way.
43. Graphic Design isn’t always like this.
86. It’s Not Our Fault.
93. 20 years in. What can we do?
94. Break up the “Sidebars”
103. Get inventive with your Grids
111. Play with layers
112. background-attachment: fixed; position: fixed;
113. Make translucent
114. Rotate
115. normal.
116. rotated.
117. rotated.
118. Animate
119. Start using Flexbox
123. Use Multi-column Layout
124. Bacon ipsum dolor sit amet ex boudin frankfurter pig id meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille fatback cow doner proident cillum. Aliquip meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad, shankle esse do consequat chuck nulla incididunt shoulder prosciutto spare ribs. Adipisicing aliquip minim meatball ad pork chop pariatur id laborum jowl kevin boudin sirloin leberkas ullamco. Pariatur kielbasa tail rump pancetta biltong elit capicola incididunt deserunt exercitation ut meatloaf drumstick. Et enim reprehenderit bacon, exercitation aliqua short ribs eu officia spare ribs shankle dolor. Tail leberkas pastrami exercitation, sunt duis short loin drumstick. Hamburger chuck sausage, cupidatat ut in salami do in
125. Bacon ipsum dolor sit amet ex boudin frankfurter pig id meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille fatback cow doner proident cillum. Aliquip meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad,
126. Bacon ipsum dolor sit amet ex boudin frankfurter pig id meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad, shankle esse do consequat chuck nulla incididunt shoulder prosciutto spare ribs. Adipisicing aliquip minim meatball ad pork chop pariatur id laborum jowl kevin boudin sirloin leberkas ullamco. Pariatur kielbasa tail rump pancetta biltong elit capicola incididunt deserunt exercitation ut meatloaf drumstick. Et enim reprehenderit bacon, exercitation aliqua short ribs eu officia spare ribs shankle dolor. Tail leberkas pastrami exercitation, sunt duis short loin drumstick. Hamburger chuck sausage, cupidatat ut in salami do in fugiat meatball elit. Nisi meatloaf fatback strip steak swine bresaola. Bresaola excepteur adipisicing, ad beef turkey short ribs
127. Bacon ipsum dolor sit amet ex boudin frankfurter pig id meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Leberkas meatloaf salami tongue cupidatat spare ribs. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf ribeye ut swine andouille occaecat exercitation dolor ham. Elit chuck labore ribeye. Duis aliqua ex, fugiat dolor kielbasa ham hock. Culpa drumstick commodo anim eu, shank cupidatat ham hock deserunt ham fatback esse non kevin pancetta. Id cow chuck meatball reprehenderit pork belly. Ham hock pork loin ribeye tenderloin jerky do porchetta pork consequat cupidatat spare ribs ut tail enim brisket. Aliquip nostrud pancetta est, turducken brisket andouille fatback cow doner proident cillum. Aliquip meatloaf elit, ad capicola veniam reprehenderit non salami. Beef ribs minim biltong adipisicing sirloin incididunt leberkas. Ham enim in tri-tip elit culpa rump nostrud cillum cow pork belly jowl ut. Minim commodo ad, shankle esse do consequat chuck nulla incididunt shoulder prosciutto spare ribs. Adipisicing aliquip minim meatball ad pork chop pariatur id laborum jowl kevin boudin sirloin leberkas ullamco. Pariatur kielbasa tail rump pancetta biltong elit capicola incididunt deserunt exercitation ut meatloaf drumstick. Et enim reprehenderit bacon, exercitation aliqua short ribs eu officia spare ribs shankle dolor. Tail leberkas pastrami exercitation, sunt duis short loin drumstick. Hamburger
128. Bacon ipsum dolor sit amet ex boudin frankfurter pig id meatloaf. Nisi kielbasa rump esse. Id cupidatat proident eu sed aliqua pancetta porchetta dolore sausage tongue beef occaecat. Brisket corned beef voluptate, ham hock nisi shoulder irure ut. Commodo mollit jerky turkey dolor. Laborum elit jowl boudin kielbasa consectetur, sint venison incididunt. Magna kielbasa meatloaf.
129. Pray for Regions or Fragmentation or whatever it’ll be
139. Use Viewport Units
141. Shapes Masks
148. Inspiration
149. or, aka You Can Raid the Long Legacy of Magazine Design
168. Translate. Don’t Transfer.
173. Keep learning.
174. #49: CSS Layouts with Rachel Andrew #9: Mark Boulton on Grids 5by5.tv/webahead iTunes store
178. Follow @jensimmons to get these slides.
182. Thanks! Jen Simmons @jensimmons The Web Ahead 5by5.tv/webahead