# data[].attributes.title
(Dutch) Het web is klaar voor geweldig grafisch ontwerp

# data[].attributes.blurb.html
Veel van ‘s werelds mooiste drukwerk is ontworpen op vaste canvassen, met vaste content en enige zekerheid over kleur. Op het web is onze tooling flexibeler. Met media queries, flexibele units, Grid Layout en flexbox kunnen we geweldig grafisch ontwerp realiseren. In deze presentatie laat Hidde CSS zien die geweldig grafisch ontwerp in de praktijk brengt, op het web. Laat je inspireren door de iconen uit de geschiedenis van grafisch ontwerp, en leer over nieuwe CSS properties die je vandaag in projecten kunt toepassen.

# data[].attributes.slidedeck.data[].slides[].desc.html
Het web is klaar voor geweldig grafisch ontwerp HIDDE DE VRIES, 15/10/2019, TILBURG TECH MEETUP @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Hidde de Vries @hdv Freelance front-end ontwikkelaar, accessibility specialist, blogger, bij hiddedevries.nl Sinds 2019 werkzaam voor W3C/WAI, daarvoor o.a. Mozilla, Gemeente Den Haag, Ministerie van BZK. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
GRAFISCH ONTWERP en het WEB @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“We’re going to run a few workshops to collect feedback and to get your help with making the spec better and easier to understand ” — Fantasai http://fantasai.inkedblade.net/style/events/grid-workshop @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Amsterdam, 2016. Photo: Michiel Bijl @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Er is een nieuwe tijd aangebroken voor grafisch ontwerp op het web @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
wat is GEWELDIG GRAFISCH ONTWERP? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Modernisme in grafisch ontwerp @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Die neue Typography Jan Tschichold, 1928 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Moderne tijden vragen om functie boven vorm. Duidelijkheid, ipv ‘schoonheid’. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Asymmetrische uitlijning is effectiever Source: Jan Tschichold, Die Neue Typographie. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Ontwerp zodanig dat de ogen van het ene woord naar het andere worden geleid Source: Jan Tschichold, Die Neue Typographie. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ If we think clearly and approach each task with a fresh and determined mind, a good solution will usually result. — Jan Tschichold In: The New Typography, 69. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Raster systeme für die visuele Gestaltung Josef Müller-Brockmann, 1981 Photo JMB: MoMA @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
functioneel Waarom grids? logisch ziet er mooier uit @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ The grid makes it easier to give the surface or space a rational organization. — Joseph Müller-Brockmann In: Grid systems 11. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“Grid fields” @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Josef Müller Brockmann, Grid systems. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Gebruik van proportie voor grootte van grid areas Poster: Josef Müller-Brockmann. Source: grafik.net @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Gebruik van proportie voor grootte van grid areas Poster: Josef Müller-Brockmann. Source: grafik.net @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Photo: Dezeen, https://vimeo.com/21969124. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Posters: Wim Crouwel @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Posters: Wim Crouwel @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Spreads from Vrij Nederland @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Corporate identities / huisstijlen @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Design systems 1.0 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“Finch logo” by Dirk Roosenburg @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Logo by KLM Design Department @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Logo analysis by David Ogilvy @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Redesign by F. Henrion @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Various examples from the Total Design portofolio, source: https://totalidentity.nl/1974-1983 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Standaardisering van papiergroottes, kleuren, etc… @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Grids gemaakt voor het (automated) verwerken van formulieren Bakker, Droom van Helderheid, 298. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
grids neutrale lettertypes De revolutie van modernistisch grafisch ontwerp wiskundige verhoudingen function over form @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Niet iedereen was fan. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “TD brengt een stijl als ieder andere. Ik zou het zelfs een stijltje willen noemen” — Piet Schreuders In: Piet Schreuders, Lay in, lay out. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ “dodelijk saaie affiches van het Stedelijk Museum” — Piet Schreuders In: Piet Schreuders, Lay in, lay out. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Teveel objectiviteit leidt tot hele saaie layouts (Dit zien we ook op het web) @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Laten we de goede dingen van modernisme gebruiken @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
CSS = regels voor hoe websites eruit zien @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Als front-end ontwikkelaar abstraheer ik ontwerp in herbruikbare regels @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Geweldig grafisch ontwerp in CSS @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://markboulton.co.uk/journal/anewcanon @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Floats die niet vierkant zijn Variabele fonts box-sizing: border-box Controle over woordafbreking HSL kleuren Blend Modes object-fit @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Nieuwe layout modes: flexbox en grid @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Gelijke hoogten @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Style Style Style Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Style Style Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate stra-tegy foster collaborative thinking further the overall value proposition. A longer heading Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Stretch als default .container { display: flex; // not default align-items: flex-start; } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Stretch als default .container { display: flex; // the default align-items: stretch; } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Witruimte en bewuste plaatsing @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ Pencil and paper is cheap and quick. It lets me iterate in my head how I want my tracks to behave, while helping me visualise the final effect. — Hui Jing Chen, “How I design with CSS Grid” https://www.chenhuijing.com/blog/how-i-design-with-css-grid @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ https://www.chenhuijing.com/blog/how-i-design-with-css-grid/ @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration. Collaboratively administrate empowered markets via plug-and-play networks. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to derive convergence on cross-platform integration.
<div class=”container”> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> </div> Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
.container { display: grid; grid-template-columns: repeat( 4, 1fr ); } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. https://codepen.io/hidde/pen/bKGWpr Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in realtime will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. Collaboratively administrate empowered markets via plugand-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in realtime will have multiple https://codepen.io/hidde/pen/bKGWpr Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnolog y immersion along the information highway will close the loop on focusing solely on the bottom line. Collaboratively administrate empowered markets via plug-and-play networks. Dynamically procrastinate B2C users after installed base benefits. Dramatically visualize customer directed convergence without revolutionary ROI.
<div class=”container”> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> </div> @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table
<div class=”container”> <div class=”container”> <div class=”content”> <div class=”content”> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> <p>(…)</p> </div> <p>(…)</p> </div> </div> </div> https://codepen.io/hidde/pen/bKGWpr @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
1 2 3 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for https://codepen.io/hidde/pen/bKGWpr 4 5 .content { grid-column: 2 / 4; } .content { grid-column: 2 / 4; } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
1 2 3 4 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for https://codepen.io/hidde/pen/bKGWpr 5 .content { grid-column: 3 / 5; } .content { grid-column: 2 / 4; } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
1 2 3 4 Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. 5 .content { grid-column: 2 / 5; } .content { grid-column: 2 / 4; } Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. https://codepen.io/hidde/pen/bKGWpr @hdv @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In Grid Layout is een ruimte leeglaten net zo makkelijk als ‘m vullen @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Je kunt met Grid Layout dus bewuste keuzes maken over plaatsing en witruimte @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ a webpage […] doesn’t have one single composition — Vasilis van Gemert, “Layout is like a sculpture” https://vasilis.nl/nerd/layout-on-screen-is-like-a-sculpture/ @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Wiskundige verhoudingen @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Triviale ratio’s: flexbox .container { display: flex; } #item-1 { flex: 2 flex: 1 flex: 2; } #item-2 { flex: 1; } https://codepen.io/hidde/pen/QxLeGK @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Triviale ratio’s: grid .container { .container { display: grid; display: grid; grid-template-columns: 1fr 3fr 2fr 1fr; grid-template-columns: } 1fr 3fr 2fr 1fr; 1fr 3fr https://codepen.io/hidde/pen/ZRzgBX 2fr 1fr } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In verhouding tot gestandaardiseerde papiergroottes @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
A1 A0 A3 A2 A4 A5 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In verhouding tot gestandaardiseerde papiergroottes viewport @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In verhouding tot gestandaardiseerde papiergroottes elke willekeurige viewport @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Viewport units: vw, vh @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een grid met viewport units .container { display: grid; grid-template-columns: repeat( 8, 12.5vw ); grid-template-rows: repeat( 8, 12.5vh ); } https://codepen.io/hidde/pen/odyZeL @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een grid met viewport units .tomato { grid-column: 2 / 4; grid-row: 2 / 4; background: tomato; } https://codepen.io/hidde/pen/odyZeL @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een grid met viewport units .gold { grid-column: 4 / 8; grid-row: 3 / 8; background: gold; } https://codepen.io/hidde/pen/odyZeL @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een grid met viewport units https://codepen.io/hidde/pen/odyZeL @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een grid met viewport units https://codepen.io/hidde/pen/odyZeL @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Overlappende content @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Foto’s in grids .photo { grid-column: 3 / 8; grid-column: 1 / 4; } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Foto’s in grids .photo { grid-column: 3 / 8; grid-column: 1 / 4; Ximending, it’s busy! Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. } .content { grid-column: 1 / 4; Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. grid-row: 3 / 8; } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Overlap en z-index .photo { (…) z-index: 1; Ximending, it’s busy! } Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Overlap en z-index .content { (…) z-index: 1; Ximending, it’s busy! } Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Multi-column CSS Masking Niet-vierkante floats Writing modes en nog heel veel meer @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Zijn we er KLAAR voor? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Gaat alles er wel hetzelfde uitzien in elke browser? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
terrible layout beautiful grid layout @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
terrible layout beautiful grid layout In Safari, Chrome, Edge, Firefox, Opera, Samsung Internet @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In browsers that don’t support Grid Layout. terrible layout beautiful grid layout In Safari, Chrome, Edge, Firefox, Opera, Samsung Internet @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
terrible layout simpler, but pretty ok fallback In browsers that don’t support Grid Layout. beautiful grid layout In Safari, Chrome, Edge, Firefox, Opera, Samsung Internet @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In code betekent dat… @supports, the cascade en floats overrides https://www.smashingmagazine.com/2017/11/css-grid-supporting-browsers-without-grid/ @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@supports @supports ( display: grid ) { // Specificeer de regels die je wilt laten volgen // als de browser Grid Layout ondersteunt } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een waarschijnlijke @supports @supports ( display: grid ) { .thing { margin: 0; width: auto; } } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Floats ongedaan maken .thing { float: left; } @supports ( display: grid ) { // Floats hoef je niet ongedaan te maken; de spec // heeft dit ingebakken. Browsers die Grid ondersteunen, // negeren floats automatisch als je Grid gebruikt. } @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
In code betekent dat… Houd je fallbacks zo simpel mogelijk @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Qua samenwerking betekent dat… Experimenteer samen! https://fronteers.nl/congres/2014/jam-session/call-to-arms @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://twitter.com/stephenhay/status/1001547819969318912 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Qua samenwerking betekent dat… Laat je collega’s de realiteit zien, en simpele manieren om ermee te dealen @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
code is complexer overleg is complexer beter op termijn @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ Web design is engineering: it’s not about finding perfection, it’s finding the best compromise. — Oliver Reichenstein In: Responsive typography: the basics (2012). https://ia.net/topics/responsive-typography-the-basics @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Het web is klaar voor geweldig grafisch ontwerp @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Dingen die je vroeger lastig voor elkaar kreeg, zitten nu in de browser @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ Can web design inspire graphic design? How can we lead the way? — Vasilis van Gemert @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Hoe kunnen we het meest uit dit NIEUWE TIJDPERK halen? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
interactief flexibel standaarden toegankelijk @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Het web is flexibel by default @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Canvas staat vast Tekst al bekend Voorspelbare kleuren @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Canvas staat vast is flexibel Tekst al bekend n e r e d n a r e v t n a t s kan con Voorspelbare kleuren Overal andere @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility (…) — John Allsopp In: A dao of web design. http://alistapart.com/article/dao @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Als we flexibiliteit omarmen, kunnen we effectiever werken (En hebben we meer tijd om te zorgen dat de gebruiker kan doen waarvoor ze kwam) @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
minmax() fr min-content / max-content ch @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een kolom van 50 karakters Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. 1fr Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. .content { display: grid; grid-template-columns: 1fr 50ch 1fr; 1fr } Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to 50ch https://www.w3.org/TR/css3-values/#font-relative-lengths @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Een kolom van 45-70 karakters Leverage agile frameworks to provide a robust synopsis for high level overviews. Iterative approaches to corporate strategy foster collaborative thinking to further the overall value proposition. Organically grow the holistic world view of disruptive innovation via workplace diversity and empowerment. 1fr Bring to the table win-win survival strategies to ensure proactive domination. At the end of the day, going forward, a new normal that has evolved from generation X is on the runway heading towards a streamlined cloud solution. User generated content in real-time will have multiple touchpoints for offshoring. Capitalize on low hanging fruit to identify a ballpark value added activity to beta test. Override the digital divide with additional clickthroughs from DevOps. Nanotechnology immersion along the information highway will close the loop on focusing solely on the bottom line. .content { display: grid; grid-template-columns: 1fr minmax(45ch, 70ch) 1fr; 1fr } Podcasting operational change management inside of workflows to establish a framework. Taking seamless key performance indicators offline to maximise the long tail. Keeping your eye on the ball while performing a deep dive on the start-up mentality to minmax( 45ch, 70ch ) https://codepen.io/hidde/pen/GGKVJb @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Het web is toegankelijk by default @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Het is vooral tekst. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
selecteerbaar kopieerbaar Het is vooral tekst. klaar voor screenreaders vergrootbaar vertaalbaar @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Door tekst gaat veel toegankelijkheid vanzelf @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
@hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Photo: Joanne Meister, https://ilovetypography.com/2013/01/12/a-firm-turn-toward-the-objective-josef-muller-brockmann-1948-1981/. @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://codepen.io/hidde/pen/bMBprB @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://codepen.io/hidde/pen/bMBprB @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://codepen.io/hidde/pen/bMBprB @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Tekst > plaatjes van tekst @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
The web is interactief by default @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Focus indicators: kan ik zien waar ik ben zonder muis? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Hide en show: verberg een deel van de content voor een minder drukke UI @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Maken transitions een ontwerp fijner? @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://swissincss.com @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Het web is gebouwd op webstandaarden @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Het loont om dicht bij de standaarden zelf te blijven @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
webstandaarden frameworks die ze abstraheren @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
frameworks die ze abstraheren webstandaarden display: flex; @include flex; class=”col sm-2 md-3” Suzy @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
“ Grid systems are overkill. I haven’t used Suzy in 5 years and I recommend that you stop [using it, too]. — Miriam Suzanne, creator of Suzy In Don’t use my grid system, presented at Beyond Tellerand (8 May 2018). https://vimeo.com/268576559 @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Bootstrap’s ingebouwde grid heeft 204 classnames om jouw layout te definiëren en alle andere mogelijke lay-outs Based on unique classnames in Bootstrap 3.1.0 starting with col- @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Kies vanilla! @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
webstandaarden frameworks die ze abstraheren be here! @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
http://jensimmons.com/post/aug-15-2017/heres-super-quick-way-try-out-css-grid @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
https://gridbyexample.com / https://thecssworkshop.com @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
http://flexboxfroggy.com / http://cssgridgarden.com @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
~ Dit kunnen we nu: ~ vlakken even hoog wiskundige verhoudingen bewustgekozen witruimte verhouding met viewports compositie met overlappende content @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
~ Ontwerp voor web is ideaal, want het web is: ~ flexibel toegankelijk interactief gestandaardiseerd @hdv

