Probably a bit late but any Inspect Element readers heading to Brighton? @tkenny me on Twitter if you are!

Choreographed windows, interactive flocking, custom rendered maps, real-time compositing, procedural drawing, 3D canvas rendering… this Chrome Experiment has them all. “The Wilderness Downtown” is an interactive interpretation of Arcade Fire’s song “We Used To Wait” and was built entirely with the latest open web technologies, including HTML5 video, audio, and canvas.

Goodbye Flash (one day).

So what’s the problem? I’m very much a fan of the single line approach to writing CSS as seen below. It allows elements to sit under each other nicely, making them easier to find. Good commenting also helps.

The downside of vendor prefixes is declaring the same value more than once. Combine this with the single line approach above and you can see it starts to get messy with every CSS3 declaration on the same line. This will only get more difficult to read, with more CSS3 properties used.

I’m a designer so I can’t have my code looking messy and ugly, especially when you’re working on sites you know your workmates will be working on some point too. My solution is to keep the regular old CSS on a single line but split CSS3 onto separate lines defined by vendor prefixes. Not exactly earth-shattering but now it’s cleaner and much easier to read and edit all those declarations of the same property. They all sit under each other making them easier to compare to one another. I also start with the shortest at the top working my way to the longest, again just keeping everything consistent, neater and easier to read.

It even works well with extra CSS3 properties.

I take the same approach if I’m using rgba for the background colour of an element. The first declaration is for older browsers such as IE which ignore the rgba line.

Over to You

How do you deal with keeping your code beautiful and using multiple CSS3 vendor prefixes?

Erping Zhu, had people read a passage of digital prose but varied the number of links appearing in it. She then gave the readers a multiple-choice quiz and had them write a summary of what they had read. She found that comprehension declined as the number of links increased—whether or not people clicked on them. After all, whenever a link appears, your brain has to at least make the choice not to click, which is itself distracting.

Interesting findings into adding links into passages of text. We all know that links are fundamental to the way the web works but linking too frequently will distract your users and make articles less engaging and more difficult to read. Something to consider, especially if you’re a blog writer.

… it seems that 2D translations are not hardware-accelerated. But, since any 2D translation is equivalent to a corresponding 3D translation with the same translations in the x and y and no translation in the z axis, it is easy to use a hardware accelerated translate3d(x, y, 0) transform instead of a non-hardware accelerated translate(x, y) transform.

Never stop learning

I can’t stress this enough. I’m actually in the process of writing a post about this is so important so stay tuned.

Comment your code

You WILL forget work you’ve done in the past (I do all the time). Good commenting will help remind you what you did.

Think of the visitor who is trying to find out something. They need to understand what’s going on, not just be impressed.

This is a crucial part of design that people, especially website owners, often overlook. It’s your job as a designer to educate your client/boss on this because they’ll most certainly be looking it through their eyes and not from the point of view of the visitors’.

Experimentation is the key to creativity. Without it, the brain simply follows what it regards as the safest route, and the result is as mundane as the thought behind it.

Every designer experiments. Why does designing in the browser prevent that? If anything it makes it quicker and easier through the use of CSS and the lack of an equivalent in Photoshop. Designing in the browser is just using another tool which you can certainly still experiment with.

Designing with mark-up, however, creates a disconnect with the medium. Ideas no longer flow fluidly onto the screen. They must first be translated into a language that the computer understands.

Again, it’s just an alternative tool to Photoshop. How can it create a disconnect with the medium if you are designing directly in the environment of the medium?

Any tool that is meant to translate visual elements from canvas to code will inevitably fail in the semantic realm.

I agree. Auto-generated code is almost always never pretty.

I certainly don’t think designers should bin Photoshop but rather evaluate how it can be used in conjunction with the process of designing in the browser. The two can work together in harmony.