running words around
design education and visual communication
authored by chris m hughes

Beyond the Fold with iPad2

Tuesday, 29 March 2011

Apple’s iPad is already an iconic gadget that has sold in excess of 15 million units since its launch less than a year ago. With the release of iPad 2, the seminal tablet device is expected to sell even more, and bring the iPad out of the early-adopter slot and into the mainstream.

iPad may well have rescued print by reinventing what can be done with the magazine format, and now iPad2 will demand a new perspective on web design. It's a lot lighter, thinner and faster, and this makes web browsing a far more practical experience than with the original iPad.

In a way web design is like particle physics. The more we learn about it the better it gets, but those improvements require us to continuously reassess the principles and break formerly sacrosanct rules.

For example, just a few years ago no competent web designer would have dreamed of setting text above 18pts on screen in plain html. But these days, with better screens resolutions, anti-aliasing adjustments, and the improved control of css, large html text is commonplace (and can look awesome).

As of now, the iPad has thrown up three key issues that will force a new paradigm for web interaction.


By offering users portrait orientation, websites for tablets will become taller, revealing information which on a standard screen would be 'below the fold', and forcing designers to reign in the ever-increasing pixel width of website visuals.

A knock-on effect will be a reduction in the reliance on whitespace that is currently in vogue, and which produces clean minimal designs. The consequences could be busier content and more restrictive visual elements. This seems like a step backwards and not forwards in terms of interface design.

2. No More Mouse
The use of touchscreen, and the general tactile ethos of the iPad, means that website interaction is completely different to using a computer. The whole canon on usability may need to be re-written. Web designers will have to come up with multi-touch capability and larger, simpler navigation.

Using chunky buttons and large icons seems like a good solution, but for those of us who were around in the early days of web design, this feels like a real anachronism.


And thirdly, the iPad does not support flash, so websites which have previously relied on animation and video content, developed with time-consuming skill, will need to either be rebuild or have alternative versions.

But in a turn-up that most cosmologists would die for in their field, it turns out that the answer to these web design issues are very simple.

The technical trick to accommodate both orientations is in getting the layout to fit both sizes on the fly. This is fairly straightforward using css, and is already in use (with varying degrees of success) with handheld devices. The website requires two stylesheets, one with the 1024px width sizing, and one with the narrower 768px sizing.

In the former, the content is laid out like a standard website, with a main content area and flanked columns, whereas in the portrait orientation, the same flanked content is shunted below the main content using the float property. Everything is triggered by three lines of html - this one to control the scaling of pixels -

<meta name="viewport" content="width=768px, minimum-scale=1.0, maximum-scale=1.0">

and these two media queries to call the styles on orientation -

<link rel="stylesheet" media="screen and (orientation:portrait)" href="one.css">
<link rel="stylesheet" media="screen and (orientation:landscape)" href="two.css">

The result is one set of content which displays in two interchangeable layouts - on the left, the 1024 X 768px landscape with a column floated right, and the same page at 768 X 1024px with the column floated left (and hence shunted below due to the narrower width) -

As for larger buttons, the rise of social media has brought them back in vogue, and icon-based navigation makes a lot more sense than it did ten years ago. Icons are far more intuitive to a generation who have grow up with the internet. The iPad by its very nature is a less accessible tool to use than a computer, and so accessibility issues which dog traditional screen-based web design become less relevant.

And finally, the question of Flash has already been answered. Google's Android system has already adopted html5 and css3, and Apple have followed suit. HTML5 can produce much of the dynamic interaction we associate with Flash, with the added magical editable power of css.

I think we are going to see more horizontal scrolling with multi-columned text content, taller vertical layouts, and a lot less pages in websites. We'll also see the standardised adoption of html5 and css3 to produce inventive styling, and touch icons will start to take over from the more cumbersome text navigation. It's only a matter of time before web design as we know enters a new era, beyond the fold.

Font Aid V : Made for Japan

Sunday, 20 March 2011

The Society of Typographic Aficionados (SOTA) recently issued a call-to-action for designers and typographers to create a typeface to benefit earthquake and tsunami relief in Japan.

Font Aid logo

'Font Aid V: Made For Japan' is a project which hopes to raise funds to help relief efforts in Japan. Each submission has to be a set of three glyphs which demonstrate the designer's personal interpretation of Japan.

This is a great way of combining socially responsible design with a worthy cause, and so far there have been 150 glyphs created by 80 contributors from 27 countries. The project deadline of March 25th 2011.

The SOTA website contains more details and the submission guidleines.

SXSW 2011

Friday, 11 March 2011

The South by Southwest® (SXSW®) Music and Media Festival kicks off this week in Austin, Texas, USA, and is celebrating 25 years of groundbreaking multimedia events.

SXSW is a unique convergence of independent music, film, and visual communication. New media presentations, music showcases, film screenings and a range of industry-led conferences all provide a cutting-edge forum for education, industry and global networking. And it's all still organised with the sort of leftfield ethos that gives SXSW that bit of added cool factor.

For example, in 2007 the line-up included music from The Bravery, Razorlight, Polyphonic Spree and Pete Townshend, whilst the technolgies unveiled included a new social networking idea called Twitter.

This year, the Strokes, Ron Sexsmith, Yoko Ono and Queens of the Stone Age are amongst nearly 1,400 artists playing, and the highly anticipated sci-fi movie 'Source Code' makes its premiere. This movie features a mind-boggling plot where a soldier (Jake Gyllenhaal) wakes up in the body of someone else, and discovers he’s part of a government experiment called the “Source Code,” a program that enables someone to cross over into another person's identity in the last 8 minutes of their life.

In terms of promotion for the 2011 event, SXSW has recruited Austin-based agency Foxtrot Bravo Alpha to design their website, schedules, logos, badges and 25th anniversary branding to reflect the unique convergence of media on show. The schedule is almost overwhelming, but FBA have done a good job and the website is well worth a visit if you are not lucky enough to make it to the actual festival.

SXSW Interactive
SXSW Music
Source Code