# data[].attributes.slidedeck.data[].slides[].desc.html
Bedankt! Veel dank aan Vasilis van Gemert, Krijn Hoetmer, Jenny Shen en Peter van Grieken. @hdv hidde@hiddedevries.nl https://hiddedevries.nl/en/blog https://noti.st/hdv @hdv

# data[].attributes.resources.data[].desc.html
Fantasai's idea for a Grid Layout workshop.

# data[].attributes.resources.data[].desc.html
Interview with Wim Crouwel.

# data[].attributes.resources.data[].desc.html
Examples from the Total Design portfolio

# data[].attributes.resources.data[].desc.html
Mark Boulton applying Tschichold's principles to the web.

# data[].attributes.resources.data[].title
Hui Jing Chen - How I design with CSS Grid

# data[].attributes.resources.data[].desc.html
One of the best blog posts about designing with grids, one of the tools Hui Jing shows is to sketch a grid with pencil and paper.

# data[].attributes.resources.data[].desc.html
There's a proposal for having ratios between rows and column spacing using the ar unit.

# data[].attributes.resources.data[].title
Using CSS Grid: Supporting Browsers Without Grid

# data[].attributes.resources.data[].desc.html
Rachel Andrew on supporting browsers without Grid.

# data[].attributes.resources.data[].desc.html
Maaike de Laat on working together and how developers should show designers more of what's possible.

