RWD Weekly #269
Grid fallbacks, Design Versioning, Web Performance, Responsive Typography and more
This week I’ve been working on a friends course website that is helping people with their current financial situation. It’s been fun because I don’t get to build much these days and I’m using some of the Flex and Grid examples I’ve been putting together as part of the project.
I’ve started using Brad & Ian’s workflow (see Ian’s article below) and as soon as I send this I’m going to be firing up Typecast and start doing some font pairings…. and I’m sure to use Lehigh (this week’s feature image) as one of the pairings.
Sponsor
WP Migrate DB Pro — 20% off
WP Migrate DB Pro is literally the best plugin available for WordPress for anyone that wants to do some local development or content creation. I use it for writing content on trains and plans with patchy wifi and it’s so worth the money it’s not funny. Take advantage of this deal today.
Get 20% off any purchase today.
Articles
Measuring web performance; it’s really quite simple
Should you measure load time? Responsiveness to user inputs? Page-to-page navigation? Do you do this for users in the Democratic Republic of the Congo, or Silicon Valley? Fiber, 4G, loon? On a Moto G4 or an iPhone 7? And which browser — one that supports preload and HTTP/2, or something a little more retro?
This article will have you focus on what matters for your site and provide a little clarity around performance measurement.
Web Publications for the Open Web Platform
“Web publications can be packaged and they can be portable. Web publications work online or offline. Web publications can be accessible, linkable, andannotatable.”
This is an Interest Group Note from May of this year and discusses how we can make books something on the web. We already have several examples of books online, a briefer history of time, atomic design, Resilient web design – it would be great to see a consistent way to create more of the same sites.
Design Versioning
Versioning for designs? Surely you can’t be serious! I am serious, and stop calling me Shirly.
What’s New for Shopify Theme Developers in 2017
As someone who’s lucky(?) enough to work on Shopify themes for the Pocket Notebook site I’m happy to see a few of these updates, specifically around the page sections and improved handling of the images.
Best Practices for Homepage Links on websites
A site logo linking to the homepage is not enough. Logo design and placement, as well as the presence of a text link to the homepage affect success of navigation to homepage.
2 Frontend Designers. 12 Days. 1 Website. How We Did It
Ian talks through how he and his brother delivered a website in just 12 days. IA, Atomic Design, 20s Gut Tests…. there’s so much RIGHT with this approach and in only 12 days is impressive.
Tutorials
A beginner’s guide to Service Workers
There’s no such thing as too many beginner articles on doing something so important as setting up service workers.
Why display: contents is not CSS Grid Layout subgrid
Rachel explains what display:contents does and the times when you might want to use it. As you can probably tell from the title, it isn’t a solution for the CSS subgrid.
Progressively Enhancing CSS Layout: From Floats To Flexbox To Grid
A look at how to start a layout with floats before moving to Flexbox and then on to Grid. Me, well I’m working on a small project at the moment which has not floats in it at all, but then if you’re supporting back to IE9 you might find this incredibly helpful.
Using viewport units to scale fixed layouts
This starts using vw units at the HTML level to ensure that the width of the viewport makes the base of the font-size but then really steps it up to some interesting layouts.
A Collection of Interesting Facts about CSS Grid Layout
What do you learn when you attend a CSS Grid Workshop? A lot of things it seems.
Using CSS to detect and counting Prime Numbers
It’s not a solution you need to find every day, but CSS is pretty damn awesome to be able to achieve this.
What would you like to learn about?
Take part in the 2017 Professional Development Survey and as a bonus get any Udemy course you want for only $15.
// sponsored
Resources & Codepens
Fitty
Snugly resizes text to fit its parent container.
Codepen LEGO Loader
Codepen Responsive House
That’s all for this week ladies and gentlemen — if you’ve written an article recently or been working on something exciting let me know so I can share with everyone.
Have a great weekend and I’ll see you next Friday!
Cheers,
Justin.
