textwrap

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

Designing for CSS Zen Garden

Sunday, 23 November 2008

CSS has fundamentally changed web design during the past few years or so by separating style from structure. It has moved the emphasis onto design rather than development in the search for standards-compliant and inventive visual websites, and CSS3 has set a new benchmark for flexiblity and creativity.

A key player in this development has been the CSS Zen Garden website, which is now 10 years old and, although still online and available as a great resource, is no longer operating per se.

In my teaching I regularly use the CSS Zen Garden by presenting students with a css-free html document on a given article, and request that they develop a stylesheet on a given theme, and create a unique design. The real beauty of this exercise lies in the fact that everyone starts off with the same basic file. Its a little bit like sculpture - everyone starts off with the same rock and then carves out their own visual idea.

So it made perfect sense to practice what I preached by creating my own design for the Zen Garden, whilst issuing the students the same task. I decided to capture a typical urban moment - a jet flying high overhead, carrying people to who knows where, and framed by soaring neon-lit office buildings.

And here it is:

Minimapolis

Some notes:
In this design, the key visual problem was how to combine two background images so that the full browser width could be used. The righthand image moves fluidly with the browser, but the content remains fixed, flanked by the lefthand building image. To accomplish this, the image on the left is set into the body of the page like so -


body {
background-image: url(visuals/visualleft.jpg);
background-repeat: no-repeat;
background-position: left top;
background-color:#4c4b4b;
}


The righthand image is then put into the background of the container, which is set to 100% width -

#container {
width: 100%;
position: relative;
height: 1300px;
background-position:right top;
background-repeat:no-repeat;
background-image: url(visuals/visualright.jpg);
}


This allows the container to use the full width of the screen. The text content is then set a fixed distance away from the lefthand side of the browser. Finally, a separate div sits under the container, to cut off the buildings and create the lower area that houses the footer content.

View the site and its css.

This Will Not Destroy You

Saturday, 22 November 2008

This Will Destroy You is an American instrumental post-rock band from San Marcos, Texas. Their debut album, an eponymously titled seven track CD, is first and foremost a great record, featuring some amazing exchanges between drums, bass and guitar. The overall impression is one of restrained power caught inside moments of religious revelation. In other words, its quiet, loud, complex, simple and brilliant.

TWDY have been compared to another, more seasoned Texan post-rock act, Explosions in the Sky. EITS took charge of 2007's All Tomorrow's Parties event, and are, along with Sigur Ros and God Speed You Black Emperor, considered the foremost proponents of the genre (I guess Mogwai fit that descripiton too).

So is this a record review? And what has all this got to do with design? Well, it's not strictly a review, but there is a reasonable argument to consider songwriting as a process not unlike design - words and music are constructed by an author to meet a very specific purpose. The writer uses known principles and elements (intro, middle eighth, key changes, chord progessions, wordplay), to formulate the composition. And songs are usually variations on a single theme (i.e. the sound the band or artist tends to create).

In the case of post-rock, we are talking about instrumental pieces that feature heavily rehearsed interplay, frequent rhythm changes, complicated riffs, carefully worked out arrangements, and harmonic and scale progressions rarely heard in 'normal' rock music. There is a sense that nothing in particular is being asked of us in the songs other than to participate in the act of listening. It seems to me that much of pop and rock music today is about how bands look, who they know, what sort of launch campaign their latest release gets, and how easy it is to find their stuff on iTunes. And with digital playback, it's so easy just to scroll to the track we want to hear. The days of sticking the record on in your living room and saying nothing for 45 minutes are long gone. Unless you are a fan of post-rock.

A salient point here is the similarity between post-rock and progressive jazz. In the latter case, long extended pieces are improvisions on a set of riffs. John Coltrane and Pharoah Sanders for example have probably never played the same song in the same way twice, whereas in post-rock, you are getting an exact duplication of the recorded music, no matter how complex it is. But what unites these two kinds of performance is the belief of the artists' that it takes time to say what they want to say without words - usually something between 5 and 9 minutes.

I won't get hung up on heresy - I have plenty of old 7" records at home, I was brought up during the heyday of the 3-minute song, but in these times when immediacy rules, it's good to know that some things still require a bit of time and patience to get into. And to listen to. And ultimately, to create.