# data[].attributes.resources.data[].title
Stephen Hay's tweet about designers that prototype

# data[].attributes.resources.data[].title
Oliver Reichenstein, Responsive typography, the basics

# data[].attributes.resources.data[].desc.html
“Web design is about finding the right compromise”

# data[].attributes.resources.data[].desc.html
“It is the nature of the web to be flexible, and it should be our role as designers and developers to embrace this flexibility (…)”

# data[].attributes.resources.data[].desc.html
In which Swiss design posters have been recreated on the web with beautiful transitions.

# data[].attributes.resources.data[].desc.html
The inventor of Suzy explains she doesn't use Suzy anymore either (great talk with fantastic Grid Layout examples)

# data[].attributes.resources.data[].title
Jen Simmons: here's a super quick way to try out CSS Grid

# data[].attributes.resources.data[].desc.html
Some examples to get started with Grid Layout.

# data[].attributes.resources.data[].desc.html
Great examples of many possible lay-outs using Grid.

# data[].attributes.resources.data[].desc.html
Rachel Andrew has an in-depth CSS Layout workshop

# data[].attributes.resources.data[].desc.html
A game to learn flexbox properties

# data[].attributes.resources.data[].desc.html
A game to learn CSS Grid Layout properties

# data[].attributes.codeblocks.data[].desc.html
Designing a grid and using parts of it

# data[].attributes.codeblocks.data[].desc.html
Creating columns that can fit about 50 characters.