Notes

A collection of thoughts, ideas and everything else that doesn't need a lot of words.

Accessibility & Inclusive Components

It took a long time for accessibility to get the deserved recognition it has today and with so many different people using the web, the importance of building accessible interfaces has increased ever more. There will always be room for improvement and getting things right can still be challenging and requires care, but the resources to do so are getting better and better. So does the awareness. Inclusive Components is a great addition to these resources, taking a practical approach to explaining how to build fully accessible UI components with a lot of examples. Understanding and embracing how to build accessible interfaces will improve the quality of our work, but more importantly, it can—sometimes drastically—improve the experience of our users in many ways.

Photo of the Inclusive Components book on a wooden table top
Inclusive Components by Heydon Pickering - Accessible web interfaces, piece by piece

In its heart, "Inclusive Components" is a detailed, practical handbook for building fully accessible interfaces. It's also a guide towards accessibility-focused thinking when designing and building websites and apps today. Our hope is that we've managed to produce a book that would make accessibility more approachable to everybody involved in any web project.

Find more details on the release or read a free sample chapter on Smashing Magazine.

Photo showing a double spread of the Collapsible Sections chapter of the Inclusive Components book
A look inside the book: The Collapsible Sections chapter
Permalink

Dealing with Ads in 2020

Dealing with Ads in 2020 is an interesting look at the problems and challenges of integrating and displaying ads in the best possible way.

The article slash case-study from Christian Schaefer [“Schepp”] shows the approach they took at Rheinische Post Mediengruppe to implement and deliver ads in a better way than most sites currently do, taking into account responsiveness, lazy loading as well as considering network speeds and security to improve the experience.

Permalink

Sticking With The Defaults

As previously mentioned, when I upgraded to Catalina, some of the things I had gotten used to to for many years, stopped working. The biggest issue seemed to be the app switcher. I’ve used LiteSwitch X for many years and I liked it because it allowed me to use alt-Tab instead of cmd-Tab to switch apps. Another nice thing about it was, that it allowed me to adjust the size and screen display position of the app switcher.

For a short while I was thinking about how to get back the alt-Tab keyboard shortcut to invoke the app switcher. I then stuck with Keyboard Maestro, but running this app simply to get back my keyboard shortcut seemed a little overkill.

I had a conversation with Anselm and Tobias about it. It didn’t take long to convince me to try to get used to the default shortcuts. In any other case, it likely would mean to relearn and adjust at some point in the future, because something might change or stop working. It’s a valid point and I agreed to try it out.

I switched to using the macOS app switcher and deleted Keyboard Maestro. In the process I also removed Alfred, which I’ve been using for a long time, too. I really like Alfred, but on the other hand, I can open apps as quickly via Spotlight. The only thing I’m missing is the handy calculator, all of the other functionality I haven’t been using anyways.

Getting used to two new keyboard shortcuts has been much easier than initially anticipated. The only thing that still bugs me is that the mouse pointer sometimes interferes with the app switcher selection, probably because I used to see the switcher at a different position to where it appears now. For everything else, I find it surprising how quickly one can adjust long-trained muscle memory to changes like this and I’m happy it didn’t take me long.

Update: As a few friends have pointed out, it is indeed possible to do calculations with Spotlight. I had tried it before, which didn‘t seem to work, but I can now confirm it does ;)

Permalink

Write It Down

Every once in a while I come across a blog post that strikes a chord. It might only take one line, but that line makes you realise or understand. It’s not you didn’t know. It’s not it’s something new, yet a whole other concept. It’s that one line that connects a dot with another. Once it happens, it’s obvious. It’s great. It’s been right there, in front of you all that time. Yet it took someone else’s words to put it a way it eventually makes sense.

Many times it’s not about the stuff we know. Not the experience. It’s about the words we choose to communicate. Our story. To explain and to share and make it click with someone. Our knowledge, our experience.

That’s why it’s worth sharing.

Write it down.

Permalink

Using The Platform

