RWD Weekly #265

Welcome to RWD Weekly edition #265, can you believe we’ve reached the 1/2 way point of 2017 already? Where on Earth does the time go?

This week our feature site is searchingforsyria.org. I shared this on my social channels as well along with “From a web design point of view, this is an amazing website. From a human point of view, this is a story you absolutely must read.”

Headline

ZURB – Foundation 6.4 Has Arrived!

Foundation 6.4.0 has been released this week and it has a new style grid. You can now control it vertically (X) as well as vertically (Y).

Foundation 6.4 includes a brand new, super powerful default grid called the XY Grid. This is a truly 2-dimensional grid, giving you all sorts of control over the way things are laid out vertically as well as horizontally. Imagine all the crazy cool layouts you can do with CSS Grid but built on Flexbox so that it’s actually usable in all browser production environments today!

Sponsor

Responsive Design Notebooks — 25% discount

The three tenets of Responsive Web Design can now sit comfortably in your back pocket. These notebooks are perfect for sketching quick layout ideas and, of course, explaining what RWD is to clients and colleagues.

Use code RWDWEEKLY for 25% off!

Get your RWD Notebook with code `RWDWEEKLY`

Articles

Bootstrap to CSS Grid

Go forth and be Griddy!

The reduced motion query at a glance

We’ve talked about reduced motion query in a previous snippet show but Val Head is the animation expert and has a few thoughts herself.

Why Are App Install Banners Still A Thing?

Suuuch a good article that covers all of the preoccupations with Apps over just creating a website (as a progressive web app of course). This covers off a tonne of stuff that just never occurs to me because I’m not in the “App acquiring users/engagement” business. At the end of the day I think a Native App and download banner is the wrong long-term approach, but at least I’m better versed in some of the rationales behind some client requests.

The $1,000 Podcasting Setup

Chris Coyier from CSS Tricks, Code Pen and the Shop Talk Show is looking to upgrade his podcasting equipment after several years of delivering quality shows. Chris has gone from a Rode Podcaster, which is what I use, to a much better setup for not an overly large amount of money.

Championing Accessibility at the Guardian

In preparation for Global Accessibility Awareness Day, the Guardian Accessibility Working Group decided to run a workshop for their colleagues. This is a great idea, you should totally do the same thing at your own work!

Any web site can become a PWA – but we need to do better

Christian tries to set the record straight on some of his comments around not making personal blogs into Progressive Web Apps.

I decided to disable AMP on my site

This is, apparently, the last post from Alex on AMP. I think he’s got one more in him when he realises that all of his content is going to remain on the Google AMP cache indefinitely and he finds it difficult to get it removed… who’s taking bets? (I’m only poking fun, I’ve really enjoyed the story Alex has been telling around AMP)

Naming Progressive Web Apps

“A rose by any other name would smell as sweet”… forget the name and take advantage of progressively making your web things better.

What I learned from Apple rejecting me for a scholarship to the WWDC

I love this article because I get my share of rejection letters. Most often it’s talks that don’t quite hit the mark but the process you follow to get to the point of submitting the talk is an invaluable lesson (as is the feedback from the conference organiser if you can get it).

Is Web Development Dead?

Free .design domain name //Sponsor

Get your very own .design domain name and impress your friends (or more likely your mom). If you’re thinking about grabbing responsive.design you’re too late ;)

Tutorials

Service Worker gotchas

Myself and some old colleagues are working on some PWA side projects at the moment and I am coming up against a few unexpected issues as I go through. This list contains a few of the issues I’ve been facing and ways to fix them, I hope it helps you too.

Unique Pairs in Sass

Chris uses a Sass loop to go through a Sass map and produce a set of CSS declarations in a DRY kind of way. It’s not until I read posts like this that I realise I’m only dipping my toe into the pool that is Sass and preprocessing.

Stickybits: an alternative to `position: sticky` polyfills

I really like the design impact of the position: sticky on long scrolling pages. Stickybits is JS utility that will help you keep the design implementation working cross browsers

Sticky headers (#1/3)

Remy has been looking at sticky headers for his new conference website and takes us through the journey of getting to something that works great. A perfect companion to one of our tools this week, PART 2, PART 3.

Cropping Images in CSS With object-fit

Ever wanted an image to fit exactly into a certain given dimension, but while keeping its aspect ratio and avoid having a squished image? Well, the problem is no more with the object-fit property!

Tools/Resources

User Interface / Responsive UI

I kinda like Audi’s Responsive UI Guidelines

Mixfont Shadows

I’ve been loving these font shadow effects all week and trying them out of a variety of online posters. The best thing is that you just grab the CSS right from the example, woot!

Stickybits

Stickybits is a lightweight (<2KB) alternative to position: sticky polyfills that works perfectly for things like sticky headers. THIS IS NOT A POLYFILL, that requires too much code…. but it has all the best bits.

Less-Grid-Boilerplate

I’m torn on this one, and here’s why. On hand — kudos to Joe for trying out CSS Grid and getting to grips with how it operates to create a grid structure, and for packaging something and providing it on Github. Amazing work. On the other hand — the whole thing about CSS Grid is that we don’t need a boilerplate to use it…. it’s its own boilerplate. Rather than use this I encourage you to see how JOe has put it together, say thanks, and then use what you’ve learned to apply CSS Grid to your own projects.

See you next week!

Cheers,

Justin.