RWD Weekly #389

Hey everyone and welcome to week #389 of the responsive design weekly.

We’re heading up to the run into Christmas now and it’s that time of year that I like to try some little side projects as client work slows down before the holidays. There are a tonne of tutorials this week and I’ll be doing a couple of them tomorrow afternoon, I hope you can make some time to do the same!

Right, let’s get linking!

Sponsorship

Studio Press – Breakthrough Pro

Breakthrough Pro combines a palette of beautiful colors and minimal design in a sleek, modern layout for an advertising or marketing agency. Demonstrate your work, services, creativity, and more—perfect for your next breakthrough moment.

Articles

Firefox 71: A year-end arrival

There are soooo many great releases in Firefox in #71. My top three are

  1. Subgrid
  2. Colspan (yes, it’s been available in other browsers for ever)
  3. Multiline console editing & Blocking render request updates (that’s technically four).

Thinking about color

Most of the articles, in fact all of them, that I’ve posted from cloudflare have been performance related, period. That’s why I loved this article based on their changing colour palette over the years and they use some great tools to get there.

Six Web Performance Technologies to Watch in 2020

Simon picks his six technologies he thinks will improve on web performance next year. On the list are the JAMstack, Web Assembly, Edge computing and more.

The Fastest Homepages in Higher Ed

A top ten countdown to the fastest University website.

Dealing with Ads in 2020

Firefox’s fight for the future of the web

Tutorial

Spanning and Balancing Columns

In this guide we look at how to make elements span across columns inside the multicol container and how to control how the columns are filled.

Use CSS Subgrid to layout full-width content stripes in an article template

With the implementation of sub grids we can declare the layouts of our site at the top level of the site and have sub elements align to them as well. This example shows this by aligning elements within an article against the overall grid structure of the page containing the article.

An Introduction to Variable Fonts

24 Ways is my favourite advent calendar and this year is not disappointing. There are back to back tutorials on Variable Fonts and I highly recommend you starting with the overview from Jason Pamental before following up with Mandy’s.

Motion Paths – Past, Present and Future

If you’re looking to get started with including animations along a path (think an acrobatic plane flying across the screen) then this tutorial from Cassie is jammed packed with approaches. Using the latest release of GreenSock, things are a bit more straight forward now.

Simplified Fluid Typography

I loved it when we could declare different font sizes between breakpoints to have the best typography for the given width, but when the typography locks were introduced things go a whole lot better.

Building a Website Screenshot API

After featuring Ire’s article last week about using puppeteer to grab a tonne of screenshots we have another one. Again it’s using puppeteer but this time the resulting screenshots are being dumped into Google storage.

The ugly truth about optimising beautiful images

Sometimes when you’re making optimisations to images on a site you won’t see that much of a change to the overall load time or the first significant paint. Often this is a result of some other implementation factor, and if you dig one more layer down you’ll find a way to get the really big savings you were originally after.

Performance Tips for Background Video

There’s some great tips here for background videos, particularly removing the sound track. I’d also add the recommendation of using a tool like Handbrake if you’re more of a GUI person.

Tools & Resources

Binary Music Player

Well, it’s responsive. Tim Holman, who is in my top 10 favourite people on the internet, produces this great music player which works as 8 bit binary counts upwards. You can change the notes for each bit, loads of fun.

Diagram.Codes

Describe your diagrams with a simple text language and automatically generate an image you can export.

CSS Layout

A collection of popular layouts and patterns made with CSS.

HEAD – A free guide to <head> elements

Although all the important stuff comes from the <body> tags (the important stuff being the actual content) the things you place inside the <head> are vital for the content actually being seen. This is a great guide to what is vital and important and what each of the elements do. Who’s doing the <body> version?

Subscribe to our Newsletter

Add your email address and receive an email every Friday covering off everything worth knowing about building your websites responsively.