1. Home
  2. Discover
  3. Design
  4. Responsive Design Weekly

RWD Weekly #421 - The making of an amazing site...

Read online
Hello and welcome to RWD Weekly Newsletter edition 421.

This week we have a new treat from the very talented Nicholas Rougeux who has produced my favourite deep dives into a subject, but there's already a couple of links below so let's not go into too much detail here.

Let’s get into our links!
 

Headline


Making of British & Exotic Mineralogy

The work that comes from Nicholas is up there with my favourite pieces of work produced on the entire internet. He provides all the “how’s” for putting together the project and also produces an amazingly beautiful and informative piece of art/design at the end of it.  I’m working on something like this for the Origin of Species, I’d love for things like this to end up as my day job 😂

I've also realised that there are likely to be hundreds/thousands of people in the world that are producing sites like this. Do you have any favourites? I'd love to hear about them and spread the word here so please hit reply and share a URL.
 

Sponsor

Accessibility is Key (and Free!)

It’s our job as designers to make the web work for everyone — and this new course Designing Accessible and Responsive Websites with Ethan Marcotte is a great way to get started.

In the time it takes to step away for lunch, learn a handful of best practices to help make a more inclusive web. Plus, earn a badge to share on social media when you pass the final exam.
Enroll Now for Free
Advertise your product, service, or job opportunity to 27,039 tuned in web designers and developers. Find out more.

Article

Why Medium is Not the Home for Your Ideas

I’ve always been a strong believer in self-hosting your own blog rather than publishing on something like Medium. This article does a great job going into the pros and cons of choosing your blog home.
 

Designing Adaptive Components, Beyond Responsive Breakpoints

In this article/written talk Stephanie Walter shows how she designs systems of components that go beyond responsive adaptation to different screen/viewport size and can also be used in different layout and container contexts.
 

Eliminating cold starts with Cloudflare Workers

Cloudflare is awesome. By utilising the initial connection for the handshake process in a https connection the CloudFlare workers can be primed with the content it needs by the time the request for the actual content comes back again. Ingenious. At the moment it only works at the domain level, but folder level is coming soon as well.
 

It's time to lazy-load offscreen iframes!

After Firefox released the `loading="lazy”` to help with native lazy loading of images Google added it to Chrome (and all chromium based browsers I suppose). Now, Chrome is bringing the same capabilities to Iframes which can shave off tonnes of time for your page load and improve time to interactive.  This is great for things like YouTube embeds which, when using loading="lazy“, has results resulted in up to 10 seconds of time saved on mobile devices.
 

Things I Wish I’d Known About CSS

Focus states, collapsing margins, relative and ch units... these are just a few of the things that is covered in this article. I knew about quite a few of these, but there was certainly some details I didn’t know (like the CH unit is the width of 0 which is 20-30% wider).
 

Tutorials

Getting the Most Out of Variable Fonts on Google Fonts

This is a neat tutorial on how Recursive Sans and Mono was developed and how you can now take it for a spin on Google Fonts. If you take EVERY one of the 64 weights/styles available the font weighs in at 6.4mb which isn’t practical, but you’re never going to use all that now, are you? A suitable suite of options enabled comes in around the 1/2 mb range.
 

Simple Image Gallery with display: grid; and object-fit: cover;

Using pictures from the birth of his little boy, this tutorial goes through the approach of putting together a nice gallery style set of images using Grid.
 

Inspired Design Decisions With Emmett McBain

Andy Clarke does it again with this great tutorial on laying out web designs, responsively of course, based around early print layouts. It comes with the history of why along with the modern day how.
 

Recreating Wildlife Photographer of the Year online – part 1

Last week (or was it the week before) we looked at the Clearleft article about their work on the Wildlife Photographer of the Year. This week we’re hearing from the team themselves from the Natural History Museum. The first part of this story focusses around the technology decisions.


Tools, Resources and Specs


this vs that - What is the difference between this and that in the front-end development?

Do you know the difference between :active and :focus, or Normalize vs Reset CSS? This site has a tonne of explanations about things that are pretty similar in web development but have some key differences and use-cases.
 

