Responsive Design Weekly - RWD Weekly #434

Read online

Hey everyone and welcome to week #434 of the responsive design newsletter.

I'm sure you, like me, are patiently waiting to see how the US election is going to pan out so I hope this newsletter contains a few interesting links to distract you while the votes are being counted.

Last week I included a little tidbit from our Feature site of the week, so this week I'm doing it in reverse and our Feature site is brought to you thanks to the CSS tip below (thanks for sharing Andy)


.flow > * + * {
  margin-top: var(--flow-space, 1em);
}


The flow utility provides flow and rhythm between direct sibling elements. Where --flow-space is not defined: the default value is 1em, which equals the font size of the affected element.

Let's get to those links!
 


Headline


Webbed Briefs

Funny and informative stuff from Heydon. WEBBED BRIEFS are brief videos about the web, its technologies, and how to make the most of them. They’re packed with information, fun time, and actual goats. Yes, it’s a vlog, but it isn’t on Youtube. Unthinkable! The first is all about ARIA.

 



Sponsor

Vue 3 Introduction with Sarah Drasner.


Get started quickly with the Vue.js JavaScript framework. You’ll learn how to build reusable components and make them flexible with props, lifecycles, and slots. Use directives to build functionality with markup and learn to make your own custom directives. And learn what’s new in Vue 3 and how to abstract functionality with the new Composition API!
Start learning today
Advertise your product, service, or job opportunity to 26,701 tuned in web designers and developers. Find out more.

Article

Redesigning the Pinterest Homepage

At the time of writing this I’m hoping that Pinterest is going to be our feature site of the week (but that will all depend on the x-frame options). I spent some time discussing a very similar approach to overhauling a site that was years old. Research, hypothesise, test, tweak.
 

Effective Skeleton Screens

Tim revisits whether or not Skeleton Screens, the act of putting up grey boxes where the content will eventually load which Facebook/LinkedIn tend to do, is still a suitable approach for a great user experience.
 

Websites We Like: Whimsical

I like this review of Whimsical because I spend quite a bit of time in the product for scoping out websites and defining what needs to be done before handing it off to designers and developers.
 

More People Dipping Toes Into Web Monetization

I had quite a long introduction into PPK’s article last week on web monetisation, and this week Chris from CSS Tricks has provided his thoughts on the subject. If I could encourage you to do anything for 2020 it would be to give this whole Coil thing a go and let me know what you think. Was it easy to set up? Will you make certain things available as a bonus for Coil members? Is there something fundamentally stopping/concerning you?
 

More on content-visibility

The performance gains for setting up a long-scrolling page with content-visibility is huge and that’s awesome. Being able to inform the browser about what is OK not to paint in two lines of code is pretty nice.



Tutorials


Site-Speed Topography

Note that this is TOPography, not typography which is how I first read the title. This run through of how Harry approaches new projects is a great start for you on your own site’s performance (or a clients site if you’re in that line of work).
 

How to persistently change third party web sites with browser developer tools

Have you been caught out before?  You are making a series of changes to your site using the dev tools and then you accidentally click on a link that takes you away from the page and you’ll lose everything 😢. Well there’s a few things you can do to avoid that....
 

Collaborative Journey Maps

When you map the user journey with your team, everyone understands what it says and why. When you collaborate with your team, the journey map transforms from the designer’s magic to the team’s mission, representing the journey you shepherd for your users.
 

Resource


My design systems reading list

If you want to get started with design systems then check out Ethan’s reading list — packed full of system-y and design goodness.

 

Finally


Intent to Prototype: Container Queries

This was a great find by Jeremy just a few hours ago, a discussion around the beginning of implementing container queries by the Google team.
 

That's all for this week. If you've come across any interesting/helpful articles or you've written something yourself please hit reply and let me know about them.

See you all next week!

Have a great weekend!

Cheers,

Justin.

Twitter
Facebook
Website
Copyright © 2020 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 #433

Friday, October 30, 2020

Read online Hey everyone and welcome to week #433 of the responsive design newsletter. Our feature site for this week is a nude web page with all it's code bits on show. The site itself is a

RWD Weekly #432

Friday, October 23, 2020

Read online Hey everyone and welcome to week 432 of the responsive design newsletter. This week I've been getting to the end of my workday and excitedly tuning into the Adobe Max conference. In the

RWD Weekly #431

Monday, October 19, 2020

Read online Hello and welcome to RWD weekly newsletter edition 431. This week I'm happy to see someone finally calling out on counting clicks as a default way to improve UX, we're looking at

RWD Weekly #430

Friday, October 9, 2020

Read online Hello and welcome to RWD weekly newsletter edition 430. This week we have two articles on how to break out into full bleed for images/video/codeblocks while still keeping your columns

RWD Weekly #429

Friday, October 2, 2020

Read online Hello and welcome to RWD weekly newsletter edition 429. This week (and last) I've been battling a cold that my daughter brought home from school. Don't be alarmed, it isn't

You Might Also Like

My product prioritization framework

Sunday, April 28, 2024

Issue 192: How I triage strategy ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

Cascade, HTMX, Sponge Furniture, Meaning of Color, Flipbook

Friday, April 26, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 26 2024 A primer on the cascade and specificity piccalil.

9 Trends From Milan We Can’t Stop Thinking About

Thursday, April 25, 2024

View in your browser | Update your preferences ADPro Even More From Milan Design Week Each year, the design world convenes in Milan—and that applies to us at AD, too. For the third year running, our

Subframe, Attributes vs Properties, Front End Handbook, aspect-ratio, GenAI

Thursday, April 25, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 25 2024 Subframe subframe.com Subframe is a design-to-

Ritmo, Climate Change, Icons & Typefaces, Click Wheel JS, CarPlay

Wednesday, April 24, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 24 2024 Meet Ritmo, Musixmatch's cross-platform

Why Jake Arnold Doesn’t Text Clients

Tuesday, April 23, 2024

View in your browser | Update your preferences We've had a remodel! From now on, you'll be hearing from AD PRO in your inbox twice a week—once with a deep dive into trends to watch and subjects

The secret ingredient to media success

Tuesday, April 23, 2024

PR tips from our founder Nora Wolf In this month's edition is all about *the most important* element of successful media outreach—photography. You may have some photos, but if the backgrounds are

#453: Design Systems

Tuesday, April 23, 2024

Design system generator, types of design systems and how to consolidate design systems. Issue #453 • Apr 23, 2024 • View in the browser Smashing Newsletter Buổi tối vui vẻ Smashing Friends, Ah, design

👨‍🏫 Striking Educational Website Designs + 🏆 Challenge Updates

Tuesday, April 23, 2024

Your UpLabs Design Updates Await! Let's Get Going! 🎨 Firstly, let's congratulate Mariana Gameiro, the winner of our latest 👩‍💻 SheCodes Website Redesign Challenge! Congratulations!! Secondly,

Code Connect, JS Naked Day, Shape of AI, Product Design, CSS Grid Level 3

Tuesday, April 23, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 23 2024 The Right Code for Your Design System figma.com