We recently completed our website redesign and relaunch, which is always an exciting moment! Many factors come into play when the idea of a redesign is on the table, besides making it aesthetically cleaner and functionally smarter. Why redesign? What was not working with the existing layout? What is working? How can it be better?

Let’s take a look at the old layout. The width was optimized for the least common denominator monitor size/resolution. The button to access the 10e20 Blog was not included and separate from the main navigation, making it harder to find. The fancy stock photos looked a bit cheesy.

Initial visibility
It is nearly impossible to design a website to look exactly the same in every browser, computer platform and screen resolution. Fewer than half a percent of users still have 640×480 (I jack mine up to 1280×1024); however, we wanted to extend the existing layout’s width and optimize for 1024×768 monitor resolution. The page’s initial visibility is then optimized for this and has most of the important content above the fold.

Scrolling is always a key consideration and we opted to have no horizontal scrolling and allow the content to extend vertically down the page.

We wanted to add some motion to the page. Something that could be changed easily and as often as we wanted. This animation would freshen up the design and add a little flavor as it aged. Flash is the best option for this and when used correctly Flash can be both effective and visually appealing.

Page Readability
The homepage uses a basic two column grid that makes reading the text easy. The interior pages keep this format with a right hand sidebar.

Page Aesthetics
All the elements line up and have enough white space to allow the eye to flow from one section to the next. Another problem with our previous layout design was the blog and how it was not uniformly designed to work with the rest of the layout. Now we combined the two seamlessly — the only difference in the layouts is that the content in the right hand sidebar changes to be more blog relevant.

Add a Favicon
The little icon that you see at the top of a browser window and in your bookmarks list are Favicons. This is a subtle way in building the brand on a website. When a visitor sees one it can be a strong indicator that they are in the right place. Here we took the ‘e’ that is in the 10e20 logo and used that as a favicon.

Social Media
A Twitter feed was added to the bottom section beside our latest blog posts. This feed shows specific tweets that mention 10e20 directly. Above this feed is 10e20’s latest tweet from Charlie.

So this brings us to the new layout design. Check it out below or just look around if you’re on it!

Bookmark this post: