Inspect Element » Articles http://inspectelement.com Web Design & Development Blog Tue, 07 Feb 2012 14:31:58 +0000 en hourly 1 http://wordpress.org/?v=3.3.1 The Future of Inspect Element and Some Stats http://inspectelement.com/articles/the-future-of-inspect-element-and-some-stats/ http://inspectelement.com/articles/the-future-of-inspect-element-and-some-stats/#comments Mon, 15 Aug 2011 16:00:24 +0000 Tom Kenny http://inspectelement.com/?p=7918 It’s summer here in London which means I have less time to sit at a computer and write. Combine that with moving into a new place with my girlfriend, starting a new job and not having home broadband for two months thanks to the useless idiots at Virgin Media (with a dose of stupidity from O2 and British Telecom) and you can see why Inspect Element hasn’t been updated anywhere near as much as I would have liked. It sounds rather familiar to a similar situation last year! Fear not as it will all change soon. We have super fast internet, I’m settled in my new job at Factory Media and I’m raring to get going with the new Inspect Element.

That’s right Inspect Element is changing although don’t worry, it will still have the blog at the heart of the machine but there are going to be a couple of additions. I can’t reveal exactly what they are just yet but what I can confirm is:

  • It will still be run and maintained by myself (with possible contributions from elsewhere further down the line)
  • It’ll be more than articles and tutorials (and snippets)
  • There will be a more even balance of both design and development (HTML and CSS)

It’s also worth noting that it’ll be a good few months until it’s ready purely due to the amount of work to be done and it could be ready potentially as long as early next year but stick with it as it will be worth the wait, I can assure you of that. At some point I will give you a peek at the design so keep an eye on @tkenny on Twitter to find out when.

Stats

I’m a bit of a stat geek so let’s get it on!

Inspect Element launched on June 8th 2009 and at the time of writing has had:

  • 1,039,676 unique visitors
  • 1,520,712 total visits
  • 2,650,607 page views

The most popular posts have been:

The single page HTML5 portfolio site I created seems to be extremely popular so I’ll be doing another one which will be much better and possibly with a PSD file for you to download. To be honest, that one was a bit rushed and doesn’t look that great as I designed it in the browser as a quick experiment which I clearly didn’t have the hang of just then!

A very big thanks to every single one of the million+ visitors. There’s no doubt with your support I’ve become a better designer and writer since Inspect Element began. Judging from my experience, one of the best things you can do as a designer is start a blog and just get your thoughts and ideas out there.

]]> http://inspectelement.com/articles/the-future-of-inspect-element-and-some-stats/feed/ 3 Improve your Knowledge of Related Skills http://inspectelement.com/articles/improve-your-knowledge-of-related-skills-2/ http://inspectelement.com/articles/improve-your-knowledge-of-related-skills-2/#comments Mon, 17 Jan 2011 19:25:09 +0000 Tom Kenny http://inspectelement.com/?p=7463 Whatever you do, you should always be looking to improve your work. This is especially true if you’re a web designer or developer as technology and techniques are always improving around you. With that in mind, we’re going to look at one of the best ways to improve your work, by knowing more about related fields.

Web Designers

I subscribe to the idea that all web designers should be able to write the HTML and CSS for everything they design, even if they don’t always (or ever) code the sites they design themselves. Doing so allows you to know the limitations of what you can do. More importantly, you can get more out of your designs if you really know how to get the best out of HTML and CSS.

In a previous role as a web designer, I was able to help some of our web developers with CSS as I had a better understanding of it than they did. We didn’t have any specialist front-end developers, only back-end developers who could also write CSS (to a good but not great level) but that’s another issue. Actually, it isn’t. For a back-end developer, CSS is absolutely a related skill so more time improving that would mean faster turnaround in work. Only one or two developers showed any sign of improving their CSS, while others produced code that didn’t always match designs causing delays in projects. Delays could have been reduced significantly if they had improved their related skills although a web developer really should know CSS well.

A great example of a designer and his ability with CSS is Benjamin De Cock and his CSS playground. His high level of knowledge of CSS allows him to push his designs to the next level. Take his vCard for example.

