Friday, July 28, 2017

RWD Weekly #269 — Grid fallbacks, Design Versioning, Web Performance, Responsive Typography and more

View this email in your browser
Lehigh Font Site in 4 viewports

Hello.  


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
Project management tools are obsolete

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, and annotatable." 

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.
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

Email Marketing Powered by MailChimp

No comments:

Post a Comment