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

Writing a POV Doc

Sunday, May 5, 2024

Issue 193: Share what you care about at scale ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

It's Officially Show House Season

Thursday, May 2, 2024

View in your browser | Update your preferences ADPro Showing Up, and Showing Off One of the traditions design aficionados look forward to the most each year is the return of decorator show houses. In

Zelman Meats, AI Feedback Loop, Figma Variables, CSS Masonry, Passkeys

Thursday, May 2, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 2 2024 Zelman Meats logo by Red Dot Studio logodesignlove.

Every viral brand has these 5 things in common ⚡️

Wednesday, May 1, 2024

See if your brand checks all the boxes... Branding, branding, branding. Like, PR, it's an oft-misunderstood area of business building. Many people think a logo, some colors, and a font constitute

inherit(), Polish, Picture-Superiority Effect, Music Notation, Multi-Brand Design System

Wednesday, May 1, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 1 2024 Self-Modifying Variables: the inherit() Workaround

164 / What if you could talk to Scarlett Johansson from the movie Her?

Tuesday, April 30, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Apr 2024 • Part 2 View in browser Welcome to Issue 164! Standing out in today's competitive market is hard, really hard. But side projects can help

#454: JavaScript

Tuesday, April 30, 2024

Front-End Engineer Handbook, JavaScript Cheatsheet, File System APIs and Invokers. Issue #454 • Apr 30, 2024 • View in the browser Smashing Newsletter Labas vakaras Smashing Friends, Let's talk

Mayer Rus on L.A.’s Great Gallery Migration

Tuesday, April 30, 2024

View in your browser | Update your preferences ADPro Image may contain: People, Person, Accessories, Bag, Handbag, Food, Meal, Adult, Clothing, Hat, Glasses, Fun, and Party For this week's edition

Head of Typography, Centering Things, 3D Badge, Alternating Style Queries, Hate Speech

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 30 2024 Detect JavaScript Support in CSS ryanmulligan.dev

JavaScript Support, AI in UI/UX, Deja Vu, Nature of Code, Clubhouse

Tuesday, April 30, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar April 29 2024 Detect JavaScript Support in CSS ryanmulligan.dev

Responsive Design Weekly - RWD Weekly #427

Headline

Sponsor

Article

Tutorials

Code Pens

Finally

Older messages

You Might Also Like