IcoBlog: New Site Design for Iconico.com

The official Blog of Iconico & SoftwareMarketingResource

Monday, May 19, 2008

New Site Design for Iconico.com

To coincide with the launch of icoBlog.com we've put up a new design for iconico.com. We wanted to fix a couple of visual issues with our earlier layout which has served us since 2006. The new design we're calling 'Tablet' and looks something like this:

The main problem that we had with the earlier design was that the little sections seems to float on the page background, without being anchored together as a cohesive page. We added an encompassing semi-transparent tablet and aligned the entire page centrally. We also removed the hard boxed lines around each page section, replacing this with a full sidebar and a white content panel, hopefully the result is a lot less harsher with the dark blue borders gone and the orange accent color used more liberally. Generally we wanted to make the site a little friendlier, and a little less like the old style portal webistes with boxes everywhere.

You can see here the 2006 design which has the "floating boxes" problem:

Next came a redesign of our logo. There's always been a little confusion in how to pronounce iconico. I've always said "eye-Conic-o", with the stress on the first "C", but often people pronounce it "eyeko-Neeco" with the stress on the "N". My reason for the former pronunciation was that I always wanted an "iconic company", hence the name. Then there are some people who pronounce it "EE-ko-NEE-ko", but that's just silly. Anyway, part of the logo change with the new orange "O' at the end is to visually help in the pronunciation. In addition it works for icoBlog, and another site that we'll be launching soon. You can see below that our logo has remained pretty much unchanged since 2005, with this earlier design:

You'll notice liberal use of semi-transparent backgrounds in the new design, which is something that we've wanted to do for quite some time now, and have been using on a lot of our consulting client's projects to great effect. These are accomplished using PNG images, which are supported naively in Firefox, Opera, Safari and Internet Explorer 7. We use the marvelous pngFix library for jQuery for downgrade browser support. What that does is automatically re-write the CSS code to use Microsoft's css filters so that the backgrounds show up in IE6 and IE5.5. You will notice that the image backgrounds do pop into place, so it's not a seamless load of the page, but with only 3% of our visitors using IE6 or earlier we thought this was a fine compromise to make, and a really neat solution. If you really want to see the transparency in effect have a look at the three holes that we've used to separate items in the sidebar. If you resize the page you'll see that the page background flows underneath. That's all done with PNG transparencies, and after years of pushing GIFs and JPGs it's a real pleasure to be able to code.

To make the latest change to the site we actually only touched about six files and twenty or so images. Evey page was left exactly the same. This is all down to a central CSS file, and a hand made template system. Below is a 2002 version of the site, which had pretty much the same HTML structure as we're using today, although the navigation has undergone some major renovation the pages themselves have not need to be updated. Just goes to show that it plans to think ahead when structuring your HTML.

Labels: , ,


Iconico, Inc. Software Stores

Accurate Design and Development Software

24 Hour Discount Deals on Fantastic Software Applications

Iconico, Inc. Software Services

You Wrote the Code, Now How do you Sell it?

Our Official Blog

© copyright 2004-2009 Iconico, Inc. All Rights Reserved