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
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
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”
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.