Copy
All things responsive, all of the time. (View in browser.)
It might not look that pretty, but the content is there and it's responsive

Welcome RWD Weekly #228


Welcome to another week of responsive goodness. This week we're taking a look at some of the approaches used for the 10k apart site — and if you're going to enter then today is the final day so be fast. I take exception to a new move from Googles AMP implementation and there are a number of real-world examples for you to take heed and learn from.

The "design" part of the RWD Redesign site hasn't started to take shape yet however all of the news items and examples section has been migrated and by the time you read this there should be a few more sections there also (albeit HTML only). I tell a lie actually, I've dropped in the two font faces that are being used. For those of you that want to keep an eye on what really matters, I have set up a private view of the Speedcurve report monitoring of the site. By the time you are reading this you should see the first compromise on the performance budget as I dropped in the two fonts to be used today.

This week the "The Snippet Show" goes back to basics with the snippet that every one of you should have in your HTML document... and the exact same one as this as well. This is what tells all our browsers on all our devices to set the viewport to be the same width of the current device, and to also set the initial scale to 1 (not scaled at all). This essentially allows us to have responsive design consistently.
 
<meta name='viewport' content="width=device-width, initial-scale=1">

Sometimes you will come across examples that set maximum-scale=1 or user-scalable=no which disables the zoom function on the device... a big no no in nearly all cases. For a more comprehensive overview see the MDN Article.

Okay, let's get linking.
 

Headline

Building in 10k: Svelte JavaScript Enhancements

An epic post from Aaron Gustafson showcasing the work that went into building the 10k Apart site. Lots of details on how the javascript was approached to keep the site accessible without it (and ultra-fast) and helpful with it.
 

Building in 10k: Compilation, Optimization, and Compression

Two headlines in the same week... well it's deserved. For anyone that is looking to get some advice on how to setup Grunt/Gulp to help with your front end build workflow then Aaron helps you here with some great best practices. That along with other things like preparing your images (a technique I thought I wrote about quite early, but unsurprisingly Jeremy Keith seems to have done so even earlier) makes this the week's must read.
 
Our Sponsor
Adobe Dreamweaver CC Logo

First look at the future of Adobe Dreamweaver CC


Dreamweaver is in the midst of a major renaissance, to become the best tool for today’s web developer. Learn more about what’s coming and get your hands on an early first look.

Articles

Web font optimization

A great overview of web font optimisation from the team at Google, specifically Ilya Grigorik. The article is full or great tips with plenty of TL;DR's if you just want to skim through.
 

Google: AMP will override app deep links for the foreseeable future

This is another reason why I'm dubious about the approach of AMP from Google. On one hand, I think staying on the web is the right thing to do, but that is a choice that the publisher makes when they either provide a web-only version of their site (through a progressive web app I suppose) or decide to deliver a native app. If they chose a native app they that choice should be respected and traffic should be deep linked through there. What would happen if there's a progressive web version, native app version and AMP indexed version? I can only assume it gets the web version first, however, there's nothing stopping Google from pushing the AMP version ahead of it as well.
 

Automating Art Direction With The Responsive Image Breakpoints Generator

I'm seeing more and more articles about Cloudinary of late and I'm excited to learn that Eric Portis is actually working as their developer evangelist. If he's involved with it then you know it's going to be an awesome tool.
 

Musings on Pattern Libraries after 3 years

When it comes to pattern libraries, be prepared for differences in opinion and weirdness in dealing with layout, and remember that documentation is the most important part of your product.
 

Faster and More Accessible: The New digitalocean.com

I recently spun up a new server on Digital Ocean and noticed the interface was much nicer than the last time I did it, here's a look at what has changed.
 

The iOS Safari menu bar is hostile to web apps: discuss

Are you frustrated with the iOS menu bar at the bottom of your sites/pwa's? Ben certainly is.
 

Tutorials

Responsive Web Design Footer with HTML, CSS, and JQuery Code Examples

 

Building Social: A Case Study On Progressive Enhancement

There are a lot of articles about the benefits of progressive enhancement, but I love it when someone takes a practical example and write an overview of how they went about progressively enhancing it. Real life situations are always a lot better than hypothetical ones.
 

Grid layout is a much needed step-change for CSS

We're going to be seeing more and more grid tutorials over the next few months. It feels like Flexbox is the thing to use right now and Grid is 12-18 months away from being in the same place.... now is the time to learn it.
 

Offline content with service workers

A step by step guide to getting up and running with Service Workers

Tools & Presentations

 

CSS4 Grid: True Layout Finally Arrives (Jen Kramer)

A presentation from Jen Kramer all about floats, flexbox and grids.
 

Modern CSS and interactive email

You'll be amazed at how much more interactive you can make something as simple as an email using these techniques. Certainly worth a watch... and watch out for someone of them possibly coming to this email too!
 

Refactoring CSS Without Losing Your Mind

Some really great tips and tricks from Harry Roberts on the concepts around replacing or refactoring your CSS and some practical code that will help you get there.
 

JavaScript for Web Designers

I'm already through the first two chapters of this book and I can say that this is one of the better "getting started with JS" books that I've read. Another terrific title from the A Book Apart team.
 

Finally


That's all for this week, happy reading!
 
See you next week!

Cheers,
 
Justin.
Copyright © 2016 Simple Things, All rights reserved.


unsubscribe from this list    update subscription preferences 

Email Marketing Powered by Mailchimp