Collective #542

Inspirational Website of the Week: Igor Mahr A web design full of lively motion with a truly unique feel. Our pick this week. Get inspired This content is sponsored via Syndicate Ads Easily Secure and Manage All Your Apple Devices in Minutes Jamf Now Read more

7 Gorgeous Free And Open-Source Typefaces And When To Use Them

dreamt up by webguru in Uncategorized | Comments Off on 7 Gorgeous Free And Open-Source Typefaces And When To Use Them

7 Gorgeous Free And Open-Source Typefaces And When To Use Them

7 Gorgeous Free And Open-Source Typefaces And When To Use Them

Noemi Stauffer



To facilitate your font picking and pairing process, I’ve included examples of how these typefaces have been put to use recently, as well as a few pairing ideas. Enjoy and don’t forget to ping me on Twitter to show me how you’ve used them — I’d love to see it!

Gangster Grotesk

Designed by Adrien Midzic, Gangster Grotesk is a contemporary grotesque with angled terminal strokes that slightly curve inward. Because of these quirky individual touches, the typeface brings a unique flavor to headlines and posters when used at large sizes. Its low contrast and slightly condensed width make it a good choice for body copy and other texts of small type sizes as well.

The font family comes in three weights, from Light to Bold, with stylistic alternates, including a loopy expressive ampersand. Gangster Grotesk is offered for free when signing up for the Fresh Fonts newsletter.

Preview of Gangster Grotesk

Gangster Grotesk. (Large preview)

Suggested Font Pairings

When applying Gangster Grotesk to titles, the quirky grotesque pairs well with low x-height serifs for text settings, such as FF Atma. Used at small point sizes instead, pairing Gangster Grotesk with Le Murmure (see below) offers the right mix of character and neutrality.

Use Case

Gangster Grotesk excels in punchy designs with strong colors when it’s asked to render strings of text, for example on this flyer designed by Tokyo-based Juri Okita for Pells Coffee.

An example of Gangster Grotesk in use

Gangster Grotesk in use. (Large preview)

Le Murmure

Preview of Le Murmure

Le Murmure. (Large preview)

Recently awarded a Certificate of Typographic Excellence by the Type Directors Club, Le Murmure was commissioned by French design agency Murmure to renew their brand image. Drawing inspiration from magazine titling fonts, Le Murmure is a condensed sans serif with an interesting mismatch between its characters, making it especially distinctive for use at large sizes. Its height and the singularity of its shapes provide elegance while conveying notions of experimentation and creativity. Le Murmure comes with many — even more — original alternate letters, and there is even a stylistic set that ‘randomizes’ all alternates for you (SS08).

Suggested Font Pairings

Used as a titling font, Le Murmure can pair well with a sans serif with warm curves, like Standard CT, or with a sans that has more pronounced irregularities, like Dinamo’s Prophet.

Use Case

Marrakesh’s Untitled Duo picked Le Murmure for the headlines of their studio’s website, complemented with Classic Sans for the navigation, which they also used at smaller size for the body text.

An example of Le Murmure in use

Le Murmure in use. View full website. (Large preview)

An example of Le Murmure in use

Le Murmure in use. View full website. (Large preview)

Reforma

Preview of Reforma

Reforma. (Large preview)

Reforma is a bespoke typeface designed by PampaType for the Universidad Nacional de Córdoba in Argentina, an educational institution more than 400 years old. The typeface is composed of three subfamilies: Reforma 1918, a classic Serif, Reforma 2018, a modern Sans, and Reforma 1969, an intermediate hybrid that combines the qualities of the other two (subtle modulation and flare serifs). I find all three subfamilies to adapt well to a wide range of bodies, from display to immersive text, and each one of them comes in three weights, with matching italics.

Suggested Font Pairings

This typeface allows for interesting combinations among its different styles. The most obvious would be to use Reforma Sans for display use and to pair it with its serif counterpart for body text. However, I would encourage you to do something more original and try it the other way around, using the serif for titling.

Use Case

Graphic designer Étienne Pouvreau chose Reforma for the creation of the annual programs of the two Caf family centers of the Loir-et-Cher department in France. The booklets feature Reforma 1918 (the serif) for the headings, in italic, and Reforma 2018 (the sans) for the titles, subtitles and body text.

An example of Reforma in use

Reforma in use. View full booklet. (Large preview)

Space Grotesk

Preview of Space Grotesk

Space Grotesk. (Large preview)

The new foundry of Florian Karsten is behind this versatile, geometric sans serif. Derived from Space Mono, a monospaced typeface designed by Colophon Foundry for Google Fonts in 2016, Space Grotesk kept the nerdy charm of its predecessor and its particular retro-future voice. Available in five weights, Space Grotesk is well-suited for a wide range of uses, from body text to bold headlines. In addition, it comes with five sets of alternate letters, the third one (SS03) removing the connections between the diagonal strokes of uppercase A, M, N, V, W, and lowercase v, w, y  — which can be particularly effective to create distinctive headlines.

Suggested Font Pairings

As one would guess, Space Grotesk pairs well with Colophon Foundry’s Space Mono, the typeface it was derived from, which is also open source and free to use. Alternatively, if you’d like to pair it with a serif typeface, I would recommend one with pointy serifs and sharp details, such as Fortescue, or Wremena, which is also free to use (see below).

Use Case

Little & Big, a web design and development studio based in Sydney, Australia, chose Space Grotesk as the body text font for their website, including on blog entries, header and footer. They decided to pair it with Verona Serial, giving the website a professional, yet playful look and feel.

An example of Space Grotesk in use

Space Grotesk in use. View full website. (Large preview)

An example of Space Grotesk in use

Space Grotesk in use. View full website. (Large preview)

Syne

Preview of Syne

Syne. (Large preview)

Syne is a type family designed by Bonjour Monde for the visual identity of Synesthésie, an art center close to Paris. It consists of five distinct styles, amplifying the notion of structural differentiation within a font family: Syne Extra is a wide, heavy weight intended for use at large sizes, Syne Regular is a geometric sans with short ascenders and descenders (visible in the lowercase ‘g’ among others), complemented with a wider bold style, an italic in a handwritten style and a monospaced with a distorted look. Updated just days ago, Syne now comes with more alternates, a set of brand new accents, and a variable font version.

Suggested Font Pairings

The particularity of this typeface is that you can play with its different styles, and create fresh and atypical associations among them. For instance, Syne Extra does wonder for titles and headlines, and works well with Syne Regular for body copy.

Use Case

Syne was recently used by WeTransfer to present the results of their Ideas Report 2018, making extensive use of the typeface’s five different cuts on the website of the report and on its beautiful PDF companion.

An example of Syne in use

Syne in use. View full website. (Large preview)

An example of Syne in use

Syne in use. View full website. (Large preview)

VG5000

Preview of VG5000

VG5000. (Large preview)

Named after the VG 5000, a computer created by Phillips in 1984, this typeface playfully combines pixelated and curved strokes, blurring the lines between old and new digital shapes. It also includes many early emojis and pictograms from the VG 5000’s original set, allowing you to create unexpected combinations. Moreover, the typeface comes with contemporary gender inclusive characters for the French language, replacing pronouns “il” and “elle” (“he” and “she”) with the neutral “iel”, and providing an alternative to gendered words by combining their masculine and feminine versions.

Suggested Font Pairings

Because of its pixelated details, and to remain truthful to its origins, I would suggest pairing VG5000 with a monospaced font, for example League Mono, which is also open source. Alternatively, you could decide to pair it with the sans or serif version of Input, or with a semi-proportional typeface like ETC Trispace, which is also free.

Use Case

French design studio Brand Brothers put VG5000 to use for the visual identity of Les Halles de la Cartoucherie, a new, versatile space dedicated to cultural, artistic and gastronomic activities in Toulouse. Paired with a custom, grid-based logo that represents the structure of the space, VG5000 was used both at large and small sizes on print materials, on the website of the space and even on its walls, using VG5000’s pixelated arrows for its wayfinding system.

An example of VG5000 in use

VG5000 in use. View full project. (Large preview)

An example of VG5000 in use

VG5000 in use. View full project. (Large preview)

Wremena

Preview of Wremena

Wremena. (Large preview)

Wremena is a serif typeface designed by Roman Gornitsky and published by Moscow-based foundry Typefaces of The Temporary State. Its design was based on Vremena, a free typeface by the same designer, but it features more pronounced triangular serifs and sharper angles, which become even more visible in heavier weights. Wremena is available in three styles (Light, Regular and Bold) without italics but with support for the Latin and Cyrillic scripts. Because of its similarities with Times New Roman, Wremena can be used as a free, more contemporary alternative to the ever-popular typeface.

Suggested Font Pairings

A good tip to find pairings for a specific font is to browse the library of typefaces created by the same designer, as they often pair well together. This is especially true in this case, as Roman Gornitsky designed two sans serifs that are great matches for Wremena: Nowie Vremena, with its distinctive lowercase ‘g’, and more recently, Steinbeck, a lively font with intentional irregularities.

Use Case

The Jewish Museum of Moscow is behind Russian Spleen, a picturesque interactive web project that explores how Russian landscape painter Isaac Levitan impacted the 20th-century cinematography. Designer Pavel Kedich decided to typeset the website in Steinbeck (used at large sizes) and Wremena (here used for captions). Both fonts being multi-script, they allow the website to be available in English and Russian languages.

An example of Wremena in use

Wremena in use. View full website. (Large preview)

An example of Wremena in use

Wremena in use. View full website. (Large preview)

That’s It For Now!

While I’ve included great examples of how these free fonts can be used, there are many more on Typewolf and Fonts in Use. And if you’d like to discover new, high-quality free and open source fonts, make sure to subscribe to my newsletter Fresh Fonts.

All works and screenshots are property of their respective owners.

Smashing Editorial
(ah, yk, il)

Source: Smashing Magazine, 7 Gorgeous Free And Open-Source Typefaces And When To Use Them

The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

dreamt up by webguru in Uncategorized | Comments Off on The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

Daniel Ni



Web scraping is a way to grab data from websites without needing access to APIs or the website’s database. You only need access to the site’s data — as long as your browser can access the data, you will be able to scrape it.

Realistically, most of the time you could just go through a website manually and grab the data ‘by hand’ using copy and paste, but in a lot of cases that would take you many hours of manual work, which could end up costing you a lot more than the data is worth, especially if you’ve hired someone to do the task for you. Why hire someone to work at 1–2 minutes per query when you can get a program to perform a query automatically every few seconds?

For example, let’s say that you wish to compile a list of the Oscar winners for best picture, along with their director, starring actors, release date, and run time. Using Google, you can see there are several sites that will list these movies by name, and maybe some additional information, but generally you’ll have to follow through with links to capture all the information you want.

Obviously, it would be impractical and time-consuming to go through every link from 1927 through to today and manually try to find the information through each page. With web scraping, we just need to find a website with pages that have all this information, and then point our program in the right direction with the right instructions.

In this tutorial, we will use Wikipedia as our website as it contains all the information we need and then use Scrapy on Python as a tool to scrape our information.

A few caveats before we begin:

Data scraping involves increasing the server load for the site that you’re scraping, which means a higher cost for the companies hosting the site and a lower quality experience for other users of that site. The quality of the server that is running the website, the amount of data you’re trying to obtain, and the rate at which you’re sending requests to the server will moderate the effect you have on the server. Keeping this in mind, we need to make sure that we stick to a few rules.

Most sites also have a file called robots.txt in their main directory. This file sets out rules for what directories sites do not want scrapers to access. A website’s Terms & Conditions page will usually let you know what their policy on data scraping is. For example, IMDB’s conditions page has the following clause:

Robots and Screen Scraping: You may not use data mining, robots, screen scraping, or similar data gathering and extraction tools on this site, except with our express-written consent as noted below.

Before we try to obtain a website’s data we should always check out the website’s terms and robots.txt to make sure we are obtaining legal data. When building our scrapers, we also need to make sure that we do not overwhelm a server with requests that it can’t handle.

Luckily, many websites recognize the need for users to obtain data, and they make the data available through APIs. If these are available, it’s usually a much easier experience to obtain data through the API than through scraping.

Wikipedia allows data scraping, as long as the bots aren’t going ‘way too fast’, as specified in their robots.txt. They also provide downloadable datasets so people can process the data on their own machines. If we go too fast, the servers will automatically block our IP, so we’ll implement timers in order to keep within their rules.

Getting Started, Installing Relevant Libraries Using Pip

First of all, to start off, let’s install Scrapy.

Windows

Install the latest version of Python from https://www.python.org/downloads/windows/

Note: Windows users will also need Microsoft Visual C++ 14.0, which you can grab from “Microsoft Visual C++ Build Tools” over here.

You’ll also want to make sure you have the latest version of pip.

In cmd.exe, type in:

python -m pip install --upgrade pip

pip install pypiwin32

pip install scrapy

This will install Scrapy and all the dependencies automatically.

Linux

First you’ll want to install all the dependencies:

In Terminal, enter:

sudo apt-get install python3 python3-dev python-pip libxml2-dev libxslt1-dev zlib1g-dev libffi-dev libssl-dev

Once that’s all installed, just type in:

pip install --upgrade pip

To make sure pip is updated, and then:

pip install scrapy

And it’s all done.

Mac

First you’ll need to make sure you have a c-compiler on your system. In Terminal, enter:

xcode-select --install

After that, install homebrew from https://brew.sh/.

Update your PATH variable so that homebrew packages are used before system packages:

echo "export PATH=/usr/local/bin:/usr/local/sbin:$PATH" >> ~/.bashrc

source ~/.bashrc

Install Python:

brew install python

And then make sure everything is updated:

brew update; brew upgrade python

After that’s done, just install Scrapy using pip:

pip install Scrapy

>

Overview Of Scrapy, How The Pieces Fit Together, Parsers, Spiders, Etc

You will be writing a script called a ‘Spider’ for Scrapy to run, but don’t worry, Scrapy spiders aren’t scary at all despite their name. The only similarity Scrapy spiders and real spiders have are that they like to crawl on the web.

Inside the spider is a class that you define that tells Scrapy what to do. For example, where to start crawling, the types of requests it makes, how to follow links on pages, and how it parses data. You can even add custom functions to process data as well, before outputting back into a file.

Writing Your First Spider, Write A Simple Spider To Allow For Hands-on Learning

To start our first spider, we need to first create a Scrapy project. To do this, enter this into your command line:

scrapy startproject oscars

This will create a folder with your project.

We’ll start with a basic spider. The following code is to be entered into a python script. Open a new python script in /oscars/spiders and name it oscars_spider.py

We’ll import Scrapy.

import scrapy

We then start defining our Spider class. First, we set the name and then the domains that the spider is allowed to scrape. Finally, we tell the spider where to start scraping from.

class OscarsSpider(scrapy.Spider):
   name = "oscars"
   allowed_domains = ["en.wikipedia.org"]
   start_urls = ['https://en.wikipedia.org/wiki/Academy_Award_for_Best_Picture']

Next, we need a function which will capture the information that we want. For now, we’ll just grab the page title. We use CSS to find the tag which carries the title text, and then we extract it. Finally, we return the information back to Scrapy to be logged or written to a file.

def parse(self, response):
   data = {}
   data['title'] = response.css('title::text').extract()
   yield data

Now save the code in /oscars/spiders/oscars_spider.py

To run this spider, simply go to your command line and type:

scrapy crawl oscars

You should see an output like this:

