Toluu

Modern Life

News & Views of the Modern Internet

2007: More Web Design Trends & ClichesDecember 9 2007

It's been well over a year since I compiled the original list of web cliches, so I figured it was time to revisit some of the trends currently prevalent in web design now.

Things have definitely moved on since last year; Web 2.0 is not so en vogue as it was, instead being replaced with richer colours, rougher textures and (on average) fewer rounded corners.

So what trends have emerged? What's hot, inspiration wise?

Odd one, this. Seems the current trend du jour is to employ a cutesy vectoresque graphic character. This fits in with the tendency to use strong colour and graphical elements in the current crop of designs rather well.

The human element of the cartoon also serves as a fashionable replacement for the cliched stock imagery of yore - no longer do you need a photograph of a woman talking on a phone to convey what your business is about. These days, you can utilise a cartoon character to achieve the same effect.

Examples: Elitist Snob, Freelance Switch, sr28, Global Zoo, Wishlistr, and

JavaScript LED Message Scrolling DisplayDecember 1 2007

I guess this answers the question of what to do with the LED icons I posted yesterday - I've always wanted to do a dot-matrix dynamic display in JavaScript, and I suppose an LED message scroller is the perfect excuse.

There's a choice of 7 individual colours (or the nifty rainbow option, pictured below), motion blur, and a few tweakable options to play around with. It doesn't work in Internet Explorer (it's only designed as a proof-of-concept, not as production code), but anything that supports CSS opacity (Firefox, Safari and Opera on Windows) should work just fine - Safari's rendering engine seems particularly nippy.

See the scroller in action, or download the files here.

Extract the .ZIP archive somewhere and open the scroller.html file in your browser - everything should work fine there. You can edit the HTML file to tweak the various settings - if performance is an issue try setting blurLevel to 0.

By Stuart Brown, posted in

LED IconsNovember 30 2007

Simple, versatile, great for status indicators or embellishment: 14 icons in 7 colours, representing the most common types of LED. Make your own virtual throwies, use them on a webpage or an app, do what you like with them.

Available in multiple PNG sizes (16, 32, 48, 64, 128 and 256 px square), Windows .ICO files (incorporating all the sizes of the PNGs) or in original vector .EPS format.

By Stuart Brown, posted in Icons & Iconography, Design
Tags : icons, led, light, emitting, diode
View/add comments on this post

Screen Resolutions and Aspect Ratios WorldwideNovember 26 2007

Intended screen resolution is a deciding factor in terms of a site design and layout - catering for smaller resolutions is a key factor for accessibility and for ensuring as many readers as possible can read your content. But how does screen size vary with locale?

The general rule-of thumb is to go as low as possible - if your design works perfectly at 800x600, great - if it's operable at 640x480 or lower, even better. However, as technology progresses, screens are getting larger and the sizes less uniform - 4:3 is slowly losing favour to widescreen ratios, such as 16:9 and 16:10.

In certain circumstances, the market or demographic which you are aiming at can affect your intended viewing resolution - technical and design-oriented sites can benefit from a substantially larger than average resolution. Different regions also have slightly different profiles - widescreen monitors are more popular in some regions than others, for instance.

Below are statistics compiled from 18 months worth of log data from Modern Life - a sample size of well over a million visitors, from all over the world. I took the screen resolution data from the top 25 visiting countries and compiled them into two key metrics - the average screen resolution (in megapixels, calculated by multiplying the horizontal resolution be the vertical and dividing by 1,000,000), and the average screen ratio (average height divided by average width).

The results show some interesting tre

Good Practice in Implementing HTML FormsNovember 20 2007

Forms are a critical but often misunderstood aspect of web design - most of the attention in tutorials and guides go to the presentational aspects, rather than the usability of forms.

There are countless times when I've been pained by over-zealous validation, postal code lookups which don't have my address, and data lost from a form I've just spent half an hour filling out. As it seems like I've spent the last couple of months working on nothing but forms, I figured I'd compile a handy set of general guidelines.

Single page forms...

In general, I'll avoid spanning a form over more than one page - it makes navigating backwards & forwards difficult for both the user and the developer, and turns the simple act of returning to the top of a form to correct a detail to a painful trawl through a series of pages.

...but paginate when necessary

If you're dealing with hundreds of fields worth of data (and have good reason to), then pagination may be the best way of dealing with it. Make sure you break the page at a logical point, and that full bi-directional travel is possible.

Most importantly, test thoroughly to make sure it's impossible to lose any data when traversing pages, or through server-side validation checks.

Minimise data collected where possible

Although a one-p