Optimization

The perils of A/B testing

By Martin Gittins  |  May. 1, 2013  |  6 comments

There’s an expression in advertising that goes “I know that 80% of my advertising isn’t working. I just don’t know which 80%”. The same logic applies to all forms of design, including web design. If only we knew which part of our page content, layouts and workflows were not working as well as they should, wouldn’t that be amazing?

It would seem like a godsend to know what works when it comes to user experience design, to have confirmed in harsh quantifiable data which of two layouts, elements, or routes is the optimum and this is the promise of A/B testing. It is a powerful tool, but it is not a panacea and over-reliance on it can not only blunt your judgment as a designer, but also paradoxically result in sub-optimal solutions.

In this article I’ll take a look at some of the pitfalls of using A/B testing, and how such comparative testing can be used as part of a designers toolkit, rather than a dominant design methodology.

Daverocks says: agreed - you need to decide which conversion your trying to improve. Our simplest test is to improve on number of visitors...
Code

How to use local storage for JavaScript

By Sara Vieira  |  Apr. 30, 2013  |  3 comments

Creating an to-do app is usually the first application you learn how to build in JavaScript but the problem with all those apps is that when you reload the page all those to-do’s are gone.

There is a simple solution though, and that’s to use local storage. The good thing about local storage is that you can save those bits of data to the user’s computer so that when they reload the page all of their todo’s will still be there and local storage is actually quite simple when it comes to saving the data and making it available on the page.

Rob Sawyer says: I use LocalStorage rather than a database when building prototype applications. It allows you to mimic having users by simply...
CSS

Defensive HTML and CSS

By Ben Vinegar & Anton Kovalyov  |  Apr. 30, 2013  |  6 comments

When it comes to rendering on somebody else’s DOM, you can’t naively write HTML and CSS like you might for your own self-contained web application. You’ve got to think carefully about how preexisting CSS and JavaScript code might affect your application.

Before you begin to write any HTML or CSS, you’ll have to make an important decision regarding the look and feel of your application. Do you want your application to look the same everywhere? Or do you want the application to inherit the native look and feel of the page on which it’s hosted? Your answer will have a profound effect on your strategy for rendering your app.

One thing is constant: at some level, you’ll be practicing what we call defensive rendering. By defensive, we mean taking steps to output HTML and CSS that minimize the impact of the parent page on your application. The less you want your widget impacted by the parent page, the more steps you’ll have to take. These steps can be as small as namespacing your HTML and CSS to reduce name conflicts, or overspecifying your CSS rules so they take priority over rules from the parent page. For widgets that want complete immunity from the parent page, it could also mean serving your widget on a completely separate DOM, embedded in an iframe.

Andrew Hersh says: I've got to work with HTML and CSS that's been created by... Well, I guess I can't really figure out WHAT it was created by. I...
Art

Mesmerizing minimalist fractals

By Stacey Kole  |  Apr. 29, 2013  |  1 comment

They say you can’t create fine art using fractal algorithms; but Finland-based digital artist Jukka Korhonen has set out to prove them wrong.

Fractal art is a subclass of two-dimensional visual art that produces images from the calculations of a fractal object (a fragmented geometric shape that can be subdivided into parts and is a reduced-size copy of the whole). Examples of this kind of art include the Julia set and the Mandlebrot set, which both include the fractal property of self-similarity.

Because of its mathematical nature, fractal art is primarily considered a genre of computer and digital art. Thus, the challenge for Korhonen was to impart the aesthetic qualities of an exquisite painting, done in a minimalistic style. The result is an ongoing collection of works that would look right at home in a fine art gallery.

Sentiva says: Who on earth says you can't create fine art with fractals? Fools! Also, these are stunning, would be perfect fo rthe office walls.
Audio

How to use HTML5 audio (part 2)

By Sam Piggott  |  Apr. 29, 2013  |  2 comments

This is part two of the HTML5 audio introduction video; if you haven’t watched it already, I recommend checking out part one to get up to speed!

Today, we’ll be working on our HTML5 audio player and adding some exciting functionality to really bring our HTML5 player to life. We’ll be using a method involving data attributes, which allow for easy access to custom values for each audio element, and that’s where our titles, artists and album art come in.

By the end of this tutorial, you’ll understand the following: “Tagging” your audio elements with custom data attributes; such as track title, artist and even album art; using jQuery to manipulate this information and display it on the page, with the flexibility to style it around your own designs.

Sami Mansour says: Firstly, I like to thank you on the lessons. I added previous button: $('.prev').on('click', function(){ ...
Best Of

Every week we tweet a lot of interesting stuff highlighting great content that we find on the web that can be of interest to web designers.

The best way to keep track of our tweets is simply to follow us on Twitter, however, in case you missed some here’s a quick and useful compilation of the best tweets that we sent out this past week.

Note that this is only a very small selection of the links that we tweeted about, so don’t miss out.

To keep up to date with all the cool links, simply follow us @DesignerDepot

Comics

Comics of the week #180

By Jerry King  |  Apr. 27, 2013  |  1 comment

Every week we feature a set of comics created exclusively for WDD.

The content revolves around web design, blogging and funny situations that we encounter in our daily lives as designers.

These great cartoons are created by Jerry King, an award-winning cartoonist who’s one of the most published, prolific and versatile cartoonists in the world today.

So for a few moments, take a break from your daily routine, have a laugh and enjoy these funny cartoons.

Feel free to leave your comments and suggestions below as well as any related stories of your own…

Lakshmanan PHP says: LOL! Integrity redefined!!!
Flat design

Flat design sites that work

By Elle-Rose Williams  |  Apr. 26, 2013  |  18 comments

Whilst the term “flat design” might not be a phrase you’re yet familiar with, you will definitely have noticed the concept and the design features whilst browsing the internet.

For those of you that have noticed an increase in the “drop shadow” trend in web design, the easiest way to describe flat design is to say it’s the opposite of that. Flat design is designing a website that has left behind the drop shadow and the 3D effects, and that is by all intents and purposes flat.

Flat design looks modern, fun, fresh and refreshingly simple compared to it’s 3D counterpart. Flat design is embracing the use of solid colors, sharp, well-defined typography and bold shapes. It takes away any faff and fussiness from the design making it so much easier to digest and to navigate. It’s modern and is without a doubt going to be a huge design trend this coming year.

Jselengia says: I think the move towards Flat Design, is a welcomed one. My aesthetic has always been minimal, which Flat Design encompasses. I...