Building Algebra – Responsive Design for the Web

17 June 2011
 

responsive design

A few weeks ago Glasgow’s Tramway launched their first online literary journal: Algebra, which was built here at Storm ID. Edited by their writer in residence  – Beatrice Colin, it features local and international contributors works of fiction, memoir, photography and visual art. Andy and Gemma from Storm were invited along to discuss how they delivered their aim for Algebra: a great reading experience that’s as pleasurable on a large PC monitor as the smallest smartphone screens.

Here is an excerpt of their attempt at a none geeky explanation of Responsive Design, CSS3, Media Queries and HTML5. How do you think they did?

The History of Page Design

For centuries, book designers have used rules and methods to construct page design for the best reading experience possible. Jan Tschichold popularised some of these methods as ‘Canons of Page Construction‘ in the mid 20th Century, and they are still used to this day. The problem is that these methods made the leap from page to screen when the web became popular in the late nineties and we struggled to find new terminology for this new way of “publishing”. But, just as ‘page’ is a much used, but not particularly suitable term for a part of a website, these Canons of Page Construction, while much used, are not fit for purpose on the web and its multitude of devices.

Why Canons of Page Construction Are Not Suitable For The Web

responsive design

Canons of Page Construction use ratios based on the edges of the paper: everyone will see the same finished book at the same size, so this is appropriate. On the web, this has never been the case. End users have always viewed the web on different devices with different sizes and resolutions and with the rise in mobile technology this has become more varied than ever. The edges of the viewing area have never been more different! Added to this, there has never been a canvas with finite edges on the web. A piece of content can extend vertically and horizontally as far as is needed, far past the edges of your viewing screen.

The Content Out Approach – A New Method For The Web

We need a different method for the web. Instead of a ‘canvas in’ approach, we need to work from the ‘content out‘.  This is the approach we have used with the Algebra site. Instead of being constrained by the page dimensions, we used readibility as our constraint. We have concentrated on how the articles are displayed first and foremost, focusing on legibility, type size and line lengths, in different contexts.

Remembering Context

Context is an important thing to remember when it comes to designing websites in this era of varied devices and widespread mobile web access. With a traditional printed book or magazine, there is only the opportunity to construct page layouts and finished books that satisfy use in a a traditional reading situation.

The Native Experience

responsive design

On the web we have the opportunity now, using brand new technologies, to tailor the user experience to the different contexts in which a user will visit our site. We can use media queries in our CSS to determine which content is served to different sized screens, and at what size and resolution. Although modern mobile devices like iPhone and Android phones do a pretty good job of displaying websites and allowing us to pinch and zoom our way around them,  this can still be very awkward. Using new technologies we can show content in a way that feels like it was styled for that screen and device and is relevant to the context in which that screen is likely to be used.

Responsive Design

While the Algebra site content won’t change on different devices at the moment, the reading experience will. You won’t have to pinch and zoom to make the text readable on your phone, and if you are reading on your 27″ widescreen computer you’ll be able to sit back, relax and read the articles comfortably no matter what situation you are in.

Go on – have a wee look at tramwayalgebra.com on whatever device you like and let us know what you think.

Search

Categories

Archives

Subscribe to Email Updates

Subscribe
 

We are a digital transformation consultancy. We help our clients succeed.

View Services