Technical

Walkthrough of a CSS3 website design slice.

Slicing is a sign of a terrible golfer. Slicing is also the process of cutting up an image design into smaller images and writing markup code to turn it into a living, breathing website. I recently got a request from a friend to slice their portfolio website. Here is the original design he sent to me (and dumped on WIPUP as well).

It is a fixed width, fixed height website design. Technically speaking, it’s a rather simple design. Most website frontend coders would just launch right into slicing, but this time I wanted to have some fun. I wanted the freedom that any slicer and designer yearns towards – perfect separation between presentation and content, and complete disregard for browser compatibility.

Yes, if you haven’t already guessed, I built this site with CSS3. The only images I used in the end were the green background image, and the splash screen background image (oh, and the leaf icons for the navigation, but those don’t really count).

Most of the layout was straightforward using things like the new border-radius and box-shadow tags. However the lump in the navigation bar posed some complications. In the end I was able to recreate it using a three-layered solution (via the z-index tag). The first layer held the navigation strip with shadow effects. The second (above first) layer created the lump in the navigation’s shape and shadow. A third layer mimicked the second except with a slightly decreased width, slightly offset at the top and a shadow of the same colour as the background to create a "fading" effect for the shadow on the sides. With position: relative, and offsetting to place them, I managed to recreate the effect pretty darn well, if I might say so myself.

Finally, I used Google’s Font API to choose a more appropriate font, applied text-shadows (with a different colour in my a:hover tags to create a nice glow effect) and stuck it up online for my friend to see. Here’s the result (output via Gecko renderer):

This multi-tab bar is a common webdesign element, so this trick might help other CSS3-yearning developers. Here’s the code for those who are interested. The design works in Firefox, Opera, and Safari. Chrome does not render rounded shadows correctly but otherwise works fine. It fails with IE8 and below. Haven’t tested IE9.

Uncategorized

Webdesign usability – confusion or convenience?

Today as work is starting to pick up on the WIPUP project, I decided to tackle something that had been nagging at me for quite some time – the header of the design. Before I continue, let’s take a peek at what we currently have:

wipup_design2

When a fresh user views that page, regardless of aesthetic merit (after all, this is a user-based website, not a content-based website) they are instantly hit by a few things:

  • This blue box actually does not contain much information, but takes up half the screen nontheless.
  • This area below the blue box is darker and thus accented more, but contains very useless information.
  • As a new user, I would not want to use any of these features.
  • Even as a registered user, it’s unlikely I would want to use these features more than 5% of the time.
  • What are those icons on the top right?
  • Why is the “upload” and “sign in” button so ugly?

Ignoring a slightly longer load time and slight browser incompatibilities (though that is a fault on my part) we have introduced a good 15 or so new things a user could do simply in the top half of the page – most of which should be ignored most of the time. The important thing here is that no matter how feature-packed you want your interface to be, you have to deal with user myopia, addressed very well by Jeff Atwood.

One way to tackle this problem is by overlaying other web 2.0 technologies (such as this .net developer) above the website – a great example being how Google revolutionised web email clients with GMail. However mainly for personal preference I decided to tackle this one from the ground up – that is, the luddite of a webdesign itself. Here’s my solution:

sample

As you can see, what really stands out is the title of the site – like it should. I’ve cut things down such that it takes up a bare minimum of the page, will have faster load time and requires less non HTML/CSS tricks. The next point of focus is the actual content.

The implications of this are that user choice is now limited to a simple  7 choices. The 3 icons, the 3 links, and reading the main content. The 3 icons are likely to be disregarded almost immediately as there is no textual information as to what their function is. This is good as it’ll only seem important to existing users – those who know how to use them and are familiar with the site. The three text options are easy to read and disregard too – it might be improved further if the search link were turned into a small magnifying glass icon.

The end result is that the user’s focus is on the content. We don’t overwhelm the user and keep their eyes where we want them. Remember: simple sells.