These are some good thoughts from Tim Kadlec on quotes from the Shop Talk Show podcast on the web platform and how it tries to provide us with the best foundation possible. I absolutely agree that in most cases the effort that goes into creating what we take for granted every day, mostly goes unnoticed. Yet it's a tedious process and if you think about it, it‘s an amazing outcome! (A shoutout to all those who are working hard to make things better! 💪)

Use the platform until you can’t, then augment what’s missing. And when you augment, do so with care because the responsibility of ensuring the security, accessibility, and performance that the platform tries to give you by default now falls entirely on you.

In short: Don't reinvent the wheel without reason and make progressive enhancement a friend of yours. Embrace the limitations. This way you'll be able to get a lot of the goodness out of the box and likely save yourself some hassle further down the line.

Using the platform” is a nice read, and while I haven‘t listened to the Shop Talk Show podcast yet, it probably has a lot of interesting bits in this episode.

Permalink

Accessibility Insights

I would have not expected me to say this, but today Microsoft really impressed me! I saw Microsoft’s new Accessibility Insights tool mentioned in a tweet by Marcy Sutton and did have a look. This is a great piece of work with a lot of information and help on how to make sites more accessible and most importantly, allows you to test for accessibility with information on what and how to improve your very own sites. Very cool!

Screenshot of Microsoft’s Accessibility Insights Website
Screenshot of Microsoft’s Accessibility Insights Website

The tool runs as an extension for Chrome and Microsoft Edge Insider and is also available as a Windows application ”to run accessibility testing on other Windows applications“. I gave the Chrome extension a quick whirl and it’s pretty good.

The extension has three main options, which are FastPass, Assessment and Ad hoc tools. The launchpad from where you choose your actions looks like this:

Screenshot of Accessibility Insight’s Launchpad
Accessibility Insight’s Launchpad

After you run FastPass the tool opens a results page with the issues it has found:

Screenshot of Accessibility Insight’s FastPass results page
Accessibility Insight’s FastPass results page

This is only a first look at the tool and I really like what I see here. I hope this will make accessibility testing easier and—more accessible! ;) I recommend to give Accessibility Insights a try and spread the word, since this tool can help web developers make the web a little bit better, one test and improvement at a time.

Permalink

A Look at Average Page Load Time

At the beginning of this year we launched the new site for a client, who I’ve been working with for a long time. We only had a few restrictions and that’s when projects usually are more fun and you are able to produce the good work. One of the main goals for this site was to get it as fast as possible. Good performance is good user experience.

It’s been a little while, but today I took another look at the Analytics data and was delighted by what I saw. The average page load time from the time we launched in January 2019 until today, clocks in at 1.0 second. There’s been a few hick ups here and there, but overall this is a great result and I’m very happy about it.

Google Analytics page speed screenshot, results from January to August 2019 averaging at 1 second
Google Analytics page speed screenshot, showing the results from January to August 2019 with an average page load time of 1 second

In case you have a project which you believe can benefit from performance improvements to positively impact your conversions, don’t hesitate to reach out and we can talk about the possibilities of how to speed things up for your project.

Permalink

On Taking Notes

Last week Matthias wrote about the importance of writing down ideas immediately. I have to agree, the best way to being able to remember something, is to write it down right away. I have had many thoughts and ideas floating around, but oftentimes when I don’t write them down, I can’t remember or recall them later.

In a follow-up post Matthias now writes about the “The Single Best Way to Take Notes”, why it is important to do so and what he uses himself to write things down. The article also contains a list of apps that came out of a Twitter survey, with responses on which apps other people use.

I personally use iAWriter for most of the things I want to write down. I like it, because I think the writing experience is very good, there’s an app for macOS and iOS available and both of them sync via iCloud. This way I can always have access to my most recent (or any other) files and I can continue writing, so then one day they will turn into something more complete or thought out. Or get deleted.

Permalink

Welcome Brid.gy

It’s been a long time in the making—or rather thinking about the making—, but I have finally added Brid.gy to my site. Bridgy pulls in Likes and Mentions from Twitter and displays them below Articles and Notes. I’m not sure if it already works, but in theory it should ;) If you like, or mention a tweet with the article or notes URL in it, your Twitter avatar and type of action should be displayed below. I kinda like surprises, so let’s see what it does.

Permalink

