RWD Weekly #268 — Grid systems in graphic design rebuilt using CSS Grid

This week we look at container queries, PWA;s, HTTP2, and some new email design trends

View this email in your browser Hello.   This week I'm starting to put together a talk that I'm going to deliver in October. The talk is about responsive design in the future and one of the areas I'm going to be covering is what you can do with CSS Grids. To prepare I'm putting together a few examples of how easy it is to build out grid based layouts like the one in our feature image this week. On the left is an image of the book and on the right is the web based version (screenshot in Firefox with the Grid overlay turned on).   Headline Designing The Perfect Slider If you think you know about sliders then you'll fall into one of two kinds of people: 1) people who don't know everything about sliders; 2) People who have read this article.   WebVR Showroom: A Look Into the Future of Product Presentation For me, the massive downside of WebVR at the moment is the terrible quality in the images that you get. If you look at the same video/vr experience but in a 16x9 window on your retina screen it looks amazing, but as soon as you put on a set of Google Cardboard and use your phone (and let's face it that's as good an experience 75% of people are going to have) then the quality drops.  It's great for creating empathy with a user in a certain situation, but to actually look at the quality of something I think it'll do more harm than good for now. Of course, I wouldn't let that stop you from getting into this now, it doesn't take all that much effort to put these things together and while it's a bit grainy now, 6-12 months who knows how it will look. Sponsor Project management tools are obsolete Dapulse is the next generation of visual tools, built for designers and developers. See what everyone on your team is working on in a single glance. Start your free trial now   Start your free trial now → Articles Container queries Jeremy writes about container queries and the chance that maybe... just maybe... something like Houdini could polyfill the container queries we're all so desperate for.   The Newest Email Design Trends of 2017 So let me know, which of these trends would you like to see implemented for next week?   URLs are UI I love a good URL, and you should too.   Taking care of business on GOV.UK A great article on how the GDS is approaching reducing content pages to make it easier for people to achieve their goals.   Musings on HTTP/2 and Bundling With HTTP2 we send more but smaller files down the pipe, but is this the best approach?   This website now uses Grid Layout An overview from Hidde as he moves his blog layout across to Grid.   How to turn your website into a PWA A quick overview from Max on bringing your site up to PWA status. Max takes us through the Manifest file, moving to HTTPS, and implementing the Service Worker.   You're Offline .... and off the back of the introductory article on PWA's Max steps it up a gear and shows us how we can notify the user that they're offline. This is great to do to make the user aware that the content they are viewing might have been updated, or to give them a list of content that is already in cache so they know what they can view.   Tutorials Monitoring User Experience Through Product Usage Metrics At a meetup the other day someone asked how they could go about getting clients to invest more in improving their site once it had gone live. I spoke about using HotJar to look at user journeys to provide data behind where issues might be, but this article goes into way more detail about how to align the metrics you're looking at, and a bunch of example metrics as well.   Advanced SCSS, or, 16 cool things you may not have known your stylesheets could do 16 cool things you may not have known your stylesheets could do. I'd rather have kept it to a nice round number like 10, but they just kept coming. Sorry.   Take your ideas with you, send them anywhere Save your files in pCloud and access all your data at your fingertips. Enjoy multiple file sharing options with your team with pCloud's unbreakable security. // sponsored post   Tools/Resources poofquery Proof of concept for container queries from Eric Portis.   Dimmy.club Device mockup generator for your screenshots   That's all for this week ladies and gentlemen, next week I'll have few more responsive CSS Grid based layouts and some learnings from there. Have a great weekend and I'll see you next Friday! Cheers, Justin. Copyright © 2017 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 Studio 1, Make Space Studios London, London SE17DR 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