2019-05-02 14:39:31 [scrapy.utils.log] INFO: Scrapy 1.6.0 started (bot: oscars)
...
2019-05-02 14:39:32 [scrapy.core.engine] DEBUG: Crawled (200)  (referer: None)
2019-05-02 14:39:34 [scrapy.core.engine] DEBUG: Crawled (200)  (referer: None)
2019-05-02 14:39:34 [scrapy.core.scraper] DEBUG: Scraped from 
{'title': ['Academy Award for Best Picture - Wikipedia']}
2019-05-02 14:39:34 [scrapy.core.engine] INFO: Closing spider (finished)
2019-05-02 14:39:34 [scrapy.statscollectors] INFO: Dumping Scrapy stats:
{'downloader/request_bytes': 589,
 'downloader/request_count': 2,
 'downloader/request_method_count/GET': 2,
 'downloader/response_bytes': 74517,
 'downloader/response_count': 2,
 'downloader/response_status_count/200': 2,
 'finish_reason': 'finished',
 'finish_time': datetime.datetime(2019, 5, 2, 7, 39, 34, 264319),
 'item_scraped_count': 1,
 'log_count/DEBUG': 3,
 'log_count/INFO': 9,
 'response_received_count': 2,
 'robotstxt/request_count': 1,
 'robotstxt/response_count': 1,
 'robotstxt/response_status_count/200': 1,
 'scheduler/dequeued': 1,
 'scheduler/dequeued/memory': 1,
 'scheduler/enqueued': 1,
 'scheduler/enqueued/memory': 1,
 'start_time': datetime.datetime(2019, 5, 2, 7, 39, 31, 431535)}
2019-05-02 14:39:34 [scrapy.core.engine] INFO: Spider closed (finished)

Congratulations, you’ve built your first basic Scrapy scraper!

Full code:

import scrapy

class OscarsSpider(scrapy.Spider):
   name = "oscars"
   allowed_domains = ["en.wikipedia.org"]
   start_urls = ["https://en.wikipedia.org/wiki/Academy_Award_for_Best_Picture"]

   def parse(self, response):
       data = {}
       data['title'] = response.css('title::text').extract()
       yield data

Obviously, we want it to do a little bit more, so let’s look into how to use Scrapy to parse data.

First, let’s get familiar with the Scrapy shell. The Scrapy shell can help you test your code to make sure that Scrapy is grabbing the data you want.

To access the shell, enter this into your command line:

scrapy shell “https://en.wikipedia.org/wiki/Academy_Award_for_Best_Picture”

This will basically open the page that you’ve directed it to and it will let you run single lines of code. For example, you can view the raw HTML of the page by typing in:

print(response.text)

Or open the page in your default browser by typing in:

view(response)

Our goal here is to find the code that contains the information that we want. For now, let’s try to grab the movie title names only.

The easiest way to find the code we need is by opening the page in our browser and inspecting the code. In this example, I am using Chrome DevTools. Just right-click on any movie title and select ‘inspect’:

Using Chrome DevTools to inspect HTML and CSS

Chrome DevTools window. (Large preview)

As you can see, the Oscar winners have a yellow background while the nominees have a plain background. There’s also a link to the article about the movie title, and the links for movies end in film). Now that we know this, we can use a CSS selector to grab the data. In the Scrapy shell, type in:

response.css(r"tr[style='background:#FAEB86'] a[href*='film)']").extract()

As you can see, you now have a list of all the Oscar Best Picture Winners!

> response.css(r"tr[style='background:#FAEB86'] a[href*='film']").extract()
['<a href="/wiki/Wings_(1927_film)" title="Wings (1927 film)">Wings</a>', 
...
 '<a href="/wiki/Green_Book_(film)" title="Green Book (film)">Green Book</a>', '<a href="/wiki/Jim_Burke_(film_producer)" title="Jim Burke (film producer)">Jim Burke</a>']

Going back to our main goal, we want a list of the Oscar winners for best picture, along with their director, starring actors, release date, and run time. To do this, we need Scrapy to grab data from each of those movie pages.

We’ll have to rewrite a few things and add a new function, but don’t worry, it’s pretty straightforward.

We’ll start by initiating the scraper the same way as before.

import scrapy, time

class OscarsSpider(scrapy.Spider):
   name = "oscars"
   allowed_domains = ["en.wikipedia.org"]
   start_urls = ["https://en.wikipedia.org/wiki/Academy_Award_for_Best_Picture"]

But this time, two things will change. First, we’ll import time along with scrapy because we want to create a timer to restrict how fast the bot scrapes. Also, when we parse the pages the first time, we want to only get a list of the links to each title, so we can grab information off those pages instead.

def parse(self, response):
   for href in response.css(r"tr[style='background:#FAEB86'] a[href*='film)']::attr(href)").extract():
       url = response.urljoin(href)
       print(url)
       req = scrapy.Request(url, callback=self.parse_titles)
       time.sleep(5)
       yield req

Here we make a loop to look for every link on the page that ends in film) with the yellow background in it and then we join those links together into a list of URLs, which we will send to the function parse_titles to pass further. We also slip in a timer for it to only request pages every 5 seconds. Remember, we can use the Scrapy shell to test our response.css fields to make sure we’re getting the correct data!

def parse_titles(self, response):
   for sel in response.css('html').extract():
       data = {}
       data['title'] = response.css(r"h1[id='firstHeading'] i::text").extract()
       data['director'] = response.css(r"tr:contains('Directed by') a[href*='/wiki/']::text").extract()
       data['starring'] = response.css(r"tr:contains('Starring') a[href*='/wiki/']::text").extract()
       data['releasedate'] = response.css(r"tr:contains('Release date') li::text").extract()
       data['runtime'] = response.css(r"tr:contains('Running time') td::text").extract()
   yield data

The real work gets done in our parse_data function, where we create a dictionary called data and then fill each key with the information we want. Again, all these selectors were found using Chrome DevTools as demonstrated before and then tested with the Scrapy shell.

The final line returns the data dictionary back to Scrapy to store.

Complete code:

import scrapy, time

class OscarsSpider(scrapy.Spider):
   name = "oscars"
   allowed_domains = ["en.wikipedia.org"]
   start_urls = ["https://en.wikipedia.org/wiki/Academy_Award_for_Best_Picture"]

   def parse(self, response):
       for href in response.css(r"tr[style='background:#FAEB86'] a[href*='film)']::attr(href)").extract():
           url = response.urljoin(href)
           print(url)
           req = scrapy.Request(url, callback=self.parse_titles)
           time.sleep(5)
           yield req

   def parse_titles(self, response):
       for sel in response.css('html').extract():
           data = {}
           data['title'] = response.css(r"h1[id='firstHeading'] i::text").extract()
           data['director'] = response.css(r"tr:contains('Directed by') a[href*='/wiki/']::text").extract()
           data['starring'] = response.css(r"tr:contains('Starring') a[href*='/wiki/']::text").extract()
           data['releasedate'] = response.css(r"tr:contains('Release date') li::text").extract()
           data['runtime'] = response.css(r"tr:contains('Running time') td::text").extract()
       yield data

Sometimes we will want to use proxies as websites will try to block our attempts at scraping.

To do this, we only need to change a few things. Using our example, in our def parse(), we need to change it to the following:

def parse(self, response):
   for href in (r"tr[style='background:#FAEB86'] a[href*='film)']::attr(href)").extract()
:
       url = response.urljoin(href)
       print(url)
       req = scrapy.Request(url, callback=self.parse_titles)
       req.meta['proxy'] = "http://yourproxy.com:80"
       yield req

This will route the requests through your proxy server.

Deployment And Logging, Show How To Actually Manage A Spider In Production

Now it is time to run our spider. To make Scrapy start scraping and then output to a CSV file, enter the following into your command prompt:

scrapy crawl oscars -o oscars.csv

You will see a large output, and after a couple of minutes, it will complete and you will have a CSV file sitting in your project folder.

Compiling Results, Show How To Use The Results Compiled In The Previous Steps

When you open the CSV file, you will see all the information we wanted (sorted out by columns with headings). It’s really that simple.

A CSV of Oscar winning movies and associated information

Oscar winning movies list and information. (Large preview)

With data scraping, we can obtain almost any custom dataset that we want, as long as the information is publicly available. What you want to do with this data is up to you. This skill is extremely useful for doing market research, keeping information on a website updated, and many other things.

It’s fairly easy to set up your own web scraper to obtain custom datasets on your own, however, always remember that there might be other ways to obtain the data that you need. Businesses invest a lot into providing the data that you want, so it’s only fair that we respect their terms and conditions.

Additional Resources For Learning More About Scrapy And Web Scraping In General

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, The Ultimate Guide To Building Scalable Web Scrapers With Scrapy

Collective #532

dreamt up by webguru in Uncategorized | Comments Off on Collective #532











C532_blurry

Blurry

A great project that simulates depth of field with particles on a shader. Also, check out this demo of a blurry cat.

Check it out







C532_dash

BaseDash

BaseDash lets you manage and visualize your databases with a collaborative, cloud-based tool.

Check it out






Collective #532 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #532

Everything You Need To Know About CSS Margins

dreamt up by webguru in Uncategorized | Comments Off on Everything You Need To Know About CSS Margins

Everything You Need To Know About CSS Margins

Everything You Need To Know About CSS Margins

Rachel Andrew



One of the first things most of us learned when we learned CSS, was details of the various parts of a box in CSS, described as The CSS Box Model. One of the elements in the Box Model is the margin, a transparent area around a box, which will push other elements away from the box contents. The margin-top, margin-right, margin-bottom and margin-left properties were described right back in CSS1, along with the shorthand margin for setting all four properties at once.

A margin seems to be a fairly uncomplicated thing, however, in this article, we will take a look at some of the things which trip people up with regard to using margins. In particular, we will be looking at how margins interact with each other, and how margin collapsing actually works.

The CSS Box Model

As with all articles about parts of the CSS Box Model, we should define what we mean by that, and how the model has been clarified through versions of CSS. The Box Model refers to how the various parts of a box — the content, padding, border, and margin — are laid out and interact with each other. In CSS1, the Box Model was detailed with the ASCII art diagram shown in the image below.

ascii art drawing of the box model

Depiction of the CSS Box Model in CSS1

The four margin properties for each side of the box and the margin shorthand were all defined in CSS1.

The CSS2.1 specification has an illustration to demonstrate the Box Model and also defines terms we still use to describe the various boxes. The specification describes the content box, padding box, border box, and margin box, each being defined by the edges of the content, padding, border, and margin respectively.

diagram of the CSS Box Model

Depection of the CSS Box Model in CSS2

There is now a Level 3 Box Model specification as a Working Draft. This specification refers back to CSS2 for the definitions of the Box Model and margins, therefore it is the CSS2 definition we will be using for the majority of this article.

Margin Collapsing

The CSS1 specification, as it defined margins, also defined that vertical margins collapse. This collapsing behavior has been the source of margin-related frustration ever since. Margin collapsing makes sense if you consider that in those early days, CSS was being used as a documenting formatting language. Margin collapsing means that when a heading with a bottom margin, is followed by a paragraph with a top margin, you do not get a huge gap between those items.

When margins collapse, they will combine so that the space between the two elements becomes the larger of the two margins. The smaller margin essentially ending up inside the larger one.

Margins collapse in the following situations:

Let’s take a look at each of these scenarios in turn, before looking at the things which prevent margins from collapsing in these scenarios.

Adjacent Siblings

My initial description of margin collapsing is a demonstration of how the margins between adjacent siblings collapse. Other than in the situations mentioned below, if you have two elements displaying one after the other in normal flow, the bottom margin of the first element will collapse with the top margin of the following element.

In the CodePen example below, there are three div elements. The first has a top and bottom margin of 50 pixels. The second has a top and bottom margin of 20px. The third has a top and bottom margin of 3em. The margin between the first two elements is 50 pixels, as the smaller top margin is combined with the larger bottom margin. The margin between the second two elements in 3em, as 3em is larger than the 20 pixels on the bottom of the second element.

