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

Responsive Design Weekly - RWD Weekly #433

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 tutorial on how you can do a similar thing which I think is very clever because this would actually be really handy as a way to teach HTML.

I'm also particularly impressed with the simplest of CSS that will make almost any webpage look good.

html {
  max-width:70ch;
  padding:2ch;
  margin:auto;
  no-color:#333;
  font-size:1.2em;
}

Let's get to it!
 

Headline


Enhancing User Experience With CSS Animations

With CSS and JS progress, implementing animations on websites has never been easier. But how do we make sure that our CSS animations and transitions will be meaningful to our users? That they will not be just some annoying “in-your-face” eye candy?

 


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,722 tuned in web designers and developers. Find out more.

Article


Core Web Vital Tooling

Chris always does a great job of explaining things in a simple way, and this post on the core web vitals is no different.


Cumulative Layout Shift: What it measures, when it works (and doesn't), and how to use it

While Chris has provided a great overview of the three core web vitals, this article from Tammy dives deep into one specific vital - the CLS or cumulative layout shift and how you can monitor this using tools like speedcurve.
 

Humans are Bad at URLs and Fonts Don’t Matter

This is a really interesting post that has nothing to do with responsive design, but it has to do with URL design and the fundamental problems that we face with them. Honestly, I looked at the poll about which was the dodgy URL for a long time but never picked up the issue.
 

CSS Grid Layout Module Level 3

You wanted CSS Grid to provide more Masonry style layouts, and the CSS Grid Layout Module Level 3 doth deliver. This is a draft proposal so take the time to have a look and come back with some issues on GitHub if you see any issues. This is literally being developed to help you out with your layouts, so you’re the end user.... make your voice heard.
 

Monetisation models and user hostility

PPK has started blogging a bit more frequently lately and it is a more than welcome return from my point of view. I agree with the frustration he experience in signing up with Coil/Brave whose aim it is to provide a content payment system without advertising on the web, however, I’m not sure I agree with the objection to Brave using Ads as a way people can earn credits. They do this by watching ads to earn the credits, and then those credits are passed on to content creators using Brave as you read their content/visit their pages.

If we take the games industry for example, it's common practice to allow you to double your coins by watching a bit of advertising.

I don’t think advertising is ever going away, but learning to live with it and have some level of control over exposure to it is a better approach than trying to block it completely. 

Looking at it from a conference point of view, the cost of a ticket to a web conference is subsidised thanks to the sponsors of that conference. This sponsorship is done for exposure and an opportunity to capture in the users attention... the higher the sponsorship paid the more exposure you get. I see the optional watching of ads to gain credits less imposing than sponsor notices.

*By the way — I love sponsors. They help keep this newsletter going and are hand picked.
 

Tailwind Thoughts

I’ve mentioned Tailwind and my reluctance to go towards a utility class CSS system in the past. I really like this article from Michelle where she points out her own reservations, but counters it with the rationale why it was also her idea to roll it out as a standard for the projects at her work. It looks like with each release the team that build and support Tailwind continue to strive to make it as easy and straight forward as possible.



Tutorials


How to use CSS masking

Practical tips on how to get started with CSS Masking from the amazing Rachel Andrews. This adds some shape to your images or can help make the text more readable with the image masked away. How will you use it?
 

How to let all your users know what to expect when they click a link

Such a great idea, not only will it get read out for screen readers but you can hook some visual reference to this as well with CSS.


How We Run Online Workshops

Many companies had to struggle in one way or another in the last couple of months. Smashing Magazine had to get creative, and they had to rethink their conferences and workshops altogether. In this article, CEO and co-founder Vitaly Friedman shares how Smashing runs online workshops and online conferences these days, and the lessons learned along the way.
 

Clamp

Setting responsive typography using CSS Variables and CSS Clamp().
 

Prevent layout shifts with CSS grid stacks

Seeing as we're talking a bit about CLS this week, here's a great way to prevent having the shift occurred even once the page has loaded using CSS Grid.
 

One time password

”Setting  autocomplete="one-time-code"  will allow your user to fill the input field with the auth code they've just received - without the need to manually copy it from a message”
 

Comparing Various Ways to Hide Things in CSS

Let me count thy ways.
 

Resource


Bootstrap Icons v1.1.0

The first minor release for Bootstrap Icons is here, with over 30 new icons and a few bug fixes. New icons include fill variations for emoji icons, including a few new emojis, and several new file type icons.

 

Finally


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 #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

RWD Weekly #428

Friday, September 18, 2020

Read online Hello and welcome to RWD weekly newsletter number 428. This week I've been trying out the emulator on Edge for the new dual screen display along with some new fancy media queries that

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! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