Welcome to RWD Weekly edition #264.
I’ve featured articles from Alex previously around the AMP argument, and this time around he’s making even more sense. It would be great to have the option to switch AMP off… after all Google are trying to improve the User Experience with this approach, so if the improved user experience is not using AMP then let the masses have the opportunity.
Last week I talked about making a move over to Firefox for more of my day to day browsing but staying in Chrome for the development work. With each release FF Nightly has some increasingly amazing tools in the dev toolbox, and while Chrome is still my favourite for performance reviews these updates make Firefox the best browser to get to terms with and understand Grid layout
The three tenets of Responsive Web Design can now sit comfortably in your back pocket. These notebooks are perfect for sketching quick layout ideas and, of course, explaining what RWD is to clients and colleagues.
Use code RWDWEEKLY for 25% off!
With the latest version of Sketch (v.44), the group resizing feature has been updated. Even though there is no fundamental change, we have a little bit more control over the feature now.
Tracking the performance of your site or app can be as simple as looking at the page load time, but, that doesn’t tell the full picture about what is going on. You should be monitoring a number of factors to properly understand your users’ experience.
An overview of the new sidebar design (our site of the week) from the designer himself, Sacha Greif.
Developing a user story map will help you focus your projects requirements and get everyone working towards the key goals of your users.
Vitally looks at a number of best practice accordions on a variety of different sites from travel, email, pricing and e-commerce. A great source of inspiration if you’re looking at this issue at the moment.
Bram looks at a number of different approaches to create aspect ratios in CSS before closing with the hint that we could see something like height: aspect-ratio(16/9) which will allow you to calculate the height based upon the width.
Learn from customers faster with NomNom //Sponsor
Get all your customer feedback and user research in one place.
CSS Variables (also known as Custom Properties) are now supported in all modern browsers and people are starting to use them production. This is great but they’re different from variables in preprocessors, this article looks at how they can be more powerful.
An (almost) hour long chat screencast between Eric Portis and Chris Coyier about responsive images. There’s a big focus on the Cloudinary tool in here as well, something which I started using and need to get back to shortly.
This is a classic issue that occurs when things move from static photoshop designs and into production websites — the perfectly written ‘design’ copy is updated to real titles and real peoples names. These tips will ensure your designs handle any web copy.
This is a great example of how to create variable responsive font sizes using CSS Variables and calc.
One of my biggest bug bears with tools like React is the lack of HTML that comes down the wire on the page load… i.e. <div id=”app”></div> can be all you get sometimes. There is a way to enable server side rendering.
I remember being impressed when the Guardian included a crossword as their offline page with service workers, but this crossword in CSS is taking it to the next level. Very cool.
Optimizing images can significantly improve Web page load time, resulting in improved user retention and satisfaction. This tool provides measurable and actionable information about how to go beyond simple compression: discover how changes to image size, format selection, quality and encoding can dramatically improve page load speed.
Syncope is a WYSIWYG tool that helps web designers and developers chose the optimal vertical rhythm of the typography for their web pages.
If you’re looking to include <picture> element to provide different image types then WebP is a great option to include. This online tool helps you convert your existing PNG or JPG over to WebP
Presentations & Podcasts
I love this animated gif showing the progressive enhancement options we have when it comes to using VR. While it’s great to put Google Day Dream on with a phone the same content can be consumed on the desktop or tablet as well as the phone without a headset.
A great talk by Lara Hogan on web performance from Webstock 2017.
The style guide podcast is back for another season with hosts Anna and Brad discussing how things have evolved.
I’ve said it before and I’ll say it again… I love MailChimp! If you’re looking for your first position in the industry then why not throw your hat in the ring as a software engineer intern this fall?
See you next week!