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

Responsive Design Weekly - RWD Weekly #442 - AVIF & Aspect Ratios

Read online

Hello again, welcome back to RWD Weekly #442.

After a very slow start back to work last week it already seems like we've been at 2021 for a few months, are you feeling that too?

I finally bit the bullet and downloaded and ran TailwindCSS for the first time this week. I've just got involved in a distributed team working on a product and they're looking for a solution to build a front end, from a lot of what I've read Tailwind CSS does this pretty well as it keeps everyone on the same page.

I'd love to hear your own thoughts, is there something else I should look at? I just don't want anyone having to name things.

Let's get linking!
 

Headline

 

HTML Video Sources Should Be Responsive

While aspect-ratio has arrived to make our video elements behave responsively from a squishy point of view, we're still lacking the same control that we now expect with images. Images can have a variety of MIME types served via <picture>, with the supported ones being chosen. It also supports different sized images being used when needed based on viewport size, but this is missing on video. The proposal looks to fix that, and needs your comments and ideas.

 


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

Article

Post content on your own platform first

I've started using tictok.  Truth be told, I've used it for months now as content consumption. I'm impressed how many card based magic tricks I've learned (I made a fortune with the three card monty over xmas) as well as procreate and crytpo tips. Today though I posted to tictoc. Don't judge me. It was a short tok (?) about how you should own your content and redistribute it to other channels, which of course meant I had to write this article first.
 

`aspect-ratio` is going to deprecate FitVids

Last week we mentioned that Safari's next release was going to be supporting Aspect Ratio (it's in technology preview at the moment). With Chrome and Firefox already shipping (albeit behind a flag) it means responsive videos without JS is only a few lines of CSS away.
 

New year, new website

Andy has gone back and redesigned and replatformed Piccalil.li and has blogged about the process.  He's moved from 11ty across to Next JS with a little detour towards Wordpress. Great read.


Tutorials


The Devil's Albatross - An algorithmic layout technique

A simple header layout inspired from Heydon's albatross thanks to Nils.
 

Maximally optimizing image loading for the web in 2021

In this post Malte outlines 8 image loading optimization techniques to minimize both the bandwidth used for loading images on the web and the CPU usage for image display.
 

Nested Media Queries

Bramus points out (via an article from Sime Vidas) that it's perfectly possible to nest media queries. There's a few examples in this tutorial, so if you ever need to structure your CSS that way you're onto a winner.


Resources & Tools


webhint, the hinting engine for web best practices

webhint is a customizable linting tool that helps you improve your site's accessibility, speed, cross-browser compatibility, and more by checking your code for best practices and common errors.
 

Accessibiity Weekly

A weekly dose of web accessibility to help you bring it into your everyday work. Delivered to your inbox each Monday, curated by David A. Kennedy.
 

Front-End Performance Checklist 2021

Another year and a new set of requirements for creating our websites. This guide can be downloaded as a PDF or word document. There's more than 80 recommendations and the article estimates a 3 hour read. Grab a cuppa and put your feet up, we're in the long haul.
 

Jobs


PHP Web Developer job in Lincoln

Root Studio are looking for someone who’s really passionate about the code they produce and isn’t afraid to suggest improvements to their current workflow and to their website builds/designs - they like the team to have a keen interest in design as well as current and future technology.

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

RWD Weekly #438

Friday, December 4, 2020

Read online Hey everyone and welcome to week #438 of the responsive design newsletter. It's Christmas time which means the season of Advent blog posts are upon us again. I've listed my

RWD Weekly #437

Friday, December 4, 2020

This week we look at Cloudflares new offering for Wordpress sites to improve performance and how we should look at things as a front end developer. Read online Hey everyone and welcome to week #437 of

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