articles on design engineering

87 articles on design engineering covering project case studies, thought process, front-end strategy, techniques and best practices, focused on HTML, CSS, SVG, accessiblity, and everything in between.

The CSS prefers-color-scheme user query and order of preference

Published on Sun Oct 03 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

In Quest of Search

Published on Wed Sep 15 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

A guide to designing accessible, WCAG-compliant focus indicators

Published on Fri Aug 13 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

I’m curating the programme for an upcoming accessibility-focussed conference ✨

Published on Mon Aug 02 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

A couple of ways to highlight code syntax in Apple Keynote slides

Published on Sun May 23 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Design for reading: tips for optimizing content for Reader modes and reading apps

Published on Mon May 10 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Component-level art direction with CSS Container Queries

Published on Sun May 09 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

🛠 Redesigning and rebuilding my Web site from the ground up

Published on Thu Apr 01 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Not Your Typical Horizontal Rules

Published on Thu Mar 25 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

Accessible Text Labels For All

Published on Wed Mar 17 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

How I set up Glyphhanger on macOS for optimizing and converting font files for the Web

Published on Tue Mar 02 2021 00:00:00 GMT+0000 (Coordinated Universal Time)

"Yes or No?" — One Checkbox vs Two Radio Buttons.

Published on Sat Nov 21 2020 00:00:00 GMT+0000 (Coordinated Universal Time)

Inclusively Hiding & Styling Checkboxes and Radio Buttons

Published on Tue Jun 16 2020 09:11:58 GMT+0000 (Coordinated Universal Time)

Optimizing keyboard navigation using tabindex and ARIA

Published on Tue Jun 09 2020 17:01:45 GMT+0000 (Coordinated Universal Time)

Global and Component Style Settings with CSS Variables

Published on Mon Jun 01 2020 09:33:07 GMT+0000 (Coordinated Universal Time)

What a Year of Learning and Teaching Accessibility Taught Me

Published on Wed Dec 25 2019 00:00:00 GMT+0000 (Coordinated Universal Time)

Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report

Published on Thu Oct 10 2019 09:54:41 GMT+0000 (Coordinated Universal Time)

Accessible Icon Buttons

Published on Wed May 22 2019 12:59:17 GMT+0000 (Coordinated Universal Time)

The SVG Filters Series

Published on Tue Jan 15 2019 00:00:00 GMT+0000 (Coordinated Universal Time)

The Refactoring UI Book

Published on Wed Jan 02 2019 07:36:45 GMT+0000 (Coordinated Universal Time)

Nested Links Without Nesting Links

Published on Fri Sep 07 2018 09:51:51 GMT+0000 (Coordinated Universal Time)

How do you mark up an accordion?

Published on Mon Sep 03 2018 10:54:24 GMT+0000 (Coordinated Universal Time)

On Switching from HEX & RGB to HSL

Published on Sun Aug 12 2018 11:31:26 GMT+0000 (Coordinated Universal Time)

SVG Filters: The Crash Course

Published on Sat Aug 11 2018 00:47:34 GMT+0000 (Coordinated Universal Time)

Interview: net Magazine September 2018 Issue #310

Published on Thu Aug 09 2018 11:09:53 GMT+0000 (Coordinated Universal Time)

On Designing and Building Toggle Switches

Published on Mon Jul 23 2018 01:51:50 GMT+0000 (Coordinated Universal Time)

A new Smashing talk. A smashing new experience.

Published on Wed Jun 27 2018 21:15:03 GMT+0000 (Coordinated Universal Time)

Going Offline

Published on Mon Apr 23 2018 15:37:23 GMT+0000 (Coordinated Universal Time)

Case Study: Optimizing SVG Text & Image Delivery with Inline SVG

Published on Wed Jan 10 2018 16:55:20 GMT+0000 (Coordinated Universal Time)

Cropping & Scaling Images Using SVG Documents

Published on Tue Jan 02 2018 04:07:56 GMT+0000 (Coordinated Universal Time)

Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit

Published on Fri Dec 29 2017 00:00:00 GMT+0000 (Coordinated Universal Time)

Building a fully-accessible help tooltip

Published on Tue Jan 24 2017 00:00:00 GMT+0000 (Coordinated Universal Time)

Mimic Relative Positioning Inside an SVG with Nested SVGs

Published on Mon Jun 27 2016 00:00:00 GMT+0000 (Coordinated Universal Time)

Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG

Published on Mon Apr 25 2016 00:00:00 GMT+0000 (Coordinated Universal Time)

SVG Style Inheritance and the ‘Flash Of Unstyled SVG’

Published on Tue Mar 01 2016 00:00:00 GMT+0000 (Coordinated Universal Time)

