Subscribe: Modern Life
Added By: Feedage Forager Feedage Grade B rated
Language: English
add  average  brown posted  colours  data  design  form  forms  good  great  led  resolution  screen  stuart brown  web 
Rate this Feed
Rate this feedRate this feedRate this feedRate this feedRate this feed
Rate this feed 1 starRate this feed 2 starRate this feed 3 starRate this feed 4 starRate this feed 5 star

Comments (0)

Feed Details and Statistics Feed Statistics
Preview: Modern Life

Modern Life

News & Views of the Modern Internet


2007: More Web Design Trends & Cliches

Mon, 10 Dec 2007 00:00:00 +0000

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 NetNova. 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. Examples: Rawnet, taDesign, Hoy puls, imlousekStudio. 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
boxout isn't going anywhere yet, but it's always nice to have options. Examples: Cult-foo, Web Designer Wall, Airborne and dreaming, Belchatow. 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. Examples: ReviewMe, ShoeMoney, and the Daily Star. 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. Examples: Jesus Rodriguez Velasco, Cottonseed Oil, and Dulles Dodgeball. 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. Examples: 9rules, OnWired, ScoreReviews, SayHej!. 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? By Stuart Brown, posted in Web Design, DesignTags : web, cliche, designView/add comments on this post[...]

JavaScript LED Message Scrolling Display

Sun, 02 Dec 2007 00:00:00 +0000

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 JavaScript, Web Design
Tags : , , ,
View/add comments on this post


LED Icons

Sat, 01 Dec 2007 00:00:00 +0000

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 : , , , ,
View/add comments on this post


Screen Resolutions and Aspect Ratios Worldwide

Tue, 27 Nov 2007 00:00:00 +0000

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). Tablular Data Country Avg. Megapixels Avg. Ratio India 0.872 0.739 Brazil 0.913 0.748 Argentina 0.943 0.746 China 0.950 0.732 Mexico 0.999 0.722 Turkey 1.018 0.734 Singapore 1.035 0.720 United Kingdom 1.049 0.730 Spain 1.074 0.734 Poland 1.085 0.734 Romania 1.096 0.745 Italy 1.129 0.718 Japan 1.134 0.744 Canada 1.138 0.722 Russia 1.160 0.756 United States 1.167 0.720 Australia 1.179 0.727 France 1.184 0.723 Belgium 1.209 0.715 Netherlands 1.224 0.725 Germany 1.233 0.731 Finland 1.239 0.733 Denmark 1.264 0.717 Sweden 1.269 0.727 Switzerland 1.306 0.725 Methodology Total sample size: 1,110,495, based on data accrued via Google Analytics for 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. You may download the raw data as an Excel spreadsheet[...]

Good Practice in Implementing HTML Forms

Wed, 21 Nov 2007 00:00:00 +0000

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 Don't be too aggressive with your JavaScript validation. Consider it to be like a velvet rope, guiding users away from any obvious pitfalls but not in any way a major impedance. Remember - JavaScript can (and will) be turned off on the client. 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

Retro MacOS Wordpress Theme

Tue, 07 Aug 2007 19:00:00 +0100

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.

By Stuart Brown, posted in Blogs & Blogging, Design
Tags : , , , , ,
View/add comments on this post


Six of the best: Recommended Reads

Tue, 07 Aug 2007 00:00:00 +0100

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. Diesel Sweeties 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. Diesel Sweeties / RSS Feed 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. Passive-Aggressive Notes / RSS Feed Typographica 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. Typographica / RSS Feed 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. What The Duck / RSS Feed Music Thing 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. Music Thing / RSS Feed 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. Worse Than Failure / RSS Feed 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?By Stuart Brown, posted in RSS and Syndication, Blogs & BloggingTags : rss, recommended, feeds, readsView/add comments on this post[...]

Forget design 'inspiration' - just stick to the basics

Mon, 06 Aug 2007 00:00:00 +0100

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. Planning 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. Simplicity 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 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. Usability 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'. Google is a great example - Facebook, too. There's nothing outstanding, visually, but the functionally-led design makes both sites great. Be aware of how your site works, and be aware that the design runs deeper than the look of a site. Refinement 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. Practice 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 BBC iPlayer is officially Web 2.0 compliant

Thu, 02 Aug 2007 12:00:00 +0100

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.

By Stuart Brown, posted in Design, Web 2.0
Tags : , , ,
View/add comments on this post


There's a fine line between blogspam and self-submission

Thu, 02 Aug 2007 00:00:00 +0100

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.

By Stuart Brown, posted in Social Media
Tags : , , , , ,
View/add comments on this post