Web Developers

A web developer who has some knowledge of design and usability, even at a basic level, can be a great asset to a company. If a designer has to pass something on to a developer but has missed a usability issue, the developer who posses some knowledge of usability may spot it and discuss it with the designer, avoiding a problem before it goes live or even before it enters final testing, saving time, money and potential headaches for users.

With my background in design and currently working as a web developer, I’m always looking at usability issues, no matter how small they are and I should be otherwise it would be a waste of what I’ve learnt from previous roles. I can also chip-in with any design work if the designer is too busy or is away on holiday.

One developer who has the ability to design is Shaun Inman. It’s clear that he is a very talented developer having created Mint and Fever and even a quick look at his projects will show you that he can also design. The advantage for him is he can control every aspect of his work. Shaun shows just what can be achieved if you work hard at related skills to the ones you develop first.

Valuable Asset

The final point and perhaps most important is, you’re a more valuable asset if you have skills and experiences in related fields. It’s great to specialise in one or two things as that’s how you’ll become great at something but you’ll get even better at your specialities if you learn other disciplines around your own.

]]> http://inspectelement.com/articles/improve-your-knowledge-of-related-skills-2/feed/ 12 Use CSS3 Now! http://inspectelement.com/articles/use-css3-now/ http://inspectelement.com/articles/use-css3-now/#comments Tue, 11 Jan 2011 10:29:47 +0000 Tom Kenny http://inspectelement.com/?p=7421 I posted a quick tutorial yesterday showing how to use a simple CSS3 technique to spin some icons on hover. I’ve posted CSS3 tutorials before but all of a sudden this latest one has already received a few negative comments complaining that they can’t use CSS3 yet. Of course you can! Get over the way you used to do things, move with the times and embrace the new hotness right now. Today.

Here are two of the most negative comments:

Demonstrations of CSS3 are lame. What, 10% of the internet uses a browser capable of showing this stuff. What a waste of time.

That’s a pretty slick trick! I just wish I could use it now and not have to wait 3 years for the general public to catch up with their browser updates…

I work on corporate websites in my full time job and I use CSS3 all the time. In fact I’m using that spinning icon technique in a site redesign I’m working on at the moment and their usage stats show IE at 67.1% for the last month. However, that number is trending down and usage stats for other browsers are increasing including Chrome, Safari and Firefox. This is not unique to this one site. Every corporate site I’ve checked is showing same characteristics with their users. Chances are, if this is happening in the corporate world, the stats will look even better in other industries.

It’s true, visitors with current versions of IE won’t see the example used in my tutorial but with good use of CSS3 you can enhance interaction for users of newer browsers and people who are upgrading. Browser usage is trending towards newer browsers if you look at the stats. For example, a year from now people who had older browsers and have upgraded their browser (or been upgraded by someone else) will start to notice these enhancements possibly giving them a sense of discovery. They may even notice them more than someone who hasn’t upgraded because they saw it IE first (still fully accessible of course) and then saw it in a modern browser. Certainly not a bad thing.

However, the average visitor who still uses older browsers will still see a fully accessible version of your site and they won’t check sites in multiple browsers to see what the differences are. That just doesn’t happen outside of the web design and development community. In the case of the tutorial in question, everything looks the same initially, so everyone is still getting the same access to content, just the interaction has been enhanced for more recent browsers. That’s the key. As long as everything is still accessible, start embracing CSS3 or you’ll get left behind.

]]> http://inspectelement.com/articles/use-css3-now/feed/ 30 Writing Clean CSS3 Code [updated] http://inspectelement.com/articles/writing-clean-css3-code/ http://inspectelement.com/articles/writing-clean-css3-code/#comments Wed, 01 Sep 2010 22:56:10 +0000 Tom Kenny http://inspectelement.com/?p=7042 One of the main problems with writing CSS3 code are the vendor prefixes. These are the -moz- or -webkit- you see before properties such as border-radius or text-shadow. They’re a necessary evil at worst and you’ll have to use them to get the most out of what CSS3 currently has to offer.