2015 In Review

Published on Wed Jan 06 2016 00:00:00 GMT+0000 (Coordinated Universal Time)

Animated SVG vs GIF [CAGEMATCH]

Published on Tue Nov 24 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Tips for Creating and Exporting Better SVGs for the Web

Published on Mon Nov 16 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Developer of the Year 2015 net Award

Published on Tue Sep 22 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS vs. SVG: The Final Round(up)

Published on Wed Sep 16 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components

Published on Tue Sep 01 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS vs SVG: Styling Checkboxes and Radio Buttons

Published on Wed Aug 26 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Building A Circular Navigation with CSS Clip Paths

Published on Mon Aug 17 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS vs. SVG: Graphical Text Effects

Published on Fri Jul 31 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Chapter 4, Smashing Book 5

Published on Tue Jul 21 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Styling the Contents of SVG<use> with CSS

Published on Thu Jul 16 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Art-Directing an SVG Embedded Using <object>

Published on Wed Jul 08 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

The State of SVG Animation

Published on Fri Jun 05 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS

Published on Thu May 21 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

An Introduction To Graphical Effects in CSS

Published on Wed Apr 29 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

I Won A Web Platform Award

Published on Wed Apr 22 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

A Primer To Background Positioning In CSS

Published on Tue Mar 24 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Building a Circular Navigation with SVG

Published on Mon Mar 09 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Extending the Color Cascade with the CSS currentColor Variable

Published on Tue Feb 24 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Better SVG Fallback and Art Direction With The <picture> Element

Published on Sun Feb 15 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

I Wrote A CSS Reference.

Published on Wed Feb 04 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Compositing And Blending In CSS

Published on Tue Jan 27 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Useful SVGO[ptimization] Tools

Published on Mon Jan 26 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Using The CSS :target Selector To Create JavaScript-less UI Effects

Published on Sat Jan 24 2015 00:00:00 GMT+0000 (Coordinated Universal Time)

Tips For Optimizing SVG Delivery For The Web

Published on Fri Dec 19 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

An Overview Of SVG Sprite Creation Techniques

Published on Tue Dec 16 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Styling and Animating SVGs with CSS

Published on Mon Nov 03 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

A Guide to SVG Animations (SMIL)

Published on Mon Oct 13 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Making SVGs Responsive With CSS

Published on Tue Aug 19 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports

Published on Tue Aug 05 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute

Published on Wed Jul 30 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio

Published on Thu Jul 17 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Clipping in CSS and SVG — The clip-path Property and <clipPath> Element

Published on Tue Jul 08 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Structuring, Grouping, and Referencing in SVG — The<g>, <use>, <defs> and <symbol> Elements

Published on Thu Jul 03 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Everything You Need To Know About The CSS will-change Property

Published on Tue Jun 10 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Moving Forward With CSS Shapes

Published on Mon May 05 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS Shapes 101

Published on Tue Apr 29 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS Regions Matter

Published on Sat Feb 15 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Animating CSS Shapes with CSS Animations and Transitions

Published on Tue Jan 14 2014 00:00:00 GMT+0000 (Coordinated Universal Time)

Using CSS Regions With CSS Shapes For A Better Reading Experience

Published on Thu Dec 05 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Techniques For Creating Textured Text

Published on Mon Dec 02 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Techniques For Responsive Typography

Published on Mon Nov 11 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

CSS Overlay Techniques

Published on Thu Nov 07 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Creating Non-Rectangular Layouts With CSS Shapes

Published on Tue Nov 05 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Navicon Transformicons: Animated Navigation Icons with CSS Transforms

Published on Sun Oct 20 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Draggable Metro App Showcase

Published on Tue Aug 20 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Building A Circular Navigation With CSS Transforms

Published on Fri Aug 09 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

S Gallery: A Responsive jQuery Gallery Plugin with CSS3 Animations

Published on Fri Jul 12 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Creative Add/Remove Effects for List Items with CSS3 Animations

Published on Thu Jun 27 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Horizontal Portfolio Layout with CSS3 Animations and jQuery

Published on Sat Jun 15 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

Lessons from the “Seductive Interaction Design” Book

Published on Fri Apr 26 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

How to Create Windows-8-like animations with CSS3 and jQuery

Published on Mon Feb 11 2013 00:00:00 GMT+0000 (Coordinated Universal Time)

The Bird’s-eye View on Design Engineering

Every 2–3 weeks, I send out a personalized email newsletter with useful news, links, resources, tips, and latest updates on design engineering — from my own work as well as the work and articles created by smart people in the community.

Birds of feather, flock together. Join the flock!

Real. Simple. Syndication.

Get my latest content in your favorite RSS reader.

What is RSS?