Articles

The Neilson Norman group outline various problems with the PDF format for online reading, and user testing research on which icon signifier works best for accordion components. Madalyn Parker compares Accessibility Testing to making coffee (along with some brilliant illustrations), Ted Goas says we should begin our design stage in your collaborative document editor of choice — "It lowers the barrier to entry, makes it easier to cast a wide netand keeps people focused on the problem...", Leslie Mu discusses atomic design systems and the Pace Layering theory, Elad Shechter warns us that CSS Logical Properties (the ability to control layout through logical, rather than physical dimensions, e.g. for vertical or right-to-left text) aren't ready for prime time and the always beautiful Increment magazine's latest issue focuses on APIs.

PDF: Still Unfit for Human Consumption, 20 Years Later
Research spanning 20 years proves PDFs are problematic for online reading. Yet they’re still prevalent and users continue to get lost in…

Accessibility Testing is like Making Coffee
Some Background I had the privilege of creating course material to teach accessibility testing for work this past quarter. I agonized over…

The onion for Design Systems: atomic design and pace layering
— by Leslie Mu
Understand Atomic Design with Pace Layering to assist Design Systems’ construction and maintenance

All design projects should start in a Google Doc
— by Ted Goas
Most designers jump into their UI tools too quickly.

Accordion Icons: Which Signifiers Work Best?
The caret icon most clearly indicated to users that it would open an accordion in place, rather than linking directly to a new page.

Why CSS Logical Properties Aren’t Ready for Use!
— by Elad Shechter
The new CSS logical properties module is one of the most important developments to have come to CSS in recent years. This module enables…

Increment: APIs
This issue explores all things APIs—from their prehistory to their future, their design and development to their opportunities and impacts.

Techniques & Tutorials

Stephen Nixon describes how to use Variable Google Fonts, both Nils Binder and Solo Cube will test your maths skills to discuss, respectively, CSS Gradients and fixed aspect elements in Figma, Dan Klammer explais the new AVIF image format looking to improve upon JPEG, PNG and WebP images. Tomas Pustelnik talks CSS Optimisation, Chrome DevTools expert Umar Hansa discusses DevTools' Accessibility features and Matthias Ott gives us a peek into his CSS methodology.

Getting the Most Out of Variable Fonts on Google Fonts | CSS-Tricks
I have spent the past several years working (alongside a bunch of super talented people) on a font family called Recursive Sans & Mono,…

Gradient angles in CSS, Figma & Sketch
— by Nils Binder
Do you know the feeling when a subject never lets you go? In the last years, I
have worked with different graphics programs and have written…

Figma components with a fixed aspect ratio elements
— by Solo Cube
Keep an aspect ratio of a nested element when resizing its parent.

How to Use AVIF: The New Next-Gen Image Compression Format — Lightspeed
Start using next-gen .avif images today progressively with the <picture> element. The format is ~50% smaller in size compared to JPEG,…

Optimizing CSS for faster page loads
Learn how CSS affects page load times and how you can improve it by optimizing your CSS build pipeline and the way you load it.

How I Structure My CSS (for Now) · Matthias Ott – User Experience Designer
Matthias Ott is an independent user experience designer and developer from Stuttgart, Germany. Besides design practice he teaches Interface…

Accessibility In Chrome DevTools — Smashing Magazine
This article will demonstrate some useful features in DevTools which can help you improve the accessibility of your website.

Tools

Open source browser tools and CSS generators from Omatsuri, a tool for finding out the hosting/server infrastructure of a website and a WordPress plugin from ShortPixel to detect and generate correctly sized responsive images.

Omatsuri

Hosting Checker - Find out who is hosting any website
Just enter the URL and find out: The hosting company, IP, Datacenter, Location and Nameservers of any website. And check our other tools for…

ShortPixel Adaptive Images
Start serving properly sized, smart cropped & optimized images from our CDN with a click; On the fly convert WebP support.

Inspiration & Fun Stuff

Stephanie Eckles' Style Stage showcases modern CSS via user contibutions (similar to the legendary CSS Zen Garden), Max Böck's Whimsical Web showcase web design with a fun edge, whilst Pavel Laptev's Web Dark Ages gives us a blast of nostalgia. With a nod to lot of us now working from home Window Swap and Nimrod Kramer both give us a glimpse into other people workspaces.

Style Stage from Modern CSS Solutions
A modern CSS showcase styled by community contributions. Maintained by Stephanie Eckles (@5t3ph) of ModernCSS.dev.

The Whimsical Web
A curated list of sites with an extra bit of fun.

Dark Ages of the Web
Old Web features — frontend and UI patterns

WindowSwap
Open a new window somewhere in the world

15 Awesome Developer Home Workstations
— by Nimrod Kramer
Work from home is part of our lives now. This is probably where we spend most of our time, and we des...