RWD Weekly #266
Happy Friday!
Happy 4th July to all of the USA readers on the list this week, and a very happy birthday this week to Mr Ethan Marcotte who you might remember from such classics as “Fluid Grids“, “Fluid Images“, and the lesser-known “Responsive Web Design“.
Headline
You do not need a CSS Grid based Grid System
“Grid is a grid system. It allows you to define columns and rows in your CSS, without needing to define them in markup. You don’t need a tool that helps you make it look like you have a grid, you actually have a grid!”
Grid layout, grid layout everywhere!
There are a tonne of great guides out there that go in depth with CSS grid layout. So let’s do something different and have a quick look at some major concepts. And hopefully, you will get a good idea of what you’re dealing with before you start fiddling with all the new properties.
Sponsor
FREE 7 Day Trial with Graphic Stock
7-days free with GraphicStock! 350,000+ photos, vectors, icons, and more.
Articles
Is it really safe to start using CSS Grid Layout?
But Rachel, creating fallbacks for CSS Grid means that I’m writing the same layout twice!
This is only true if you are labouring under the assumption that websites need to look the same in all browsers. Guess what? They don’t.
Experimenting with the background fetch API
Phil Nash takes a look at the Background Fetch API. Essentially the API is there to allow for the upload or download of large files while still allowing the user to continue with their journey on your site or app. There’s more to it, but I’ll let Phil tell you the rest ;)
Persistent Storage API: Building for the offline web
While we’re on the API train this week we’re also taking a look at an article from Dean Hume about the persistent storage API. If your PWA passes at least one test (bookmarked, high engagement, added to the home screen, push notifications) then you can permanently store data on the device, even when cache is cleared.
TransferWise Rate Tracker progressive web app
As some of you might know I’m an Australian living in the UK and over the years I’ve moved between the two countries a few times. With this comes the need to exchange (and lose) money where I’ve used TransferWise… so I was excited to see that they have developed a PWA that will alert you to updates in transfer rates. Native app, not needed.
Why your design team should consider switching to Figma
I’m seeing more and more articles about going to Figma especially as a tool to showcase interactivity between screens (kinda like the big benefit of Adobe XD).
How to enhance mobile interactions with sound design
sound designers bring context to your world, and use the sonic realm to do it. The sounds you hear while you experience other sensory input play a large part in how you interpret reality.
Adventures in conversational interface: designing for the Amazon Echo
When planning out a conversational interface, not via a screen (like a bot), do you require a different approach? Well no, the approach is still setting goals, stepping out a user journey and testing… it’s just the constraints are different
Booking.com — UX Analysis and Responsive Redesign
A detailed breakdown of the approach to improve the booking.com site in an effort to make it easier to use (i.e. be more like AirBnB)
Project management is better when it’s visual //Sponsor
See what everyone on your team is working on in a single glance.
Tutorials
What’s the Deal with Collapsible Margins?
The other day I was explaining, poorly, to our digital designer about collapsible margins when it comes to the elements in some designs that we were handing off to be built. THANKFULLY I had this to refer her to so that it did a much better job than I did.
CSS is Awesome
First the mug, now the solution
Flexbox & CSS Grid work👌together
A couple of lines and voila, perfection!
My approach on using id, class and data attributes in HTML, CSS and JavaScript
I love hearing about how different people approach building sites, naming elements and hooking in their JS.
Tools/Resources
Image Checker Chrome Extension
The image checker Chrome Extension will instantly show you if the images on a page are sent at the correct size. Further information such as the time taken to download the image and the image file size is displayed when available.
CSS Database
CSS Database is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
Local by Flywheel
I’ve been using MAMP for local hosting of my sites, but now I’m going to try out this for local WordPress development
Test Your Mobile Website Speed and Performance
Use this tool to find out how many of your users are likely to abandon your site while they wait for it to load. It tests using a standard 3G connection to replicate the delays that most people will have when accessing your site, and give you the option to be sent a report. It turns out I could reduce load time by ~3s from a 4s load time (on a pocket notebook Shopify store).
Codepen of the week
New Zealand Visual Itinerary
A lovely SVG orientated overview of Ren’s trip through New Zealand.
See you next week!
Cheers,
Justin.
