1. Home
  2. Discover
  3. Design
  4. Responsive Design Weekly

RWD Weekly #444 — the one about scroll-margins

Read online

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.
View details
Advertise your product, service, or job opportunity to 26,484 tuned in web designers and developers. Find out more.

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.
Twitter
Facebook
Website
Copyright © 2021 Simple Things, All rights reserved.
You are receiving this email because you rock! You wanted to know more about Responsive Web Design so you signed up to this list to receive a weekly update with links to articles, tools and tricks of the trade.

Our mailing address is:
Simple Things
Simple Things LTD
Thame, Oxfordshire OX92EQ
United Kingdom

Add us to your address book


Want to change how you receive these emails?
You can update your preferences or unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #443 — Open Web & Responsible Web Apps

Friday, January 22, 2021

This week we look at the serious side of the web and how it can be quickly switched off for some. Read online Hello again, welcome back to RWD Weekly #443. I'm happy to say that using TailwindCSS

RWD Weekly #442 - AVIF & Aspect Ratios

Friday, January 15, 2021

AVIF, Aspect Ratios & three hours worth of reading on a 2021 Website Check list Read online Hello again, welcome back to RWD Weekly #442. After a very slow start back to work last week it already

RWD Weekly #441 - the first for 2021

Friday, January 8, 2021

This is our FIRST weekly email for 2021, happy new years! 🎉 Read online Hey everyone and welcome to week #441 of the responsive design newsletter and the first one for 2021. I hope you were able to get

RWD Weekly #440 - the last for 2020

Friday, December 18, 2020

This is our last weekly email until the new year, thanks for an amazing year (considering 2020) Read online Hey everyone and welcome to week #440 of the responsive design newsletter and the last one

RWD Weekly #439

Friday, December 11, 2020

Read online Hey everyone and welcome to week #439 of the Responsive Design Newsletter. This will be the penultimate edition for 2020, with next week being the last edition for the year before I finish

You Might Also Like

Behind the Design of Lauren Santo Domingo’s Ski House

Thursday, November 21, 2024

View in your browser | Update your preferences ADPro Peak Style When it comes to clients, says AD100 designer Andre Mellone, “my biggest nightmare is a person who says, 'Carte blanche, do whatever

2025 Interior Design Trends, Revealed

Wednesday, November 20, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “Design, like fashion, tries to

Want a free strategy session with us?

Wednesday, November 20, 2024

Plus, the emails editors open most often. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

One Simple Thing You Can Do to Retain Your Staff

Tuesday, November 19, 2024

View in your browser | Update your preferences ADPro By my account, it's not fall until I've watched You've Got Mail, Nora Ephron's '90s film adaptation of the 1930s Hungarian play

#483: UX Writing

Tuesday, November 19, 2024

With writing guides, content testing and practical guides for better content design. Issue #483 • Nov 19, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, Every digital product

Accessibility Weekly #423: Beautiful Focus Outlines

Monday, November 18, 2024

November 18, 2024 • Issue #423 View this issue online or browse the full issue archive. Featured: Beautiful focus outlines "Unfortunately, focus outlines are often overlooked in web design.

175 / Build your ideas without writing any code

Monday, November 18, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Nov 2024 • Part 1 View in browser Welcome to Issue 175 One month ago, I quit my longest-standing job and embarked on a pathless path to let my

Into the Fediverse

Sunday, November 17, 2024

Issue 221: We need decentralized social networks ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Books AD Editors Can’t Put Down Right Now

Friday, November 15, 2024

View in your browser | Update your preferences ADPro Good Reads Here at AD PRO, we're all about celebrating a good coffee table book. With crisp project imagery and behind-the-scenes stories tucked

What astrology has to do with PR?

Wednesday, November 13, 2024

and, no we won't tell you to read your chart! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