Responsive Design Weekly - RWD Weekly #427

Read online

Hello and welcome to RWD weekly newsletter number 427.

This week we're taking a closer peak at the image format that can reduce the size of the internet by 50%.... hey let me live in hope alright.

The great thing about the AVIF format is that it can be used now. Right now. It doesn't look as though it's supported by the likes of Cloudinary but that won't be very far away at all. Chris has written about how he is handling it with CodePen, by using an image worker on CloudFlare which is pretty cool.

Let's get linking.

Headline

Read Me: Magazine

What a terrifically well crafted article that starts with the content and grows the design from there. Some great tips as part of this, along with some great ideas for some future layouts you might have been thinking about. At the end of this article there is also a template for the article layout that you can borrow.

Sponsor

Learn what’s next in web design

An Event Apart Online Together: Fall Summit is a 3-day web design conference with an intense focus on digital design, UX, content, code, and more—featuring 18+ in-depth sessions, live Q&A with the speakers, and one-on-one conversations with special guests. You'll get deep insights into where the industry is now and where it is headed next. Join us online October 26-28.

Save $100 on any multi-day pass with promo code AEAOTRWD.

See the full agenda and register now

Advertise your product, service, or job opportunity to 26,848 tuned in web designers and developers. Find out more.

Article

AVIF has landed

Jake provides an in-depth overview of the AVIF image type. Starting with how you can include it on your site TODAY using the <picture> element, Jake then goes into a range of different types of images and how they stack up with JPG, PNG, WebP, and SVG.

New ways to grow subscribers and collect donations with Jetpack

While the subscription doesn't work well for me because I'm always going to want to push folks to Mailchimp, the donation section is a really great inclusion. I'm thinking that not-for-profit organisations can now very simply get a good looking donation section onto any wordpress site.

Beyond trivago Tech Pt.1: Side-Projects from Our Developers

I think giving your team the opportunity to work on side projects is the best way to keep them engaged and learning new things that they can introduce into the business. The fact that someone is interested in following another passion alongside their work should speak volumes to the type of person you’ve hired, and that you should want to keep a hold of. It’s great to see Trivago celebrating these stories on their own site.

I'm writing this on my phone

I think this is an interesting constraint to try and keep content down and a little more mobile focussed. I’ve recently tested going in a different direction, rather than using the keyboard to pen articles I’ve been testing the voice dictation capabilities of iOS to see if it’s possible to “write” blog posts that way (see next link).

Adding punctuation to dictation on the iPad

As I delved into the approach for dictating blog posts on the iPad I found that everything was just one long sentence. No punctuation. Nothing. Here’s a few things you can do to make sure dictation is something that helps rather than hinders.

How we built and ran ‘Introduction to content design’, and how to sign up

This is a great article around the approach on how to run an online course. The added bonus is that there’s a link to sign up to do the course and it’s FREE, and all about better content design.

Source Order Viewer in Edge 86

It's great to see that someone's public submission for an update to dev tools has been taken from a talk right the way through into the dev tools themselves.

eBay Motors: Accelerating With Flutter™

To hit the tight deadlines placed around the app development for eBay Motors they turned to Flutter. It’s not a responsive thing, but I was surprised that they were able to build so quickly and roll it out throughout the wider team so quickly.

Duo screen from microsoft

With the folding phone a real thing now we've got yet another screen layout that we need to worry about when it comes to designing web pages. Owen takes a look at some common uses that we might be seeing

Beyond Media Queries: Using Newer HTML & CSS Features for Responsive Designs

Tutorials

Using max() for an inner-element max-width

This is my new favourite way to layout the inner content of pages to give me a full width capability but still retain minimum padding on the smallest viewports.

Designing With Reduced Motion For Motion Sensitivities

A review on how you can enable reduce motion in CSS and JS along with a number of ‘in the wild’ examples of how folks have done similar things (including the massive Ear Buds site)

Menu Reveal By Page Rotate Animation

I like the idea of moving the page to get to the navigation rather than visa versa. It kind of reminds me of the ol' off screen navigation pattern. I do wonder how much effort this takes to paint though, any performance issues do you think?

A thread on better HTML forms (with CSS)

This is a great set of progressive enhancements for basic forms. I especially like the password manager hints and tips, it’s not something that I was previously aware of before.

Code Pens

RolandMC-500.css

I know that you shouldn’t need to build this in CSS (nor would you in production most likely) but the fact that you can is SWEET. The fidelity of this with the shadows is simply phenomenal.

Day and Night: CSS Transitions and animations explained

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.

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

RWD Weekly #426 Free analytics & making you think

Friday, September 4, 2020

Read online Hello and welcome to RWD weekly newsletter number 426. Our feature image this week comes from a different style of a site then I'm used to seeing. The vertical bars on the right of the

RWD Weekly #423 : The cost of free

Friday, August 14, 2020

Read online Hello and welcome to RWD Weekly Newsletter edition 423. This week one particular article stood out to me (our headline this week). It comes off the back of the sad news that Mozilla, the

RWD Weekly #422

Saturday, August 8, 2020

Read online Hello and welcome to RWD Weekly Newsletter edition 422. This week our feature site is a lovely creative motion studio. The header has a paper fold look about it, and the case study pages

RWD Weekly #421 - The making of an amazing site...

Friday, July 31, 2020

Read online Hello and welcome to RWD Weekly Newsletter edition 421. This week we have a new treat from the very talented Nicholas Rougeux who has produced my favourite deep dives into a subject, but

RWD Weekly #420 - Ultimate Product Design Guide awaits

Friday, July 24, 2020

Read online Hello and welcome to RWD Weekly Newsletter edition 420. This week I was very happy to pick up an iPad Pro and I'm testing it out in the creation of this newsletter. The last tablet I

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