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!
“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 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.
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 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.
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.
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.
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.
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.
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.
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.
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
Such a shame this doesn’t run on iOS at the moment, it would be a great addition.
The ideal candidate is passionate about open and privacy preserving technologies, and has deep relationships and experience working with the developer community.
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.