On Conference Proposal Rejections

Last week I received an email that my submitted conference talk proposal has not been accepted. This is always a disappointing moment, since of course everyone would rather be selected than rejected.

Important reminder: There is nothing wrong with getting a rejection email for a conference talk and it should not be the reasons to give up submitting your talk again. And again.

I have received many of these emails over the last few years and at some point you will get used to them and be a little less disappointed ;) What I really liked about this last email was that stye included a list of possible reasons on why my talks hasn’t been selected.

  • it did not perfectly fit in We Love Speed’s orientation: feedback and Web Performance;
  • it was only technical, and the jury also had the opportunity to involve a speaker with a feedback to back-up their recommendations;
  • it was close to a topic already discussed last year or another proposal that the jury preferred;
  • the jury had to make financial choices (especially regarding people from outside Europe);
  • finally, it was also necessary to make timing arrangements in order to organise the interventions.

While this list isn’t personal feedback on a specific talk, it’s a good pointer to possible reasons. This way of providing feedback is manageable for organisers, since individual feedback can in some cases be impossible to provide and it is a much better read than receiving a rejection email without any further background.

Well done, We ♥️ Speed team!

It would be great to see more conferences do similar things. Yet, even providing feedback like this, still needs to be well thought through. Otherwise those reasons, might turn into the list of “default rejection reasons”. Simply copy and then paste. Unfortunately such a list wouldn’t be authentic, useful, honest and transparent after all.

Permalink

Petbarn Identity Redesigned

I'm a sucker for good design and besides some smart thinking and great execution, this article, or rather its illustrations, on the brand redesign for Petbarn made me smile a lot. (found via DenseDiscovery)

The website also shows the fun illustrations and just hovering the navigation made me smile again :)

Screenshot of navigation on petbarn.com.au
A screenshot of the navigation on petbarn.com.au, displaying a cute cat illustration next to the sub navigation items of the cat section
Permalink

“Ethics” and Ethics and the Right Thing to Do

This rather long essay by Oliver Reichenstein looks at the meaning of “Ethics” and Ethics in our world of today. Why do we sometimes need to put it in quotes? What's the right thing to do, anyways?

There is a connection between good and beautiful. Theoretically, this brings to Plato’s ethics. It claims that beauty, justice, and goodness are connected. A strong point of view. Plato is considered to be an enemy of the senses. But if you study Platonic ethics – beauty, goodness, and justice – they’re one and the same idea, the highest idea. Designers have an affinity to see beauty, to see beauty in goodness, beauty in justice.

While this has been true for Plato and might still be for some, it hasn’t been part of the idea of capitalism, which bred greed, which more often than not turns into evil.

Read the full piece here: “Ethics” and Ethics

Permalink

Faster Cursor Movement in Terminal

Sometimes when typing a long command or a commit message in Terminal, you might notice a typo, or want to add or change something. Very likely, you’d use the left-arrow key to move the cursor to the desired position, which sometimes can be a little tedious.

Luckily there’s an easier way: Option-click your Terminal prompt line at the position where you want to change or insert text. Your cursor will then blink right where you wanted it and you can start typing away.

Another way to speed things up is by using the option (alt) modifier key in combination with the arrow-keys (⌥→, ⌥←), which lets you jump the line word by word, which is also a little quicker.

Permalink

It’s Getting Dark Out There - A Thought on Dark Mode

At Colloq, we’ve recently been playing around with the dark mode preference, to give it a try and see how things turn out. After trying and using it for a while in Safari’s technology preview, I started to wonder:

Do I really want all websites to appear in a dark theme, just because I like my OS interface in dark mode?

I’m really not sure and I guess we’ll have to wait and see if there will be a way to define settings more granularly. Since this is quite a new thing, time will probably tell, but for today, this is just something that has been on my mind for a few days.

Permalink

Inviting Conference Speakers

Some good tips on how to write good speaker invites and what information to include by Bruce Lawson. It’s generally about good an clear communication and while some things might be very clear for yourself, always assume the other party might not know all of it. It also helps to easy the effort, because noone wants to do research to understand an email.

How to invite a conference speaker

Permalink