Responsive Design Weekly - RWD Weekly #414 — HTML Boiler Plate 8.0

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 peoples ability to access the web, take instant.page for a spin to compare performance, uncover when you should use Grid and Flex plus much more.

Right, let's get linking.... but first check out this course.

Learn Eleventy From Scratch - Piccalilli

Are you interested in the JAM Stack but you're not really sure how to get started? Have you been working with Hugo, Gatsby, or Jekyll or other static site generators but you want to give Eleventy a go? Well I HIGHLY recommend you signing up to this new course from Andy Bell. He's just finished the first past of the entire course and with more than 40,000 words. Available 22nd June!

Sign up today

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

Article

Building the Woke Web: Web Accessibility, Inclusion & Social Justice

With over 40% of the world unable to access the internet it is important that we remember how privileged we can be. In these times of isolation and the closing of a lot of brick and mortar, we rely on the use of the internet not just to connect to people but be able to do simple things like access health service information, banking, and shopping for food. This article from Olu is brilliant, and outlines what we should be doing both for people without access but also for people who have slow connections and expensive data plans.

Everything You Have to Know About Core Web Vitals

Google are using a set of new performance metrics referred to as Core Web Vitals. The chances are that if you don't optimise for these, expect to see your rankings drop. This article from Calibre goes through the metrics so you understand what to look for, and cover some tools you can use to track and monitor them.

Tutorials

The Mad Magazine Fold-In Effect in CSS

One of my favourite times as a child was getting a few dollars to go to the newsagents and buy a magazine. I still remember the excitement of going in and the HOURS I took making a choice (something which my kids put me through now). MAD was one of my favourites, and the Fold-in back cover was always genius... and now we have it in CSS.

A/B Testing Instant.Page With Netlify and Speedcurve

Instant page is a small JS script that detects you hovering around a link and, given the right conditions, will go a prefetch everything you need for the next page if you decide to click on the link. In this tutorial Tim looks at how you can set up your site to AB test the script AND see the performance outcomes in Speed Curve.

Grid for layout, Flexbox for components

I've always explained the difference between Grid and Flexbox as Grid for two dimensional layouts, Flexbox for one dimensional layouts... but it always comes back to the catch all explanation — it depends. This article takes you through a number of different layouts/components and details how you can achieve them through either Flex or Grid.

Building a Virtual Conference Talk

There is bound to be a number of you that are providing presentations over the internet these days while we still battle with Covid. Whether it's for a conference, for work, or for education.... this is the start of how you can produce a nifty presentation with your slides and a video of you speaking as a video for people to enjoy.

Tools and Resources

HTML5 Boilerplate 8.0.0

Ten years later and version 8 has been released. Modernizr is updated and Query is removed along with the browser upgrade message, and the Google Analytics script comes default with IP anonymised.

Illustrations of Black People for Your Next Digital Project

One of the suggestions from last week's newsletter (thank you Alyssa) is this great set of Black illustrations that can be used for your sites. There are paid and free options.

CodePen

CSS Grid: Newspaper Layout

Love love love this newspaper style layout for Codepens. It is at its most impressive state at desktop size, but works on every viewport still.

Finally

Pride month – Google Sheets

I'm a sucker for an online Easter Egg so I'm glad when my friend from work showed me this trick today.

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

Responsive Design Weekly - RWD Weekly #414 — HTML Boiler Plate 8.0

Learn Eleventy From Scratch - Piccalilli

Article

Building the Woke Web: Web Accessibility, Inclusion & Social Justice

Everything You Have to Know About Core Web Vitals

Tutorials

The Mad Magazine Fold-In Effect in CSS

A/B Testing Instant.Page With Netlify and Speedcurve

Grid for layout, Flexbox for components

Building a Virtual Conference Talk

Tools and Resources

HTML5 Boilerplate 8.0.0

Illustrations of Black People for Your Next Digital Project

CodePen

CSS Grid: Newspaper Layout

Finally

Pride month – Google Sheets

Older messages

RWD Weekly #413

RWD Interview Series with Rachel Andrew

RWD Interview Series with Brad Frost

Double header RWD Interview Series : Ethan and Ire

RWD Weekly Interview Series II - #4 Chris Coyier

You Might Also Like

Map of the Web, JSR Registry, Presidential Campaign a11y, Age of Average, CSS Specificity

How we do UX retreats at Balsamiq (+ steal our agenda!)

Accessibility Weekly: #395: Why Are My Live Regions Not Working?

Writing a POV Doc

It's Officially Show House Season

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

Every viral brand has these 5 things in common ⚡️

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

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

#454: JavaScript