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

We Want To Hear From You: Correct Link

Friday, May 17, 2024

Oops! New link for our latest AD PRO survey. Architectural Digest AD PRO Logo AD PRO Survey Dear AD PRO Reader, AD PRO is nothing without the design community. To ensure we're giving you the best

We Want To Hear From You

Friday, May 17, 2024

Architectural Digest AD PRO Logo AD PRO Survey Dear AD PRO Reader, AD PRO is nothing without the design community. To ensure we're giving you the best experience, help us by answering this short

165 / Make a song about anything without playing an instrument

Friday, May 17, 2024

Product Disrupt Logo Product Disrupt Half-Monthly May 2024 • Part 1 View in browser Welcome to Issue 165! Last week, I went on a road trip to regions around Milan. I took some time off for vacation and

AI Search, Communal Plot, Shameless AI, Onboarding, AI Hallucination

Friday, May 17, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 15 2024 Google is redesigning its search engine — and

Eye Tracking, Border Radius Advice, Emoji History, Losing Color, CSS Masonry

Friday, May 17, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 16 2024 Apple announces new accessibility features,

The Unvarnished Truth on Project Photos

Friday, May 17, 2024

View in your browser | Update your preferences ADPro Ready, Set, Shoot! Some of the most common questions we hear from members have to do with shooting and styling design projects. What photographer

DeviantArt’s Downfall, Forged Badge, Time-based Animations, Adidas History, Tooling and Feeling

Friday, May 17, 2024

The 5 best design links, every day. Curated by a selection of great editors. Email not displaying properly? View browser version. Sidebar May 17 2024 DeviantArt's Downfall Is Devastating,

[Reminder] UpLabs Shutting Down on June 1st

Tuesday, May 14, 2024

Dear customer, We hope this message finds you well. It is with a heavy heart and, after much deliberation, that we must announce the upcoming closure of UpLabs. Our last day of operation will be June

If you want editors to open your emails...

Tuesday, May 14, 2024

... here's a quick tip to improve your pitch subject lines. A quick ask before we get into it. Our friends over at Proof to Product working on a report to help product folks make better business

Old Decorating Ideas We Wish They’d Bring Back

Tuesday, May 14, 2024

View in your browser | Update your preferences ADPro In AD PRO's newest feature on the potential pendulum swing towards 2000s interior design, AD100 talent Martyn Lawrence Bullard recommends “a