Sara Soueidan
-
Are 'CSS Carousels' accessible?
✨ This post is sponsored by each and every one of you who has bought my Practical Accessibility course. ✨ “CSS Carousels” were formally introduced a few weeks ago in an article on the Chrome for developers blog, and quite a few people have shared the excitement since then. When I first heard of them…
Published
-
Tag, You're It
Why did you start blogging in the first place? I started blogging when I was still learning front-end development—specifically CSS—back in 2012. I was learning a lot and writing what I was learning as a way to organize my thoughts and solidify my learnings, and at some point I realized that my notes…
Published
-
Accessible notifications with ARIA Live Regions (Part 2)
In the first part of this chapter we discussed what we might need live regions for, and how to create them using HTML and ARIA. In this part, we’re going to discuss what live regions are not suitable for and why, and we’re going to discuss more robust ways to implement some common UI patterns that you…
Published
-
Accessible notifications with ARIA Live Regions (Part 1)
In this chapter, we’re going to learn about ARIA live regions — the accessible notifications system that enables us to make dynamic web content more accessible to screen reader users. Without live regions, some rich web applications would be more challenging to use for screen reader users. So if you’re…
Published
-
Setting up a screen reader testing environment on your computer
When you’re designing and developing for accessibility, performing manual testing using a screen reader is important to catch and fix accessibility and usability issues that cannot be caught by automated accessibility checkers. You can catch the majority of issues by performing testing using the screen…
Published
-
The CSS prefers-color-scheme user query and order of preference
I spent some time in Reeder app this morning, catching up with RSS and the latest articles published by my favorite blogs. I was reading Scott O’Hara’s article about using JavaScript to detect high contrast and dark modes, which includes a small, very useful script to do exactly what the title says.…
Published
-
In Quest of Search
Update: There now exists a native HTML element that maps to the ARIA search role. 🎊 As of March 24th, 2023, the HTML specification added a new grouping element: The element. Read more about the element in Scott’s introductory blog post. There’s been a recent discussion on Twitter about the idea of adding…
Published
-
A guide to designing accessible, WCAG-conformant focus indicators
figure { margin: 3em 0; } figure img { margin: 0 auto; } Imagine you visit a website and you want to browse it for some content. You want to buy something; or maybe book a flight somewhere. And as you move your cursor onto the page, it suddenly disappears. Your hand may be still on the mouse, and you’re…
Published
-
I’m curating the programme for an upcoming accessibility-focussed conference ✨
I’m speaking, MC’ing and curating the programme for Access All Areas — an upcoming accessibility-focussed conference. Here’s all about the event, and how you can join us to learn more about accessibility, and maybe even present and share your expertise at the event! About the conference (what, when,…
Published
-
A couple of ways to highlight code syntax in Apple Keynote slides
Apple Keynote doesn’t come with code syntax highlighting built in. I really wish it did, and hope that Apple would at some point add this feature, especially considering how many developers and engineers use Keynote to create talk slides. Seven years ago, I used to take screenshots of code snippets to…
Published
-
Design for reading: tips for optimizing content for Reader modes and reading apps
Our content will not always look the way we expect it or want it to. Many apps, tools, and environments that people use to browse the Web strip our content of our CSS and apply their own styles to it. And unless we always keep that in mind, we risk creating incomplete or even broken experiences for users…
Published
-
Component-level art direction with CSS Container Queries
Container Queries (CQ) allow us to change the styles of a component so it responds to the size of its nearest container. With CQ, we can change how an element looks based on where on a page it is placed and how much horizontal space it occupies. A lot about a design pattern could change based on how…
Published
-
Not Your Typical Horizontal Rules
The HTML element adds a horizontal rule (or line) wherever you place it. A horizontal rule is used to provide a visual break and divide content. Like other HTML elements, horizontal rules can be styled using CSS (and SVG). This means that they don’t have to look like boring, plain horizontal lines. You…
Published
-
Accessible Text Labels For All
My talk Applied Accessibility: Practical Tips for Creating more Accessible Front-Ends is now available to watch online. This blog post is an extended transcript for a section of the talk, in which I discuss how to create more descriptive button (and/or link) text labels that improve the e-commerce experience…
Published
-
How I set up Glyphhanger on macOS for optimizing and converting font files for the Web
I can't count the number of times I've tried installing a command line tool on my machine, only to find myself going down a black hole of node modules & dependencies, and a seemingly non-ending list of error messages in the terminal. This would go on for a while before I finally give up and call it quits…
Published
-
Inclusively Hiding & Styling Checkboxes and Radio Buttons
Checkboxes and radio buttons are two common examples of interactive form elements that we desperately want to have full control over styling but we don’t. So we’ve been hacking our way around styling them by hiding said elements with CSS and visually replacing them with pseudo-elements or an SVG image…
Published
-
Optimizing keyboard navigation using tabindex and ARIA
The faster the user can navigate your UI the better. The faster they can get to the content they need, the better. Therefore, the less steps they have to go through, the more efficient their overall experience with the UI will be. And this applies to keyboard tabbing, too: the less tabs the user needs…
Published
-
Global and Component Style Settings with CSS Variables
Ever since I learned about CSS Variables a few years back, my absolute favorite feature has been the ability to scope variables to components. But to be honest, I haven't been putting this feature to much use over the years, until I created my own pattern library last year to speed up prototyping and…
Published
-
What a Year of Learning and Teaching Accessibility Taught Me
(This article was originally published on 24accessibility). A few years ago I didn't know what the term "accessibility" meant. I built Web sites that were partially inaccessible because I didn't know better. Fast forward to today, I know enough to be able to write, speak and run workshops on accessibility…
Published
-
Case Study: Implementing Accessible Data Charts for the Khan Academy 2018 Annual Report
A few months ago I teamed up with SuperFriendly to create an accessible micro-site for the Khan Academy 2018 Annual Report. The site is a very beautiful visual representation of Khan’s real-life impact on world education, their end-of-year financial reports, and more. By nature, the annual report contains…
Published
-
Accessible Icon Buttons
An icon button is an icon that triggers some sort of action on the page. More accurately, technically speaking, an icon button is a button that contains an icon and no (visible) accompanying text. These buttons can be found in the majority of app and user interfaces today. The infamous hamburger menu…
Published
-
The SVG Filters Series
SVG Filters 101 The first article in a series on SVG filters. This guide will help you understand what they are and show you how to use them to create your own visual effects. SVG Filter Effects – Outline Text with In this second part of the SVG Filter series you'll learn all about the feMorphology filter…
Published
-
The Refactoring UI Book
I’ve never taken or had any design classes in school or university. Most of my (humble) design knowledge I’ve picked up online from random articles here and there, and from breaking down and building designs that I liked. So, when I found Steve on Twitter and saw how he was sharing design tips targeted…
Published
-
Nested Links Without Nesting Links
Chris Coyier started a thought exercise thread last week asking the community how they would approach building nested links. I had the same requirement a couple of years ago when I was building the front-end foundation for Smashing Magazine. So I thought I’d write my response to Chris’s thread out in…
Published
-
How do you mark up an accordion?
I made a poll on Twitter the other day asking the #lazyweb how they would mark up an FAQ section — or a list of questions and their corresponding answers. I specifically asked for markup suggestions. Turns out, people mark questions and answers up differently. I got some interesting insight from the…
Published
-
On Switching from HEX & RGB to HSL
A couple of weeks ago I tweeted about a feature that I didn’t know existed in VS Code: the visual color editor that pops up when you hover over color values in a style sheet. Sorry, your browser doesn't support embedded videos. The VS Code color editor that pops up when you hover over a color value.…
Published
-
SVG Filters: The Crash Course
I always try to customize in-house client workshops to my client’s needs. That sometimes also means that if my client’s design and dev team is interested in learning something that is not covered in my workshop, I will tweak the content of the workshop to make sure they learn what they need to make their…
Published
-
Interview: net Magazine September 2018 Issue #310
The September 2018 issue of net Magazine came out today, featuring a six-page interview with yours truly, discussing all things front-end development and UX ahead of my upcoming workshop at Generate Conference in London. The interview features photos taken by me, in and outside of my home office. This…
Published
-
On Designing and Building Toggle Switches
Yesterday I was working on creating the slides and accompanying demos for my upcoming Web Directions Code talk next week. One of the demos I’m creating is a basic proof of concept for a simple switch that is used to switch the theme of a UI from light to dark and vice versa. I liked, and was inspired…
Published
-
A new Smashing talk. A smashing new experience.
I’m currently in Toronto, Canada, where I ran a workshop two days ago and gave a talk today at yet another SmashingConf event. Like all previous SmashingConfs, it was… well… smashing! But this one stood out for me so much that, for the first time ever, I found myself firing my code editor up to write…
Published
-
Going Offline
Earlier this month I rolled out a new and long overdue feature on this Web site: offline viewing. In other words, from now on, after your first visit, you can re-visit my Web site even when you’re not connected to the Internet. Furthermore, depending on the device and application you’re using to visit…
Published
-
Case Study: Optimizing SVG Text & Image Delivery with Inline SVG
I love when I’m pushed to think of creative techniques when tackling design and dev challenges on my client projects. And it so happens that the new Smashing Magazine design released this year was one of the more (fun and) challenging projects I’ve worked on. And one of the challenges I had to tackle…
Published
-
Cropping & Scaling Images Using SVG Documents
I’m always interested in and thinking about ways to use SVG in my client projects to solve common UI challenges — uses that go beyond simple icon display and animated illustrations. I’m also always researching and looking for practical uses of SVG to add to my talk and workshops material that go beyond…
Published
-
Auto-Sizing Columns in CSS Grid: auto-fill vs auto-fit
In this article I explain the subtle but important difference between auto-fill and auto-fit for sizing columns in CSS Grid. Each of them exhibits a responsive behavior once compbined with repeat() that you may or may not want for your responsive layout.
Published
-
Migrating from Jekyll+Github Pages to Hugo+Netlify
During the last 18 months, working on my Web site became a daunting task—be that for developing, redesigning it, writing a blog post, or making updates to my speaking and workshop pages. My then static site generator, Jekyll, is why. And a change has long been overdue... Jekyll became unbearably slow…
Published
-
Building a fully-accessible help tooltip
Today is one of those days that started out with a Google search for yet another accessibility question/concern. I’m working on a new project for my client Provata and part of that project is to build a sweet and seemingly simple help tooltip which explains to the reader/user what the Framingham calculator…
Published
-
Mimic Relative Positioning Inside an SVG with Nested SVGs
Positioning elements inside an SVG image is very similar—if not identical—to positioning elements absolutely in HTML. Every element in SVG is positioned "absolutely" relative to the SVG viewport, and the position inside the viewport is governed by the current coordinate system in use. But this similarity…
Published
-
Making the Switch Away from Icon Fonts to SVG: Converting Font Icons to SVG
If you’re reading this article, then I can probably assume you’ve already decided to switch from using fonts for icons to an SVG icon system. Or maybe you're pondering the idea and want to get an overview of how that would be done and whether or not it's worth it. Either way, this post is here to help…
Published
-
SVG Style Inheritance and the ‘Flash Of Unstyled SVG’
There are too few things not to like about SVG, and I don’t mean the things that browsers cause by incomplete or lack of certain features or buggy implementations. Yet you might sometimes get some unpredictable results that might frustrate you when working with SVG, if you don’t know the details of how…
Published
-
2015 In Review
Happy new year! 🌟 OK, I felt awkward starting a blog post that way—I confess. ☺️ But this is also an unusual post—not an article about CSS or SVG, and not a lengthy tutorial about web development. It is also the quickest post I ever wrote. This is my first time writing a year in review kind of post…
Published
-
Animated SVG vs GIF [CAGEMATCH]
SVG can do much more than display static images. Its animation capabilities are one of its most powerful features, giving it a distinctive advantage over all other image formats. They are one of many reasons that make SVG images better than raster images, including GIFs. But this, of course, only applies…
Published
-
Tips for Creating and Exporting Better SVGs for the Web
Working with SVG in a RWD workflow usually involves a design phase and a development phase. The design phase is usually handled by designers who may or may not know how to code. And because of the nature of SVG as both an image format and a document format, every step taken in the graphics editor in…
Published
-
Developer of the Year 2015 net Award
Last Friday, I gave my first keynote in the UK at Generate Conf. That same day, the net awards were announced. On Saturday, I came back home with an award: the Developer of the Year award. This is a short thank you post to everyone involved. Photo by net magazine. All rights reserved. (Original Photo…
Published
-
CSS vs. SVG: The Final Round(up)
This is the last article in the series of article comparing common CSS techniques to their SVG counterparts. This article is a roundup of several CSS and SVG solutions, as opposed to being an article comparing one solution that can be achieved using either CSS and SVG. There are already a bunch of excellent…
Published
-
CSS vs. SVG: Shapes and Arbitrarily-Shaped UI Components
This post is the third in the series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both.In this article, we are going to go over techniques for creating arbitrarily-shaped UI components using CSS properties and SVG’s capabilities, and a mix…
Published
-
CSS vs SVG: Styling Checkboxes and Radio Buttons
This post is the second in the series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. In this article, we’re going to look into ways to style checkboxes and radio buttons using both CSS and SVG. You will learn how you can create animated…
Published
-
Building A Circular Navigation with CSS Clip Paths
The CSS clip-path property is one of the most underused and yet most interesting properties in CSS. It can be used in conjunction with CSS Shapes to create interesting layouts, and can be taken to the extreme to create some incredibly impressive layouts and animations like the Species in Pieces project…
Published
-
CSS vs. SVG: Graphical Text Effects
This post is the first in a series of posts exploring techniques and examples that can be achieved using both CSS and SVG, and compares them both. Since I am biased to SVG, this series is really intended to prove that SVG — because of its nature as both an image and a document format — is simply better…
Published
-
Chapter 4, Smashing Book 5
The new Smashing Book is out! It’s packed with a lot of time-saving, practical techniques for crafting fast, maintainable and scalable responsive websites. I wrote a chapter in the book—Chapter 4: Mastering SVG For Responsive Web Design. Here is an overview of what that chapter covers, and why I think…
Published
-
Styling the Contents of SVG with CSS
An in-depth article on how to style the contents of the SVG element and overcome some challenges it brings. We get into where the contents are cloned (the shadow DOM!), what limitations that brings up and how to work around them by taking advantage of the CSS cascade and using CSS Variables to get full…
Published
-
Art-Directing an SVG Embedded Using
I have recently finished a front-end development project for Provata Health — a US-based health and wellness company specializing in health promotion and behavior change science. As part of their marketing website, I worked on an infographic that showcases the three major health results one can achieve…
Published
-
The State of SVG Animation
The state of SVG animation is changing. CSS, SMIL and JavaScript can be used to animate SVGs. However, SMIL is soon to be deprecated and was never supported in Internet Explorer. CSS animations on SVG elements don’t have the best browser support (yet), not to mention are quite buggy in some browsers…
Published
-
Art-Directing SVG Images With The viewBox Attribute: How-To, Notes, Tips and Why We Need A viewBox Property in CSS
The SVG viewBox attribute is easily one of SVG's most powerful features. Mastering this attribute can take your SVG skills to the next level, especially considering that a couple of the main SVG spriting techniques rely on this attribute to work. Because the viewBox attribute can be used to crop and…
Published
-
An Introduction To Graphical Effects in CSS
In this article, we will take a deep introduction into CSS’s graphical effects—specifically, CSS Filters and Compositing and Blending capabilities. We will go over the properties for each, their different values, and usage examples and some of the graphial effects that can be created using nothing but…
Published
-
I Won A Web Platform Award
Today, O'Reilly's Fluent Conf is taking place in San Francisco, California. And as part of the conference, the O'Reilly Web Platform Awards were announced. Apparently, I was nominated for an award and, according to the co-chairs of the conference, I got the most amount of nominations and eventually won…
Published
-
A Primer To Background Positioning In CSS
An article in which we take a deep dive into CSS’s background positioning properties with visual explanations and examples. Did you know that the CSS background-position property accepts edge offset values? That is, you can position a background image relative to any edge—not just top and left—and specify…
Published
-
Building a Circular Navigation with SVG
Last week, I released CIRCULUS.SVG—the SVG circular menu generator. In this article I want to go over why SVG is better suited for creating this kind of UI element, and give you and overview of the SVG code for creating the menu items using SVG elements and transformations. Note that, unlike my usual…
Published
-
Extending the Color Cascade with the CSS currentColor Variable
If you use Sass or LESS, then you probably already use variables in your style sheets and know how useful they are. If you don’t use a preprocessor, then you might be curious what the fuss is all about and why variables are so popular and how they can be useful. In this article, we’re going to get an…
Published
-
Better SVG Fallback and Art Direction With The Element
Besides using an SVG as a background image in CSS, you can serve SVG foreground images in HTML using one of several embedding techniques, each of which has its advantages and use cases. Unless you’re in need of interactivity or external styling, is the standard way for loading an SVG image, but it has…
Published
-
I Wrote A CSS Reference.
Yesterday, we finally released a long-awaited project over at Codrops: Codrops' new CSS Reference, authored by yours truly. Even though I wrote a post over at Codrops introducing the reference and its features, I want to share a little bit more about my experience writing it. Please note that as of January…
Published
-
Compositing And Blending In CSS
If you’re a designer, then you’ve probably already come across blending effects some time or the other. Blending is one of the most frequently used effects in graphic and print design. You can add texture to text by blending it with its textured backdrop, create an illusion of merged images by blending…
Published
-
Useful SVGO[ptimization] Tools
One of the steps you need to do when working with SVG is optimizing the SVG code after exporting it from the editor and before embedding in on your web page. For that, several standalone optimization tools exits. The two tools I usually mention in my articles and talks are Peter Collingridge's online…
Published
-
Using The CSS :target Selector To Create JavaScript-less UI Effects
You may or may not have used the :target selector before; and you may or may not have used it to show and hide elements without having to resort to JavaScript to handle this event for you. This article I wrote for the Adobe Dreamweaver team blog, serves as a short introduction to the :target selector…
Published
-
Tips For Optimizing SVG Delivery For The Web
SVGs are a great asset in our responsive web design toolkit. But just like any other image format, there are certain steps you should take to make sure you’re delivering optimised resources that don’t have a negative impact on your page’s performance. Here are some things that you can do to make sure…
Published
-
An Overview Of SVG Sprite Creation Techniques
SVG can be used as an icon system to replace icon fonts, and there are several ways to create SVG sprites. This article I wrote for this year's 24Ways will give you an overview of three of them. While we’re at it, we’re going to take a look at some of the available tools used to automate sprite creation…
Published
-
Styling and Animating SVGs with CSS
CSS can be used to style and animate scalable vector graphics, much like it is used to style and animate HTML elements. In this article I wrote for Smashing Magazine, which is a modified transcript of a talk I recently gave at CSSconf EU and From the Front, I’ll go over the prerequisites and techniques…
Published
-
A Guide to SVG Animations (SMIL)
What the title says: a complete guide to SVG animations derived from the SMIl specification. The extensive guide features a lot of demos and goes over the animations syntax, covering almost everything you need to know to get started with SVG Animations today.
Published
-
Making SVGs Responsive With CSS
An article on how to make embedded SVGs cross-browser responsive. We're going to cover embedding techniques, how to apply the "Padding Hack" and how to use inline media queries to make SVGs adaptive.
Published
-
Understanding SVG Coordinate Systems and Transformations (Part 3) — Establishing New Viewports
At any point in an SVG drawing, you can establish new viewports and user coordinate systems by either nesting svgs or using elements such as the symbol element, among others. In this article we’re going to have a look at how we can do that and how this can be useful for controlling SVG elements and making…
Published
-
Understanding SVG Coordinate Systems and Transformations (Part 2) — The transform Attribute
SVG elements can be transformed by scaling, translating, skewing, and rotating—much like HTML elements can be transformed using CSS Transforms. However, there are certain inevitable differences when it comes to the coordinate systems used and affected by these transformations. In this article we'll go…
Published
-
Understanding SVG Coordinate Systems and Transformations (Part 1) — The viewport, viewBox, and preserveAspectRatio
SVG elements aren't governed by a CSS box model like HTML elements are. This makes positioning and transforming these elements trickier and may seem—at first glance—less intuitive. However, once you understand how SVG coordinate systems and transformations work, manipulating SVGs becomes a lot easier…
Published
-
Clipping in CSS and SVG — The clip-path Property and Element
CSS and SVG have a lot in common. A lot of the features that we have in CSS today were imported from SVG. One of these features is the Clipping operation. Both CSS and SVG allow us to "clip" elements into custom non-rectangular shapes. In this article we will go over the clipping techniques in both CSS…
Published
-
Structuring, Grouping, and Referencing in SVG — The, , and Elements
SVG comes with its own ways for structuring a document by means of certain SVG elements that allow us to define, group, and reference objects within the document. These elements make reusing elements easy, while maintaining clean and readable code. In this article we'll go over these elements, highlighting…
Published
-
Everything You Need To Know About The CSS will-change Property
What the title says! I wrote this article for the Opera Developers' blog, and it literally contains everything you need to know about the new CSS will-change property, including but not limited to: how to use it, when to use it, when not to use it, performance considerations, and more.
Published
-
Moving Forward With CSS Shapes
Following up with the CSS Shapes 101 article, I share a list of great resources to learn more about CSS Shapes, including tutorials, examples, and developer tools.
Published
-
CSS Shapes 101
In this article, you'll learn everything you need to know to get started using CSS Shapes today. We will cover all the prerequisites: establishing a coordinate system, conditions for elements to be eligible for shapes, and more, then moving on to the properties used, their values and how each one affects…
Published
-
CSS Regions Matter
Whether or not CSS Regions can be used to create multi-column or responsive layouts, fact remains that, unlike Flexbox, Multi-Columns, and Grids, CSS Regions are not a layout feature—they're a fragmentation feature that allows us to control or change the flow of content across containers in a page, or…
Published
-
Animating CSS Shapes with CSS Animations and Transitions
Today we're going to be talking about animating CSS shapes with CSS animations. We'll be creating very basic "shape-shifting" layouts of sort. There are also many considerations to take when animating CSS shapes, so we'll go over all points in this article. This is the third article in a series of articles…
Published
-
Using CSS Regions With CSS Shapes For A Better Reading Experience
Using CSS shapes we can flow our content in non-rectangular areas. And sometimes we want to be able to flow our content into multiple custom-shaped areas inside an element. If you've read my previous article, you already know that this can be done with CSS Shapes, by using an image with alpha transparency…
Published
-
Techniques For Creating Textured Text
For too long, we've resorted to graphics editors to create images of text that has nice effects such as creative fills or that blends with its background in a nice subtle way. We used those images as a replacement for text on our pages, which made that text unaccessible and un-selectable.. But with all…
Published
-
Techniques For Responsive Typography
Text is the most important part of a website. Did you know that are several ways to make text responsive? Be it big headlines or body copy, the article will cover all those techniques, serving as an ultimate reference for making text responsive. We will cover accessibility, media queries, viewport units…
Published
-
CSS Overlay Techniques
Overlays can sometimes be annoying, but also undoubtedly have their useful use cases. There are different approaches to creating overlays, some of them work better than others, and some of them come with gotchas that you need to be aware of, including performance implications. In HTML5, we also get a…
Published
-
Creating Non-Rectangular Layouts With CSS Shapes
Today we can create all kinds of shapes with CSS using CSS transforms, but all these shapes do not affect the flow of the content inside or around them. That is, if you create a triangle or a trapezoid with CSS, for example, the shape created does not define or affect the way the text inside it flows…
Published
-
Navicon Transformicons: Animated Navigation Icons with CSS Transforms
The following is a collaboration post between Bennett Feely and I. After seeing Bennett's impressive animated navigation icon transformations (or "Navicon Transformicons") pens on Codepen, I asked him if he would like to write a tutorial on how he did them as a guest post on my blog. He kindly approved…
Published
-
Building A Circular Navigation With CSS Transforms
In this article, we will learn how to apply CSS transforms to fake a "slice" shape, creating a circular navigation using nothing but CSS (and some maths!). The article includes an interactive demo that explains visually and step by step how the technique works and the shapes are created.
Published
-
Lessons from the “Seductive Interaction Design” Book
In this article today, I’m going to share with you some of the lessons I learned from one of the best books I’ve read: Seductive Interaction Design: Creating Playful, Fun, and Effective User Experiences. I believe that you should read this book yourselves to fully appreciate all the information and insight…
Published