Introduction
Hello and welcome back to another action packed responsive week. This week has seen a few new high profile responsive sites go live; we have seen one of the Holy Trinities of responsive design, Media Queries, get accepted in W3C; and one of the other trinities, responsive images, go through another round of suggestions to reach a suitable agreed standard.
The image for this week comes from Christine Bower from www.positdesign.com who wrote up over 50 pages of sketch notes from An Event Apart in Boston. Thanks Christine!!!
Enough talk though, lets check out this weeks links…
Headlines
Media Queries becomes a W3C recommendation
The W3C, the group charged with overseeing the creation of web standards like HTML and CSS, has given its official blessing to one of the cornerstones of responsive web design — CSS Media Queries. HOORAY!
Adobe Shadow Labs Release v3
Shadow has been updated on Labs, the iTunes Store, Google Play market, Chrome Web Store and Android App Store for Android. It should be noted that the entire Shadow system must be updated.
Updates in version 3 include:
Screenshots — Screenshots can now be captured from any or all Shadow devices, and are returned to the computer.
Cache Management — Use the Pull to Refresh gesture on Shadow devices to clear the cache on one device, and the Refresh All button in the Chrome Extension to clear the cache for all connected Shadow devices.
HTTPS Support — Use unsigned SSL certificates during development. Connected Shadow devices will now provide a dialog prompting you to accept an unsigned certificate.
Googles recommended configuration is Responsive Design
From an article that looks at responsive design vs mobile specific sites google had this to say.
“Sites that use responsive web design, i.e. sites that serve all devices on the same set of URLs, with each URL serving the same HTML to all devices and using just CSS to change how the page is rendered on the device. This is Google’s recommended configuration.“
Junior – a mozilla browser for the iPad
The Product Design Strategy team shows you what they’ve been working on for the past quarter. This presentation isn’t about theories and what-ifs and possibilities. They’ve been hard at work building new things.
South Street – Filament Group progressive enhancement workflow
SouthStreet is a set of tools that combine to form the core of a progressive enhancement workflow developed at Filament Group. This workflow is designed to help us (and other developers too!) deliver rich web experiences that are accessible to the widest range of devices possible, and catered to the capabilities and constraints of each device.
Articles
Off Canvas Multi-Device Layouts
Most multi-device layout patterns for the Web are designed to rearrange page elements within a visible browser window. Off canvas multi-device layouts, on the other hand, use the space outside a browser’s viewport to hide secondary elements until people need them. Jason Weaver and LukeW put together demonstrations of several new off canvas layout patterns.
An Event Apart: Interacting Responsibly (and Responsively!)
Luke gives us a dot point overview to the Event Apart presentation by Scott Jehl (add link to twitter). This talk outlines the feature set known as “South Street” which we also cover in todays newsletter.
Notes to an Agency Starting Their First Responsive Web Project
Chris Coyier writes about a visit to a client recently. They were interested in hearing about his experiences with responsive design, what to expect, what the process is like or could be like, what the deliverables should be, things to watch out for, and things like that. This is an overview of that conversation.
You should also go and check out Chris’ Kick Starter Project, Screen Casting a complete redesign.
The Responsive Dip
In this article Ben Callahan takes a look at where we are as web designers 2 years after responsive design hit the scene.
BBC: Responsive Design
Ste Everington was one of the designers leading the TV & iPlayer product. Last month saw the launch of the new television homepages for BBC One, Two, Three and Four. This blog post aims to give you some insight into the process and in particular our approach to responsive design.
Plasma First: Apple TV, SmartGlass and the New World of Multi-Screen Cloud Content
Forbes writer Anthony Kosner looks beyond mobile first and at the BIGGER displays.
After an intensive cycle of trying to figure out how to take desktop websites and make them look and work great on mobile devices (often by starting from scratch) the pendulum is swinging to the other end of the multi-screen spectrum—the family TV, the conference room monitor, the classroom SmartBoard.
Responsive Images
Responsive images: what’s the problem, and how do we fix it?
I left this off last weeks update by mistake, and I was kicking myself. In this article Matt Wilcox aims to give an overview of the problem itself, and show the different proposals in the works to address it.
Florian’s Compromise | Responsive Images Community Group
More and more it seems that it’s a waste of effort trying to retrofit the original srcset proposal to cover all the use cases of the original picture proposal. As we attempt to do so, the srcset microsyntax grows and more and more confusing, and shares an increasing amount of overlap with media queries. Florian Rivoal — editor of the media query spec — has joined the discussion on the WHATWG mailing list and offered his perspective
Why HTML5 urgently needs an HTML adaptive images mechanism
After the recent kerfuffle about the draft HTML specification for a mechanism for adaptive images, and an excellent compromise suggestion by Florian Rivoal (Opera’s CSS WG rep), the mailing lists have gone quiet again. Here Bruce Lawson talks about his thoughts.
Presentations
Refresh Richmond, Responsive Web Design
Ben Callahan (from sparkbox) and @eecoder present Responsive Web Design at Refresh Richmond in June of 2012.
Design Process in the Responsive Age by Pon Kattera
A great presentation on the Design Process in the Responsive Age from Pon Katterawho works for R/GA. These guys have a really good grasp of delivering responsive projects (after all they’ve also got Brad Frost to help).
Delivering Web Content on High Resolution Displays on Vimeo
The session videos and slides from the WWDC 2012 are now available for anyone with an Apple Developer account (not the one you need to pay for). If you fall into the “anti-apple” category then I’ve put the presentation up on Vimeo. Highly against their policy so be quick before it gets pulled down.
Tools & Resources
Gumby Framework
Gumby Framework includes multiple types of grids with different column variations which enables you to be flexible throughout an entire project’s lifecycle. From concept to deployment, Gumby Framework follows your lead.
Hammer.js — A javascript library for multi touch gestures
easy implementation of touch events in your website; lightweight with only 2kb (minified and gzip), easy to dig into; focused javascript library, only for multi-touch gestures; completely standalone, and a jQuery plugin is available.
Touchy.js
Touchy.js is a simple light-weight (1.98 kb compressed) JavaScript library for dealing with touch events in the browser. With no dependencies, just add the script to your page and start hacking.
jGestures
A jQuery plugin that enables you to add gesture events such as ‘pinch’, ‘rotate’, ‘swipe’, ‘tap’ and ‘orientationchange’ just like native jQuery events. Includes event substitution: a “tapone” event can be triggered by “clicking”, a “swipe” by performing a swipe-ish mousegesture.
Adobe Shadow 3
Adobe Shadow is one of our favourite testing tools at the moment. It allows you to navigate through a site on Chrome and instantly see how that site looks on you mobile device (which also must be running shadow). Available for iOS, Android and the Kindle Fire it makes testing on real devices a little bit easier.
Palm Reader
A simple tool to show you what media queries your device can and cannot see.
Tutorials
Responsive Images With WordPress’ Featured Images
In this article, Smashing Magazine look at how to use WordPress’ built-in featured images capability to deliver different-sized image files to different devices. “Featured images,” sometimes referred to as thumbnails, is a feature of WordPress that has been vastly improved since version 3.
blackfalcon/box-ordinal-technique
This is a slimed down example of the great work done by Jordan Moore. The basic proof of concept is, how can we manage content placement depending on user experience?
Life beyond 960px: Designing for large screens
The premise behind a responsive web isn’t purely that websites be built in a mobile-friendly way. It’s about setting our content free so that it can be experienced by whatever means necessary – and that includes at large scale. Let’s take a look at the design considerations behind the often neglected huge desktop screen.
Books
Mobile Design Pattern Gallery
Design patterns for mobile applications are emerging as the platform matures. Theresa Neil’s new book “Mobile Design Pattern Gallery” provides solutions to common design challenges. There is inspiration on every topic from designing your application’s navigation to choosing the right invitation technique.
Implementing Responsive Design
The new book by Tim Kadlec explores the way we design, build and think about the web. Readers will learn how to adopt a responsive workflow from the onset of projects, and in turn build responsive sites utilizing a combination of fluid layouts and media queries to create enhanced content that is device-specific.
New sites & Inspiration
AIDS.gov site overview
With a new look, AIDS.gov bets the future of government web is responsive. Listen as Vanderlan discusses the AIDS.gov site redesign, what the team learned implementing responsive web design practices and developing for an increasingly mobile audience with FedScoop Radio.
Flipbook by Glamalert
This is a very interesting use of media queries. The site itself is useless on a mobile device, but it comes alive on a desktop where you have the ability to resize the browser window. If they could add a js function to incrementally change the viewport it would be better on the devices.
Jack Daniels
A new site released by the Scotch Bourbon Whisky drink.
Student Aid BC
A unique responsive site and another one for the Higher Education list. On a mobile the site content slides to the right when accessing the main menu, and the sub navigation is changed from the left hand column and into a select input. To accomplish this there is a bit of JS and some “show-on-mobile” “hide-on-mobile” classes which semantically isn’t what you would be after, but all round I’m really impressed with site.
Responsive layouts, responsively wireframed
I came across this quite a while ago and I was super impressed with what James Mellers has put together. Using simple layout wireframes, this illustrates how a series of pages could work across these different devices, by simulating how the layout of each page would change responsively, to suit the context.
Workshops & Training
Pragmatic Web design – 1 day workshop
Pragmatic Web Design is a one-day course hosted by us — Messrs Whitaker and Elliot Jay Stocks — and aims to remove some of the myths surrounding modern web design. The first workshop is on the 6th August and you can register now.
And finally…
We are no longer going to be the only Responsive Web Design newsletter. The super smart and talented Brad Frost is going to be starting his own newsletter about Responsive Design. While I certainly love your support here I advise you to alsosubscribe to Brads email.
Don’t forget to tweet us @reswebdes and @appsketchbook to tell us why you would like a sketchbook and what project you’re working on.
As always we’re keen to hear your thoughts and suggestions, just email or tweet us.
One Response to “Responsive Design Weekly #10”