MAGAZINE - the 'Assorted Images' covers 1978-82

Monday, 17 November 2008

For anyone who came of age during the late 1970’s and early 1980’s - as I did - the resurgence in all the art forms from that period can be either by turns refreshing and embarrassing. But for the discerning amongst us, the reformation of influential post-punk band MAGAZINE is a real cause to celebrate, and what’s more I have tickets for their concert in Glasgow on Feb 16th ’09. OK so the late John McGeoch won't be on guitar, but Howard Devoto and Barry Adamson won't struggle to recruit a replacement, and with the likes of Radiohead and Maximo Park namedropping their favourite Magazine tracks, the band are assured a sellout for their 6-date tour.

I felt it necessary to pay homage to the original music, and luckily I have all six albums that were released during the band’s lifetime (1977-1982) in my dusty old vinyl collection. The music inside the sleeves is just as I’d remembered it - visceral, amusing, hypnotically inventive and blisteringly energetic, but the big surprise was the cover art. I’d forgotten just how amazing those six sleeves were.

They were all created by Malcolm Garrett, founder of Assorted Images, and one of the UK’s most prolific and influential graphic designers. He’s not quite as well known as his direct contemporary Peter Saville, but if you compare the latter’s output during the same period, one thing is clear – early Garrett had a far greater range of ideas and styles than Saville did. Whilst Saville was busy developing the minimalist Factory look, Garrett was producing not only seminal work for the Buzzcocks and Magazine, but more mainstream (and more lucrative) efforts for the likes of Duran Duran, Simple Minds and Peter Gabriel. Its this commercial output that diminishes his appeal in some quarters, but the Magazine covers alone would be enough to cement any reputation. And here they are:

Magazine.  Click to enlarge.

Real Life (1978), Secondhand Daylight (1979), Correct Use of Soap (1980), Play (1980), Magic. Murder and the Weather (1981), After the Fact (1982).

Youtube video posts:
'The Light Pours Out of Me' (1978)
'Cut Out Shapes' (1979)

From Bauhaus to Barak

Friday, 14 November 2008

Sticking with posters, it's worth commenting on Barak Obama's campaign, the culmination of which was his historic and thankful election to the White House. With so much money at his disposal, its no wonder the visuals for Obama's rallies, adverts and merchandising have been so good. That kind of money gets you the best designers around. But I just want to focus on one example - Obama's visit to Berlin earlier this year :

Obama Campaign Poster

Various commentators were quick to notice the homage to the New Typography of the Weimar period, and the Bauhaus movement in particular. This sort of imagery inevitably bolstered the Republican murmurings that the Democrats are in fact the Communists, dabbling in the visual propaganda of the Bolshevik era. Leaving aside the obvious shortcomings of an honest Republican education, its clear tha it was a stroke of design genius to instantly signify that here is an American with a global, and specifically European, sensibility and affinity. The bridges that Bush had burned can be mended with nothing more than the right typeface, a bit of art history, and a decent layout.

If we look at the poster juxtaposed to a design from the era, the similarities are obvious. This one, for the 1928 Press Exhibition In Cologne, is by RenĂ¥ Binder and Max Eichheim, and the style features the trademark diagonal sans serif type of the Bauhaus / post-Constructivist era.

But the Obama camp's graphic designers were tasked with making this poster more than just a concession to Europe, they had to it clear that their man isn't straying too far from the US worldview. The evidence is there in the poster. Its a subtle nod to the jazz designs of the early 1960's. If we take a look at John Coltrane's A Love Supreme (Impulse, 1964), there's a definite similarity, and the underlying connection the viewer should be making is about black power, committment, innovation, and above all, a modern yet vintage American sensibility.

A Love Supreme

Somehow I don't see Barak wandering about the White House on Sunday morning in his slippers with a cup of coffee and John Coltrane cranked up to 10 on his hi fi, but then that would just be too good to be true.

To Boldly Go Retro

Tuesday, 11 November 2008

This week, Paramount unveiled two new movie posters for J.J. Abrams' upcoming film of Star Trek. The pieces feature intimate monochrome closeups of Chris Pine as James T. Kirk and Zachary Quinto as Spock. The film is much anticipated, and the visuals look pretty awesome:

Spock and Kirk posters for Star Trek (2009)

