Responsive Design Weekly #44

Hello and welcome to this weeks responsive newsletter.

Mark Boulton Design Screenshot

Our image this week comes from two new releases.  The clever folk at Mark Boulton Design have released their new responsively designed site, and the screen shot was taken using a tool I put together last week to help me… well, um… take screenshots.  More about both of those later though.


REMux: An Experimental Approach to Responsive Web Design
During the interview series we called for people to think outside of the box, and that is exactly what Dirk Lüth has done with his approach to responsive design. He sets the column widths in REMs and adjusts the font-size dynamically with javascript.

Responsive Typography Demo
Another fantastic new approach to responsive typography, this time using facial recognition technology and your webcam to estimate the distance from the screen and adjust the font size accordingly. Alright so in the real world this needs a few things to be ironed out before it is production ready, but what a great concept!

Opera Developer News – 300 million users and move to WebKit
Probably one of the biggest news items this week was Opera’s decision to drop Presto and use WebKit as their new rendering engine. This doesn’t mean you can stop testing in Opera/Opera Mobile though… and in fact it might be a sign that we haven’t been doing enough of this in the past.


You like apples?
This article takes a look at the changes that were made to O’Neill clothing website. They monitored the online sales over a 3 week period, then made the site responsive and monitored it for another 3 weeks. The results are outstanding!

Designing In The Transition To A Multi-Device World
An opinion piece by Francisco that takes a look at the transition to designing in the browser, a must read this week

Master mobile navigation
An overview of the different mobile navigation patterns and how you might approach them from Aaron Gustafson.

Group Advice: Working on an Anti-RWD Team
An issue that is likely to have plagued you at some stage in your career where your workplace simply will not remove the blinkers and take a look at every approach to a project. Chris’s response is great but read on into the comments for more great tips on how to approach this issue.

In Defense Of Rem Units
A detailed look at REM units and how they can be a better option when building complex responsive sites

Devising a Strategy for Responsive Design
Before you pick up a sharpie for sketching or fire up photoshop have you remembered to take some time to come up with a responsive strategy? This article covers a series of questions that you should be asking yourself before you commit to the new site.

When Responsive Design is Not an Option: a Checklist for Optimizing Your Mobile Site
A look at the approach for separate sites. Highlight of this article is the google analytic advanced segments.

Turning off responsive web design
Bruce wrote this article in January about offering visitors the options of turning of responsive design on the site citing non-web-savvy users as the reason.

There Is No Breakpoint
By placing our media queries inline, immediately following the smallest styles, we can group styles by the components they impact and not worry about following a specific set of breakpoints.

Google Blends Desktop And Mobile Ads
Google just announced that it is “enhancing” and “upgrading” AdWords for a world where people increasingly use mobile devices.

Where to Start
Trent Walton from Paraval provides some great tips for getting started with responsive design.

Tools, Tutorials & Presentations


Am I Responsive?
A high fidelity responsive design preview tool. This should not be used for testing (try and use devices when you can or emulators when you can’t) but instead can be used to showcase your work as screen shots for your portfolio, showing off to potential new clients about the work you’ve done or showing them how their non responsive site may appear.
Full disclosure: I built this to help with screen shots for these newsletters and other articles.

Packery preview
Packery is a javascript (not jquery) library that takes what Masonary and Isotop have done and extended it further. Still in progress, but well worth taking a look and if you have any recommendations/features let them know.

Sassaparilla – Start your Responsive Web Design Projects the fast way
Sassaparilla is a fast way to start your responsive web design projects that harnesses the power of Sass and Compass. This is brought to you by the guys from fffunction.

This may be a good solution to use along with enquire.js to responsively change the data grid based on the viewport

AppCache responsive images?
Who needs srcset? Who needs <picture>? Not the AppCache people we don’t!


Responsive grid systems; a solution?
Grid systems in responsive design are something of a hot topic; a lot of people are trying to solve them but we’re not quite there yet. However! The solution Harry Roberts has devised for inuit.css – he feels – is probably one of the best currently available. In this article he covers how it works, and the principles behind it.

Introducing Responsive Tracking
Do you have click through actions on your responsive site? Do they move about at different viewports? This tutorial shows how you can track these buttons with the use of enquire.js.

Refactoring Magento for Responsive Web Design
Do you use Magento for your e-commerce? This article looks at refactoring the CMS for responsive design.


Improving your responsive workflow with style guides
A presentation from Luke Booker on a responsive workflow for styleguides. The video only shows the slides but most importantly gives you the audio for the presentation. Luke has been kind enough to put his slide deck on github.

Don’t just choose a grid. Design it!
Natan Ford delivered a talk on responsive grids last week at Port80 in Newport, Wales. These are some of his own notes from the talk.

JQuery Mobile 1.3 For Responsive Web Design
Release candidate 1.3 is out for jquery mobile and the focus is on the full range of viewports and not just mobile (they really need to change the name to jQuery web). The new release contains some off canvas navigation patterns and a few data table toggles worth checking out (if only to reuse the technique)

New sites & Inspiration

Mark Boulton Design
The studio that has brought us the Drupal 7 design, the 5 Simple Steps book series and the brilliant GridSet App have released the redesign for their own site. It’s simple but striking and built with performance in mind.

If you have just finished a site, or are part the way through and want to share and ask some advice then please either email or tweet us.

Wrapping up…

That’s it for this week, thanks for reading all the way to the end. You might remember that I promised an interview with Matt Snyder this week but due to a bug I caught earlier in the week I’m a little behind, sorry.

Thanks for subscribing and see you 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>