So what’s the problem? I’m very much a fan of the single line approach to writing CSS as seen below. It allows elements to sit under each other nicely, making them easier to find. Good commenting also helps.

The downside of vendor prefixes is declaring the same value more than once. Combine this with the single line approach above and you can see it starts to get messy with every CSS3 declaration on the same line. This will only get more difficult to read, with more CSS3 properties used.

I’m a designer so I can’t have my code looking messy and ugly, especially when you’re working on sites you know your workmates will be working on some point too. My solution is to keep the regular old CSS on a single line but split CSS3 onto separate lines defined by vendor prefixes. Not exactly earth-shattering but now it’s cleaner and much easier to read and edit all those declarations of the same property. They all sit under each other making them easier to compare to one another. I also start with the shortest at the top working my way to the longest, again just keeping everything consistent, neater and easier to read.

It even works well with extra CSS3 properties.

I take the same approach if I’m using rgba for the background colour of an element. The first declaration is for older browsers such as IE which ignore the rgba line.

Over to You

How do you deal with keeping your code beautiful and using multiple CSS3 vendor prefixes?

Update: As a few people have pointed out in the comments as well as a tweet from @nathansmith, you should be putting the vendor prefixes first and the final spec version last. See CSS-Tricks‘ comprehensive explanation.

]]> http://inspectelement.com/articles/writing-clean-css3-code/feed/ 50 Snippets http://inspectelement.com/articles/snippets/ http://inspectelement.com/articles/snippets/#comments Mon, 19 Jul 2010 13:07:14 +0000 Tom Kenny http://inspectelement.com/?p=6857 Now the summer is pretty much over here in England and the World Cup no longer takes up most of my spare time, I can finally dedicate some much needed time to Inspect Element and it’s been far too long.

If you’re wondering, I have plenty of great blog post ideas lined up (my Evernote account is chock full of them) so hopefully it will be worth the wait!

Snippets

Snippets are a way for me point out interesting links in the world of web design and even provide some of my own insight along the way. It’s very similar to a technique that has been used by John Gruber on his superb blog, Daring Fireball. I’m seeing it more and more these days with the likes of Cameron Moll and Dan Cederholm using it via the tumblr blogging engine. As you can see it mixes the more traditional long-form method of blogging with a short-form style that is too much for micro-blogging services such as Twitter.

So why bring this approach to Inspect Element? Mainly because it brings more quality content to your attention. There are many very well written articles out there that I occasionally share via Twitter but that isn’t always the best way to add what my own opinion or thoughts to the mix so it allows me to do that more effectively too.

As you can see above, a snippet is indicated by an icon of a pair of scissors along with smaller font size for the title text which links directly to the article or page itself. For those coming through via RSS will be taken to a page with the full snippet and a link to the source at the bottom.

Other Small Changes

The width of the sidebar has been reduced to focus more on the content. At the same time, a number of ads have been eliminated. I was never doing this to make money, all I need to do is cover the bills of hosting and even with the reduced number of ads I think this is still viable.

Tags have become part of the main navigation in the form of a mega drop-down. This allows the sidebar to become less cluttered but keeping them readily available and always within reach. Tags will become more and more useful as snippets, just like normal blog posts, are being tagged too.

Stick around, there’s plenty of quality content on the way!

]]> http://inspectelement.com/articles/snippets/feed/ 5 Taking a Break http://inspectelement.com/articles/taking-a-break/ http://inspectelement.com/articles/taking-a-break/#comments Wed, 07 Apr 2010 13:12:54 +0000 Tom Kenny http://inspectelement.com/?p=6678 Inspect Element has been up and running for about ten months now. Hopefully it has provided you with enough useful information which you’ve been able to apply to your own work and improve what you do. It certainly has helped me improve my own work which was one of the many goals I set out before I started.

Some of you may not know that Inspect Element is a one-man-show and basically I’ve just become too busy lately to doing any work on new tutorials and articles. You may have noticed that I haven’t posted any content for weeks and have even been too busy too write this post up until now! Apologies for that but the last few weeks have been a combination of new job, moving and currently having extremely limited and painfully slow internet access (tethering via iPhone) in my new place.

