Responsive Design Weekly #93

MediaTemple goes responsive

Hello and welcome to edition #93 of responsive design weekly.  This week the email is coming to you from a tiny little village in the Cotswolds in English countryside as I take some time out from work to do a little wedding planning with Laura.

Our responsive image this week comes from SparkBox who have launched their new website design and it’s super nice. Ben Callahan — a guest interviewee in this newsletter — is president of SparkBox and has detailed the rebuild for everyone to see.

Before we get into the links I wanted to point out a new weekly newsletter, Sass news. The first edition of Sass News went out this week and is brought to you from one of our favourite contributors and interviewee’s, Stu Robson. Whether you’re getting started with Sass or are a seasoned pro looking for the latest this will have something for you.

Headlines

So, You’re Writing A Responsive Images Script

While the original meaning of responsive images, img{max-width: 100%;}, was a simple theory to grasp we are now aligning the definition with dynamically serving the most appropriate image based on the viewport. Mat from Filament Group explains the work they’ve already done for PictureFill and the pitfalls you need to watch out for if you’re working on your own flavour of RWD image scripts.

Festival of Responsive Web Design in Sydney on February 4-5

Two days of learning, connecting and inspiration with Ethan Marcotte, Brad Frost and Jason Grigsby.
• Masterclass, Feb 4: dive deep into atomic design and responsive patterns with Brad Frost.
• Conference, Feb 5: a full day with the experts on all things responsive design and development.

Just $549 for either day with the code RDWEEKLY

Articles

width=device-width, initial-scale, and too-wide elements

Do you know the difference between device-width and initial-scale? Do you know what happens when you use one or the other, or if you use both? Quirksmode set out to check the intended behaviour of each 3 combinations against a range of current browsers and the results were somewhat inconsistent.

Marcel Gordon on Responsive Web Design

Product Manager Marcel Gordon from Google explains why Google prefers responsive design.

A Blast from the past

Guess who was talking about “resolution dependent layout scripts” way back in 2006?

Tutorial

Getting started with gulp

Step aside Grunt, there’s a new kid in town. In this tutorial Mark explains the differences between Grunt and Gulp before showing you how to compile sass, autoprefix and minify, image compression and LiveReloading.

Better Responsive Images With the <picture> Element

This tutorial demonstrates how to create responsive images on your site using the newly drafted <picture> element proposal. It covers the needs, the idea behind this approach, details of the approach and the browser support (spoiler, it’s not supported anywhere). Fortunately there is PictureFill, a pollyfill for it.

SVG Icons FTW

I bookmarked this for sharing way back at the beginning of December of last year but for some reason I kept skipping it each week. As this is a tutorial focussed week I thought it was finally time to run it again as SVG and performance continue their drive into the limelight.

Tracking Events Responsively With The New Google Analytics

In this new section I wanted to try and catch some work arounds or tips and tricks that help you with your responsive design.
This one is about capturing the width of the viewport through Google Analytics. Basically GA will only track the device width. This is fine for tablet and phone because it’s rare (or is it even possible at all) to change the width of the browser other than full screen. With laptops and monitors though you can change the width based on your particular setup. This tip will allow you to track the width of the browser, rather than just the device.

Resource / Tools

Designing with Progressive Enhancement

Filament group have produced a resource that contains a detailed exploration of examples that will teach you—whether you’re a designer or a developer—how, where, and when to implement the specific coding and scripting approaches that embody progressive enhancement.

Responsive Measures

Reading is one of the most basic things we do on the web. CSS gives us control over font-size and line-height but we don’t have a good way to control the measure. Until now.


TIP OF THE WEEK: Gzip your files

To test whether you’re already utilising gzip you can run your site through Google Page Speed or Web Page Test.  In the Google Page Speed reports you can find a tab called “Enable Compression” which will list any files that you are not compressing. If there’s something here, the chances are you’re not enabling compression. For my own site there were 3 files uncompressed which, if compressed, would reduce the load by 74.7KiB (a 63% reduction in the file size). Compression reduces response times by reducing the size of the HTTP response. Gzip is the most popular and effective compression method currently available and generally reduces the response size by about 70%.

There are several methods for enabling gzip for your site but for most of you adding a rule to your .htaccess file will be the easiest approach. This article will show you the exact code snippet you need and how to test to see if it’s working.


I’ve gone with another introduction podcast this week after some good feedback from the last one. Unfortunately this week I had to rely on the laptop microphone so it’s a little bit echo-y. Anyone have any suggestions for a podcast microphone setup?

Until next week!

Responsive Design Ebook

A collection of interviews, tips, tricks and some responsive sketch pages in one easy to download file.

Learn from more than 26 leading responsive design experts across more than 80 pages for the price of an expensive coffee. Or, think of it like buying me a beer to say thanks for sending you a newsletter each week…. plus you’ll learn tons too.

Buy Now for just $6.99

Leave a Reply

XHTML: You can use these tags: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <s> <strike> <strong>