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 "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!"
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. | |
7-days free with GraphicStock! 350,000+ photos, vectors, icons, and more. | | Articles 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.
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 ;)
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.
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.
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).
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.
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
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)
See what everyone on your team is working on in a single glance.
Tutorials 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.
First the mug, now the solution
A couple of lines and voila, perfection!
I love hearing about how different people approach building sites, naming elements and hooking in their JS.
Tools/Resources 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 is a comprehensive list of CSS features and their positions in the process of becoming implemented web standards.
I've been using MAMP for local hosting of my sites, but now I'm going to try out this for local Wordpress development
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 A lovely SVG orientated overview of Ren's trip through New Zealand.
See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment