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!
Headline
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.
Sponsor
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.
Article
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.
Tutorials
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.
Jobs
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
Finally
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.
Cheers,
Justin.
