Responsive Design Weekly - RWD Weekly #413

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 that has been playing out across the USA, and extending further across the globe.

As a privileged white guy who grew up in Australia and lives in the UK I won't pretend to know what people are going through in the US, but I can at least use this newsletter to reiterate the message, Black Lives Matter.

There are some other things I can do like accepting what I don't know, acknowledge my own failings around racism, and further educating myself and change my actions.

What I would also like to do is use this newsletter over the next few weeks to promote programmes and opportunities that are available that help reduce inequality. If you have or know of something that can help please email me directly and I'll get those into the newsletter.

I hope that as a result of these events that things will change for the better, and as my wife said today, be the change you want to see in the world.

Let's look at these links.

Headline

White Guyde To The Galaxy

If you are a white guy and you don't know what to do beyond donate and being quiet, Tatiana Mac made us a list. Her first point about unfollowing everyone and starting again struck home pretty close as I was going through my RSS feeds this week. Please, if you have additional RSS feed recommendations to further diversify the content for this newsletter please hit reply and let me know.

Black Girls CODE

Black Girls CODE is devoted to showing the world that black girls can code, and do so much more. By reaching out to the community through workshops and after school programs, Black Girls CODE introduces computer coding lessons to young girls from under-represented communities in programming languages such as Scratch or Ruby on Rails. Take a look at all programmes, volunteer, or donate today.

Donate to Black Girls CODE

Article

Responsive design: seams & edges

Ethan talks about those little moments between breakpoints where things just don't look so good.

Thinking About The In-between Design Cases

When RWD first hit the scenes we started doing mobile and desktop designs, and then as tablets took hold we introduced those designs as in-between designs. As the device market has further fragmented and we have watches and ultra wide monitors we now have more and more in-between elements. Here are a few approaches you can use to make sure you can cover off the bits that the designs miss out on.

Tutorials

Colors in CSS

Everything you need to know about Colors in CSS from Ahmed. Also, great news in that Ahmed is starting his own newsletter to keep you updated on his great updates, well worth a subscription!

CSS fix for 100vh in mobile WebKit

Have you set the min height of a container to a min-height of 100vh and had issues on the iPhone where your footer element sits behind the browser tools? Matt Smith has used -webkit-fill-available as another min-width option to help solve the issue. Nice Matt, nice.

CSS Grid Layout Module Level 2

This tutorial explains how you can enable Masonry layout in Firefox Nightly and contains a CodePen where you can see how it works.

The Fastest Google Fonts

Fonts are a 'simple' win when it comes to web performance. You can get a lot done with a few small tweaks, but you can also go DEEP. Harry has saved you all the hard work by testing and visualising the different ways to load in a Google Font, and then given you a snippet to save you all the work.

Overlapping Header with CSS Grid

I love the design approach where the content area of the page overlaps on top of the header of the site. It's an interesting effect that provides a bit of depth an interest to what can be a rather boxy experience. Snook has thrown away negative margins and embraced Grid to deliver just such a layout.

Finally

8m46s

On May 25th 2020, Derek Chauvin held his knee on the neck of George Floyd for 8 minutes and 46 seconds, resulting in Mr. Floyd's death. This site invites visitors to sit quietly and reflect for this same length of time. It feels like an eternity. A partial transcript of the incident is provided throughout.

I wanted to leave you with that simple site this week that I thought was incredibly moving. We all work in this industry to create a better and more informed world. The whole purpose of the web was to create something that was universally accessible to everyone — irrespective of gender, race, origin, class, ability.

Everything you do matters, so try to do the right thing.

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 #413

Headline

White Guyde To The Galaxy

Black Girls CODE

Article

Responsive design: seams & edges

Thinking About The In-between Design Cases

Tutorials

Colors in CSS

CSS fix for 100vh in mobile WebKit

CSS Grid Layout Module Level 2

The Fastest Google Fonts

Overlapping Header with CSS Grid

Finally

8m46s

Older messages

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

RWD Weekly Interview Series II - #3 Sally Lait

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