The Wilderness Downtown, an HTML5 Masterpiece

September 2nd, 2010 No Comments

Watch and enjoy. More details of how it works here including street detection within Google Maps Street View.

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).

Read more...

Writing Clean CSS3 Code

September 1st, 2010 13 Comments

One of the main problems with writing CSS3 code are the vendor prefixes. These are the -moz- or -webkit- you see before properties such as border-radius or text-shadow. They’re a necessary evil at worst and you’ll have to use them to get the most out of what CSS3 currently has to offer.

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.

Read more...

The Web Shatters Focus, Rewires Brains

August 30th, 2010 No Comments

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.

Read more...

Attention to Detail: You either have it or you don't

August 26th, 2010 Comments Off

Think about this when designing websites, attention to detail is what sets a design apart from others.

Read more...

Use of CSS3 Goodness for GMail on the iPad

August 19th, 2010 No Comments

An interesting note when writing translations in CSS3 for the iPad:

… 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.

Read more...

Advice for Beginners

August 19th, 2010 No Comments

Good to see an article directed towards beginners, offering the best advice as they get started from people who have already been in that position and succeeded. Here are a pick of what I thik is crucial advice for everyone as well as beginners:

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’.

Read more...

SpriteMe

August 11th, 2010 No Comments

A great little web app that collects images used on a chosen site and converts them to a single sprite via the use of a browser bookmarklet. It even generates the CSS you need to use in order to get the sprite up and running. I’ve not had the chance to use it in anger yet but did have a quick look and it seems like it could be a very useful tool.

Read more...