Introduction

Welcome to another week of responsive design weekly.  Last week we focused on the hot debate between the <picture> element vs srcset attribute and it turned out to be our most popular newsletter to date.  Hooray for everyone having an interest in the development of the specifications.

This week the action has died down somewhat, however there is still a lot of chatter on the WHATWG mailing list and the W3C Responsive Images community group.Now it’s time we turn our focus onto something which makes most creative agencies and marketing departments run for the hills.

Data.

That’s right!  Blocky, table based, little to shine and make pretty, data.We’ll also take a look at some tools to help building us to build responsive sites in the browsers we have in front of us today, plus a few pre-fabricated templates that allow you to get an existing site up and running, or to deploy your own site in 10 hours.

Let’s get started.

Headlines

BBC Landing Pages - BBC have moved on from their responsive news site and created these 4 responsive channel pages.  While they use responsive techniques it isn’t the standard implementation of all the media queries contained within a single CSS file.  Instead there are 13 different CSS files contained within <link> tags and defined through the media attribute.  While there’s sure to be some good reason for this, it does mean 12 additional requests for the browser on page load.

Retina Image tips and tricks - net magazine take a look at the pixel density issue with a few solutions for those wanting to keep up to date with the new and improved devices. They take a look at using fonts as icons and SVG images to take advantage of the scalability of type and vector based files.

Has adaptive design failed? - Oh hell no… and Elliot J Socks doesn’t think so either in his reply to the original article by Peter Yared (which screams of controversy for the sake of it).

Digital Government - Building a 21st Century Platform to Better Serve the American People… or at least that’s what they’re trying to achieve with this new document produced from the American government.  One of my favourite lines is… “These guidelines will include: Best practices for standards-compliant, next-generation web development, including use of content delivery networks; content management systems; common code libraries, frameworks, and tools; and responsive web design (e.g. using HTML536 and CSS337 to provide a mobile-tailored experience);” 

AWESOME!!!

Feature – Responsive Tables

While some designers focus on typography, grid-layout, textures, colour and cool awesome drop shadows, the very best of them flourish when presented with the challenge to present complex or large data-sets in a limited space (and I’m not talking about the infographics you see on mashable).

Aside from the great image debate, tables are one of the last obstacles for Responsive Design across all types of website.

Large amounts of data is easier to digest in tables, and it is a lot quicker to show a table than explain the figures through paragraphs of prose.

The problem that you have when going responsive is that you no longer are guaranteed a fixed width for your tabular information, meaning your data could be squished or the design breaks as the table extends off past the standard view-port window.

A few brave souls are tackling the issues that we as designers and developers are faced with and have come up with some interesting techniques.

ZURB Foundation Data Tables - Don’t let tables break your responsive layout anymore. This simple JS/CSS combo will let your tables adapt to small device screens without everything going to hell.

Pseudo element labeling with HTML5 data- attributes for labelling.

Graph that table - Scott Jehl provides this example that turns your tabular data into a pie graph at smaller screens.  Awesome idea but probably not going to work in every situation.  Scott also looks at removing the table all together and replace it with a click to view the table in full screen.

Hide non essential columns - All data columns will display on desktops and tablets in landscape orientation, but only a subset will fit comfortably on anything smaller.

Swap the headings - David Bushell (see who to follow at the top) swaps out the header row and positions it on the left allowing for a horizontal scrolling table.

Media Table -  works with Respond.js to help you get around the problem of how to display large data tables on small screen devices, making responsive columns and adding a show/hide toggle where suitable.If you’re interested in learning more about displaying data you should check out Designing with Data by Brian Suda.

Prototypes, Frameworks & jQuery plugins

Swipe.js - Swipe is a lightweight mobile slider with 1:1 touch movement, resistant bounds, scroll prevention, and completely library agnostic.

Protofluid - ProtoFluid simplifies the development of fluid layouts and adaptive CSS using Media Queries.  It works within your website, HTML5 app or game in the form of a single JavaScript include.

Responsive Viewport - ReView is a dynamic viewport system that provides efficient responsive web design viewing choice.  Developed in pure JavaScript according to the principles of core (mobile) first progressive enhancement.

Rsponsive Plugin - A WordPress Plugin that converts any Theme into a responsive theme… a great idea but they’re still only asking for signups for an unknown launch date.

Foldy960 - The talented gents at Paravel, Inc. have released the modified 960.gs grid that they use as the basis for their responsive projects

And finally…

I noticed that Kiwibank updated their site to a responsive design a few weeks ago and I’m glad that it’s getting a lot of love in the wild.  Paul Robert Lloyd has recently posted an interview with the developers of the Kiwibank and discusses their approach, theories behind some of their decisions and the lessons learnt on their first responsive design project.

Don’t forget if you have anything intersting you would like us to share be sure to get in touch with us.

Thanks for reading Responsive Design Week #6.  Enjoy your weekend!