I hope to be back up and running in the first half of may. Follow me on twitter to get updates closer to the time. I’ve still got plenty of original ideas for new articles and tutorials. My Evernote is bursting with new content ideas so stay tuned!

One More Thing…

There will be fewer posts on Inspect Element than previously. Likely to be every two weeks rather than every week. This is so I can focus on quality content as there has been some work I haven’t been 100% happy with and that needs to be rectified.

Once again, apologies for not keeping you up to date but get ready for the return of Inspect Element soon!

]]> http://inspectelement.com/articles/taking-a-break/feed/ 13 Tools and Resources to Improve your Typography on the Web http://inspectelement.com/articles/better-typography-tools/ http://inspectelement.com/articles/better-typography-tools/#comments Thu, 04 Feb 2010 14:50:54 +0000 Tom Kenny http://inspectelement.com/?p=6437 Typography on the web has previously been confined to a set of web-safe fonts due to their dependance of being on every computer but now that has changed. It’s one of the most satisfying and rewarding aspects of web design when you get it right but can also be one of the most difficult to do so. Here are some tools, resources and free fonts to help you on your quest for quality typography.

Font Embedding

Font embedding has become the saviour of typography on the web. Without it, we would still be stuck using the usual array of ‘web-safe’ fonts such as Arial, Georgia and Verdana. Not that there is anything wrong with them, just designers needed more choice and variety is the spice of life as they say. In fact web-safe fonts certainly played their part in forcing designers to create readable body text as they’re all very readable at smaller sizes.

@font-face

Advantages:

  • Easy to setup (see previous post)
  • Behaves exactly the same as regular text
  • Even works in IE6+ (albeit through Microsoft’s proprietary format)

Disadvantages:

  • Limited use of fonts due to no form of copy protection

TypeKit

Advantages:

  • Huge selection of commercial fonts to choose from
  • All the benefits of @font-face but with copy protection

Disadvantages:

  • You don’t own the font for use in Photoshop designs etc.
  • Relies on JavaScript
  • Isn’t free (although it isn’t expensive)

Typotheque

Advantages:

  • Doesn’t use JavaScrip, only CSS
  • All the benefits of @font-face but with copy protection

Disadvantages:

  • Seemingly expensive

Cufon

Advantages:

  • Works across all browsers

Disadvantages:

  • Requires JavaScript
  • Can’t select text

sIFR

Advantages:

  • Works across all browsers

Disadvantages:

  • Requires Flash

Font Discovery

WhatTheFont

Have you ever found a great font but don’t know what it is? I frequently get asked what font I’ve used for the Inspect Element logo. Well now you can snap a screenshot and upload it to WhatTheFont which will return a list of the best matches of fonts. There have only been a couple of times where it hasn’t found the font I’ve been looking for but has worked flawlessly otherwise.

MyFonts

MyFonts gives you the ability to view an extensive selection of fonts with custom text before you buy.

FontShop

Online font store founded by extremely well respected typographer and designer Erik Spiekermann.

I Love Typography

You won’t go wrong by following I Love Typography to keep up with what’s going on in the world of Typography.

Education

Typedia

As the name suggests, Typedia aims to be an encyclopaedia of Type by blending the world of crowd-sourcing and social media and community. Not only is this a great place for font discovery but also a great place to learn about typography.

Free Fonts

Fonts available for @font-face embedding

You can’t just start using any font on the web. You have to respect individual licenses so this is a great resource displaying all fonts that have been specifically approved for @font-face embedding. The list is kept up to date as more fonts are added.

The League of Moveable Type

The League of Moveable Type, an open-source type movement, is very much a quality over quantity collection of free fonts.

exljbris Font Foundry

Similarly, exljbris Font Foundry is a collection of a few absolutely great fonts. All fonts are created and released by Jos Buivenga.

dafont

On the other end of the scale, dafont contains a huge number of fonts but finding a good font is like looking for a needle in a haystack. There are a few good hidden gems to be found though.

Font Squirrel’s Free @font-face Kits

A number of free fonts for you to download complete with the CSS you need to use the fonts on your site.

