Modern Life is a blog about the web - development, design, search engines and statistics. Sometimes controversial, occasionally satirical and usually on the nose.
Cartoons, textures, swirls, earty tones and richer colours
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.
The world of web design has seen some sweeping changes since its inception years ago - many of the limiting factors that were once such a concern are no longer in place. With far more bandwidth to play with, and a limitless palette from the full 24-bit gamut (a far cry from 'Web Safe' colours!), the once humble background image has now become the underpinning feature of many designs.
Complex swirls, flourishes and rougher drips and sprays are a common choice these days, and they are a great way to add some spice to an otherwise plain backdrop.
Creative use of backdrops has also meant a lot of designers opt to 'break out' of the conventional box model. Why bother rounding corners when you can ignore them completely?
With better CSS support in browsers comes more creative use of backgrounds, absolutely-positioned elements and full transparency - perfect for breaking down hard edges and enabling freer designs. The humble basic <div> boxout isn't going anywhere yet, but it's always nice to have options.
Ah, yes. Oft a joke at Web 2.0's expense, the oversize RSS icon is very much alive and well. Perhaps not as ubiquitous as it was, the size of the RSS icons is still the prime concern of the webmaster looking to promote their feed.
Whether it's wood, paper, stone or a combination of all kinds of texture, anything other than flat colours or basic gradients has been hot this year. I suspect it's a backlash of the gradient-led design that prevailed in 2006, but rougher backgrounds are in, and cleaner designs are out.
Ink spills, scrawls, scratches and other real world effects have played a strong role, as well - 'busy' is most certainly the look to aim for, it would seem.
The neon hues of Web 2.0, such as Flickr Pink et al, have toned down a bit and found a more earthy set of hues in many current designs. Darker reds, burgundies and browns are a popular choice - and these pair well with the ubiquitous dark grey background, favoured by a lot of sites.
So there you have it - another six trends that seem to have bubbled to the top of the collective design community. Things have gone from Web 2.0's clean and simple to busier and less conventional designs. Colours have gone from electric neon to more muted rich reds, earthy tones and textures. What on earth will 2008 bring?
Any resemblance to a <marquee> is purely coincidental
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.
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.
24-bit PNG and Windows Icons (.ico) formats
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.
Screen real estate availability across a selection of countries
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 trends.
Average screen resolution, worldwide
Here, the green countries show a trend towards higher resolution displays, the red towards lower resolutions. India had the lowest average display size, at 0.872 megapixels - an average of slightly higher than 1024x768.
The highest resolutions were found in Scandinavia and Central Europe - with Switzerland boasting an average resolution of 1.306 megapixels - about the equivalent of 1280x1024.
Average screen ratio, worldwide
Average screen ratio serves as an indicator for the prevalence of widescreen monitors - countries in green have wider resolutions, on average. Denmark, Belgium, the U.S. and Italy have the highest incidence on widescreen resolutions.
Russia, on the other hand, despite a higher average resolution, favours 4:3 and 5:4 resolution screens - and thus are likely to have more vertical resolution available.
Resolution vs. Ratio, per country
This scatter graph illustrates groupings more clearly - Western Europe is concentrated on the right hand side, Asia and South America to the left. Russia is distinct in being the only country to have an average resolution taller than 4:3 - a feat accomplished by the popularity of 1280x1024 (which is in the ratio 5:4).
There would also appear to be weak positive correlation between screen size and ratio - larger screens are more likely to be widescreen (which makes sense, given the increased suitability of larger screens for presenting widescreen content).
|Country||Avg. Megapixels||Avg. Ratio|
Total sample size: 1,110,495, based on data accrued via Google Analytics for modernlifeisrubbish.co.uk. Data from May 2006 through November 2007. Resolution data sample taken from the top 10 most commonly occurring resolutions taken (outliers excluded). Data collected for only the top 25 most commonly occurring countries.
Tips & tricks for optimum efficacy in data collection
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-paged form is best, excessive scrolling is undesirable too. If you can compact or exclude some of the fields, do so.
This is particularly applicable to registration forms -you don't need to collect every last scrap of information about your user at the time of registration, just collect the basics. Just username, email, password, and perhaps a second password field to confirm. Anything more is superfluous - and you can allow the user to enter it at a later date.
AJAX in forms
Avoid AJAX controls in forms. If it breaks you'll have no route for graceful degradation without losing form data, and I'm yet to see such a control with any real use.
Form submission via AJAX is also less-than-sensible, unless you're dealing with a form in an environment that's already reliant on a steady page state. Don't use it unless you need to - the browser's in-built handling for forms via POST will be far more robust, and just as fast if done right.
Overly aggressive validation
Any unsafe data (i.e. SQL injection attempts) should be sanitised server-side - it shouldn't be a consideration client-side at all. You should be concerned about minor corrections, and even then - use a light touch.
Use <label> elements
I'm a fan of the implicit label in forms - that is, encapsulating the input element with a label to automatically associate them. It's simple, makes label / input pairs easy to style, and doesn't require too much extra markup.
The explicit (but more verbose) method is to use the <label> element's 'for' attribute - here you can specify the id to which the label belongs. This does allow slightly more flexibility as fas as styling goes, but it's down to your own requirements whether you use implicit or explicit labelling.
Labels provide usability hinting for the browser - for instance, in Firefox clicking the label associated with a checkbox will have the same effect as clicking the checkbox itself (effectively increasing the clickable area of the control) - a common convention in operating systems and a boon for usability.
The <input type="file"/> element is horribly broken as far as CSS is concerned. Styling via CSS is possible (such as this way or this one) but the backend code is messier than I would like and non-intuitive.
Also, if you're constructing a form that handles an upload don't forget to add the attribute enctype="multipart/form-data" to your form. Otherwise, it simply won't work - as I discover nearly every time I'm working with file uploads and forget all about the 'enctype' attribute.
Keep forms simple. Don't break anything. Consider usability at every step.
In full 1-bit glory
I thought I'd try my hands at WordPress tweakery, and so I thought I'd mark up my first custom theme. For whatever reason, I decided that a rendition of the monochrome MacOS from circa System 6 would be cool - with a few liberties taken for the sake of the web, of course.
It's my first real attempt at a theme, so goodness knows if it'll work on anything other than WP 2.1.2 (which is what it was developed under). Still, it's based on some of the structure behind the default Kubrick theme, so it should be relatively complete. Here's a screenshot:
And you can preview it installed here:
Or, just cut to the chase and download it here. Place it in your wordpress wp-content/themes directory and it should appear in your presentation config.
Six sites to make your feedreader happy
Summer has always been somewhat of a quiet time on the blogging front, with folk jetting off on holiday and enjoying the sunshine - anything other than being cooped up indoors writing.
But whilst we're soaking up the sun and are being generally non-productive, the feed reader addiction doesn't go away so easily. Thankfully, there are a number of great blogs, web comics and sites out there to read - and here are some of them I've been enjoying over the summer lull.
Robots, girls and a dash of nerdy in-jokes. Described as a 'pixelated robot romance web comic', Diesel Sweeties pretty much delivers everything you'd expect on that promise.
Although it verges on the precipice between weird and cool, once you grok the general theme - and remove any inhibitions you may have over technosexuality - you'll love it. It's almost certainly my favourite web comic.
Passive Aggressive Notes
A whole site dedicated to little notes left out of sheer frustration? You bet - in full, unadulterated glory.
Although not technically passive-aggressive, the notes in question are usually rather amusing - although the bile evident in some of the notes may indicate the subject in question might not share the joke. It's an all-too familiar brand of humour, and well worth a slot in your feed reader.
Possibly the best (if not the only) blog about typography in existence. Shame it's not updated nearly as often as it should be - but Typographica is still a favourite.
What The Duck
WTD appeals to the photographer in me - it's a webcomic about the travails of a ill-fated but well-intentioned duck, with aspirations of making it big as a photographer.
Updated every weekday, it's a somewhat humorous insight into the world of photography, photographers - and something familiar to all freelancers - the bad client. Well worth a subscription if you either a) are interested in photography, or b) like webcomics with ducks.
I have a weakness for all things electrical, covering the gamut from analogue to digital - and music-related electronic gear is certainly no exception. From analogue synthesisers to vocoders, Music Thing runs the gamut of cool musical gear.
Worse Than Failure
Formerly 'The Daily WTF', 'Worse Than Failure' is a unashamedly geeky look into the world of programming - from dodgy code to unhelpful error messages, to the worst interview candidates ever.
Some of the code snippets might be a little obscure (particularly if you're not a programmer, or if it's in a language you're not familiar with) - but the comments are generally rather insightful as to discovering what the true 'WTF' is. Recommended, and worth subscribing to for the regular 'Error'd' posts that never fail to lighten a droll Friday afternoon.
So there you have it - six of my favourite RSS feeds from the last few months. Now, over to you - what feeds have kept you entertained recently?
A lot of design tutorials tend to focus on the aspect of 'inspiration' - without much emphasis on the design process itself. For all the showy gradients and web 2.0 gloss, truly good design comes from an altogether different approach.
Emulating a design you like is perfectly acceptable, but you can't create a great design by solely cannibalising other sites - a modicum of the design process is needed. Here's how to get started on the road to design nirvana.
Before you even think about writing HTML, or opening Photoshop, you should cement the foundations for your design on paper - or whatever sketching medium you're most comfortable with - first.
Planning is the first step on the road to a great design, and starting to sketch out what the final production will look like will help you gain a stronger overall concept.
The overwhelming trend for design recently has been a shift to run the gamut in regards to choices in colour, in tone, and in form. Gradients, multiple colours and swirly vector effects are very much 'en vogue'.
Effective design is never gimmicky. If you wish to design something that's easier to maintain, more legible, and more future-proof then simplicity is the key.
That doesn't mean you can't use vectors, gradients, and a large palette of colours - but the effects, forms and colours you do employ should be deliberate.
If an element or an effect has no net gain on the overall design, remove it. Take away the superfluous parts of a design and the core components will stand out stronger, making for a more cohesive identity.
Typography is critical in information design. If you don't know your Helvetica from your Arial, then you're in real trouble.
Thankfully, there are many, many books on the subject of type - Stop Stealing Sheep & Find Out How Type Works is a good overview, and a cursory search for 'typography' returns over 16,000 results. There is plenty of material out there.
Unfortunately, there's no overnight method to learn typography - you just have to immerse yourself in it, read the books, take a course if you're particularly serious - and with time you'll become a typophile like the rest of us.
I can also recommend Typographica. It's a superlative typography blog, although sadly not updated nearly frequently enough.
The sad thing about so many of these glitzy, overwrought designs so lauded these days is that usability is usually left abandoned on the wayside.
Usability is design. It's not just about how your site looks, it's about how it works. Both of these qualities interoperate, and the best designs couple visual attractiveness with an interface that just feels 'right'.
Be aware of how your site works, and be aware that the design runs deeper than the look of a site.
Good design takes time. Deliberate over your work every chance you get, ask yourself questions - how could this be better? Is it obvious how this works? What does this represent?
The entire design process is little more than the conception of an idea - your initial sketches - and the continued refinement of that idea into the finished design.
When you've written the last of the CSS, tidied up all the parts you intended, take a step back. Look at what you've created. Don't be afraid of making tweaks.
The final stages of a design are the most decisive - don't give up on good when you can achieve beyond.
Sadly, there are not often any shortcuts that pay dividends, and design is no exception.
Practice is an important part of any learning process, and with so many aspects to modern design - from the backend programming to mastering the software, and the core design aspects underneath - time is critical in understanding the art.
The good news is, at least, that there's no such thing as bad practice - as long as you keep self-critiquing, keeping up good design practices and always challenge yourself, then you'll continue to improve.
...and only a year or two behind the trend - good show!
Those of you fearing that the BBC is out of touch as far as the web is concerned need worry no more - the recently-opened-private-beta of the BBC iPlayer is at the cutting edge of interactive design. I mean, just look at the Beta application page:
There never was a more timely design - it checks all the right Web 2.0 boxes:
Gradients - check. Not as many as there could be, but the grey shadow at the top definitely counts.
Official Web 2.0 colours - check. It's not an exact match, but that pink isn't a million miles away from 'Flickr Pink'.
Beta status - check. Like all good Web 2.0 applications, you can't just go ahead and launch. A good long stint in Beta should put everyone's minds at ease.
Web 2.0 name - check. Not quite as good as 'iPlayr', but at least the lower case 'i' makes it sound trendy and cool.
Screenshots floating in mid-air - check. I would have preferred the wet floor effect, but the floating screen with drop shadow is a nice touch nonetheless.
Oodles of hype - check. I'm reserving judgement on the iPlayer until I've seen it, but it's certainly had it's fair share of hype - and criticism - already.
Result: Full Web 2.0 compliance.
Nobody reading your crappy blog? Spam Digg and Reddit with it constantly!
Blogspam is bad. It must be; it has 'spam' in it. But what on earth is blogspam?
Let me give you some context. On the social media sites, such as Reddit and Digg, self-submission of your own work is generally seen as OK - implicitly on Digg, assuming it's worthwhile content, and explicitly on Reddit.
Daniel Miessler came out strongly in favour of self-submission - under the premise that more submissions from new writers, new content sources will allow the best of those to break through where they might not have done before.
Great. So I can submit anything I churn out then? And I can be rewarded with a metric boatload of traffic if folk think it's good?
Yes. Well, sort of. Submitting everything is probably a bit much. Not every blog post is worth reading. Some lack context. Some are just a links to other blog posts. Some are just badly written.
So if I submit everything I write, is that 'blogspam'?
I suppose it could be classed as that, particularly if the reason you're doing it is solely to get traffic. Submitting everything you write, regardless of quality or suitability, will reduce the signal to noise ratio, and thus make it harder to find good content.
Another thing to bear in mind is the thorny issue of original content. Whilst it's fine to quote other blog posts or news sources verbatim, if that's the whole of your post then you should consider submitting the original link, rather than your own insubstantial blog post.
But what about the ad revenue? The traffic? The glory!?
Spoken like a true blogspammer. But at least you're not posting pictures of cats.