Hello again and welcome to this week's responsive design weekly newsletter.
There was an interesting article this week from Ethan Marcotte (see the headlines).
Ethan talks about the cost of performance in our modern day websites, and how we have identified this as an issue with the way the websites have been developed. They have been poor implementations and we seek to find ways to improve them post launch (as does the FT Product Technology team in the article "One line of Javascript made the FT.com 10 times slower"... how could you not click on that title).
This is a great approach because we're finding a problem, fixing it, and hopefully then sharing those learning with the rest of the community to hopefully avoid those mistakes in the future which then allows me to bring you wonderful tutorials.
Ethan's point, I think, is that we need to be thinking in broader terms. Rather than looking at the performance, we need to instead address why we need all of that JavaScript and bloat there in the first place.
This is a great thought and it comes down to one thing: how the heck do we monetise the things that we build on the web without jeopardising performance or privacy. I think Smashing Magazine has done a good job around that with their membership, and as they've just racked up 1000 paying members I encourage you to head over and start moving them towards the next milestone.
Let's get linking.
Headline The first chapter in the latest book from A Book Apart, Flexible Typesetting.
The way we talk about slow websites needs to be much, much broader. If we can do that, then we'll have a sharper understanding of where—and how—the web can be faster.
| | A .design domain name lets people know (especially your clients or future employers) what you do before they even arrive to your website. Unlike .com or .net, .design is a more relevant domain name for designers. And it helps with your branding. Your .design domain comes with free email hosting, SSL Security & a Site Builder.
Take Me To My FREE .Design Domain Name! | | Articles We know PWA's are a good thing, and we know that they're a progressive web app... what what does that really mean. What really constitutes as a PWA? Amberley tells us while flying at 30,000ft with no internet connection
Due to a slower internet connection and a helpful 'man in the middle' to improve caching for users of the slow internet connection, websites just won't load in a reasonable amount of time over https. This doesn't mean we should go insecure, but instead implement things like services workers to ensure it's not an ongoing issue.
Along with the usual performance metrics you can get out of SpeedCurve they have introduced a checklist that you can work through to improve your site's performance. It uses the tests pulled through Lighthouse and PageSpeed and allows you to order them by impact score or the number of URL's that are affected.
A great review of the Atlantic rebuild and how they made it fast, really fast. By lazy loading, prioritising loading, preloading, and including a service worker they made it super fast!
This is a great article all about the outliers and how we need to be doing a better job at building out sites that will address everyone.
The times is bringing a new homepage to it's website for the first time (really) since 2008.
Story telling on the web, a lovely example of how we can enhance a story through all the things that the web provides us.
Finding your next tech job doesn't need to feel like a full-time job. Flip the job search script with Indeed Prime. Share your background and skills once and top companies apply to you with upfront salary info and interview requests. Now you can find the right fit - faster.
// Sponsor
Tutorials
This is a great approach when you've got navigation that you want persistent for the current page content, kinda of like you've expect to find in documentation.
In another site we're working on at the moment we've also included this feature. The ability to show as much navigation as possible given the viewport, and collapse as you lose space.
I'm in the middle of a large website build that is making use of cropping techniques to reuse the same image across a number of different areas. The Sanity.io image crop based on a focal point looks _really_ interesting
Rachel Andrew takes you through the basics to understand exactly what happens when you create a flexbox container. By coming to grips with how elements behave you get a great foundation, and building upon that is much easier when you know it starts.
Tools & Resources
lazysizes include extension/plugin asynchronously include non crucial content, styles or JS modules. Due to lazyloading, prioritized queuing and preload after load techniques lazySizes include extension scales much better than similar other solutions.
webhint is a linting tool that will help you with your site's accessibility, speed, security and more, by checking your code for best practices and common errors. Use the online scanner or the CLI to start checking your site for errors.
A tiny service worker script to change image quality dependent on connection type (2G, 3G, etc)
| |
Thanks to those that suggested some of the links for this week, if you have come across something that you found interesting, or have written yourself, hit reply and let me know.
Cheers,
Justin. | | | |
No comments:
Post a Comment