The Lean Web

The lean web is a free online book that has been written by Chris Ferdinandi and looks at how we have strayed from producing simple websites and now make even the simplest one-pager a behemoth with a JavaScript framework thrown in for good (bad) measure. You can buy a version of the book too and help support a wonderful teacher on the web.
 

Awesome GPT3 Resources

Awesome GPT-3 is a collection of demos and articles about the OpenAI GPT-3 API. This is brains behind the new AI we’ve been seeing which takes natural language queues to develop a website.
 

Tweet of the week

 

I had no idea we could use window.matchMedia In order to trigger JavaScript events based on the viewport size!
 

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.
Twitter
Facebook
Website
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 unsubscribe from this list

Email Marketing Powered by Mailchimp

Older messages

RWD Weekly #420 - Ultimate Product Design Guide awaits

Friday, July 24, 2020

Read online Hello and welcome to RWD Weekly Newsletter edition 420. This week I was very happy to pick up an iPad Pro and I'm testing it out in the creation of this newsletter. The last tablet I

RWD Weekly #419

Friday, July 17, 2020

Hello and welcome to RWD Weekly Newsletter edition 419. After our brush with the teapot http code last week we're moving into unofficial codes (which is funny to think that the server being a

RWD Weekly #418 — I'm a teapot

Friday, July 10, 2020

I'm a little teapot short and stout, here is my handle here is my spout. View this email in your browser Hello and welcome to RWD Weekly Newsletter edition 418. Last week I said that the longer we

RWD Weekly #417 — New Performance Tool, Accessibility Tips, and more

Friday, July 3, 2020

View this email in your browser Hello and welcome to RWD Weekly Newsletter edition 417. As we get further along the 400's with our status codes the stranger they are becoming (and certainly the

RWD Weekly #416 — Accessibility, Dev tools updates, and AMP turns 5

Friday, June 26, 2020

View this email in your browser Hello and welcome to RWD Weekly Newsletter edition 416. This week we look at Accessibility on the flip side, how we can design for voice interaction, a look back over

You Might Also Like

🐺 How to create a high impact press page.

Friday, February 14, 2025

͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏

#494: UX and Product Design

Friday, February 14, 2025

Redesigning complex navigation, product design process, UX in legacy systems, UX workshops with users. Issue #494 • Feb 11, 2025 • View in the browser Smashing Newsletter Halò Smashing Friends, How do

Nick Mafi on Capturing LA’s Loss

Friday, February 14, 2025

View in your browser | Update your preferences ADPro 77 Stories Shared As we watched the worst fires in Los Angeles history spread across the city, the editors at AD came together to discuss the

🐺 Content that Converts - the replay is up!

Friday, February 14, 2025

And everyone who joined loved it! ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌ ͏ ‌

Designer or Couple’s Therapist?

Friday, February 14, 2025

View in your browser | Update your preferences ADPro Let's Make a Deal There's no shortage of spoils in the wonderfully eclectic Hudson Valley home of actor Walton Goggins and writer-director

178 / Visualize your dreams in 2025

Wednesday, January 15, 2025

Product Disrupt Logo Product Disrupt Half-Monthly Jan 2025 • Part 1 View in browser Welcome to Issue 178 Ever get curious about how this newsletter is doing? I shared the 2024 behind-the-scenes and

Mayer Rus on Loss, and Living, in LA

Tuesday, January 14, 2025

View in your browser | Update your preferences ADPro LA, I Love You Los Angeles has been my home for nearly 20 years, and the devastation here, now, is unfathomable. Entire neighborhoods have been

🐺 How to make a great first impression

Tuesday, January 14, 2025

With real examples. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

#490: Interface Design

Tuesday, January 14, 2025

How to design better interfaces, how to choose icons, optical effects, iconography, Gestalt principles and icon design. Issue #490 • Jan 14, 2025 • View in the browser Smashing Newsletter Buona

🐺LAST CHANCE to get 20%-off our PR Masterclass Series

Monday, January 13, 2025

Make 2025 your biggest press year yet. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