One more thing…

Don’t forget to check out Elliot Jay Stocks’ 8 Faces magazine when it launches as all signs point to it being excellent.

]]> http://inspectelement.com/articles/better-typography-tools/feed/ 13 15 Stunning and Fresh Premium WordPress Portfolio Themes http://inspectelement.com/articles/15-stunning-and-fresh-premium-wordpress-portfolio-themes/ http://inspectelement.com/articles/15-stunning-and-fresh-premium-wordpress-portfolio-themes/#comments Mon, 18 Jan 2010 23:35:05 +0000 Tom Kenny http://inspectelement.com/?p=6172 A benefit of building a portfolio using WordPress is you have the ability to use the powerful blog features alongside your portfolio. A blog discussing your work or more about your processes and inspiration will add to the personality and allow potential clients to get to know you more increasing the attractiveness of you as a web designer. WordPress can also act as a more than adequate CMS for displaying your portfolio work.

Previously we’ve looked at Fantastic Presentation Styles of Web Designers’ Portfolios so taking what has been learnt from there, let’s look at WordPress themes which make great portfolio displays. Many people are of the assumption that WordPress is nothing more than a blogging platform but it can easily be adapted to behave more like a traditional content management system as the following themes demonstrate.

Ready-made WordPress themes are great:

  • for web designers who don’t know WordPress
  • for web developers who can’t design
  • if you don’t have enough time to build a WordPress theme
  • because they give you the opportunity to learn about different techniques and the inner workings of complex themes
  • as they’re inexpensive
  • because they are supported by the sellers and are often updated to fix problems or even make improvements

1. Display ($42)

This theme makes use of a prominent area to display your work on the home page with the use of a slick 3D flash box that transitions between images in a unique and cool way.

View Live Demo

2. DesignFolio+ ($32)

View Live Demo

3. LondonCreative+ ($32)

A striking design through the use of colour and pixel perfect layout give the LondonCreative+ theme a distinct look and feel that is almost instantly memorable and one that visitors are likely to come back to.

View Live Demo

4. Varnish ($37)

Varnish doesn’t have a portfolio page built in but you’ve got a fantastic three column design to build off and create your own.

View Live Demo

5. Manilla ($27)

Manilla doesn’t do anything particularly special but what it does do, it does extremely well. A great use of tabs, textured background and whitespace make this theme a great way way to show of your work.

View Live Demo

6. Pandora ($32)

This theme uses an AJAX filter on it’s portfolio page so it’s perfect if you have many examples of work to show off.

View Live Demo

7. Magnifizine ($32)

Magnifizine utilises a large image to show off the latest work on the homepage. Also the contrast against the dark background really brings out the colour of the images.

View Live Demo

8. Bosspress ($32)

The header of the Bosspress theme is a giant showcase of your work. Certainly a memorable showpiece for any visitor.

View Live Demo

9. Northern Lights ($27)

View Live Demo

10. Picco ($27)

Picco implements a carousel effect on the homepage to present a select few pieces of work.

View Live Demo

11. CUBE-X ($32)

The centrepiece of Cube-X is a big colourful image of 3D blocks with your project work overlaid on top to really make your work jump out.

View Live Demo

12. Business Planet ($27)

View Live Demo

13. Ambiguous ($32)

View Live Demo

14. ShapeShifter ($32)

ShapeShifter uses the same 3D flash image rotator as the Display theme above. It’s also a sleek one-page portfolio with a minimal style.

View Live Demo

15. TurboMax ($27)

TurboMax really comes to life as you navigate through the pages when a parallax scrolling effect causes the clouds and leaves to move with the sections. The portfolio page itself may need a bit of work but it’s a great base to build from.

View Live Demo

]]> http://inspectelement.com/articles/15-stunning-and-fresh-premium-wordpress-portfolio-themes/feed/ 16 Call to Arms for Web Designers: Make Simplicity the Trend for 2010 http://inspectelement.com/articles/web-design-simplicity/ http://inspectelement.com/articles/web-design-simplicity/#comments Fri, 15 Jan 2010 19:05:22 +0000 Tom Kenny http://inspectelement.com/?p=5779 When designers talk about web design trends, more often than not, they’re referring to a visual design style such as letterpress or gradients but a trend doesn’t have to be something you see.