See the Pen [Margins: adjacent siblings](https://codepen.io/rachelandrew/pen/OevMPo) by Rachel Andrew.

See the Pen Margins: adjacent siblings by Rachel Andrew.

Completely Empty Boxes

If a box is empty, then it’s top and bottom margin may collapse with each other. In the following CodePen example, the element with a class of empty has a top and bottom margin of 50 pixels, however, the space between the first and third items is not 100 pixels, but 50. This is due to the two margins collapsing. Adding anything to that box (even padding) will cause the top and bottom margins to be used and not collapse.

See the Pen [Margins: empty boxes](https://codepen.io/rachelandrew/pen/JQLGMr) by Rachel Andrew.

See the Pen Margins: empty boxes by Rachel Andrew.

Parent And First Or Last Child Element

This is the margin collapsing scenario which catches people out most often, as it does not seem particularly intuitive. In the following CodePen, I have a div with a class of wrapper, and I have given that div an outline in red so that you can see where it is. The three child elements all have a margin of 50 pixels. However, the first and last items are flush with the edges of the wrapper; there is not a 50-pixel margin between the element and the wrapper.

See the Pen [Margins: margin on first and last child](https://codepen.io/rachelandrew/pen/BgrKGp) by Rachel Andrew.

See the Pen Margins: margin on first and last child by Rachel Andrew.

This is because the margin on the child collapses with any margin on the parent thus ending up on the outside of the parent. You can see this if you inspect the first child using DevTools. The highlighted yellow area is the margin.

The item with a yellow highlighted margin showing outside the parent

DepvTools can help you see where your margin ends up

Only Block Margins Collapse

The last example also highlights something about margin collapsing. In CSS2, only vertical margins are specified to collapse — that is the top and bottom margins on an element if you are in a horizontal writing mode. So the left and right margins above are not collapsing and ending up outside the wrapper.

Note: It is worth remembering that margins only collapse in the block direction, such as between paragraphs.

Things Which Prevent Margin Collapsing

Margins never collapse if an item has absolute positioning, or is floated. However, assuming you have run into one of the places where margins collapse outlined above, how can you stop those margins collapsing?

The first thing that stops collapsing is situations where there is something between the elements in question.

For example, a box completely empty of content will not collapse it’s top and bottom margin if it has a border, or padding applied. In the example below I have added 1px of padding to the box. There is now a 50-pixel margin above and below the box.

See the Pen [Margins: empty boxes with padding do not collapse](https://codepen.io/rachelandrew/pen/gNeMpg) by Rachel Andrew.

See the Pen Margins: empty boxes with padding do not collapse by Rachel Andrew.

This has logic behind it, if the box is completely empty with no border or padding, it is essentially invisible. It might be an empty paragraph element thrown into the markup by your CMS. If your CMS was adding redundant paragraph elements, you probably wouldn’t want them to cause large gaps between the other paragraphs due to their margins being honored. Add anything to the box, and you will get those gaps.

Similar behavior can be seen with margins on first or last children which collapse through the parent. If we add a border to the parent, the margins on the children stay inside.

See the Pen [Margins: margin on first and last child doesn’t collapse if the parent has a border](https://codepen.io/rachelandrew/pen/vqRKKX) by Rachel Andrew.

See the Pen Margins: margin on first and last child doesn’t collapse if the parent has a border by Rachel Andrew.

Once again, there is some logic to the behavior. If you have wrapping elements for semantic purposes that do not display visually, you probably don’t want them to introduce big gaps in the display. This made a lot of sense when the web was mostly text. It is less useful as behavior when we are using elements to lay out a design.

Creating a Block Formatting Context

A new Block Formatting Context (BFC) will also prevent margin collapsing through the containing element. If we look again at the example of the first and last child, ending up with their margins outside of the wrapper, and give the wrapper display: flow-root, thus creating a new BFC, the margins stay inside.

See the Pen [Margins: a new Block Formatting Context contains margins](https://codepen.io/rachelandrew/pen/VJXjEp) by Rachel Andrew.

See the Pen Margins: a new Block Formatting Context contains margins by Rachel Andrew.

To find out more about display: flow-root, read my article “Understanding CSS Layout And The Block Formatting Context”. Changing the value of the overflow property to auto will have the same effect, as this also creates a new BFC, although it may also create scrollbars that you didn’t want in some scenarios.

Flex And Grid Containers

Flex and Grid containers establish Flex and Grid formatting contexts for their children, so they have different behavior to block layout. One of those differences is that margins do not collapse:

“A flex container establishes a new flex formatting context for its contents. This is the same as establishing a block formatting context, except that flex layout is used instead of block layout. For example, floats do not intrude into the flex container, and the flex container’s margins do not collapse with the margins of its contents.”

Flexbox Level 1

If we take the example above and make the wrapper into a flex container, displaying the items with flex=direction: column, you can see that the margins are now contained by the wrapper. Additionally, margins between adjacent flex items do not collapse with each other, so we end up with 100 pixels between flex items, the total of the 50 pixels on the top and bottom of the items.

See the Pen [Margins: margins on flex items do not collapse](https://codepen.io/rachelandrew/pen/mZxreL) by Rachel Andrew.

See the Pen Margins: margins on flex items do not collapse by Rachel Andrew.

Margin Strategies For Your Site

Due to margin collapsing, it is a good idea to come up with a consistent way of dealing with margins in your site. The simplest thing to do is to only define margins on the top or bottom of elements. In that way, you should not run into margin collapsing issues too often as the side with a margin will always be adjacent to a side without a margin.

Note: Harry Roberts has an excellent post detailing the reasons why setting margins only in one direction is a good idea, and not just due to solving collapsing margin issues.

This solution doesn’t solve the issues you might run into with margins on children collapsing through their parent. That particular issue tends to be less common, and knowing why it is happening can help you come up with a solution. An ideal solution to that is to give components which require it display: flow-root, as a fallback for older browsers you could use overflow to create a BFC, turn the parent into a flex container, or even introduce a single pixel of padding. Don’t forget that you can use feature queries to detect support for display: flow-root so only old browsers get a less optimal fix.

Most of the time, I find that knowing why margins collapse (or didn’t) is the key thing. You can then figure out on a case-by-case basis how to deal with it. Whatever you choose, make sure to share that information with your team. Quite often margin collapsing is a bit mysterious, so the reason for doing things to counter it may be non-obvious! A comment in your code goes a long way to help — you could even link to this article and help to share the margin collapsing knowledge.

I thought that I would round up this article with a few other margin-related pieces of information.

Percentage Margins

When you use a percentage in CSS, it has to be a percentage of something. Margins (and padding) set using percentages will always be a percentage of the inline size (width in a horizontal writing mode) of the parent. This means that you will have equal-sized padding all the way around the element when using percentages.

In the CodePen example below, I have a wrapper which is 200 pixels wide, inside is a box which has a 10% margin, the margin is 20 pixels on all sides, that being 10% of 200.

See the Pen [Margins: percentage margins](https://codepen.io/rachelandrew/pen/orqzrP) by Rachel Andrew.

See the Pen Margins: percentage margins by Rachel Andrew.

Margins In A Flow-Relative World

We have been talking about vertical margins throughout this article, however, modern CSS tends to think about things in a flow relative rather than a physical way. Therefore, when we talk about vertical margins, we really are talking about margins in the block dimension. Those margins will be top and bottom if we are in a horizontal writing mode, but would be right and left in a vertical writing mode written left to right.

Once working with logical, flow relative directions it becomes easier to talk about block start and block end, rather than top and bottom. To make this easier, CSS has introduced the Logical Properties and Values specification. This maps flow relative properties onto the physical ones.

For margins, this gives us the following mappings (if we are working in English or any other horizontal writing mode with a left-to-right text direction).

  • margin-top = margin-block-start
  • margin-right = margin-inline-end
  • margin-bottom = margin-block-end
  • margin-left = margin-inline-start

We also have two new shorthands which allow for the setting of both blocks at once or both inline.

  • margin-block
  • margin-inline

In the next CodePen example, I have used these flow relative keywords and then changed the writing mode of the box, you can see how the margins follow the text direction rather than being tied to physical top, right, bottom, and left.

See the Pen [Margins: flow relative margins](https://codepen.io/rachelandrew/pen/BgrQRj) by Rachel Andrew.

See the Pen Margins: flow relative margins by Rachel Andrew.

You can read more about logical properties and values on MDN or in my article “Understanding Logical Properties And Values” here on Smashing Magazine.

To Wrap-Up

You now know most of what there is to know about margins! In short:

  • Margin collapsing is a thing. Understanding why it happens and when it doesn’t will help you solve any problems it may cause.
  • Setting margins in one direction only solves many margin related headaches.
  • As with anything in CSS, share with your team the decisions you make, and comment your code.
  • Thinking about block and inline dimensions rather than the physical top, right, bottom and left will help you as the web moves towards being writing mode agnostic.
Smashing Editorial
(il)

Source: Smashing Magazine, Everything You Need To Know About CSS Margins

Improve Your JavaScript Knowledge By Reading Source Code

dreamt up by webguru in Uncategorized | Comments Off on Improve Your JavaScript Knowledge By Reading Source Code

Improve Your JavaScript Knowledge By Reading Source Code

Improve Your JavaScript Knowledge By Reading Source Code

Carl Mungazi



Do you remember the first time you dug deep into the source code of a library or framework you use frequently? For me, that moment came during my first job as a frontend developer three years ago.

We had just finished rewriting an internal legacy framework we used to create e-learning courses. At the beginning of the rewrite, we had spent time investigating a number of different solutions including Mithril, Inferno, Angular, React, Aurelia, Vue, and Polymer. As I was very much a beginner (I had just switched from journalism to web development), I remember feeling intimidated by the complexity of each framework and not understanding how each one worked.

My understanding grew when I began investigating our chosen framework, Mithril, in greater depth. Since then, my knowledge of JavaScript — and programming in general — has been greatly helped by the hours I have spent digging deep into the guts of the libraries I use daily either at work or in my own projects. In this post, I will share some of the ways you can take your favorite library or framework and use it as an educational tool.

The source code for Mithril’s hyperscript function

My first introduction to reading code was via Mithril’s hyperscript function. (Large preview)

The Benefits Of Reading Source Code

One of the major benefits of reading source code is the number of things you can learn. When I first looked into Mithril’s codebase, I had a vague idea of what the virtual DOM was. When I finished, I came away with the knowledge that the virtual DOM is a technique which involves creating a tree of objects that describe what your user interface should look like. That tree is then turned into DOM elements using DOM APIs such as document.createElement. Updates are performed by creating a new tree describing the future state of the user interface and then comparing it with objects from the old tree.

I had read about all of this in various articles and tutorials, and whilst it was helpful, being able to observe it at work in the context of an application we had shipped was very illuminating for me. It also taught me which questions to ask when comparing different frameworks. Instead of looking at GitHub stars, for example, I now knew to ask questions such as, “How does the way each framework performs updates affect performance and the user experience?”

Another benefit is an increase in your appreciation and understanding of good application architecture. Whilst most open-source projects generally follow the same structure with their repositories, each of them contains differences. Mithril’s structure is pretty flat and if you are familiar with its API, you can make educated guesses about the code in folders such as render, router and request. On the other hand, React’s structure reflects its new architecture. The maintainers have separated the module responsible for UI updates (react-reconciler) from the module responsible for rendering DOM elements (react-dom).

One of the benefits of this is that it is now easier for developers to write their own custom renderers by hooking into the react-reconciler package. Parcel, a module bundler I have been studying recently, also has a packages folder like React. The key module is named parcel-bundler and it contains the code responsible for creating bundles, spinning up the hot module server and the command-line tool.

The section of the JavaScript specification which explains how Object.prototype.toString works

It will not be long before the source code you are reading leads you to the JavaScript specification. (Large preview)

Yet another benefit — which came as a welcome surprise to me — is you become more comfortable reading the official JavaScript specification which defines how the language works. The first time I read the spec was when I was investigating the difference between throw Error and throw new Error (spoiler alert — there is none). I looked into this because I noticed that Mithril used throw Error in the implementation of its m function and I wondered if there was a benefit to using it over throw new Error. Since then, I have also learnt that the logical operators && and || do not necessarily return booleans, found the rules which govern how the == equality operator coerces values and the reason Object.prototype.toString.call({}) returns '[object Object]'.

Techniques For Reading Source Code

There are many ways of approaching source code. I have found the easiest way to start is by selecting a method from your chosen library and documenting what happens when you call it. Do not document every single step but try to identify its overall flow and structure.

I did this recently with ReactDOM.render and consequently learned a lot about React Fiber and some of the reasons behind its implementation. Thankfully, as React is a popular framework, I came across a lot of articles written by other developers on the same issue and this sped up the process.

This deep dive also introduced me to the concepts of co-operative scheduling, the window.requestIdleCallback method and a real world example of linked lists (React handles updates by putting them in a queue which is a linked list of prioritised updates). When doing this, it is advisable to create a very basic application using the library. This makes it easier when debugging because you do not have to deal with the stack traces caused by other libraries.

If I am not doing an in-depth review, I will open up the /node_modules folder in a project I am working on or I will go to the GitHub repository. This usually happens when I come across a bug or interesting feature. When reading code on GitHub, make sure you are reading from the latest version. You can view the code from commits with the latest version tag by clicking the button used to change branches and select “tags”. Libraries and frameworks are forever undergoing changes so you do not want to learn about something which may be dropped in the next version.

Another less involved way of reading source code is what I like to call the ‘cursory glance’ method. Early on when I started reading code, I installed express.js, opened its /node_modules folder and went through its dependencies. If the README did not provide me with a satisfactory explanation, I read the source. Doing this led me to these interesting findings:

  • Express depends on two modules which both merge objects but do so in very different ways. merge-descriptors only adds properties directly found directly on the source object and it also merges non-enumerable properties whilst utils-merge only iterates over an object’s enumerable properties as well as those found in its prototype chain. merge-descriptors uses Object.getOwnPropertyNames() and Object.getOwnPropertyDescriptor() whilst utils-merge uses for..in;
  • The setprototypeof module provides a cross platform way of setting the prototype of an instantiated object;
  • escape-html is a 78-line module for escaping a string of content so it can be interpolated in HTML content.

Whilst the findings are not likely to be useful immediately, having a general understanding of the dependencies used by your library or framework is useful.

When it comes to debugging front-end code, your browser’s debugging tools are your best friend. Among other things, they allow you to stop the program at any time and inspect its state, skip a function’s execution or step into or out of it. Sometimes this will not be immediately possible because the code has been minified. I tend to unminify it and copy the unminified code into the relevant file in the /node_modules folder.

The source code for the ReactDOM.render function

Approach debugging as you would any other application. Form a hypothesis and then test it. (Large preview)

Case Study: Redux’s Connect Function

React-Redux is a library used to manage the state of React applications. When dealing with popular libraries such as these, I start by searching for articles that have been written about its implementation. In doing so for this case study, I came across this article. This is another good thing about reading source code. The research phase usually leads you to informative articles such as this which only improve your own thinking and understanding.

connect is a React-Redux function which connects React components to an application’s Redux store. How? Well, according to the docs, it does the following:

“…returns a new, connected component class that wraps the component you passed in.”

After reading this, I would ask the following questions:

  • Do I know any patterns or concepts in which functions take an input and then return that same input wrapped with additional functionality?
  • If I know of any such patterns, how would I implement this based on the explanation given in the docs?

Usually, the next step would be to create a very basic example app which uses connect. However, on this occasion I opted to use the new React app we are building at Limejump because I wanted to understand connect within the context of an application which will eventually be going into a production environment.

The component I am focusing on looks like this:

class MarketContainer extends Component {
 // code omitted for brevity
}

const mapDispatchToProps = dispatch => {
 return {
   updateSummary: (summary, start, today) => dispatch(updateSummary(summary, start, today))
 }
}

export default connect(null, mapDispatchToProps)(MarketContainer);

It is a container component which wraps four smaller connected components. One of the first things you come across in the file which exports connect method is this comment: connect is a facade over connectAdvanced. Without going far we have our first learning moment: an opportunity to observe the facade design pattern in action. At the end of the file we see that connect exports an invocation of a function called createConnect. Its parameters are a bunch of default values which have been destructured like this:

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
} = {})

Again, we come across another learning moment: exporting invoked functions and destructuring default function arguments. The destructuring part is a learning moment because had the code been written like this:

export function createConnect({
 connectHOC = connectAdvanced,
 mapStateToPropsFactories = defaultMapStateToPropsFactories,
 mapDispatchToPropsFactories = defaultMapDispatchToPropsFactories,
 mergePropsFactories = defaultMergePropsFactories,
 selectorFactory = defaultSelectorFactory
})

It would have resulted in this error Uncaught TypeError: Cannot destructure property 'connectHOC' of 'undefined' or 'null'. This is because the function has no default argument to fall back on.

Note: For more on this, you can read David Walsh’s article. Some learning moments may seem trivial, depending on your knowledge of the language, and so it might be better to focus on things you have not seen before or need to learn more about.

createConnect itself does nothing in its function body. It returns a function called connect, the one I used here:

export default connect(null, mapDispatchToProps)(MarketContainer)

It takes four arguments, all optional, and the first three arguments each go through a match function which helps define their behaviour according to whether the arguments are present and their value type. Now, because the second argument provided to match is one of three functions imported into connect, I have to decide which thread to follow.

There are learning moments with the proxy function used to wrap the first argument to connect if those arguments are functions, the isPlainObject utility used to check for plain objects or the warning module which reveals how you can set your debugger to break on all exceptions. After the match functions, we come to connectHOC, the function which takes our React component and connects it to Redux. It is another function invocation which returns wrapWithConnect, the function which actually handles connecting the component to the store.

Looking at connectHOC’s implementation, I can appreciate why it needs connect to hide its implementation details. It is the heart of React-Redux and contains logic which does not need to be exposed via connect. Even though I will end the deep dive here, had I continued, this would have been the perfect time to consult the reference material I found earlier as it contains an incredibly detailed explanation of the codebase.

Summary

Reading source code is difficult at first but as with anything, it becomes easier with time. The goal is not to understand everything but to come away with a different perspective and new knowledge. The key is to be deliberate about the entire process and intensely curious about everything.

For example, I found the isPlainObject function interesting because it uses this if (typeof obj !== 'object' || obj === null) return false to make sure the given argument is a plain object. When I first read its implementation, I wondered why it did not use Object.prototype.toString.call(opts) !== '[object Object]', which is less code and distinguishes between objects and object sub types such as the Date object. However, reading the next line revealed that in the extremely unlikely event that a developer using connect returns a Date object, for example, this will be handled by the Object.getPrototypeOf(obj) === null check.

Another bit of intrigue in isPlainObject is this code:

while (Object.getPrototypeOf(baseProto) !== null) {
 baseProto = Object.getPrototypeOf(baseProto)
}

Some Google searching led me to this StackOverflow thread and the Redux issue explaining how that code handles cases such as checking against objects which originate from an iFrame.

Useful Links On Reading Source Code

Smashing Editorial
(dm, yk, il)

Source: Smashing Magazine, Improve Your JavaScript Knowledge By Reading Source Code

Collective #531

dreamt up by webguru in Uncategorized | Comments Off on Collective #531


C531_listcss

CSS Lists, Markers, And Counters

In this article, Rachel Andrew starts by looking at lists in CSS, and moves onto some interesting features defined in the CSS Lists specification — markers and counters.

Read it


C531_DIVI

Our Sponsor

Divi: Custom CSS Control

Divi is a revolutionary WordPress theme and visual page builder for WordPress. Developers can easily combine Divi’s visual design controls with their own custom CSS. Divi’s interface is simple yet not limiting.

Try it for free


C531_trombone

Popup Trombone

A really awesome experiment by Matthew Rayfield where you can play a trombone by resizing the browser window.

Check it out







C531_texel

Texel

A proof-of-concept generative design toolkit made by Matt DesLauriers.

Check it out









C531_SEOmyth

SEO Mythbusting

A Google Webmasters video series hosted by Martin Splitt with the aim to clarify common misconceptions around technical SEO.

Watch it






Collective #531 was written by Pedro Botelho and published on Codrops.


Source: Codrops, Collective #531

That Was SmashingConf Toronto 2019

dreamt up by webguru in Uncategorized | Comments Off on That Was SmashingConf Toronto 2019

That Was SmashingConf Toronto 2019

That Was SmashingConf Toronto 2019

Rachel Andrew



We all enjoyed returning to Toronto for the second Smashing conference, and in this post, I am sharing some of the things that took place as well as the resources that were shared over the course of the two conference and two workshop days. Look out for the videos of all the presentations which will be released very soon.

The team worked hard to create a friendly welcoming space for everyone at the conference. We all know how it can be a little overwhelming to walk into a room of a few hundred strangers, knowing that you would love to make friends and have interesting discussions, but finding it hard to get started.

In order to avoid that, we asked everyone to read and follow our Code Of Conduct, try to create a range of spaces and activities where people can meet like-minded people, and also encourage everyone to follow “The Pac-Man Rule” when standing in a group.

Slide showing a graphic of the pacman rule

Pac-man rule for conversations (Large preview)

https://platform.twitter.com/widgets.js

“It’s a genuine friendliness that the Smashing team possesses, and that serves as the foundation for an inclusive, approachable event. It turns out that little things like launching balloons to kick off the event and advocating for the Pac-Man Rule go a long way towards making everyone feel welcome.”

Dan Rose

The Presentations

The first thing you think about when attending a conference is to wonder who is speaking, and what they will be talking about. At SmashingConf Toronto, we had an amazing lineup of speakers, with people you might know quite well plus some new faces. As many of our speakers presented without slides, we don’t have a huge number of slide decks to share. However, the list below links to some of the resources our speakers shared. We will also have videos available very soon!

Stage with people throwing candy into the audience

Vitaly and Phil throw candy to audience members (Photo credit: Marc Thiele)

Day One

The Day One Collaborative Doc created by attendees is full of takeaways from day one of the conference.

https://platform.twitter.com/widgets.js

Speaker Name Talk Title
Brad Frost Let’s Build a Design System
Sarah Drasner Let’s Write a Vue App From Scratch
Phil Hawksworth JAMStack: Silly Name. Serious Stuff.
Chris Gannon Make It Move! Create a Web Animation From Scratch
Kristina Podnar Help! I’m Your Ailing Website. The Digital Policy & Standards Rehab Hour
Steven Hoober Authentic Digital Design By The Numbers

Sarah onstage coding

Sarah Drasner writes a Vue app on stage. (Photo credit: Marc Thiele)

Day Two

Check out the Day Two Collaborative Doc for more resources and thoughts from our attendees and speakers.

Our mystery speaker was Seb Lester, and many of you were thrilled to get to hear his talk.

https://platform.twitter.com/widgets.js

We then enjoyed talks covering a wide range of topics from our day two speakers.

Speaker Name Talk Title
Phil Nash Diving Into Service Workers, Live
Jules Forrest For The Love Of The Grid
Dan Rose Seeing The Pages For The Components
Diana Mounter The Secret Lives of Color Systems
Scott Jehl Move Fast & Don’t Break Things

We found a few blog posts sharing takeaways from these talks. Arshabhi Rai recapped Day 1 and Day 2; and kinopo shared their takeaways in What a lovely SmashingConf.

Workshops

Auditorium style lecture room with people working on laptops

Vitaly shares responsive design knowledge with his workshop group (Photo credit: Marc Thiele)

Our workshops are a big part of each of our Smashing conferences. In Toronto, we had two days of full-day workshops, with some attendees choosing to do a workshop day before and after the conference. Workshops this time round were as follows:

Name Talk Title
Rachel Andrew Next Steps With CSS Layout
Chris Gannon Designing Delightful Animations For The Web
The Deque Team How To Translate Wireframes Into Accessible HTML/CSS
Vitaly Friedman Smart Responsive UX Design Patterns
Scott Jehl Lightning Fast Web Performance
Sarah Drasner Intro To Vue.js
Brad Frost The Design System Process
Vitaly Friedman New Front-end Adventures, 2019 Edition
Cloudinary Hacking Lizard Brain: Improving Visual Experience On The Web

https://platform.twitter.com/widgets.js

Side Activities

A conference isn’t just about the talks and speakers. We want to make spaces where attendees and speakers can learn from each other and share experiences in a more informal setting. To help with that, we ran various other things over the conference. At lunchtime, we had lunch sessions run by Deque on Day 1, and Netlify on Day 2, attendees could grab a plate of lunch and settle down in a more cozy environment to take part in those sessions.

https://platform.twitter.com/widgets.js

We had a great lounge area, with the talks live-streamed for folks who wanted to step out of the movie theater for a while.

People on sofas watching a presentation via a live stream

Our lounge area (Photo credit: Marc Thiele)

Morning Run

If you follow me on Twitter, you’ll know that I’m a keen runner, and it’s always nice to have some company on an early morning run. For a few conferences now, we’ve been organizing pre-conference runs — Toronto was no exception. We had 12 runners on Day 1, and 6 hardy souls on Day 2 joining us despite having attended the party. We only got slightly off-track once, and got a nice view of Toronto to take our photos.

https://platform.twitter.com/widgets.js

Jam Session

https://platform.twitter.com/widgets.js

On the evening before the conference, we had a Jam Session at Shopify hosted by Tiffany Tse (and her lovely assistant Walnut). There was a speaker panel featuring Steven Hoober, Scott Jehl, Kristina Podnar, Brad Frost, Jules Forrest, Phil Hawksworth and myself, plus lightning talks from Tiffany Tse, Kelly Harrop, April Ellsey, Steve Pereira, and Christine Fowler.

Graffiti And Photo Walks

On the day before and last evening of the conference, walks took place to explore graffiti around Toronto and take photos of the city. A great way to meet people and explore the location for those coming from out of town.

People in a street taking photos of graffiti

On the graffiti walk (Photo credit: Scott Whitehead)

Conference Party

There has to be a party, and we always try to do something fun and perhaps a little unusual for our conference parties. This time, we went bowling — courtesy of sponsorship by SpeedCurve.

Focus On The Local Community

Between sessions on stage, we invited organizers of community groups in the Toronto area on stage to share information about their groups. We hope that local attendess found some new meetups to go to. The groups that we featured were:

Name Details
Women Who Code Toronto Twitter: @WomenWhoCode,
Introduced by Stephanie
DevHub Toronto & Vancouver Twitter: @devhubTO
Events, educational programs, collaboration, and co-working
Introduced by Emma
The DevOps Toronto meetup Twitter: @devopsto
Introduced by Steve
Designers & Coffee Twitter: @Doriganic
Meetups, hands-on design challenges and feedback sessions, to casual networking nights.
Introduced by Dorsa
DevTO Twitter: @DevTO
Coding stories, eats and drinks. Join us on the last Monday of every month!
Introduced by Nael.
Serverless Toronto meetup Introduced by Daniel Zivkovic
Toronto Web Performance Group Twitter: @towebperf
Introduced by Henri Helvetica

Want To Join In The Fun?

We packed a lot into those few days! If you were there, we hope that you enjoyed it as much as we did. It was great to meet so many of you.

Audience members throwing balloons

SmashingConf Toronto opened with balloons (Photo credit: Marc Thiele)

If you would like to be part of the SmashingConf fun next year, we already have tickets on sale for SmashingConf San Francisco and you can leave your email to be the first to know when SmashingConf Toronto 2020 goes on sale. The rest of the 2019 events (New York and Freiburg) are already sold out! There are a few workshop-only tickets available for New York 2019, but be quick!

Smashing Editorial
(il)

Source: Smashing Magazine, That Was SmashingConf Toronto 2019

Inspired Design Decisions: Pressing Matters

dreamt up by webguru in Uncategorized | Comments Off on Inspired Design Decisions: Pressing Matters

Inspired Design Decisions: Pressing Matters

Inspired Design Decisions: Pressing Matters

Andrew Clarke



As I’d always been at the top of my class during high school, I headed to art college full of confidence that one day I’d be an accomplished painter. This over-confidence didn’t last long though, because when I arrived, I found myself surrounded by conceptual artists, filmmakers, painters, performance artists, printmakers, and sculptors, who all seemed much more talented than I was.

This was especially true of my friend Ben, a gifted painter who went to his studio late every night to work on several large canvases. Ben’s paintings had incredible depth because he built up hundreds of subtle layers of paint over several months.

I didn’t have any of Ben’s patience. I needed to see results quickly, so my paintings were anything but deep or subtle. Compared to Ben’s, mine looked like paintings by numbers. It didn’t take me long to realise that painting just wasn’t the right medium for me.

Luckily, the course I’d chosen wasn’t structured, and it didn’t have a formal curriculum. This allowed students free movement between disciplines, so I moved from the painting studio to printmaking and spent the next few years happily making prints.

I found the printmaking process incredibly satisfying. I loved making prints from linocuts, and in much the same way that I’m often entirely absorbed by writing code today, I regularly lost myself carving thousands of tiny marks until the floor was covered in sharp shards of lino.

Printmaking and writing code have plenty in common. Both can quickly transform a blank canvas into finished work, without waiting weeks watching paint dry. Both benefit from regular iteration and testing. In fact, there’s very little difference—except inky hands — between running a test print and refreshing a browser window.

Pressing Matters magazine cover

Pressing Matters magazine. (Large preview)

I haven’t cut lino for thirty years, but I still appreciate the art of printmaking. On a recent trip to London, I popped into Magma and picked up a copy of Pressing Matters. It’s an independently published magazine which “hones in on the people, passion and processes behind the art form of printmaking.” Its publishers hope to inspire newcomers to printmaking, but as I thumbed through its pages, I found there is plenty about the design of Pressing Matters which can inspire web designers too.

Andy Clarke
May 2019

Andy Clarke reading Pressing Matters magazine

Pressing Matters has a distinctive, but simple style. (Large preview)

Pressing Matters: The Passion And Process Behind Printmaking

I may not have made any prints for thirty years, but I’m still fascinated by the process of printmaking as much as I appreciate the end results. Picking up a copy of Pressing Matters (pressingmattersmag.com) on a recent trip to my favourite magazine shop and flicking through its pages, I was immediately transported back to art school where my fingers were almost always covered in cuts from lino cutting tools, and I smelled like ink and turpentine.

Pressing Matters has a distinctive, but simple style. It uses a limited palette and often connects the colour of headlines and other typographic elements with colours found in nearby photographs and prints. The result is a design which feels connected.

Pressing Matters magazine spread

© Pressing Matters Magazine. (Large preview)

Pressing Matters’ Creative Director John Coe uses layout patterns which produce a rhythm which flows throughout the magazine. Differently sized modules speed you past pages packed with prints, then the pace slows to allow you to linger on larger artwork reproductions. These layouts frame the magazine’s content perfectly, and while they’re original, they’re also discreet enough not to detract from the subject matter.

What struck me about Pressing Matters initially was how the magazine includes a variety of layout styles but allowed for various types of content, but still maintains a high degree of consistency throughout.

Pressing Matters magazine spread

© Pressing Matters Magazine. (Large preview)

When I looked closer at how its pages were constructed, I discovered a layered compound grid comprised of two and three columns running through the magazine. Using a compound grid makes perfect sense for a magazine devoted to printmaking, which itself often involves multiple layers of ink to form something deeper and richer than can be achieved with a single layer.


You might think that a complex grid could stifle creativity and would result in designs which look stiff, but in Pressing Matters, the compound grid feels fluid and full of energy.

Pressing Matters magazine spread

© Pressing Matters Magazine. (Large preview)

While many of Pressing Matters’ pages rely on symmetrical two or three- column layouts, it’s when the two and three-column grids are combined that the magazine really comes to life.

Not only is this grid adaptable to accommodate various types of content, the variety of possible layout permutations also allow for changes in visual pacing throughout the magazine.

I’ll teach you all about Karl Gerstner and his mobile grid later in this issue, but just like Gerstner’s iconic work for Capital magazine, Pressing Matters uses large facing images to slow reading down.

Whitespace opens up around running copy to allow for easy reading. Text wraps around the fluid shapes in images. Pages packed with prints are arranged masonry-style. Text split across two columns runs alongside images which are arranged on a three-column grid, and these techniques combine to create an engaging and enjoyable reading experience.

Pressing Matters magazine spread

© Pressing Matters Magazine. (Large preview)

Pressing Matters proves that compound grids can have a profound effect on the experience of reading a magazine. The same layout principles which make Pressing Matters so appealing can also be applied to products and websites, despite them being very different media.

These principles are not new and they have guided art direction and design for decades. They matter just as much on the web as they do in the pages of a glossy magazine. Whether your readers are offline or on, grids are fundamental to their understanding of your stories, and you can use them for more than aligning content.

Next time you’re passing your nearest magazine store, pop in and pick up a copy of Pressing Matters. You won’t get inky fingers, but you will get your hands on inspiration for your next project.

Making Sense Of Compound Grids

Grids have a long and varied history in design, from the earliest books, through movements like constructivism and the International Typographic Style, right up to the present-day popularity of grids in frameworks like Bootstrap and material design.

A generation of product and website designers have grown up with grids from Bootstrap, the 960 Grid System before it, and even the Blueprint framework before that. In frameworks like these — and in plenty of work built on them — grids are used mostly for aligning content to columns.

An unimaginative design based on Bootstrap

I guess you’ve seen those “Which one of these two layouts are you designing today?” tweets, lamenting the current state of design on the web. Does Bootstrap create unimaginative designs? No, people do. (Large preview)

When you use grids imaginatively, they do much, much more than align content. A grid brings cohesion to a composition. It helps people understand the stories you’re telling by suggesting hierarchies. Grids inform people what to read first, then next, and how much attention to give it.

They define the position of valuable information or a call to action. A thoughtfully chosen grid leads to a wealth of possibilities and any number of exciting designs.

The use of grids for web design has improved consistency, legibility, and usability, but using grids included with frameworks including Bootstrap has also led to a generation of homogenous layouts and uninspiring designs.

When I teach design classes, I often ask my students to draw what a grid means to them. Nine out of ten sketches twelve symmetrical columns. Symmetrical multi-column grids have become a staple mainly because twelve columns can be easily divided into halves, thirds, quarters, and eighths. Because they’re so easy to learn, grids like the ones included with Bootstrap have become a staple.

In fact, they’re now so ubiquitous that starting a new design without sketching three or four columns can be incredibly difficult as it involves changing your mental model and the way you think about grids. It’s important to know that symmetrical column-based grids are only one of several options. Compound grids are one of those options but despite the enormous flexibility they offer — something incredibly important for today’s multi-device designs — they’re rarely spoken of with product and website design.

Way back in July 2009, Diogo Terror wrote “Lessons From Swiss Style Graphic Design” for Smashing Magazine which mentions Karl Gerstner and includes many fabulous examples of Swiss Style Graphic Design.

Capital Magazine

In the 1940s and ’50s, designers including Josef Müller-Brockmann made using grids to create consistent and creative layouts one of the defining aspects in what became known as the International Typographic Style or Swiss Design.

Capital Magazine covers

Capital Magazine 1962. (Large preview)

Swiss artist and typographer Karl Gerstner was one of the first designers to exploit the creative flexibility of using grids, and it’s the compound grid which Gerstner designed in 1962 for Capital magazine that has become one of his best-known creations.

Capital Magazine spread

Capital Magazine 1962. (Large preview)

The concept behind Capital was to provide “a human view of economics, an economic view of humanity” and so its content and Gerstner’s design had to be accessible, clear, and engaging. Given the potential variety and unpredictability of Capital’s content, Gerstner also needed a grid which would help him to lay out any content consistently and without restrictions.

Karl Gerstner’s mobile grid

Karl Gerstner’s mobile grid; a compound grid he designed for Capital magazine in 1962. Confused? So was I. (Large preview)

Gerstner designed what he called a “mobile grid,” although it’s not the type of mobile you and I are used to. This grid is the one most likely to be found when searching for compound grids, but it’s also the one most likely to baffle on first look.

The compound grid Gerstner designed for Capital looks incredibly complex when seen as it does above, so to explain how he created it — and how you can use it — I’m going to break Gerstner’s grid down into its constituent parts.

Example based on Karl Gerstner’s mobile grid

(Large preview)

There are 58 columns and rows in Gerstner’s mobile grid, but he started with just one. Content in this single module fills the full width of the page.

Example based on Karl Gerstner’s mobile grid

(Large preview)

Then Gerstner divided his single module into two columns and rows. Using two columns in this way results in a reassuring symmetrical design.

Example based on Karl Gerstner’s mobile grid

(Large preview)

That large module can also be sub-divided into three columns and rows. Have you noticed how the gutters between the divisions in Gerstner’s grid are always the same size?

Example based on Karl Gerstner’s mobile grid

(Large preview)

By splitting the large module into four, these columns of content feel formal, and the overall impression is that this design is a serious one.

Example based on Karl Gerstner’s mobile grid

(Large preview)

When the full-page module is divided into five columns and separated into two spacial zones by a flowline, this design feels more technical. With Gerstner’s mobile grid, you can use each set of columns and rows separately. You can also turn them into a compound grid by either overlaying or stacking them.

Example based on Karl Gerstner’s mobile grid

(Large preview)

Dividing the page into six columns and six rows of modules, enables an incredible variety of layout options. The flexibility of a compound grid comes from the interplay of two or more grids and how that affects the position and size of elements. This often makes a compound layout far more interesting than one grid in isolation.

Say Hello To Compound Grids

A compound grid is two or more grids of any type — column, modular, symmetrical, and asymmetrical — on one page. They can occupy separate areas or overlap.

If you’re still unsure about using modular grids as Karl Gerstner did, you can start by making a compound by overlapping two column grids; one with two columns, the other with three.

It’s the interplay of the two grids which makes this compound layout more interesting than a single grid. The flexibility of a compound grid becomes apparent when I make the grid lines visible.

4+6 compound grid

4+6 compound grid. (Large preview)

If you’re watching closely, you should notice how compound grids will take your design in a different direction than twelve symmetrical columns.

By laying a three-column grid over one with two columns, you create four columns where the outer two are twice the width of those on the inside. I like to think of this as a rhythmic pattern; 2|1|1|2.

Rhythmic patterns

By using any number of equally-sized columns or rows, your layouts form a consistent pattern and an even rhythm which does not change across the page. Think of each column as a beat and tap twelve of them on your desk. It doesn’t sound very inspiring, does it?

Example based on 2+3 compound grid

2+3 compound grid. (Large preview)

Compare that with the rhythm from a 2|1|1|2 pattern and you should understand how using compound grids can change both your mental model and the layouts you create. Using this 2|1|1|2 pattern for my first layout. I place the main body of content — including the headline, standfirst paragraph, and running text, into the first column in my two-column grid. I use a single column from my three-column grid to place supporting information about the Jaguar E-Type series, without question the most beautiful car ever made.

A blueprint image of that astounding automobile crosses the remaining space, creating a visual connection between the two areas of content.

Example based on 2+3 compound grid

2+3 compound grid. (Large preview)

For an altogether different design (above) — one which uses both layout and italic type to suggest the movement and speed of the E-Type — I stagger my standfirst paragraph and running text using grid lines from both the two-column and three-column grids.

Changing the compound formation to combine three-column and four-column grids (3+4) creates an altogether different rhythmic pattern of 3|1|2|2|1|3.

Example based on 3+4 compound grid

3+4 compound grid. (Large preview)

With a compound of two grids (above,) you might use widths from one or the other. Or you could combine widths from both to form columns which don’t conform to either. You can use these new widths to inform the sizes of images and text. While the standfirst paragraph starts on the three-column grid, the running text which follows begins on the four-column grid.

Example based on 3+4 compound grid

3+4 compound grid. (Large preview)

That same combination of grids (above) can make a very different impression by combining columns widths from both grids to inform the width of my column of running text. This column matches the width of my large vertical image to balance both sides of this design.

Example based on 4+5 compound grid

4+5 compound grid. (Large preview)

This time, I set the main block of running text across two columns and derived their widths by combining column units of 4 and 3.

As for those very narrow columns, whose width is only 1 unit, they’re perfect for informing the size of typographic elements including this bold drop cap.

Example based on 4+5 compound grid

4+5 compound grid. (Large preview)

Overlaying four columns with five (above) leads to a highly unusual rhythmic pattern of 6|1|4|3|3|4|1|6.

For this alternative design, I use that same pattern in a different way by running my text over three columns. I use the widths from the five-column grid to inform the width of my supporting information and the image of this E-Type’s curvy rear end.

Example based on 4+6 compound grid

4+6 compound grid. (Large preview)

In this version of the design (above,) a large image shows off the iconic shape of E-Type’s body and fills almost all the width of my page.

A solid block of running text sits directly under the Jaguar’s wheels and derives its width from both the four-column and six-column grids.

My next design (below) literally places the E-Type at the centre of the action and text wraps around it on both sides. Remember, it’s not necessary to fill every grid module with content. By limiting the width of my standfirst paragraph and leaving space elsewhere in the layout empty, I create a dynamic diagonal which adds energy and movement to this design.

Example based on 4+6 compound grid

4+6 compound grid. (Large preview)

Of all the possible grid combinations, the combination of four and six-column grids is the one I use most often in my work. It’s flexible enough to handle many different types of content and makes an incredible variety of compositions possible.

Example based on 4+6 compound grid

Left: The pull quote feels disconnected from the story. Right: The edge of this quote aligns to lines in the six-column grid. (Large preview)

While the overall feeling from this final design feels balanced — largely due to a centred block of running text, the pull quote feels disconnected from the story as it occupies only the width from one column in the six-column grid. I can improve this design by aligning the edge of this quote to lines in the six-column grid, so it feels part of the story.

… (Box)

Setting the pace

Six differently paced layout modules

Magazine designs often use differently sized areas to vary the pace. (Large preview)

Rhythm is an essential factor, not just within the page, but also across the pages of an entire product or website. Compound grids are not only flexible enough to accommodate a wide variety of content types, but they also allow you to vary this visual pacing. Magazine designs often use differently sized areas to vary this pace. Repeating smaller modules speeds up the movement, while larger ones slow it down. People naturally spend longer looking at larger spacial zones, and we can use the same technique at particular moments in someone’s journey to slow them down and make them take notice.

Stacking Grids

You can combine column grids with hierarchical and even modular grids. When pages contain two separate subjects or different types of content, stacking grids can be a great way to make that difference more obvious.

At the top of this next page is a story about the Jaguar E-Type. Underneath there’s an altogether different story about the famous Le Mans 24 hour race. To leave someone in little doubt these stories are separate, use a different grid for each. I base the top story on a four-column grid, the bottom on a six.

4+6 column grids, stacked

4+6 column grids, stacked. (Large preview)

Above, I make the difference between these two stories obvious by placing the second against a grey background. I also use paragraph spacing instead of first-line indentations.

4 columns and a modular grid, stacked

4 columns and a modular grid, stacked. (Large preview)

I make the difference between these two stories obvious by placing the first against a grey background. In the second story I also use bolder type and paragraph spacing instead of indenting the first line.

Karl Gerstner

Karl Gerstner (1930–2017) was a Swiss artist and one of the most influential typographers. He began work when he was only 19, studied under Fritz Büler, and then went on to co-found GGK, one of the most successful Swiss creative agencies of the ’70s.

Books about Gerstner’s work have been out of print for decades, and copies often run to hundreds of Pounds so I wouldn’t be surprised if you haven’t seen his designs first-hand. But, you’ll have seen plenty of other peoples’ work which was inspired by it.

Gerstner made unjustified, ragged-right text famous as up until then, columns of type were usually justified. He also developed the idea of using typefaces and typographic design to create connections between words on a page and their meaning. While this concept might seem obvious to us today, this idea seemed revolutionary in the 1960s.

Karl Gerstner’s probably best known for his iconic work on the quarterly Capital Magazine, starting in 1962. In fact, it’s through my research into Capital, and the compound grid Gerstner created for it that I first became aware of him and his work.

dvertisements for Sinar, by Karl Gerstner

Advertisements for Sinar, by Karl Gerstner. (Large preview)

By a strange coincidence, I recently discovered that Gerstner’s agency also created advertisements for Sinar, the Swiss large format camera maker I worked with during the early 1990s. In these advertisements, the shape of the word “Sinar” resembles the results of using the swing and tilt movements on a large format camera.

Developing Compound Grids

When you first see Karl Gerstner’s mobile grid, you might think compound grids are challenging to implement. Whereas developing compound grid would’ve been a complicated process using traditional methods, today’s layout tools, including CSS Grid, now make it simple.

Designing layouts using compound grids requires a shift in your mental model, and developing them is no different. However, CSS Grid line numbers combined with new flexible length units (fr) will make that shift smoother.

Following the order I used earlier, I’ll start with a compound of two-column and three-column grids (2+3) which has a rhythmic pattern of 2|1|1|2.

Example design

(Large preview)

Translating that pattern into values for grid-template-columns couldn’t be easier, but first I need to apply CSS Grid to the body element of my page, then set a gap between columns which is relative to the width of my viewport. As I don’t want these styles applied at smaller screen sizes, I enclose them within a media query:

@media screen and (min-width : 48em) { 
body {
display: grid;
grid-column-gap: 2vw; }
}

Now, I use fr units to specify the pattern for my compound grid. The result is four columns where the width of the outer columns occupy twice the space of the inner two:

body {
grid-template-columns: 2fr 1fr 1fr 2fr; }

Example design

(Large preview)

A combination of three-column and four-column grids (3+4) will result in six columns and a rhythmic pattern of 3|1|2|2|1|3. My flexible length units will be:

body {
grid-template-columns: 3fr 1fr 2fr 2fr 1fr 3fr; }

Example design

(Large preview)

Finally, combining four-column and six-column grids (4+6) creates eight columns, two of them much narrower than the rest. To create a rhythmic pattern of 2|1|1|2|2|1|1|2 my flexible length units will be:

body {
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; }

With these Grid properties applied, all direct descendants of a grid-container become grid-items, which I can place using areas, line numbers, or names.

The design I’m developing requires only the most basic structural elements to implement it, and my markup looks like this:

<body>
<h1>….</h1> 
<p>…</p>
<img> 
<main>…</main> 
<aside>…</aside>
</body>

I use the eight columns from the 4+6 compound grid above. Here are the styles to implement that:

@media screen and (min-width : 48em) {
body {
display: grid;
grid-template-columns: 2fr 1fr 1fr 2fr 2fr 1fr 1fr 2fr; 
grid-column-gap: 2vw;
grid-row-gap: 2vh; align-content: start; } 
}

The elements above are direct descendants of the body. I place them on the grid by using line numbers. First the headline, the paragraph which immediately follows it, and finally my main element. These elements all start on grid line 4 and end on line 8:

h1, h1 + p, main { 
grid-column: 4 / 8; }

The blueprint image of my beautiful Jaguar E-Type should be wider than other elements in this design, so I place it using different line numbers. It starts at line 2 and extends the full width of my page:

img {
grid-column: 2 / -1; }

Now, I place the aside element which contains my supporting information about the three series of E-Type. As I want this element to align to the bottom of my layout, I add the align-self property with a value of end:

aside { 
grid-column: 1 / 3; 
align-self: end; }

Final example design

(Large preview)

Finally, as I want both main and aside elements to appear next to each other on the same row, I give them identical row number values:

main,
aside { grid-row: 4; }

All that’s left is for me to add some small typographic touches to improve my design. I don’t need a presentational class attribute value to style the paragraph, which immediately follows my headline. I can use an adjacent sibling selector instead:

h1 + p { 
font-weight: 700; }

To style the first line of the first paragraph in my main element, I use a combination of descendant, pseudo-element, and pseudo-class selectors:

main p:first-of-type::first-line { 
font-weight: 700; }

Finally, to indent every following paragraph which is does not immediately follow my headline, I use both a :not() negation pseudo-class selector and two adjacent sibling selectors:

p:not(h1 + p) + p { 
text-indent: 2ch; }

NB: Smashing members have access to a beautifully designed PDF of Andy’s Inspired Design Decisions magazine and full code examples from this article.

Smashing Editorial
(ra, yk, il)

Source: Smashing Magazine, Inspired Design Decisions: Pressing Matters

UX Improvements For Keyboard Accessibility

dreamt up by webguru in Uncategorized | Comments Off on UX Improvements For Keyboard Accessibility

UX Improvements For Keyboard Accessibility

UX Improvements For Keyboard Accessibility

Vitaly Friedman



How can we provide an accessible user experience for keyboard-only and assistive technology users without affecting the experience for any other users? We’ve kindly asked Aaron Pearlman, Principal UX Designer at Deque Systems, to share some practical tools and techniques to ensure that we’re all providing an inclusive and accessible experience for our users.

As a part of our Smashing Membership, we run Smashing TV, a series of live webinars, every week. No fluff — just practical, actionable webinars with a live Q&A, run by well-respected practitioners from the industry. Indeed, the Smashing TV schedule looks pretty dense already, and it’s free for Smashing Members, along with recordings — obviously.

We hope you’ll enjoy the webinar as much as we did!

“UX Optimizations For Keyboard-Only And Assistive Technology Users” with Aaron Pearlman (Watch video on YouTube)

Aaron Pearlman: You should be able to see my screen. Okay, right now, let me just… There we go, very good. Well, hello everybody. Like I said, I am Aaron Pearlman, the Principal User Experience Designer for Deque. And I think— Uh, let me move— Zoom tends to put a bit of UI in the way, so I apologize if I look like I’m frantically moving and mouse hopefully it’s not showing up. And so, today we’re going to talk about the types of optimizations that you can make for Keyboard-Only and Assistive Technology users. As I mentioned a moment ago, these type of optimizations, these type of things aren’t going to preclude anyone else from using your… they’re not going to be unutilized by other people as well. They just tend to be things that are going to be more advantageous to users that dominantly use a system with keyboard Only User Assistive Technology.

Aaron Pearlman: For those who aren’t familiar with what that means, what a Keyboard-Only User Assistive Technology is— a keyboard only user would be somebody who just typically uses your keyboard to traverse a system. So they’re going to be using tab and Shift tab a lot and the arrow keys to traverse your system, so focus is quite important to them. You might find this one individual may have motor skill issues, may have vision deficiencies as well, the keyboard-only users, and then assistive technology users also use a keyboard to traverse your system, they may use other assistive technologies as well such as screen meters like VoiceOver or a braille reader or something like that.

Aaron Pearlman: So, that’s kind of what we’re focusing on — our users of that nature because a good portion of individuals who have disabilities tend to fall into this camp. That doesn’t mean everybody. Certainly, there are a myriad of different disabilities and gradiations in between, but for the purpose of this, this is what we’re going focus on today.

Aaron Pearlman: So, a little bit of an overview of what we’re going to cover: we’re going to talk a little bit of design process with plenty of maybe doing a little bit of an exercise type-of-thing that we might go into, maybe not, before we go to the skip links. And then skip links are going to be one of the features that we’re going to cover, ways to optimize your modal, and how to handle focus. So, these are going to be the three big categories that we’re going to cover and then we’ll have time for questions when we’re all done.

Aaron Pearlman: To start, I thought we could do a little bit of UX design process overview. I was in different workshops and stuff, I find that there a myriad of different individuals that are there from lots of different disciplines, not everybody is a user experience designer, so they may not be as familiar with the process that many UX designers employ. So for this, I thought we would just briefly go over it, we’re not going to spend a tremendous amount of time on it, but I find it merits going over just briefly. Also because it’s going to tie into designing accessibly as well. So, most UX design tends to go through a process called discovery, it’s not always called discovery, sometimes it’s called rapid ideation, rapid iteration. A lot of people have different names for it, but the point is that it’s the part of the design process where a lot of the fabrication happens.

Aaron Pearlman: It’s a lot of the time where we have also different ideas and requirements gathering, it’s one where a lot of research and synthesizing that with your organizational goals and filtering that with all of that information, and what comes out of it are typically artifacts that allow us to be able to build the system that we’re going to be making or the features that we’re making. Those tend to be — they’re not always — but they tend to be things like prototypes, sometimes you’ll see mental models that will come out of them as well. But a prototype in some level of fidelity that is a reflection of how your target user is going to achieve their goals. The TLDR is that reiterate design and we test with users and reiterate, test with users, reiterate, test with users, and then in the end, it ends up going to be built.

Aaron Pearlman: You think that’s important, is the considerations for accessibility are that we want to be thinking about and doing accessibility throughout that design process. And different levels of fidelity can merit, thinking about different types of things, it really depends. Won’t go into a lot of that, but just in general, we want to incorporate those heuristics and methods, and we’re going to as designers grow our powers of accessibility over time, just as we grow our powers of being a good user experience designer over time. There’s not an expectation in the beginning that you’re going to go and read WCAG 2.1, then you’re going to read the ARIA spec, and then you’re going to be done and you’re not going make any more mistakes, or you’re not going to miss anything when it comes to your designs and designing accessibly. That’s not necessarily reasonable by any stretch of the imagination.

Aaron Pearlman: Just know that you’re going to be learning over time. Certainly I still mistakes in accessibility, and everything that I work on and it’s just all about getting better. So, [inaudible] because I’m always designing accessibly. So one small plug though it’s relevant to what we’re going to be working on today is called Trane. It’s our fully accessible pattern library at Deque, we use it to build our own products. It’s an HTML, CSS and JavaScript front end framework, it quite similar to Bootstrap, if you’ve ever used anything like that. We also have a react library that’s sister library too as well. Our team develops in react. But we’re going to be looking at a few of the things in here today as examples. But this is open source, it’s available, there will be a link to it at the end of this deck, which I’ll make available to everybody.

Aaron Pearlman: And it’s free for you to use and get on get branches and use it to your heart’s content or contribute to it, we’d love to see a contribution to it as well. So just a small plug, but we will be referring to it as we go through. So for the first thing that we’re going to look at are skip links. And for those who may not be familiar with what a skip link is, skip links are little links that will tend to show up as the very first tab stop in a web application or website. And what they allow you to do is they allow you to bypass parts of the website. Why would you want to do that?

Aaron Pearlman: Well, if you have a website that has really rich menu, that may be a big billboard menu or just has a lot of stuffs to it, if you’re a Keyboard Only or Assistive Technology User, when you get to that site and your VoiceOver begins to read off of it, or even not, even, maybe you are a sighted user, you just use your keyboard only, you’re going to have to tab cycle through all of those different items to get down to the contents or to the workspace that you want to begin whatever your activity that you’re doing there is. And so, what a skip link allows you to do is to bypass typically, typically navigation to get to the workspace area of that application.

Aaron Pearlman: There can be multiple links sometimes and typically only see one, but we have some examples. I’ll show you an example of where you can use multiple skip links as well. So I thought we could look at a couple different types of Skip links or a few different types of skip links, and then we’ll look at another page that doesn’t have a skip link, and maybe talk a little bit about where one might be useful there. The first one we’re going to look at, hopefully you can see my screen. The first one we’re going to look at is this skip link that we use on deque.com and what it is, is what I would call a displacement element in that it displaces the page. So when I tab into here, I can see the skip link is there and it will tell me to skip to content.

Aaron Pearlman: And when I select that, it will send me to the content below, and I call it displacement because it literally inserts and hides itself and inserts itself into there and displaces it. This was the skip link that we chose to use for our content, but it’s one that’s very common. You’ll see it insert itself at the top of a website or web application. The next one we’re going to look at is one at a site that I’m sure that many of you have used or used quite frequently. It’s Amazon, we’ll look at their skip link. When I tab in there, if you look in the upper left corner there, you’ll see it overlaid, this is an overlay style, this is very, very common where it’ll overlay the content, and so it will often skip whatever’s behind it to show you the skip to main content there.

Aaron Pearlman: The pros and cons between displacing versus overlaying are negligible. If you find that your content is something that you never want to obfuscate, then you may want to insert something and just use it, displacement one, vice versa, it doesn’t matter, that’s fine as well. If you’re designing content that reads from right to left, like Arabic content, you may put your skip link in the upper right corner, it may merit that. It really comes down to what’s appropriate. But ultimately, that discretion will be to the designer in their team. So, this is an example of two skip links that were a single skip link, and I thought I would show you one where there are multiple options inside the skip link.

Aaron Pearlman: I’m going to pull up that example, this is from our pattern library. Now for this particular example, I wouldn’t actually design something that had multiple skip links for it because it doesn’t really merit it, but we just did it for the purpose of demonstrating it. So I’m going to tab in and in the upper left corner, we use an overlay that shows you two skip links right here. And these are tab stops inside of here, so if I hit tab again, we’re going to tab into the next one and if I tab away, it’s going to go. If I tab again, it’s going to leave and it’s going to go into the header at the top there. I’m going to shift tab back, shift tab back so that we can see that we can move in and out of here.

Aaron Pearlman: And then I will go ahead and enter one of these just so that you can see it. And what happens at this point when I select it, it sends me into the workspace area and it actually focuses that workspace area. What you’ll see for a lot of web applications is they don’t actually show the focus itself, we wanted to show that in our applications, this isn’t a focus of elements so to speak, but it is something that can take focus. And then from here, we’re going to focus and then we can go to the different items inside of there that are the focus of all elements that are inside of there, the [inaudible 00:12:28] elements. So, those are examples of a few different ways that you can do skip links.

Aaron Pearlman: Like I said, there’s an example inside the pattern library, you’re welcome to use it, we also have a version of it as well, I believe here that has errors. We have a single skip link example as well, and you can just use that as well. So we have a couple of different examples here. But those are examples of common ways that you can use skip links. And they are primarily beneficial to individuals that only use their keyboard to traverse the system when they use a system technology as a result of that.

Aaron Pearlman: But at sometimes, there can be other instances where that a skip link potentially could be beneficial. I’ve seen it can be potentially beneficial. You could imagine an instance where the big workspace of your site maybe it’s a bunch of search results and it does a lazy score where you’ll scroll to the bottom and then it’ll load more results, and scroll to the bottom and it’ll load more results, you scroll to the bottom, and it will load more results.

Aaron Pearlman: Well, how do you get to the footer? And I’ve had this trouble actually before, where I’ve gone to search engines and I was never able to get to the footer. And what would’ve been nice is the skip link that actually let me skip to the footer, because I was looking for information down in the footer. So there’s ways that skip links can be beneficial to that. It’s not the only way that you can solve that problem. Certainly, you can use hard keys or shortcut menus as well. There are lots of different techniques to accomplish these goals, but that’s the one that skip links tend to be very good at [inaudible 00:14:13]. Some things to keep in mind when designing a skip link is that, typically it’s going to be the very first tab stop on your website web application.

Aaron Pearlman: And that’s commonly where it’s found, and so if I’m screaming or a keyboard only user, I can get to it immediately. It’s the very first thing I can do when I enter in. So if it’s something that a web app that I use frequently, I can get right to what I’m trying to do. It should also be visually depicted where it is supposed to be in the information, in the AI basically, so you can put skip links and other parts of your application as well, like I could put one here if I wanted to, find a long scrolling stack site and I wanted to do that, and I wanted to have a skip link within something. I’m fairly sure that you can anchor into different things like that, but it should visually be represented where it should be, inside of the application.

Aaron Pearlman: In general, that’s extremely uncommon. Most skip links are always in the very first tab stops. In general, don’t do that. I think you technically can, but I would say don’t. And then the final thing is it is an interactive element and it’s the past color contrast, so make sure that it does, if you decide to use like an image or something in it, I would, but if you did, it needs to have the proper accessible name along with it as well. In general, most people use texts and links, so it’s going to be marked up as a link. Just make sure that it is passing color contrast so that it [inaudible 00:16:07]. Very good. So that’s kind of all we have for skip links.

Aaron Pearlman: It’s a fairly succinct but very common pattern that you see everywhere and it’s something that you can add fairly, it’s a fairly straight forward to add to your web application, but it can make a big difference for individuals who use their keyboard or system technology. So let me go ahead and close this and let’s move on to modal optimizations. Chose to do this because modals are very, very, very, very common amongst most web apps and they come in a lot of different forums, a lot of different ways that modals are shaped and created.

Aaron Pearlman: But some common things that I see that show up in more of the things that we can correct, until there’s some optimizations that we can do to make it a better experience for keyboard-Only and Assistive Technology users. And in general, I think your modal are much better one. One thing I thought I would show here really quickly is, one important thing that a Modal needs to do is it needs to be able to trap focus inside of it. I wanted to show an example of … it’s right here. I love dribble by the way, so this is not a dig against them. This is probably just a small oversight here. I used them all of the time as a delightful site and has wonderful stuff on it.

Aaron Pearlman: So if I were to hit the sign in, oops, I’m sorry, the sign up. Here’s a modal here and something that can happen sometimes. If you notice carefully, I’m hitting tab, tab, tab, tab, tab. As you can see behind the screen, it’s a little bit difficult to see. You can see focus hasn’t quite been trapped inside the Modal and this can happen sometimes. So if I was a user who’s using Assistive technology or a Keyboard-Only, it would be very difficult for me to get back to this.

Aaron Pearlman: It’s something that happens very, very, very, very commonly, and it certainly can happen when you’re inserting different interesting things into Modal. So something we want to make sure of, and the reason I’m bringing that up, the reason that’s actually very, very important is when a modal is evoked, it needs to sort of announce itself to the individual that evoked it, know what they basically just opened, but they actually opened the correct thing.

Aaron Pearlman: And so, the way that it can announce itself is that, either the body of the modal needs to be focused or potentially the header of the modal can be focused so that we can tell the individual that’s evoking the modal, that it is what’s happening. So if they have voice, they’re using for example, VoiceOver on it, it’ll tell them what they’re looking at. So I thought I’d give a couple examples of ways that the body can be focused and then an example of how model can focus the header instead and then what we can do with that.

Aaron Pearlman: I’m going to open up this really quick here. Very good. And so the modal that they have for this, I think it’s a clothing site right here. And what happened is it focused the body and I can show that best by… I’m going to turn on VoiceOver really quick. I’m going to pull it up.

VoiceOver: VoiceOver on Chrome.] Bonobos, [inaudible 00:20:10]-

Aaron Pearlman: And you won’t be able to hear it-

VoiceOver: Google Chrome, Aaron.pearlman@deque.com-

Aaron Pearlman: But you’ll be able to see it.

VoiceOver: Close the card, your card is empty, group has keyboard focus. You’re currently on the group in opening your card, close the card, your card is empty group. You’re currently on the group inside of web content, VoiceOver off.

Aaron Pearlman: So right there when I focused it, it read out a bit of everything that was going on your card closed and your card is empty because of the buying was focused at that point. And that’s perfectly valid. That’s a perfectly valid way of focusing your modals. It’s not a problem at all. And then from there you can tab cycle through everything that’s inside of it. Another common way of when a modal is evoked is to focus the header.

Aaron Pearlman: And that’s what we do in on the modals that we use for our applications is we focus the header. So I’m going to evoke the modal, and as you can see right here, focus is right here where it says modal with form, focus is right there on the header. We actually, rather than indicating that as like an index, we programmatically focus that. And the reason that we programmatically focus that as I tab cycle through here, it’s now going to the close button, also in the header, then to the first interactive element, which is field to the next field, to the next field, to the next fields, tabbing again to the save, tabbing again to the cancel.

Aaron Pearlman: And from here when I hit tab, if that header was a tab stop, it would go there, but we chose not to do that. Instead, we go to the close and the reason that we do that is just if somebody was using Voice Over as you may have seen some of what was being written and was going into my ears at the same time, it was actually very a bit distracting because it speaks very quickly, it’s a bit chattery. And so one of the optimizations that we wanted to make for the experience here was to make it a little less chattery. So yes, we announce it, it goes, we programmatically focus modal with form when they first get there, so that it lets them know that the modal that they evoked is in fact it’s what they’re currently focused on.

Aaron Pearlman: But we don’t need to announce it again and again and again if they were to cycle through this shifts cycling through this modal. So it’s a small optimization likely would be completely invisible to the majority of your cited mouse only users. But that small optimization, you can imagine if I used modals a lot for filling out forms frequently and I was a user that used Keyboard-Only or Assistive Technology that optimization would add up over time. So, little teeny user experience things that we can do, that can make a significant difference overall in the care that we can put into our designs, so that they’re the most often experience that we can provide.

Aaron Pearlman: Speaking of handling focus, the last one that we are going to go into is focus handling itself. And we saw one example of it, what can happen if focus can get lost in certain types of handling? But rather than being just something that can be a significant issue, the way that you handle focus can change significantly the experience that an individual would have. Really the rule about handling focus, especially with the two instances that we’re going to look at right now, which are, removing and adding elements to your work space or whatever you’re working in is that … It can definitely change how somebody interacts with it. And so we want to make it follow the expected experience that you would have for somebody who is a Mouse-Only user or a sighted user, a Mouse-Only user I should say.

Aaron Pearlman: In this instance we’re going to look at … for here we’re going to look at … Okay, let me drag it over. Hold on one second. I’m going to have to take this out of here temporarily. There we go. So you shouldn’t be able to see an example of a modal that I’ve designed, it’s actually a single modal, we have two kind of images of it and just one is just showing what’s below the fold there rather than making one really, really wrong or I just split it up so you could see what was below in fold. And on the right side, if you look, there’s a trashcan icon that is currently being focused. And so when we click on that trash can icon, assuming that there isn’t a dialogue that says, “Are you sure you want to delete it?”

Aaron Pearlman: Let’s just assume that that’s not the case. The real question then goes, what happens with focus there? Because when that trash can icon is hit or is selected, it is going to remove instructions that are in right here, and it’s also going to remove itself. So where does focus go? So we as designers, we want to choose where focus goes because otherwise the browsers going to choose for focus goes if you’re making a web application inside of a web application and we don’t want the browser to choose where focus goes because it tends to throw things to the body. So in this case, where we really want focus to go is we want focus to go to the next focusible element, not necessarily the … what I would call the analog to that, which will be focusing the next trash can, the trash can for instructions to instead we focus instructions to itself.

Aaron Pearlman: And the reason we would want to do that, is you can imagine if somebody accidentally hit, using their keyboard only they hit return, then they hit return again. It would have just deleted two sets of instructions instead of one. And we would want to, we prevent that for a mouse only user by literally having those things physically far apart. But we want to also be able to prevent that because focus is what they’re using to traverse this. So I thought I’d show another example of what do we do when we’re deleting the last item in entire section here.

Aaron Pearlman: Now we’ve got cooking instructions, the final instruction for instruction one, where does focus goes here? Now for this particular one, it’s going to follow suit with what the previous one was, which is it’s going to go actually up to the next focus but filled again, which is ingredient one for the same reason that we wouldn’t want to throw it to the trashcan again because then if somebody again hit select again or hit return again, we would be … They’d accidentally delete two things that they unintended, didn’t want to.

Aaron Pearlman: For the same reason, we wouldn’t necessarily want to throw that to one of these links here because we would have the opposite problem where they’d be accidentally adding things as well. And we don’t necessarily want it to go to the body, because we go to the body and your Voice Over user, your Assistant Technology user, is just going to start chattering about the modal again or rather than letting you continue to interact and do what you intended to do.

Aaron Pearlman: And then finally, the final example that I have here is what do we do when we’re going to remove the last item in this case, in the modal here, there’s nothing left. Where would I send it? And this is definitely up to the discretion of the designers to where it should go. There’s no, it’s not going to be inaccessible if you choose to send it to the clothes or send to focus maybe to the cancel. It doesn’t necessarily make it inaccessible, it’s just that, it really comes down to what would you expect? What information would you want to convey? What narrative do you want to convey to that user and where we choose to send it as we choose to send it back to the header to let the user know that they’re still on the modal, they’re still there, we haven’t closed it on them, for example there.

Aaron Pearlman: And so that’s actually a programmatic shift because like I said, it’s not terrible voice. It’s not as terrible focusible element like that. So we programmatically shift focus to that in this particular example. So those are some nice examples of what to do maybe with focus when you’re removing items. So I thought you could … I would show an example of what you do when you’re adding an item. So I’ve got example of that real quick here for focus retention.

Aaron Pearlman: And right here, we’re going to hit this add another … you can just focus here, add another ingredient and focus then shifts to the actual ingredient in this case, the field that you added for two reasons, one, because the assumption is by adding that next field that we wanted to interact with it and that would be the expected behavior if I was a Mouse-Only user, I’d be adding that presumably so that I could actually begin to type text into it.

Aaron Pearlman: And then again, we wouldn’t necessarily want to keep focus on another ingredient for the same reason that if they hit return again, we wouldn’t want to add two ingredients instead of one. It should be opposite problem of the previous example. And the final, the final example I wanted to show, because I think it might be worthwhile showing is … actually I have that example, I may pull that up in a little bit. But I can describe it pretty, pretty aptly in that, if you have what do you do when you evoke a modal? For example, you saved something, the modal goes away, where does focus now go and what we tend to do, but the rule of thumb on that is that you want to send it back to whatever element [inaudible 00:31:03] gets.

Aaron Pearlman: So if you imagine if you had a little edit pencil and you select it, opens up the modal, you fill out that modal, you hit save, you’d want to send focus back to that interactive element that tends to be … or we do. There may be instances where you want to send it somewhere else. If it’s a wizard and it goes somewhere else after that, again to the discretion of the designer, to what the narrative that you’re trying to tell us to where to go. But for things that are like the one … instance that I just described, which is very common. You evoke a modal, or you do something with it and it gets dismissed as a result of that and the context doesn’t necessarily change.

Aaron Pearlman: And you don’t want to send that focus back to where it was. And the reason for doing that is so that, a Keyboard-Only or Assistive Technology user can pick back up with where they are. Because remember they’re in that space and that space is somewhat linear as to how they traverse and especially when you’re using town to get through everything. So, I think we’re just about at 40 minutes, we just about at time for all the examples and things that I had. So I’m going to pass it back over to Scott.

Scott: Thanks Aaron. That was pretty awesome, and we do have a lot of questions from the attendee as well as a few from individually who couldn’t make it today because he’s traveling. So Poan who’s a regular attendee of our webinars asks, “When you’re removing items, shouldn’t we have an acknowledgement of the action and move the focus there and then move to the next element?”

Aaron Pearlman: when removing an item, should you have an … are you referring to like a notice like a toast or are you saying should you have a live region that is letting you know what’s happening? If you’re shifting focus to remove an item, like the ones that I just showed in that particular instance the evocation of that delete for example, should be adequate enough to let them know that they in fact deleted.

Aaron Pearlman: It should be gone. Also, if they’re using Voice Over, it’s going to pick that up as well. If you’re interacting with something and it’s making changes somewhere else, for example, like you did something and then it changed some metrics somewhere for example, you’re probably going to want to use a live region that does something politely to let them know that that’s happened. That’s something that’s sort of out of the purview of where you’re working in specifically. I hope that answers your question. It might be diving into something that’s a little bit more technical. I may need to follow up a little bit more with some of it, if we’re going to get into deep technical implementation stuff.

Scott: Perfect.

Aaron Pearlman: My developer, so they don’t steer you arrive but in general that tends to be the case. The example that I showed should be adequate. If you want it to because it’s a delete, you could have an interim part where you throw an alert and say, “Are you sure you want him to delete this?” Which case you’re just reinforcing it further what happening.

Scott: Great. So, yeah, try and keep the questions user experience focused. So from a user experience standpoint, how would you manage focus for notification messages?

Aaron Pearlman: Focus for a notification? I can show you one if you’d like to see.

Scott: Sure.

Aaron Pearlman: We can pick back random because we happen to have toasts, which are notifications. So I’m going to open up toasts here. So this is actually being focused right now. This toast is evoked and it is being focused right now and you can actually, as you can see, you can tab into the clause right here. So, it depends. So, if I finished something and I wanted to notify them that it’s been finished and I toasted it, then I want to focus it so that they can see that it’s been … that I’m communicating that information to them. So you want to shift focus to it.

Scott: Melanie is asking, “Do you have any tips for tips or resources for navigating slideshows?”

Aaron Pearlman: For navigating slideshows?

Scott: [crosstalk 00:36:00]. Very specific.

Aaron Pearlman: Yes. So navigating slideshows. We don’t use them very often, so I’m going to answer this as best as I can. So one slideshows especially ones that are like carousels, they need to have a control so that you can stop them. I think that’s an accessibility need, is that they have to have some control and a mechanism so that they can be stopped. Anything that’s an animation wise can’t animate for more than five seconds at a time and then the animation has to stop.

Aaron Pearlman: That may not be relevant to what you’re doing, but it is moving. And those controls then need to be focusable most carousels have … A lot of fancy new ones. we’ll have menus that can come up when they get hovered over or focused on, just consider that all those controls need to be traversable, and then their very image heavy. A lot of carousels and slideshows need to be, so that you’re going to need to have proper alternative texts on them. Just the things that you would expect.

Aaron Pearlman: Off the top of my head, I don’t know of any fully accessible carousel that I can think of. But let me see if I can find a better example and I will try and pass it along through smashing and have that available if I can find it. It’s a great question because they come up a lot. I ended up tending to solve that problem in a slightly different way because I think they’re tricky, but that doesn’t mean that they can’t be done.

Scott: Rebecca is asking, “Can you give a use case for skip links?” And then similar early related, Patricia’s asking, “Do you know how to solve the issue with skip links in Safari plus the VoiceOver?” [crosstalk 00:38:18]. Again, maybe more technical than user experience related.

Aaron Pearlman: Yes. The second one, I’m not entirely sure what actually is going on that, that there may be an issue there. Again, I can try and see if that’s something that our developers have encountered before and how they’ve gotten around it. So we’ll make a note of that and I’ll try and circle back. But for the first one what’s a use case for Skip links? I want to avoid giant banner menus and I want to get straight to a sale that I heard that there is today and I don’t want to have to do that.

Aaron Pearlman: If I was a sighted a mouse only user, I would just visually ignore it and then go move my mouse over and just click on the sale item. If I’m a keyboard only ora assisted technology user, I would have to tab through all of that menu, potentially bunch of banner items as well before I could finally get to the workspace. that has maybe the sale items. So that would be a great use for a Skip link to get right to the content. Skip to main content is a phrase you see very, very common. Skip to main content.

Scott: Okay. That’s a good, good point. And I think in terms of all the user related questions from the attendees that covers them. We do have some general questions that we like to ask. So, low hanging fruit for people that are trying to build an accessible website. If somebody wants to put together a site in a few hours and make sure it’s accessible, what are some the easy things that just they can check off the list right away.

Aaron Pearlman: Sure. So some things that you can do immediately with any site or application that you’re working on, you can review your font choices for things like color contrast, there are plenty of color, if you put in color contrast, selector, picker or something like that, you’ll get it and you’ll just put it in the Hex value or the RGB value of what your font is and then what the background, whatever element the background color is sitting on and make sure that it’s meeting at 4.5 to one.

Aaron Pearlman: So that’s one that you can do immediately. Check your color Palette, you want to do color contrast where I see that color contrast fails a lot is when people use the endless shades of gray to have various levels of first class, second class, third class elements and things like that. Just make sure that if it’s an interactive element that it’s a passing color contrast.

Aaron Pearlman: Another thing, check your the images that are important, that are non decorative images. Make sure that they have all texts. Just one that you can add immediately. And then check your review, your heading structure, make sure that your h1 tags, h2 tags, h3 tags, h4 tags and so on. They all make sense with the structure of it and make sure that the content is properly paired with those heading tags.

Aaron Pearlman: That’s things that you can do immediately. And then also you can just, this is a small blog but you can download AX, that’s our accessibility engine. It’s totally free. It’s a little extension for chrome and Firefox and just hit the run button and see what you find. It’s a lot of things that you can help alleviate immediately or change immediately. You can also turn on VoiceOver, for example, if you’re on a Mac and start to go through your site and see what it sounds like for somebody who uses just a technology. It’s a great thing that we can do immediately.

Scott: Okay. Janat, has a question here. So what is it about accessibility that interests you and how did you know you’ve been doing design and UX for so long, but you’ve only been doing accessibility for smaller period of time, so that catch your attention?

Aaron Pearlman: It had been something that had been on the purview of some of the design that I had done in a later part of my design career till I got here. In my design career, I’ve always wanted to work on things that I felt in some way tried to make the world a slightly better place and I felt that working. And accessibility was one way to make … Very much believe in the core value of universal design or more importantly adapted design. Design that adapts itself to two different types of individuals to provide what we call GQ like digital equality. We want everyone to be able to use everything as best as we can possibly provide that universal experience that we can have. I don’t know as a person that very much appeals to me. And so it was just a good fit to learn design. That’s really cool.

Aaron Pearlman: Designing accessibly is a one way street. Like once you start to design accessible, you never don’t not design accessible anymore. It’s like UX designers don’t design unless you’re being tongue in cheek, you’re not going to design something to have a really poor user experience. It’s going to be part of your vernacular from that point forward. And once you begin to design accessibly, it never goes away. I can’t like not think about accessibility as I do designing and that’s a really, really cool thing.

Aaron Pearlman: It also affords you to start to think about things that you didn’t think you had access to. Like, did you know that your focus on your page, you can design focus to look differently for different elements on the page? That blew my mind when I found that out and I thought that was so cool that gave me a little bit more control, I knew you could create really cool Hover States, but I didn’t know focus was a state that you had full control over as well.

Scott: Our industry there’s always a new trend that’s just kind of how it goes, that’s the web. Are there any design trends right now that you know that are inhibiting accessibility? And if so, is there any recommendations you can make to avoid that?

Aaron Pearlman: I don’t know if there’s anything that’s super trendy right now when I look at different sites and web applications that couldn’t be designed excessively. I think there are pitfalls that that we’ve been falling into longer than any one trend as existed or at least has existed for some time. I just mentioned one, what I call the endless shades of gray. That’s one. In general, just being mindful of the contrast for your text. It is rampant.

Aaron Pearlman: It is by an order of magnitude, the most accessibility issues, if you were to like run an engine against it, like AX, it’ll be color contrast almost always. So just being really, really, really mindful of that regardless of where your text is on the page. Again, I mentioned it again, just being careful with your images. If you have an image that’s conveying important information to a sited user, that information needs to be conveyed to the user. That is user as well.

Aaron Pearlman: And what I mean by information that’s conveyed is if what’s being conveyed is that the person is doing something that’s, you wouldn’t necessarily describe it as a man standing. It could be that they’re playing baseball. Maybe that’s the important part. So make sure that the, that the, the alternative text matches with the intended information that’s trying to be conveyed, received out a lot too. Even when all texts is there, it just doesn’t accurately describe what is trying to be portrayed.

Aaron Pearlman: And then the other one too is progressive disclosure menus, many times you see on Hover Menus and stuff like that. They don’t do a great job of being evoked on focus as well. And they don’t always do a good job of … So that is a trend I do see. I do see a lot of menus coming up on Hover, when you hover over something you get the secondary menu that was hidden before that now finds itself to the front.

Aaron Pearlman: Also making that be able to Hover or a mechanism that allows you to evoke it and that will properly capture focus inside there so that you can use it. Those are a few things off the top of my head that I can say I would see a lot.

Aaron Pearlman: So as a graphic designer, you obviously work with development teams and a lot of the times when we’re doing wireframes and design of the onset of the project, they’re inherently not inaccessible. It doesn’t really become an issue, it seems until it comes to the development stage and people start taking that design and turning it into code. So how do you work with developers to make sure that the design that is being made from the start is going to be accessible when they’re done with it. Do you do audits throughout the process, at the end of the process? Like what’s the workflow with developers?

Aaron Pearlman: Sure. So the workflow for our development team is going to be, I think somewhat similar to a lot of other organizations. We work in scrum, so we work in sprints and scrum and I’ll go through a discovery process. They’re going to be privy to that, they’re not going to see it when the design is fully finished.

Aaron Pearlman: They’re going to see it throughout the design. I’ll have opportunities to talk with them a little bit about what the intent of the design is. They will probably set in on some of the user research that I’ve done, some of these ability testing that I’ve done. So, hopefully at that point nothing’s really new to them that I’m not going to get any 11th hour that we can’t even do this thing. I still have to deal with all the other things outside of accessibility that every other designer has to deal with, like is this feasible? Is it valuable? Is it all of those things that we have to deal with.

Aaron Pearlman: With regards specifically to accessibility, sometimes I will annotate the designs in a particular way that will indicate where tab focus should go. At the end of the slide deck that I have, there’s a great resource that one of the designers from Adobe put together. I know there’s like a pdf, there may be. There’s like a sketch file as well in there, there may be an XD file as well.

Aaron Pearlman: I don’t think, maybe just sketch. But it shows you like all of these different ways that you can annotate things like, accessible names, tab order and basically are little objects that you can place on your design to indicate some of those things as you go through. It’s a really, really wonderful resource. It’s all included in here as well. That’s a great way of saying, “Here’s part of my prototype and here’s the expected tab, order for it.” So that you have that as part of your artifact as part of the digital documentation or annotation that goes along with it.

Aaron Pearlman: So that’s one thing that we do is I annotate my designs pretty heavily. Everything from the size of how certain things are supposed to be to the Hex codes or RGBA values for what’s supposed to look like and feel like. But then also, there are accessibility annotations that you can add to it too.

Aaron Pearlman: And then just communicating, looking through the builds as they go through, making sure things like if you made any custom focuses that those custom focuses, look great, check the color contrast, make sure that it’s coming through, that the font choices that you’ve had there are some fonts that when their weight is higher and they’re bigger. Their color contrast it doesn’t have to be a 4.5. It can actually be a little bit lower, but you just going to want to just keep an eye on those things. Just as you would keep an eye on the experience stuff as well. You’re going to want to keep an eye on that stuff that you’ve been mindful for and annotated in your designs.

Scott: So we have a couple minutes left here. So I’ll ask one more question. Some people feel accessibility can stifle creativity throughout the design process. Is that something that you’ve come across? How do you think creativity fits into accessible design?

Aaron Pearlman: Sure. That was one of my initial reactions to having to design accessibly, was that somebody basically put the handcuffs on me and says, “There’s a much smaller box you have to be able to work in.” It’s true that designing accessibly means that there can be some more challenges because there’s more rules that you have to follow. But in the end, I found that the experience ends up being better and I haven’t … Once I removed that misnomer and began to do more and more accessible designs that were WCAG 2.0 AA accessible, I noticed that I can pretty much do everything that I wanted to do.

Aaron Pearlman: I would just need to sometimes express or solve problems in a slightly different way than I did before. I think a lot of people when they think about designing accessibly … I’ll give you a very specific example. When they think about designing accessibility they think, “Oh, well, I can’t do all of these fancy visualizations, for example. I’m not going to be able to do all of those things because they’re not going to be accessible, because if an individual can’t see them, I’m not going to be able to do that.”

Aaron Pearlman: I was designing a visualization that was just basic, just sort of line graph and under those, there was a line graph, on the x axis there was I think it was time and on the y axis it was usage or something like that. And there was this nice little gradient that went down from it and there was sort of these light lines that went behind it to delineate the months and time. And when I talked with one of my subject matter experts about making it accessible, it turned out I was sure he was just going to be like, “Nope.” But he said that there was actually just a few things that I needed to do to make this really nice looking graph accessible. One, that line at the top it need to pass color contrast because that’s actually what’s conveying the information of the trend over time.

Aaron Pearlman: The gradiated stuff underneath it’s just decoration and as long as it’s not interrupting the passing of color contrast of that and the y and x axis lines and ended up being okay. Those lines behind it were okay, but I ended up adding tick marks at the bottom there to indicate that. And then when I hovered and focused over, because sometimes you can hover over and it’ll add a dot to part of the line graph, just making sure that the dot itself would pass color. contrast. I did that by doing the sort of donut thing where you put a white dot with another dot or I should say has it like a large stroke on the outside of it as well.

Aaron Pearlman: And then I added a little bit of treatment in there that would bring the those lines that were faded back forward. And it all pass color contrast and ended up being fine. It was really pretty visualizations that passed. Now granted, I’m not getting into all of the accessible name stuff and being able to do that. Many libraries are on that. Put that aside, at least we call a contrast because is where I think a lot of designers struggle with. You can do it.

Aaron Pearlman: It’s just about being really mindful about those types of things, and getting more examples and just trying and trying different things, and having other people that you can pitch those ideas with and bounce them back and forth and checking again, just really do that. I don’t think it really inhibits anything. It just makes you have to think a little bit more clearer about how you’re going to do it and making sure that you’re looking through the lens of how an individual engaged with this if they had low vision, or if they couldn’t see it at all or couldn’t hear if you’re building a media application.

Scott: One more question, but I think we should’ve touched upon it. What stage in your process do you start thinking about accessibility? I’m going to assume throughout the whole process.

Aaron Pearlman: Yeah, it is throughout the whole process. I’ll be a little bit more rather than … I know who I say that and it sounds a little flippant. So, early on when you’re doing things like low fidelity prototyping, you’re going to be thinking about things like some tab order stuff. You’re going to be thinking about maybe headings and structure, things like that. Those are the type of accessibility stuff that you think about. Later on as it gets higher in fidelity, you’re going to be thinking about things more like, colors and your pallets that you’ve chosen, maybe accessible names, alternative text for anything that may merit that, you may be thinking about, if you’re doing any custom focuses, for example, that’s probably where you’re going to start to think about that.

Aaron Pearlman: It doesn’t mean that you couldn’t think about it when you’re doing low fidelity just means in general, when I go through my process those things tend to fall into those categories. You’re thinking about accessibility the whole time, but you’re not always thinking about everything with it as you’re in lower fidelity stuff, and you’re ideating, and you’re just thinking about ideas, and you’re just working through ideas, let that creative stuff go through as you become more attuned to accessibility, it will just sort of intrinsically make its way in and there’ll be less of a conscious thing.

Scott: Yeah. Fair enough. Well, on that note, we’ve run out of time, Aaron. Thank you very much for your time and—

Aaron Pearlman: That was great. I’ve had a wonderful time.

Scott: You’re going to be at the next couple of Smashing conferences, I think.

Aaron Pearlman: I will be at the one in New York. I’ll be at the one in New York.

Scott: Okay. And are you guys doing a workshop there?

Aaron Pearlman: Yes, we’re.

Scott: Okay. Awesome. Well thank you again for your time and just to let see the members that are still watching, we’ve two webinars next week. The first one is the Power of Digital People, with Kristina Podnar. And then we have a number three in our series with Andrew Clarke, Inspired Designs Decisions, number three inspired by Ernest Joural. Thank you very much everybody for attending today. And again, this recording will be available in dispatching membership panel once we’re done editing it and we hope to see you all next week. So thanks again Erin.

That’s A Wrap!

We kindly thank Smashing Members from the very bottom of our hearts for their continuous and kind support — and we can’t wait to host more webinars in the future.

We couldn’t be happier to welcome Aaron to our upcoming SmashingConf New York (October 15-16) — we’d love to see you there as well!

Please do let us know if you find this series of interviews useful, and whom you’d love us to interview, or what topics you’d like us to cover and we’ll get right to it.

Smashing Editorial
(il)

Source: Smashing Magazine, UX Improvements For Keyboard Accessibility

CSS Lists, Markers, And Counters

dreamt up by webguru in Uncategorized | Comments Off on CSS Lists, Markers, And Counters

CSS Lists, Markers, And Counters

CSS Lists, Markers, And Counters

Rachel Andrew



Lists in CSS have particular properties which give us the standard list styling we expect. An unordered list gains a list bullet, of the type disc, and ordered lists are numbered. My interest in exploring lists in more detail came from some work I did to document the ::marker pseudo-element for MDN. This pseudo-element ships in Firefox 68 and is being released today. With the ::marker pseudo element available to us, we can start to do some interesting things with lists, and in this article, I’ll explain more.

Deconstructing A List

You may not have thought much about lists, although we use them frequently in our markup. Many things can be marked up quite logically as a list. While step-by-step instructions or ranked elements may naturally be described by an ordered list <ol>, many things in a design can be described using an unordered list <ul>. A very common usage of the element, for example, is to mark up navigation, as it is a list of destinations on the site. For our exploration, let’s start by finding out exactly what a list is in CSS.

As with many things in CSS, lists have some initial values applied to them. These values make them look like a list. These special values begin with the information that a list item has the display property with a value of list-item. This creates a block-level box, with an additional marker box. The marker box is where the list bullet or number is added.

Lists were defined early on in CSS, and much of the definition of lists as we use them today is from CSS2. The CSS2 specification describes a list item as follows:

“An element with display: list-item generates a principal block box for the element’s content and, depending on the values of list-style-type and
list-style-image, possibly also a marker box as a visual indication that the element is a list item.”

The principal block box is the main box of the element and contains all of the children as a list item can contain other markup. The marker box is then placed in respect to this principal box. The specification goes on to detail the fact that any background color will be only behind this principal box, and not the marker. Also that the marker can be set to one of a range of pre-defined values:

  • disc
  • circle
  • square
  • decimal
  • decimal-leading-zero
  • lower-roman
  • upper-roman
  • lower-greek
  • lower-latin
  • upper-latin
  • armenian
  • georgian
  • lower-alpha
  • upper-alpha
  • none
  • inherit

The Level 3 display specification defines display: list-item along with the other possible values for the display property. It refers back to CSS 2.1 — as do many CSS properties and values which come from CSS2 — but describes the list-item keyword as, “causing the element to generate a ::marker pseudo-element”.

The Level 3 specification also introduces the ability to create an inline list item with the two value syntax being used display: inline list-item. This is as yet unimplemented by browsers.

Creating Marker Boxes On Non-List Items

As with other values of display, it is perfectly valid to give any HTML element a display type of list-item (should you wish to generate a ::marker pseudo-element on the item). This will not cause the element to become a list item semantically, but instead it will only visually display as a list item, and therefore be able to have a ::marker. When we discuss the ::marker pseudo-element below, you will discover some cases where giving other elements display: list-item can be useful.

The CSS Lists Level 3 Specification: ::marker And Counters

The display specification expands and clarifies the definition of lists that we find in CSS2, however, there is also a specification which defines list behavior in detail: the CSS Lists Specification Level 3. As the basic behavior of list items is defined in display, this specification details the marker box generated when something has display: list-item along with the counters which are used by default whenever you create an ordered list. There is some potentially useful functionality accessed via these features.

The ::marker Pseudo-Element

The ::marker pseudo-element allows you to target the list marker — separately from the content of the list item. This was not possible in previous versions of CSS, therefore, if you changed the color or font size of the ul or li, this would also change the color and font size of the markers. In order to do something as seemingly simple as having different color list bullets than text, would involve either wrapping the content of the list item in a span (or using an image for the marker).

ul {
  color: #00b7a8;
}

ul span {
  color #333;
}

With the ::marker pseudo element, the simplest thing you might want to try is having a different bullet to text color, which means that instead of the code in the example above you can use:

ul {
    color: #333;
}

ul ::marker {
    color: #00b7a8;
}

You might also want to use a different size and font-family for the numbering on an ordered list.

ol ::marker {
  font-size: 200%;
  color: #00b7a8;
  font-family: "Comic Sans MS", cursive, sans-serif;
}

You can see all of these in a supporting browser by using my CodePen example:

See the Pen [Colored bullets with and without marker](https://codepen.io/rachelandrew/penVJQyoR) by Rachel Andrew.

See the Pen Colored bullets with and without marker by Rachel Andrew.

You could use the ::marker pseudo-element on non-list items. In the code below, I have set a heading to display: list-item. This gives it a bullet and therefore a ::marker box to target.

I have changed the bullet to use an emoji:

h1 {
  display: list-item;
}

h1::marker {
  content: "🐱";
}

 Heading with a cat emoji to the left of it

In Firefox, you can see the emoji used as a marker.

See the Pen [Heading and marker](https://codepen.io/rachelandrew/pen/wLyyMG) by Rachel Andrew.

See the Pen Heading and marker by Rachel Andrew.

In the above example, I have used generated content in the rules for the marker. Only a small subset of CSS properties is available for use on ::marker. These include font properties and color, however, they also include the content property, for including generated content.

The addition of content as an allowed property for ::marker is recent, however, it is included in the Firefox implementation. The inclusion means that you can do things like include a string of text in a ::marker. It also raises additional possibilities for formatting of markers when you combine the use of counters with ::marker.

Browser Support And Fallbacks

For browsers that do not support the ::marker pseudo-element, the fallback is the regular marker that would have been displayed anyway. Unfortunately, we can’t currently use Feature Queries to detect support for selectors such as this pseudo-element right now, although there has been an issue raised about adding this to the specification. This means that you can’t fork your code to do one thing when you have support and something else if you do not. In most cases, falling back to the regular marker will be a reasonable solution.

Counters

Ordered lists have list numbering — something which is achieved by way of a CSS Counter. The CSS Lists specification therefore also describes these counters. We can access and create counters ourselves which, combined with the ::marker pseudo-element can give us some useful functionality. These counters can also be used in regular (non ::marker) generated content.

If I have a numbered list of steps (and I would like to write out “Step 1”, “Step 2”, and so on), I can do this by using generated content in my marker and appending the list-item counter, this represents the built-in counter:

::marker {
  content: "Step " counter(list-item) ": ";
}

An ordered list with Step 1, Step 2, and so on, before each list item

In Firefox, you will see the counter prefixed with the word “Step”.

See the Pen [Counters and marker](https://codepen.io/rachelandrew/pen/BgRaoz) by Rachel Andrew.

See the Pen Counters and marker by Rachel Andrew.

Nested Counters

If you have nested lists, a common way to number them is to have the top-level item a whole number, (1), then child items as (1.1, 1.2) and their children (1.1.1, 1.1.2), and so on. You can achieve this by using more functionality of counters.

When you nest HTML lists, you will end up with multiple counters of the same name — nested inside each other. The nest of counters can be accessed using the counters() function.

In the code below, I am using counters() to format my list markers as described above. The first argument for counters() is the name of the counter to use. I’m using the built-in list-item counter. The second argument is a string — this is what will be concatenated between output counters (I’m using a .). Finally, I add a : outside of the counter function but inside the value of content so that my counter output will be separated from the content by a colon.

::marker {
  content: counters(list-item,'.') ':';
  color: #00b7a8;
  font-weight: bold;
}

This gives me the output as in the image. If you are using a browser which supports ::marker and counters, then you can see it working in the CodePen example — try changing the string from a . to something else to see how that changes the output.

A set of nested lists

In Firefox, you will see nested list numbering separated by dots.

See the Pen [Nested counters](https://codepen.io/rachelandrew/pen/VJbwxL) by Rachel Andrew.

See the Pen Nested counters by Rachel Andrew.

What’s The Difference Between counter() And counters()?

The counter() function we used in the first example to write out our steps uses the innermost counter only. Therefore, in the situation where you have a set of nested lists, you will write out the counter which related to the level you are currently on.

The counters() function essentially writes out that whole branch and gives you the opportunity to concatenate a string between counters in the branch. So if you have a list item with a counter of 2 (which is part of a list nested inside a list item with a counter of 4), then the branch contains:

  • 4
  • 2

You can output this as 4.2 in the marker by using:

::marker {
  content: counters(list-item,'.');
}

Counters On Other Elements

Counters can be used on things which are not lists — either to output a marker — in which case the element will need to have display: list-item — or to output regular generated content. Counters are used extensively in book production, in order to enable chapter and figure numbering amount other things. There is no reason not to take a similar approach on the web, in particular for longer articles.

The CSS properties defined in the CSS Lists specification which deal with these counters are:

  • counter-set
  • counter-reset
  • counter-increment

To see how these work outside of lists we can look at an example of using counters to number the headings in a document.

The first thing I need to do is to create a counter for headers on the body element — ready for use. I’m using the counter-reset property to do this. The counter-reset and counter-set properties are very similar. The counter-reset property will create a new counter if a counter of the specified name does not already exist, but will also create nested counters as described above if a counter of that name does exist. The counter-set property will only create a new counter if there is no counter of that name. For this, use either property would work just fine, however, counter-set does not have as good browser support as counter-reset, so I am taking the practical route:

body {
  counter-reset: heading-counter;
}

Now that I have a counter, I can then use the counter-increment property on the selector for the headers; this should increment the counter every time the selector matches.

h2 {
  counter-increment: heading-counter;
}

To see the value, I need to output it to the document. I can do this by using Generated Content and adding it before the heading as shown in the following CodePen example:

h2::before {
  content: counter(heading-counter) ": ";
  color: #00b7a8;
  font-weight: bold;
}

See the Pen [Headings and counters](https://codepen.io/rachelandrew/pen/gNGjxq) by Rachel Andrew.

See the Pen Headings and counters by Rachel Andrew.

Alternatively, I could make the h2 element into a list-item and then use ::marker, as demonstrated below. As already detailed, using the ::marker element has limited browser support. In Firefox, you should see the counter used as the marker for the heading, while other browsers will show the default bullet.

h2 {
  display: list-item;
}

h2::marker {
  content: counter(heading-counter)  ": ";
  color: #00b7a8;
  font-weight: bold;
}

See the Pen [Headings, markers, and counters](https://codepen.io/rachelandrew/pen/pXWZay) by Rachel Andrew.

See the Pen Headings, markers, and counters by Rachel Andrew.

Counters On Form Elements

There is also a little bit of interactivity that you can achieve using CSS Counters — something that you might think you need JavaScript to do.

I have a form which has a number of required fields. The required status can be selected in CSS with a :required pseudo-class, and the fact that a field has not been completed can be detected by way of the :invalid pseudo class. This means that we can check for fields which are both required and invalid, and increment a counter. Then output that as generated content.

See the Pen [Counting required form fields](https://codepen.io/rachelandrew/pen/vqpJdM) by Rachel Andrew.

See the Pen Counting required form fields by Rachel Andrew.

How useful this is in reality is debatable — given that we can’t really do anything with that value other than stick it into generated content. There are also concerns with regard to generated content being inaccessible to certain screen readers, therefore any usage that is more than decorative would need to ensure other ways of accessing that information. Read, “Accessibility Support For CSS Generated Content” and the more recent information, “CSS Content Property Screen Reader Compatibility” for more details regarding accessibility and generated content.

However, it demonstrates that counters can achieve more useful things than simply numbering lists. It may be that one day that knowledge does come in handy to solve some problem you are working on.

Find Out More

This article ended up rather a long way from styling lists, despite the fact that everything I have described is found in the CSS Lists specification. You can find more information about the things described in the links below. If you have found an interesting use for CSS Counters, or can think of things you could use ::marker for, add a note in the comments.

Smashing Editorial
(il)

Source: Smashing Magazine, CSS Lists, Markers, And Counters