RWD Weekly #375

Hello again and welcome to week 375 of the RWD Weekly,.

This week we have a look at a new proposal from Jeremy about what to do with AMP, and a look at the rise of Chrome and the issues that it poses to the web.

We have a tonne of Colo(u)r picker tools to choose from thanks to a tweet this week from Brad Frost (thanks Brad, and happy aniversary).

I am also happy to say that there are 5 free tickets/passes to a course on Responsive Design via Scrimba (thank you Per for offering up the prize).

All you have to do is reply to this email and let me know why you want to be one of the five chosen. Winners will be announced (privacy in mind) next week. 

Let’s get linking!

Headline

The Browser Monopoly

Blair looks at the current stronghold that Chrome (Google) has over the browser market, how they got there, and why they’re such a tough force to disrupt. I especially like the ideas around what Firefox could be doing to help challenge this, and I for one will be happy to pay some money for the use of a future Firefox browser to keep Mozilla ticking over.

Article

How Web Content Can Affect Power Usage

Great web performance doesn’t stop with how quick your first paint is or how slim the weight of your page can be. This post goes through some of the key battery drains and shows you tools you can use in-browser to check if your site is underperforming and killing your user’s battery life

Opening up the AMP cache

Jeremy puts forward a proposal on how AMP could become a good thing. It’s not by moving our sites over to AMP specific markup, but instead providing approval for Google to host our already fast sites on their AMP cache and therefore get a spot in the premium SEO spots.

Web Forms: Now You See Them, Now You Don’t!

A great wrap up on Jason Grigsby’s talk at a recent event apart. Although the title is all about forms, the talk focusses in on WebAuthn and how it can help security on websites (without using social logins or reusing passwords, but instead have a physical key).

Bottom Navigation Pattern On Mobile Web Pages: A Better Alternative?

I like the concept behind this and we’ve tested the waters with clients in the past. Unfortunately, we haven’t had anyone take the risk yet (but I’ll keep trying).

Tutorial

Podcast: On writing – Government Digital Service

Writing is such an important part of building websites, after all without the words what is there for people to see? This podcast is great, but if you’re just after a quick list there are the top 10 things to remember when you’re creating content.

How to Accessibly Split Text

I really enjoyed the article on splitting.js a couple weeks back but some accessibility concerns were raised by way of how screen readers interpret them. This follow up is a great tutorial on how you can overcome the issues specifically for this plugin, but also helps provide some understanding around the use of Aria roles.

How DNS works

I love this little (6 episode) comic. Although I was aware of how the requests work for the interwebs to work, whenever I re-discover the process I’m amazed at how complex and quickly these things are done (and then I’m sad about all the un-optimised images that slow everything else down)

Angular Tools for High Performance

I don’t use Angular, but this post comes straight from their very own blog so I’m gonna assume it’s on point. There are four tips for better performance Angular apps, and they’ve even included performance budgets.

Figma Tips To Kick-Start Your Design Workflow

Figma is a collaborative interface design tool which is one of the big four of website design tools used today (Sketch, XD, and Photoshop being the other threre). If you’re using Figma now, or are looking to take if for a spin, then here’s 20 tips to get you from zero to hero.

Faster Image Loading With Embedded Image Previews

While this technique requires the use of javascript to render an image to the page, which I’m not a huge fan of, it does produce a really interesting approach in delivering a quick loading image for your users without having to reproduce smaller sample image files.

Tools & Resources

Frank DeLoupe

Your new color-picking friend on Mac OS X

ColorSnapper

The macOS color picker app for designers & developers which makes it easy to collect, adjust, organize and export colors of any pixel on the screen.

ColorSlurp

ColorSlurp is the ultimate color productivity booster for developers or designers. Pick colors from anywhere on your screen with the magnifier. Create and edit colors using a variety of color selection tools. Copy and import colors into ColorSlurp in any format with one click.

xScope

Measure. Inspect. Test.

Sip

A better way to collect, organize & share your colors.

Contrast

A macOS app for quick access to WCAG color contrast ratios

Accessibility Insights

Extension for Chrome and Microsoft Edge Insider to run accessibility testing on webpages and web applications.

Compress-Or-Die

JPG/JPEG/PNG/GIF/WebP compression to the smallest file size possible

Chart.xkcd

Chart.xkcd is a chart library plots “sketchy”, “cartoony” or “hand-drawn” styled charts


Finally

Pinterest to direct vaccine searches to health sites

I think this is wonderful. In a time where social networks are almost entirely evil, we see Pinterest driving traffic towards sites like WHO to avoid misinformation about vaccines.

Sorry not Sorry

A great little experiment using variable fonts

That’s all for this week, see you again next Friday.

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.