Articles on design engineering
Project case studies, thought processes & design thinking, front-end strategy, and techniques and best practices, focused on HTML, CSS, SVG, accessiblity, and everything in between.
-
In Quest of Search On why I think adding a new HTML sectioning element for search is a good idea.
-
A guide to designing accessible, WCAG-compliant focus indicators
-
I’m curating the programme for an upcoming accessibility-focussed conference ✨
-
A couple of ways to highlight code syntax in Apple Keynote slides
-
Design for reading: tips for optimizing content for Reader modes and reading apps
-
Component-level art direction with CSS Container Queries
-
Working around the viewport-based fluid typography bug in Safari
-
🛠 Redesigning and rebuilding my Web site from the ground up ...and in the open
-
Not Your Typical Horizontal Rules
-
Accessible Text Labels For All On improving eCommerce experiences for screen reader users without breaking them for speech-input users
-
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
-
"Yes or No?" — One Checkbox vs Two Radio Buttons.
-
Inclusively Hiding & Styling Checkboxes and Radio Buttons
-
Optimizing keyboard navigation using tabindex and ARIA A micro-case study on implementing keyboard-friendlier article listings for an online publication
-
Global and Component Style Settings with CSS Variables Or how I use CSS variables to create more manageable project styles and more portable patterns
-
What a Year of Learning and Teaching Accessibility Taught Me
-
Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report
-
Accessible Icon Buttons
-
The SVG Filters Series
-
The Refactoring UI Book
-
Nested Links Without Nesting Links
-
How do you mark up an accordion?
-
On Switching from HEX & RGB to HSL
-
SVG Filters: The Crash Course
-
Interview: net Magazine September 2018 Issue #310
-
On Designing and Building Toggle Switches
-
A new Smashing talk. A smashing new experience.
-
Going Offline sarasoueidan.com is now a Progressive Web App!
-
Case Study: Optimizing SVG Text & Image Delivery with Inline SVG When One SVG Embedding Technique Is Not Enough
-
Cropping & Scaling Images Using SVG Documents The SVG snippet that replaces a CSS object-fit declaration