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

Behind the Design of Lauren Santo Domingo’s Ski House

Thursday, November 21, 2024

View in your browser | Update your preferences ADPro Peak Style When it comes to clients, says AD100 designer Andre Mellone, “my biggest nightmare is a person who says, 'Carte blanche, do whatever

2025 Interior Design Trends, Revealed

Wednesday, November 20, 2024

View in your browser | Update your preferences ADPro Image may contain: Furniture, Chair, Interior Design, Indoors, Home Decor, and Rug Inside Our Newest Trend Report “Design, like fashion, tries to

Want a free strategy session with us?

Wednesday, November 20, 2024

Plus, the emails editors open most often. ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

One Simple Thing You Can Do to Retain Your Staff

Tuesday, November 19, 2024

View in your browser | Update your preferences ADPro By my account, it's not fall until I've watched You've Got Mail, Nora Ephron's '90s film adaptation of the 1930s Hungarian play

#483: UX Writing

Tuesday, November 19, 2024

With writing guides, content testing and practical guides for better content design. Issue #483 • Nov 19, 2024 • View in the browser Smashing Newsletter Hej Smashing Friends, Every digital product

Accessibility Weekly #423: Beautiful Focus Outlines

Monday, November 18, 2024

November 18, 2024 • Issue #423 View this issue online or browse the full issue archive. Featured: Beautiful focus outlines "Unfortunately, focus outlines are often overlooked in web design.

175 / Build your ideas without writing any code

Monday, November 18, 2024

Product Disrupt Logo Product Disrupt Half-Monthly Nov 2024 • Part 1 View in browser Welcome to Issue 175 One month ago, I quit my longest-standing job and embarked on a pathless path to let my

Into the Fediverse

Sunday, November 17, 2024

Issue 221: We need decentralized social networks ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏

The Books AD Editors Can’t Put Down Right Now

Friday, November 15, 2024

View in your browser | Update your preferences ADPro Good Reads Here at AD PRO, we're all about celebrating a good coffee table book. With crisp project imagery and behind-the-scenes stories tucked

What astrology has to do with PR?

Wednesday, November 13, 2024

and, no we won't tell you to read your chart! ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏ ͏