This website is currently in the process of being refactored and redesigned. So if anything looks broken, or simply looks like it's been "designed by a developer", that's why.

Blog archive

80 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.

  • CSS-only scrollspy effect using scroll-marker-group and :target-current

  • Are 'CSS Carousels' accessible?

  • Tag, You're It

  • Accessible notifications with ARIA Live Regions (Part 2)

  • Accessible notifications with ARIA Live Regions (Part 1)

  • Setting up a screen reader testing environment on your computer

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

  • 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-conformant focus indicators

  • 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

  • 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

  • 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?

  • Just write.

  • On Switching from HEX & RGB to HSL

  • SVG Filters: The Crash Course

  • On Designing and Building Toggle Switches

  • 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

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

  • Migrating from Jekyll+Github Pages to Hugo+Netlify

  • Building a fully-accessible help tooltip

    ...is harder than I thought.

  • Mimic Relative Positioning Inside an SVG with Nested SVGs

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

  • SVG Style Inheritance and the ‘Flash Of Unstyled SVG’

    On Using SVG Presentation Attributes To Provide Style Fallback for CSS Failure Scenarios

  • Animated SVG vs GIF [CAGEMATCH]

  • Tips for Creating and Exporting Better SVGs for the Web

  • CSS vs. SVG: The Final Round(up)

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

  • CSS vs SVG: Styling Checkboxes and Radio Buttons

  • Building A Circular Navigation with CSS Clip Paths

  • CSS vs. SVG: Graphical Text Effects

  • Styling the Contents of SVG with CSS

  • Art-Directing an SVG Embedded Using

    A Mini Case Study of Embedding, Art-Directing and Providing Accessible Fallback For The <em>Provata Health</em> Results Infographic

  • The State of SVG Animation

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

  • An Introduction To Graphical Effects in CSS

  • A Primer To Background Positioning In CSS

  • Building a Circular Navigation with SVG

  • Extending the Color Cascade with the CSS currentColor Variable

  • Better SVG Fallback and Art Direction With The Element

  • Compositing And Blending In CSS

  • Useful SVGO[ptimization] Tools

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

  • Tips For Optimizing SVG Delivery For The Web

  • An Overview Of SVG Sprite Creation Techniques

  • Styling and Animating SVGs with CSS

  • A Guide to SVG Animations (SMIL)

  • Making SVGs Responsive With CSS

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

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

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

  • Clipping in CSS and SVG — The clip-path Property and Element

  • Structuring, Grouping, and Referencing in SVG — The, , and Elements

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

  • Moving Forward With CSS Shapes

  • CSS Shapes 101

  • CSS Regions Matter

  • Animating CSS Shapes with CSS Animations and Transitions

  • Using CSS Regions With CSS Shapes For A Better Reading Experience

  • Techniques For Creating Textured Text

  • Techniques For Responsive Typography

  • CSS Overlay Techniques

  • Creating Non-Rectangular Layouts With CSS Shapes

  • Navicon Transformicons: Animated Navigation Icons with CSS Transforms

  • Building A Circular Navigation With CSS Transforms

  • Lessons from the “Seductive Interaction Design” Book

    • Subscribe elsewhere

    RSS

    Get my latest content in your favorite RSS reader. (What is RSS?)


    This Web site is made in Lebanon 🇱🇧 • Built with Eleventy and hosted on Netlify.

    No large language models (LLMs) were used to create this website or any of its content.

    © Sara Soueidan 2013–Today. All rights reserved.