RWD Weekly #400

Hello and welcome to the 400th edition of Responsive Design Weekly. Firstly, a huge thank you to you for being part of the 400 week journey. Every week it is an honour to be in the position to hit your mailbox and share the things that I’ve read and learned for the week, and even more so when you hit reply to request updates, suggest other articles, or to just say a quick thanks.

There’s no change to the newsletter for the 400th edition, but I can share that we will be reintroducing the interview series for the month of April and we’ve got a number of previous interviewee’s and some new faces as well… very exciting stuff.

For now though, let’s get linking.

Article

Telling the story of performance

There’s some great resources included here from Jeremy, all of which help paint a performance picture to show your clients about why performance matters, and why it is a UX problem.

Why Are We Talking About CSS4?

A couple o weeks back we featured a GitHub issue that Jen Simmons created about whether we should do a CSS4 specification to lump in some of the new developments. There are a number of benefits, but also downsides, to doing this and in this article Rachel Andrew breaks them down for us.

New media queries you need to know

With the latest Level 5 specification being worked on there are a few new queries that might be of interest. Most of these are things that you might already use and have been implemented by browsers, the spec just ties it up. But, there’s probably something you didn’t know like @media (inverted-colors)

Tutorial

Where Does SEO Belong In Your Web Design Process?

SEO is vital for any website to succeed unless you’ve got bottomless pockets to pay for traffic. With that in mind, it’s important that you ensure that you consider this at each stage of your website build (and design).

The Slideout Footer

Our feature site this week is a beautiful new site called “The Markup”. In this tutorial Chris looks at how you can replicate their footer design.

How to create a stacking cards effect

In this tutorial, we will take a look at how to create a stacking cards effect, using the CSS sticky position and the Intersection Observer API.

Animated Responsive Navbar with CSS

A beginner’s tutorial for building a Responsive Navigation Bar with CSS that includes animation, duotone icons, flexbox, and other cool tricks!

Learn Box Alignment

Are you ready to learn how box alignment works for CSS Grid and Flexbox? This article is for you.

Tools and Resources

👌 Snapfont

SnapFont makes it easier to test any font on any website. All you need to do is to install the Snapfont browser extension.

500+ CSS Icons, Customizable, Retina Ready & API

This claims to be “the next-gen icon library designed by code with performance in mind — from a developer for developers”. I’m having a play with it and looking to see how much better CSS icons are over SVG versions.

massCode

A free and open source code snippets manager for developers.
It helps you create and organize your own personal snippets collection and have quick access to it.

Frontend Guidelines Questionnaire

Brad has created this one-page questionnaire to help your team establish effective frontend guidelines, so that you can write consistent & cohesive code together. It covers a range of topics including HTML, CSS, JS, Fonts, Media, Performance, Accessibility and more.