RWD Weekly #416 — Accessibility, Dev tools updates, and AMP turns 5

View this email in your browser

Hello and welcome to RWD Weekly Newsletter edition 416.

This week we look at Accessibility on the flip side, how we can design for voice interaction, a look back over five years of AMP, some great approaches for sub grid and much more.

The 416 status code is range not satisfiable.... Yep, I have about as much clue as you on that one (and if you know what that means hit me up with a simple explanation).

Headline

Accessible to some

I have a common conversation with people that want to put more focus on the creative design of a site at the expense of accessibility for everyone. An all to common rationale is "but that's not our target market" or "but there aren't that many people that will be affected. It's our job to educate everyone to ensure that what we produce is accessible for everyone, and Manuel Matuzović does a wonderful job of turning those tables with this site.

Sponsor

Digital Ocean - get $100 credit

Do you want your own server spun up in under a minute for just $5 a month?

I use Digital Ocean to run the https://responsivedesign.is site and it has been ticking along beautifully for the past 5 years. I use a plain droplet configured from scratch, but now they have a droplet marketplace already set up with Wordpress, Ghost, Docker, Magento, Minecraft, CPanel, Plesk, Django, Grafana, Mastodon, Discourse and a bunch of others.

Get your Digital Ocean Server Today from $5

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

Article

Designing for voice

Five years ago I was really keen to see how our websites were going to take advantage of AR and VR to unleash our content on the world, but in the past two years I've been more excited about how voice is going to fit into how we interact online. Abraham has a great overview in this article

Why BaseCamp & Hey.com are Wrong About the Apple App Store

If you were following along with hot drama around Apple wanting to charge hey.com 30% for each subscriber to get into the App store then you should check out this article about why they were deemed to fall in a different box than, say, Netflix and Amazon.

What's New In DevTools (Chrome 85)

Lots of JS updates and some great performance monitoring improvements. For me though, the most valuable improvement will be using the Lighthouse v6 testing tool. This will help you plan for the three new web vitals along with all the regular performance indicators.

Looking back at five years of AMP

It's hard to believe that AMP has been around for the past 5 years! This article from Malte goes through the steps they have taken, including dealing with the negative feedback from the community in shaping their approach. One thing that I noted from this article was "Google’s recent announcement around page experience signals that provides a path to make all web content eligible for inclusion in the Top Stories Carousel." The link referred to in the article takes you to an article from the Google Webmaster blog where there confirm "AMP will no longer be necessary for stories to be featured in Top Stories on mobile; it will be open to any page."

You still need to perform well against the new Web Vitals, but it is a huge step towards AMP existing on the web because people want to use it for it's performance benefits (which is why it was created) rather than because they had to use it to get preferential treatment in search results.

Why designing for delight is no longer enough

Cloudinary - State of Visual Media

Safari 14 Beta Release Notes

Tutorials

11ty: Generate Twitter cards automatically

I've been getting familiar with Eleventy through Andy Bell's course so I'm excited to test this out in the workflow. Using some variables, bit of SVG, a bit of SVG→PNG and BAM.... job done.

Irregular-shaped Links with Subgrid

This is a really lovely design pattern pulled off with Subgrid. Subgrid is only supported in Firefox (yay) but there are bug reports for it to be added to both WebKit (Safari) and Chromium (Chrome & Edge). Chrome seems to be dealing with a bug in the current LayoutNG engine which is blocking further work on Subgrid.... fingers crossed it comes soon. Also it's worth pointing out that Jen Simmons has moved to Apple as a Safari dev relations person now so hopefully it means some cool stuff coming our way... no pressure Jen.

How to Get the Screen, Window, and Web Page Sizes in JavaScript

There is always occasions where it is advantageous for you to know the width of the screen (this is fixed), or window (the size of your browser window which will change depending on if your full screen or squishing it like a dev), and the web page size (similar to the window but minus all the browser UI like address bar, menus, dev tools etc). This tutorial shows you how you can get these in 6 lines of JS. Short and sweet (and useful).

Styling Layout Wrappers In CSS

There are many ways to wrap content on a website and knowing the right way to do it can be difficult when you get started. Ahmad has a few suggestions to get you started, but check out how some other sites are doing this as well. The bit that always gets me is when you want to break out of the wrapper half way down the page.

Breadcrumb navigation

Fonts for Complex Data

Background image

Tools and Resources

Carrd

Simple, free, fully responsive one-page sites for pretty much anything.

Grid cheat sheet

Tree path visualiser

Finally

Timelapses

This is a really cool effect, allowing the mouse position to dictate the speed of the timelapse. Unfortunately, and as a warning to you clicking on the link, if you look at all four of the examples on the page you will download 40mb+. Would you get better compression with a video and tie in the playback to mouse movement?

CSS folded poster effect

Lynn is so rad, and this poster effect is just awesome.

That's all for this week. As always thank you to those that sent through link recommendations, if you've come across something or have written something please send it through.

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

RWD Weekly #415 — Unsupported Media Type & Bootstrap 5

Friday, June 19, 2020

View this email in your browser Hello and welcome to RWD Weekly Newsletter edition 415. Over the past few weeks and the interview series I let our journey through the HTTP status codes fizzle out, but

RWD Weekly #414 — HTML Boiler Plate 8.0

Friday, June 12, 2020

Pride month, Woke Web, Mad Magazine Effects and more View this email in your browser Hello and welcome to RWD Weekly Newsletter number 414. This week we look at the social differences when it comes to

RWD Weekly #413

Friday, June 5, 2020

View this email in your browser Before we get started with this weeks newsletter I wanted to cover off what has been happening this week. I've spent this week almost speechless with the situation

RWD Interview Series with Rachel Andrew

Friday, May 29, 2020

The last of our interview series finishes with a bang! View this email in your browser Hello and welcome to RWD Weekly Newsletter edition #412 and the final installment of the second interview series.

RWD Interview Series with Brad Frost

Friday, May 22, 2020

Our second to last interview in the series with Brad Frost. View this email in your browser Hello and welcome to RWD Weekly Newsletter edition #411 and the continuation of the interview series. This

🐺 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. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

RWD Weekly #416 — Accessibility, Dev tools updates, and AMP turns 5

Headline

Sponsor

Article

Tutorials

Tools and Resources

Finally

Older messages

You Might Also Like