So this doesn’t mean you have to resort to using a minimalistic design to achieve simplicity in web design. Far from it. Applying simplicity to your websites or designs can be as simple as removing unnecessary elements or by reducing the steps it takes to complete a specific task.

We live in a world where technology is becoming more and more advanced but the way we interact with it is becoming more and more simple. The current example are touch screens and the impending release of tablet computers. When you look at what touch screens are doing for usability, you realise they are removing any intermediate devices (keyboards and mice) and allowing you to interact with the device directly. A great example of making something easier through simplicity.

Less Really is More

The simpler we can make things for web users, the easier it will be for them to achieve the goals we want them to but more importantly that they want to. After all, you’re designing sites for users first and foremost, always.

Too much information can be confusing and off-putting to potential customers as everything is trying to vie for the visitors attention, away from what you want really want them to do. Book a holiday, buy a book or subscribe to your service, simplifying to focus more on these will increase conversion.

Perform user testing to see what features users are not using as much and don’t be afraid to scrap them. If they’re not using a particular feature it may just be in the way, cluttering up the their decision making and preventing them from reaching the final goal. Many companies are insistent on adding new features and more sections and pages to a site on a regular basis believing more choice is always better where in actual fact too much choice can become confusing.

Simplicity Success Stories

There’s no better way to show how simplicity can make a difference than to look at some examples of how simplicity has helped create success. While not all of the following examples are directly related to web design, there are plenty of lessons that can be learnt from their successes. They all have the same thing in common Simplicity in design has helped them achieve greater success.

Apple Products

First the iMac, an all-in-one computer that is mostly screen. In terms of computer design it is very simple as it combines the computer and the monitor which avoids extra cabling in the connection between the two and only require one power cable instead of two.

The iPhone is controlled entirely by the screen. There aren’t any superfluous buttons to bring up a menu, go back or even any buttons for a keyboard, only a single button (of course, there are buttons for silencing and volume control but that’s it) to bring you back to your list of apps. This approach to simplicity is one of the main design decisions why Apple are taking control of the smartphone market.

Nintendo Wii

The common standard in video game controllers before the Wii was a two-handed ergonomic design with numerous buttons. Nintendo saw this ‘complicated’ design as a reason why most people don’t play video games. They released a controller with a familiar design to that of a television remote control which is instantly recognisable. It’s usable with one hand and plays by recognising physical movements. Something that everyone does everyday, making it instantly usable through a simple design. After all, what’s more simple than waving your arms about?

With Nintendo having sold more consoles than their competitors this generation, it is no surprise to see Sony and Microsoft gaining inspiration from their success with simplicity and will be releasing their own motion controlled devices soon.

Twitter

By far the simplest form of social networking on the web. While it hasn’t achieved commercial success yet, it certainly has captured the minds of it’s users and mostly because of how simple it is. At least at the lowest level.

‘Tweets’ consist of a maximum of 140 characters people who follow you see what you post and you see what people you follow are saying and that’s basically it. Simple but effective.

Further Reading

Remember, simplicity is the key.

]]> http://inspectelement.com/articles/web-design-simplicity/feed/ 51 A Look Back at the Best Redesigns of 2009 http://inspectelement.com/articles/a-look-back-at-the-best-redesigns-of-2009/ http://inspectelement.com/articles/a-look-back-at-the-best-redesigns-of-2009/#comments Thu, 07 Jan 2010 00:20:39 +0000 Tom Kenny http://inspectelement.com/?p=5699 With 2009 complete, we can take a good look back and realise that it was a great year for web design. It’s time to reflect and see what redesigns really were the best of the bunch from such a great year. While redesigning Inspect Element, I took the time to see what other sites had done to reinvent themselves and breathe new life into their projects. Here are just some fantastic examples from the last year and what makes them so great.

Carsonified

