RWD Weekly #404

Hello and welcome to RWD Weekly Newsletter number 404.

Following along with our HTTP Status Code theme I was toying with the idea of either not sending the newsletter out at all this week, or sending it out to you but having the entire newsletter blank. This, of course, is because the HTTP Status Code 404 is for when the request could not be found. Did you know that IIS actually served a sub list of 404 options from 404.0 Not Found through to 404.20 Too Many URL Segments.

It has become trendy to provide a funky design for your 404 pages as you can see from this list from Canva. This is most likely due to 404 being the most common HTTP response code above the 200 and a few of the 30* codes.

Right, let’s get linking.

Headline

CSS Findings From The New Facebook Design

The new design of Facebook has been said to be pandering for the older audiences by making the contrast of content better through more black/white colour options and all round larger fonts.  But what else are they doing inside the CSS to bring one of the largest websites in the world to more than a billion devices. Ahmad looks at someone of the implementation methods behind the HTML and CSS from how they get the profile pictures through to loading news items and vertical media queries.

Sponsorship

Restrict Content Pro

A full-featured, powerful membership solution for WordPress. In the time where people are looking for alternative ways to make money this plugin for WordPress can help you create a membership area quickly and securely.

Articles

Lighthouse Changes How Performance Score is Calculated

Lighthouse is a google testing tool that can tell you how your site performs across first contently paint, first meaningful paint, speed index, time to interactive plus much more. This has a direct impact on how you will be ranked on Google search results as well. How the tool scores is undergoing changes now with weightings for certain areas dropping, and other areas going up.

The 100+20 Rule for Premium Content

If you are going to start experimenting with paid for content and using Coil there are some options for you in this article. The image above showcases the difference between the content served for non-coil browsing (left) and a coil enabled browser (right).

Innovating on Web Monetization: Coil and Firefox Reality

During this pandemic a lot of people are finding themselves out of work as a result of life becoming isolated. While it’s unlikely to solve everyone’s problem, it’s a timely reminder that Coil can offer a source of drip feed income. This article has a LOT of content around how this works and the different options that you have to get into the web monetization game.

Build a website advice

This week I came across a question on Reddit from someone with a little bit of HTML, CSS, and PHP knowledge but wanted free hosting options. Rather than leave my answer on another platform I dropped it onto my site as well.

Tutorials

4 CSS Grid Properties (and One Value) for Most of Your Layout Needs

What this tutorial does is a reverse approach to show you the smallest possible set of grid properties you need to know to meet most of your layout needs.

Fix an overloaded server

I’ve been doing a lot of work the past two weeks in my spare time creating new sites on a server I have with Media Temple. As it’s gone on I’ve noticed the backend of WordPress across a few sites is becoming unbearably slow, so I used this as a way to make sure the server was running as fast as it can do.

Responsive Images the Simple Way

A few years ago Jason Grigsby wrote a series of posts diving into responsive images, this article is a compacted version of that series pulling out all the best and most important bits.

CSS Findings From The New Facebook Design

The new design of Facebook has been said to be pandering for the older audiences by making the contrast of content better through more black/white colour options and all round larger fonts.  But what else are they doing inside the CSS to bring one of the largest websites in the world to more than a billion devices. Ahmad looks at someone of the implementation methods behind the HTML and CSS from how they get the profile pictures through to loading news items and vertical media queries.

Modeling organic branching structures with the space colonization algorithm and JavaScript

Oh my goodness! Well, I’ll let you guess what I’m going to be playing with in between (and during) Zoom calls tomorrow.

Resource & Tools

Web Performance Checklist

This list of Notion bound web performance items are a great resource to have while building your next (and current) site.  It covers images, fonts, servers, caching, stats, scripts, styles and HTML.

Compound grid generator

A little tool to generate compound grids. Enter the number of columns for each of your grids, and they’ll be magically merged into a compound grid. Use the output in your grid-template-columns property when using CSS Grid for layout.

Podcast

RWD Weekly 72

Back to back podcasts for the first time in years.

Finally

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.


Subscribe to our Newsletter

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