Hey everyone and welcome to another bumper edition of the Responsive Design Weekly newsletter packed full of super useful articles, tutorials and tools ready to help you with all your front-end needs.
This week our feature image comes from Pixel Pioneers and is a lovely little playful site that makes use of some lovely animations as you scroll through the details. Their next conference is coming up on 16 November in Belfast and will see the likes of Chistopher Murphy, Harry Roberts, Una Kravets and many more dazzling the stage.
Let's get to those links. | | Headline I'm doing a lot of experimenting and reading on Grid Layout at the moment so it's good to see article after article coming through from either of the experts, Jen Simmons or, in this case, Rachel Andrew.
Mozilla provide a great overview of the Grid Layout taking you from basics right the way through to named grid lines. The Firefox Dev tools in the FF Developer or Nightly edition is simply amazing and a must if you're going to be getting started in developing Grid. | | | JotForm 4.0 is the first form builder that allows you to publish responsive online forms using any device: smartphone, desktop, or tablet. Whether you want to sign up new email subscribers, register guests for an event, or take product orders, JotForm allows you to design the perfect form for your needs. Learn more. | | Articles BBC are experimenting (along with some other news outlets) with how stories can be consumed across the web. Does it always need to be in a simple tube of content?
Rather than putting all of your content into a giant Blog of a WYWIWYG you should always try and segment that content into blocks/chunks of content. Chris takes a look at how a bunch of different CMS handle this, and there's more in the comments.
Seeing as we're talking about PWA for an ecommerce lets talk about why it's important.... performance! There's a lot of things that we can work on when it comes to performance that do not require PWA's, it relies on knowing where the real issues are.
A nice little project that will be made available on github once complete that will be building a VUE based PWA that connects to Magento. With BackPocket Notebooks being one of my non-digital side projects I'm really keen for an offline/PWA however at the moment I'm bound by what Shopify offers.
"If you are embarking on any responsive design project, or frankly any design project, I think that coming back around to the people who are going to be using this product or this experience is incredibly important." Fine words from Sara in her podcast with Ethan Marcotte and Karen McGrane
Tutorials A great set of tasks that you can do with your Wordpress site without knowing any code to get your page load times down.
Keep your JavaScript dependencies and polyfills in check and find out what exactly makes your code bloat with Size Limit.
I've been looking at clipping paths and trying to get some cool movie post effects, but this logo colour change from light to dark is just beautiful.
What are your users actually thinking? Learn how to build an effective user testing plan and get actionable insights fast. [Free Guide]
// sponsor
Resource As I prepare for the Adobe Max conference (in three weeks time - oh crap) I'm chipping away at their site and making improvements. These improvements are on a secondary site as I wasn't able to update the live one, but this image analysis tool from Cloudinary was a great way to see just how much could be optimised in one areas. Here's the original and here's the one I'm working on.
Sending images that are too big can damage site speed. This Chrome Plugin tool scans a whole page to identify all images and highlights those that are sent at the wrong size.
Swiper - is the free and most modern mobile touch slider with hardware accelerated transitions and amazing native behavior.
This enhancement in chrome will allow you to see what JS and CSS is being used on the current page allowing you to look for improvements to what is rendered on the page.
Design system utilities for styled-components, glamorous, and other css-in-js libraries
Codepen A great magazine based layout in Codepen using the CSS Grid Layout and some large typography.
Finally
That's it for this week. See you next week!
Cheers,
Justin. | | | |
No comments:
Post a Comment