The first thing you notice with the new design is how adventures they are with the combination of typography, colour and illustration. You know what stands out for me amongst everything? The simplicity. Something that I hope is carried over into 2010 as a ‘trend’. Included is everything that is necessary and nothing more. It’s this simplicity why I think Carsonified is one of the best redesigns of the year.

National Rail

Here in the UK we struggled along with a boring and out of date design for our national rail services so to say a redesign was long overdue is understating it ever so slightly. But here we are in 2010, witness to a great redesign, especially when compared to the previous version, making the list due to the vast improvements it makes achieves.

Form design has been improved substantially from the old design. It has now been made the primary focus of the site and rightly so as it is the most used feature on the site. A smart redesign tip is to realise what your customer wants and give them exactly that.

They’ve also done a good job of simplifying by removing unnecessary content from the homepage. At the time of writing they’ve simplified the page even further due to the heavy load as customers flock to the site to check the latest travel news and how it has been affected by the huge snowfall we’ve had across the whole of the UK, demonstrating that this is something they’ve paid attention to in the design and build.

CNN

CNN redesigned their site towards the end of the year and received a lot of attention. Deservedly so. A bold header with a centred logo is very well laid out and immediately memorable. Much more so than their previous than their dull white header. The grid layout displays content in a way that is easily scannable.

CNN have certainly not forgotten that a redesign isn’t all about the visuals as their story highlights section demonstrates. A great addition that certainly helps people digest information easier in a world where we can get information whenever we want, however we want. Make a note of this and learn that redesigning websites isn’t just bout making everything look nicer but to improve the experience and great ideas like this can go a long way.

The White House

Barack Obama promised change to the American people and they’ve certainly got that even if you just look at the official White House website. To get an idea of how good the redesign of The White House is, take a look at the just how ugly government websites can be.

It has the elegance that one of the biggest countries in the world requires, treats whitespace with respect, has great typography, makes good use of both shadows and gradients and makes excellent use of the footer.

Manchester City Football Club

Recently cited as one of the reason why the English football club made the biggest loss in the history of English football, the redesign of Manchester City’s website is worth every penny. It is another example of keeping things simple to the benefit of the visitors.

Great imagery is the order of the day here with big spaces set out for high quality photos on every single page and really helps communicate the message along with the bold typography.

Redesign of the Year: Engadget

The redesign of Engadget is a great example of taking something that wasn’t necessarily bad and turning it into something truly special. It demonstrates how fast the world of web design moves. Before the redesign they were certainly one of the most successful gadget sites on the internet, if not the most successful. Not resting on their laurels and while on top of their game in the world of content creation, a new version was released that takes their gadget coverage and news to the next level. This is the act of a forward thinking company and I like it.

As the screenshots below show, one of the best aspects of the new design is colour. Probably some of the best use of colour seen all year, used in the first couple of examples to show the most posts in a day and most comments on a topic by using the heat colour model.

With Blue representing cold for lower frequency rising up to red hot for the other end of the scale.

Colour is also used well to clearly present breaking news articles as seen below.

Not only that they use colour on their social sections. Light blue for Twitter and dark blue and yellow for digg. These match the well-known colour schemes for their respective sites but Engadget are able to keep the style consistent with their own brand.

Due to the almost overwhelming amount of content they publish, the top stores section gives readers the opportunity to keep up to speed with the more important articles and news. They achieve this with a layout that almost looks unique every time you see it, therefore catching your attention.

The header section is used to great effect. First off a very noticeable red bar appears at the top of the page whenever they are covering a live event, especially popular when Apple are in town.

Below that is an area used to display what I can only describe as their flagship articles or promotions with a simple tab system to navigate between them all.

All of the above come together to form a cohesive design where not one section is overpowering another, where colour is used to great effect and ultimately evolve a design that many didn’t think needed evolving. Until now.

Your Thoughts

As usual, add your thoughts in the comments and let me know what your favourite redesigns of last year were and why.

These are the redesigns that I’ve focused on and I know that there are many many more that could comfortably make the list but it’s best to not go overkill and instead keep focused on a few examples rather than a boring static list of 50.

]]> http://inspectelement.com/articles/a-look-back-at-the-best-redesigns-of-2009/feed/ 29