Out goes the futuristic and vaguely camp sheen of just about everything the franchise has ever done, and in comes a gritty retro look that suggests something fresh and yet menacing, almost noir-ish. Pine looks not unlike a young Jack Nicholson, whilst Quinto's semi-stunned pensive glare is uncannily like Leonard Nimoy.

What makes these posters so compelling is that they tap into one of our biggest psychological needs - not just to know what's going to happen in the future, but to find out what happened in the very beginning. This is why retro, in whatever form it takes, is always so appealing. What happened first is the source of all our religion, most of our science, and a sizeable portion of our culture. So for trekkies, what happened before the original series is the most powerful myth of them all, and this is what the designer(s) of these posters is exploiting.

Its a valuable lesson to fledgling graphic designers. Knowing your audience is everything. And knowing how to strip things back to the bare bones (sorry Dr McCoy) lets the imagery do the talking. It's a great way to conjure up refreshing visual ideas.

Funny how going back is sometimes the best way forward. Or as Spock might put it - illogical, but fascinating.

Endgames

Sunday, 9 November 2008

Once you've been involved in the making of computer games, the magic of how they behave when you play them is gone. I spent four years in the Industry, and worked on games for publishers such as EA, Westwood, Hasbro and Maxis. Once you realise that every nuance, action, scenario, result and tiny bit of feedback you get are all pre-programmed, vigorously tested and continually refined, it becomes clear that gaming really is like being in the Matrix, and that you are the one hanging upside down in a suspension tube with a bad crewcut, a regulation sweatshirt and no mind of your own. Stalin would have understood the power of gaming.

You may not have heard of Nolan Bushnell, but he was the founder of Atari, and is rightly considered the father of electronic gaming. He invented PONG, and it’s the game from which all other computer games are derived. Whenever I see an advert for a new game, all I think about is PONG. Whenever my friends or acquaintances talk about their latest wii purchase, or who won the latest round of Quake, I think about PONG.

Surely I am just being a bit cynical? Maybe I am a bit long in the tooth, out of touch or even just trying to wind you all up. How can games like Tomb Raider, Resident Evil or better still Grand Theft Auto have anything in common with PONG, where two boxes move vertically whilst a pixel moves horizontally between them? And so what if programmers are calling the shots - its a computer game after all and they have designed it! Isn't that what design is all about?

Well it is and it isn't. All computer games are basically very slick reworkings of PONG using better graphics and more sophisticated gameplay to producing faster and more elaborate results.

PONG has a premise - a way to play and a way to win.
PONG has an arena - 2d tennis court.
PONG has physics - 2D linear physics.
PONG has a platform and controls.

All action-based games (and some sims) use physics engines. They all use an arena. They all have defined game rules and they all have various platforms, control mechanisms and scoring systems. Physics engines merely define the vector paths that objects might take if they hit and richocet from a given surface, whether its 2d or 3d. Its nothing more than maths.

What about multiplayer games? Multiplayer games are just a series of single games where events are placed them in a sequential order within fractions of a second. So if you log onto a shoot-em up across the internet, you are in fact just playing PONG with a bunch of other PONG playing pc's, and the winner is the one at the head of the millisecond queue.

Why is all this so important? What does it all mean?

Computer Games are dead. They’ve been dead for 20 years, because ultimately they only do one thing. And the publishers' financial and commercial aims and targets haven't changed. The games industry is as corporate as Wall Street. Its just the packaging and the platforms and the budgets that have changed.

I heard a story recently from a friend who was seconded to a financial institution for 4 months. She came from a reasonably cool and modern software house, and found that the bank was full of guys in suits who played a multiplayer racing game every lunchtime, and they cursed and joked to each other using their gaming names as they battled it out for 45 minutes in between auditing pensions and checking credit ratings. And during working hours they recalled various incidents from their gaming as if they had happened for real.

But here's the point. Almost two years later, my friend was again seconded back to the bank, and guess what? The same guys at the same desks in the same suits were playing the same game during the same lunchhour with the same gaming banter going on. All that had changed was the version of the game, and their system login details.

Computer gaming is totalitariansim in a shiny box.

Marginalia - centering with css

Friday, 7 November 2008

Centering div layouts using css can be confusing because there are quite a few solutions. But all are reasonably logical when you examine them in detail.

