RWD Weekly #383

Hey everyone and welcome to week (not weak like I said last time) #383 of the responsive design weekly.

We have a new sponsor this week and it’s one of my favourite learning resources ON the web FOR the web, be sure to check it out.

Right, let’s get linking!

Headline

Why Are Accessible Websites so Hard to Build?

The other day one of the Creative Directors at work approached me very excited. He wanted our next web project to win an award for Accessibility… certainly something I could get behind. The thing was, however, is that he wanted to create a website that would be featured on Awwwards, but have a toggle button which stripped back the ‘glitter’ and let the user with an accessible version. There should really only be one version, and one that is accessible for everyone at first view, not behind a toggle. In this article Robin looks at ways that our text editors can help remind us when we might be going off piste.

Article

Firefox privacy protections reveal who’s trying to track you

The latest release of Firefox has some privacy features which ensure that 3rd party tracking cookies are kept away from your browsing habits. Aside from these privacy improvements, there’s some new dev tools which we get to below.

Firefox 70 — a bountiful release for all

Lots of great features in this release of Firefox when it comes to developer tools.

• Inactive CSS Rules: shows which declarations have no impact on the element, why, and what you might want to change it to
• Color contrast: in the CSS rules view, hovering over the color will give you the contrast accessibility score against the background.
• Accessibility inspector: now includes keyboard accessibility checks

Ghost 3.0

Ghost 3.0 has been released this week and it looks as though it’s got all the goods. They’ve still maintained their great blog core, but they’ve also introduced facilities for content creators to build a paid community in a simple and approachable way.

25 Days of CSS Animations: Teaching Myself CSS through Motion Design

An inspirational story for anyone who has little side projects. I especially like the tweet that was quoted in the article from @eva_trostlos “Just because it’s useless doesn’t mean it’s a waste of time”.

Improving your search engine ranking (SEO) with Fastly

If you’re in the SEO game you’ll be aware how much one position can make or break your margins. With search being the primary source of traffic, every little bit that you can do will help you get found. While these recommendations are related to Fastly, all of them would also apply other CDN and websites in general

CSS Writing Modes Level 3

I tried to implement writing modes for East Asia writing styles, vertical-rl, and it was incredibly difficult. If you want to know what the plan is for this check out the CSS Writing Modes proposed recommendation

Why Are Accessible Websites so Hard to Build?

The other day one of the Creative Directors at work approached me very excited. He wanted our next web project to win an award for Accessibility… certainly something I could get behind. The thing was, however, is that he wanted to create a website that would be featured on Awwwards, but have a toggle button which stripped back the ‘glitter’ and let the user with an accessible version. There should really only be one version, and one that is accessible for everyone at first view, not behind a toggle. In this article Robin looks at ways that our text editors can help remind us when we might be going off piste.

Inclusive design – Spectrum

Some tips on how to design more inclusively. These aren’t technical tips, like how to include Aria roles, but design guidelines to avoid dark patterns.

Tutorial

The difference between HTML, CSS, and JavaScript

A nice homely example of the difference between HTML, CSS, and JavaScript using a house as an analogy.

Implementing Dark Mode For My Website

The past week we’ve seen a number of Dark Mode tutorials and I’m dying to get around to doing it on the RWD site. I really enjoy Ahmad’s articles, he combines great design tips with developer know how and it’s always a joy to see the ‘how’ along side the ‘why’.

A Guide To Optimizing Images For Mobile

There are a couple of image services that are out there to help optimise your website, but ImageKit isn’t one I’ve seen before. This is a sponsored article on Smashing, but there is a forever free plan so you can always try it out.

Tips for your Tailwind Config

I’m not a huge fan on Tailwind, but I can see where it could become handy for teams. This article from Viget goes through some of the configuration approaches you can use with Tailwind, after all there’s a bunch of different approaches you might take which won’t provide you with the best foundation.

image orientation on the web

Using the image Exif information to determine the orientation for image display on the web. I’ve got to say, I don’t come across this issue much but if you do, this is a pretty neat fix.

Tools & Resources

CoBeats

CoBeats helps you to keep all your things: bookmarks, screenshots, videos, files, images, movies, books, music, tv shows and of course notes; from wherever you are – free and forever.

Podroll

If you’re looking for some podcasts to start listening to, check out Paul Kinlan’s list for a starting point.