articles on design engineering

88 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)

Accessibility features benefit everyone

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)