response to images – responsive day out

During Owen Gregory’s talk at Responsive Day Out he touched on the theory of the Golden Ratio in design and how you can still use traditional design theory in a fluid world without compromising on form.

Many others throughout the day had discussed the current issues we face when approaching the use of images in design and content in designing for a fluid web. There were discussions on file sizes, how to serve up images, what kind of image files we should use and when to use them, the types of images, are they for context or decoration?

Bruce Lawson went through the ideas of serving up entirely different versions of an image to align with a particular layout. In His example he showed an image where a dog sat centrally in a photograph. Using breakpoints, he presented different crops of the same image citing that these were better contextually based on the viewport size. I disagree with this, but that’s another story.

What nobody questioned however is whether images themselves are actually the plague on good design when it comes to the web? Are they the devil we know that can never be changed?

Last year I was working with Paul Swain on a project which we knew was going to be heavily lead by imagery. During the wireframing stage Paul was placing image placeholders in that used a 16:9 aspect ratio. I asked him why he kept putting them in the layout? His response was that 16:9 gives more data in an image. For example in a sports scene it allows for the subject to be the focus with his surroundings given extra space to breathe. He also noted that when designing a fluid site we should consider that the screen sizes are all moving towards widescreen, columns are going to become wider than they are long.

I couldn’t let this go. As a photographer, I have never owned a camera that shoots images at 16:9; I have a FlipHD handheld video camera that shoots in 16:9 but none of my Nikon SLRs do. All I could think of was somebody having to spend more time shooting with a taped off back screen (see below) and more time editing before getting a story out on a news site for example. I brought this scenario to the table and we removed the placeholders exchanging them for 4:3 placeholders, if the image was in a widescreen format, they had a bounding box they could fit it into.

It did get me thinking as to whether the likes of Nikon will completely lose their minds and do away with the 4:3 ratio we are all used to? Of course, there are other image sizes that are still commonplace today notably instagram with it’s square images in a homage to the Polaroid and the hipsters do love their Lomos.

Owen Gregory questioned why we have these ratios in our devices that do not meet with the golden ratio? Modern displays, flat screen televisions and monitors use a16:9 ratio whilst older displays were set at 4:3 as are most cell phones, the iPad and many other tablet devices such as the Kindle and Galaxy Tab. In 2012 Apple The iPhone5 is 16:9 and along with the Samsung S3 and Nexus 4 are evolving handheld devices into the widescreen HD era.

How did these ratios come to be and can we ever have visual perfection?

Well, it isn’t but that is where it all starts, with William Dickinson and Thomas Eddison creating a concept of a roll of film and a loader for a camera.

Edison and Dickinson wanted to create images which gave the same level of detail as when looking straight ahead; minus the periphery. The human eye has a field of view which is 155oH x 120oV (4:3).

Their film wrapped around a spindle with sprockets gripping it in place. The frame needed to meet the 4:3 ratio and finally they concluded the ideal size was 35mm wide and 3 perforations high (the distance between the sprockets).

Does it have legs?

Naturally, when artists started considering moving pictures the starting point was to use 35mm film and lots of it. There were experiments with other formats as the movie makers started to look at how to make a more immersive experience. As with all good art, the marketing people had other ideas, how do you get more people in front of a film and make more money per show? The natural solution? make it wider. Wider screen = more seats.

The most notable movement came from France where the Paris film scene was booming. In 1897 Raoul Grimoin Sanson patented Cineorama, a widescreen film format, it never took off.

Other concepts emerged during the early 19th century including cinemascope which was costly to produce requiring two camera operators and further time editing. With the Depression came cut backs in Hollywood and the anamorphic format given with most widescreen solutions was dropped, returning to the cheaper 35mm 4:3 systems.

Alfred Hitchcock refused to shoot in cinemascope citing that it created an unnatural and displeasing image, instead favouring VistaVision which could be adjusted to suit a number of aspect ratios.

The Golden Age turns to Pyrite

As televisions found their way into more and more households in America Hollywood started to feel the pinch. Here is where we see history repeating itself (see 3D in 1915, 3D in the 1950s, 3D in the 1980s, HD and 3D again in the 2000s). Film studios began experimenting with dimensions again purposefully shooting in wider ratios that needed new projectors in the cinemas affiliated with the film studios and providing a cinematic experience which clearly set it apart from television.

It caused chaos. Letterboxes became a visual cue to what kind of film you were watching and ensured that every cinema could syndicate the movies into their theatres without needing to upgrade their equipment.

Many of us will remember (I’ve actually seen it in France in the last month) the frustrations of watching a film bought by a television network where the titles are chopped off left and right and you can’t help but wonder whether you’re losing important plot points to the outer limits of the shiny pastic surround encasing the liquid crystal display.

Thankfully, Dr Kerns Powers rallied for some kind of standardisation to be formed. Eventually 16:9 was agreed upon, not because it is the most pleasing ratio to experience moving pictures, but because it is the middle ground in a muddy film landscape. This is why even now with your HD (or even UHD/4K) screen you will see letterboxes when watching certain movies.

How do ratios fit into responsive design?

I have on quite a few occasions attempted to mimic another film format to the one I am shooting with. Back in 2009 (the golden age of Flickr?) I was inspired by Dustin Diaz’s 365 project where the majority of his shots were 16:9 and letterboxed. I spoke to him at the time about how he was doing this and tried it myself.

Perhaps we can start thinking about this in our web design. Can we use margins and padding in the same way as to create faux widescreen experiences, or even bring widescreen back down to 4:3 after all, isn’t this what we’re doing every time we set body to margin: 0 auto?

Originally posted on avangelistdesign.com

Published by

Andy Parker

User Experience Designer, headbanger, biker, skater, gamer from Brighton UK.