In the bad old days of table layouts, a centered website was easy - a table with the appropriate width is inserted into the html and is aligned to the centre of the page, end of story.

Today, with CSS-only layouts, that alignment is still used for divs to satisfy the foibles of Internet Explorer, but all sorts of other pieces of css are required to get the excat effect you want.

The basic aligment is done by giving the body the following css -

body
{text-align:center;
}

Now, everything you add into your html will start in the centre of the page. So we can insert a wrapper div. Its styling requires -

#wrapper {
text-align:left; /*alignment hack to counteract the body aligment */
margin-left:auto;
margin-right:auto;
width:800px; /*whatever width you like*/
}

By using auto, we force the div to sit in the middle of the page, flanked by equal-sized margin areas. Text align left means that inside the wrapper, our other divs and text content start from the left and ignore the body alignment. And that's it.

But here's an alternative that doesn't require the aligment hack, and only needs one margin value.

The idea is to use negative margining. The css is elegantly simple, and the trick is that the negative margin value needs to be exactly half the width of the wrapper. The wrapper than nudges to the left by half of its own width. And here it is:

#wrapper {
position: absolute; /*the wrapper is actually an apDiv*/
left: 50%;
width: 800px;
margin-left: -400px;
}


There are a few other good uses for negative margins - you can overlap content areas, offset floating divs, and align disparate content. But one of best-kept secrets of a div layout is vertical centering.

This is really useful if you want something to always sit right in the middle of the screen, so that as you resize the browser, the proportional space above, below and on both sides remains constant. For instance, you might want a page to look like it's a shot from a movie at 70mm letterbox resolution.

Again, it's straightforward and uses a very simple calculation.

As well as the horizontally centered wrapper, we make the browser 100% in height by adding to the body like this:

html, body {
height:100%;
}


Then comes the clever part. We simply add an empty div tag ABOVE the wrapper and set it's width to 100%, and its height to 50%. In effect, it always takes up the top 50% of the browser space. Then we add a negative top margin, whose height is exactly half the height of the wrapper (which is placed BELOW it).

#above {
float:left;
width:100%;
height:50%;
margin-top: -400px; /* half the height of the wrapper */
}

The wrapper now nudges up into the empty div by half of its own height, right in the vertical middle of the page.

All the variations of negative margins are based around the box model - so be aware that various versions of IE contain minor (but annoying) box model bugs that may require workarounds.

Design versus Art

Saturday, 1 November 2008

It's the oldest question you can ask as a designer, and that makes it a decent starting point. So what is the difference between art and design?

A few years back, whilst I was working in London, I was lucky enough to get shortlisted for a lecturing job at Glasgow University. It was a tough interview. I had to do a presentation (on interactive design), and then I faced a five-person panel, who each grilled me about my ideas, my motives and my qualifications. During the panel interview, the very first question that they asked me was to describe the difference between art and design.

And so now, a decade later and working as a lecturer in Graphic Design, one of the first things I like to introduce to new classes is a discussion about what design is and what art is and what each of them is not.

We are all viewers. And when we look at a piece of 'art' we are in control of its meaning. The artist may or may not 'know' what their work is about, but art need not visually communicate any definite message. It is what it is, and its subjectivity provides its power.  I may not know what a shark in formaldehyde 'means', but I'm free to decide if I like it or not.

On the other hand, the designer is the one who controls the meaning of a piece of design. It is functional, it is created for a specific target audience and has a definite message. Furthermore, the principles and elements of design are used in the composition to give the message as great an impact as possible.  It doesn't matter if I like the McDonald's logo or not, but I'm in no doubt as to what it represents.

So design is means applying ideas through artistic (and technical) skills in order to create something which is usable, whether its a film poster, a corporate logo, a milk carton box, a pair of jeans, or an office plaza. The central meaning a design has is the one which the creator meant it to have. And of course, occasionally great design does transcend its stated message and becomes great art - the Eiffel Tower, record sleeves, the electric guitar, movie posters.

But that's not what I said 10 years ago at that interview in front of a panel of academics. I thought about Bauhaus and the Surrealists and Constructivism and Pop Art, and I tried to explain what made these ideas and visual creations totally different yet the same, and I gave a poor reply.  And a poor interview, even though I did have the right answer all along.