RWD Weekly #444

Hello again, welcome back to RWD Weekly #444.

This week we’re taking a look at a classic website layout using CSS Grid, improving your approach to using #anchor-links and looking to avoid layout shifts as your page loads.

Those, plus a bunch more amazing links.

Let’s get linking!


Open Web Docs

“A collective project designed to support a community of technical writers around strategic creation and long-term maintenance of web platform technology documentation that is open and inclusive for all.”

This reminds me of the Web Platform Docs that started serveral years ago as a replacement for MDN Docs. Now it looks like the initiative has come back but this time a focus on maintaining and helping MDN. There are already some serious backers to this project including Coil, Microsoft, and Google.


Authority Pro Theme Package

Authority Pro perfectly highlights your knowledge, years of experience, and acquired wisdom. Even if it’s early in your journey toward building expertise and trust, this carefully-constructed design will accelerate how quickly your audience grows.


A Tale of Two Strategies: Reconciling Content Strategy and SEO

This is a good article for folks that have people tell them to stuff keywords in your content. First and foremost, you should focus on making sure your content is helpful for your readers.

Cloudflare Waiting Room

Cloudflare has released a waiting room style functionality for servers that are overloaded. This is initially focussed on sites that are offering Covid-19 appointments for vaccinations, but sites like NBA TopShots could sure take advantage of this when it’s more widely available.

John Doe’s page

This website is a single HTML file. It simply uses the #anchor suffix (from 1992) and the :target CSS selector to show and hide pages/content. It’s probably not going to be your next website template but it’s a very neat experience.

How To Create An Engaging And Useful Chatbot

The technology for a good chat bot has been around for a while now, but what is still lacking in a lot of executions is the content needed to make a truly engaging and human-like experience.

The Minimum Content Size In CSS Grid

Sometimes you’re better off using minmax(0, 1fr) for a grid column rather than just 1fr.  Why? Well, I’ll let Ahmad explain that to you.


The Holy Grail Layout with CSS Grid

Remember how sought after this kind of layout was back in the early to mid 2000’s, now it’s almost too easy. Chris shows you how to use CSS Grid to get there.

Add scroll margin to all elements which can be targeted

I’ve started running another weekly update which uses a series of links, like a table of contents, which links further down to the content heading below. Unfortunately, due to there being a sticky header, the anchored heading is hidden on that particular blog. This scroll margin will help out this exact issue, great work from Andy.

CSS is awesome: A dark/light mode switch

These 15 lines make sure that users of light mode in their operating systems get a black on white document and those with a dark mode setting a white on dark one.

How to avoid layout shifts caused by web fonts

One of the biggest causes of layout shifts for my clients is late-loading web fonts, let’s look at how to optimise them!

Resources & Tools

Haptic Effect Demo Library

Such a shame this doesn’t run on iOS at the moment, it would be a great addition.


Coil – Head of Developer Relations

The ideal candidate is passionate about open and privacy preserving technologies, and has deep relationships and experience working with the developer community.

New Relic Careers – Senior UX Analyst


That’s all for this week. Thanks for stopping by, if you found something useful please recommend us to a friend and help us continue to grow.



Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.