User Experience Begins with CSS

User Experience Begins with CSS


I just finished reading an article about emerging layout standards in CSS which recently appeared in ‘A List Apart.‘

The article, written by the fellow who proposed CSS way back in 1994, details the development of new proposals within the CSS spec, which – if implemented — will allow for multi-column formatting (like a print periodical) and the flexible placement of images within layouts. After I finished reading the piece – which was well populated with code snippets – I couldn’t help but notice that the article dovetailed with one of the many issues that send me to my podium.

As a small agency, we frequently find ourselves bidding against larger and smaller ‘advertising’ agencies. A typical competitor’s workforce will consist of a business development principal, an art director and one or two junior staffers, one of whom might be their ‘web developer.’ Typically, these types of firms advertise themselves as full service, which basically means they’ll take on any sort of creative need their clients might have. These would include logo design, print ad design, video production and web work. Usually, although everyone is ‘doing digital’ these days, web development is only one of many services they’re providing, Often, much of the actual heavy lifting is outsourced. I don’t think much of a workflow that begins with a traditionally trained print designer, handing off finished layouts to a more junior staffer, who knows some code. Rather, I’ve long been a proponent of a minimum programming skill set for any aspiring front end designer. In my experience, a deeper knowledge of the tools used to build the web – HTML, CSS and JavaScript confers many advantages. The ‘A List Apart’ article illustrated some of these advantages.

One major difference between how articles appear on the web versus print is the lack of columned layouts. These allow content to flow from one column into the next (like a newspaper…) Columned layouts have been standard in print media for centuries and have become second nature to the eyes of Western readers. Duplicating them on the web would, at a minimum, lend a cultural familiarity to reading on the web and make the transition from print to web somewhat seamless. More than just this benefit, though, there are practical reasons for columned layouts, most of which have to do with the varied devices and resolutions readers with which modern readers access the web. Imagine reading a blog post on a large-screen, high resolution device. A single column of text would span across the page – thousands of pixels wide – creating an unrelieved field of words. Such copy would read with ease with the addition of columns (and some well-placed block quotes and images…) Inversely, the same article, when read on a phone would have to be a single column article, as the device itself is too small to allow for multiple columns of content to be easily read.

These layout issues illustrate an irony I’ve often found in my discussions with designers who seem code-averse. Although they might not write code themselves, any good art director is concerned with user experience design. They want their layouts to be functionally efficient and usable by their audience. These same designers dismiss the value of coding knowledge, while proudly championing good user experience design. And yet, as the example above shows, those on the leading edge of the web – the people who are actually writing the specs for the next generation of CSS – are fundamentally user experience designers. At its core, the development of CSS is intrinsically about developing tools to enhance user experience and all of the other concerns which concern designers. So, then, keeping up to date on where CSS, HTML or JavaScript are headed can inform much that a designer does.

How can that be a bad thing?

Post Navigation