#164 - What is the Web?
Hey everyone,
Welcome to issue #164, your weekly roundup of what’s happening in design, code and typography.
Thought provoking #
What is the Web? Is the Web of 1990 the Web of 2020, and will it be the web of 2050? What will it become? In this article based on a lecture delivered to Monash University design students, John Allsopp looks at our failures to fulfil the web’s promise and how it’s now the responsibility of those just beginning their careers to do better.
“Constraints are necessary for creative work. Without them, nothing happens. Our minds spiral into dozens of directions and we eventually despair. Full “creative freedom” doesn’t exist unless you’re doing a personal art project – and even then, constraints are usually helpful.” Tobias van Schneider in The myth of “creative freedom”.
Design and Code #
Responsive Height Design. We always test horizontally by reducing the width, but rarely test vertically by reducing the browser height. This article by Ahmad Shadeed looks at why it’s important to test both horizontally and vertically.
The State of CSS. The annual survey about the latest trends in CSS is now live. Take the survey and help spread the word.
Thinking Outside the Box with CSS Grid. Alex Trost digs into the incredible work of Andy Barefoot who creates gorgeous and responsive layouts that feel so different from your typical web design.
Writing even more CSS with Accessibility in Mind, Part 2: Respecting user preferences. Operating systems and browsers provide users with options to customize their browsing experience, and it’s our job to respect these preferences in our style sheets. Manuel Matuzovic shows how.
Typography #
Launching Typeland’s Independent Marketplace + 3 Exclusive New Fonts. Type designers Alessia Mazzarella and Vaibhav Singh have taken the plunge to launch a new website for their independent retail font library.
CSS Text Effects - Five Minimal Examples. “Knockout” or “cutout” text, where words clip a background image, gradient or video, are possible with very little code. The article explores CSS text masking and clipping techniques using the background-clip and clip-path properties.
The good line-height. A clever tool to help you figure out the correct line-heights for a type scale following an 8 point baseline grid.
Something to watch #
Don’t Read 100 Books Per Year - 6 Reasons to Read Fewer Books from Nat Eliason.
Content (from me) #
How to build a Vertical image slider with CSS position sticky. This quick Codepen is based on a technique I discovered on the Munken CoLab website. It’s surprisingly simple to write with only a few lines of CSS.