So you have a website, but it’s looking a little sad. You know it needs a makeover, but like most folks, you are absolutely squeezed on time.

Then there is the question of what to do – what changes should you make so your website will look better? Unless you are an internet fashion maven, you may not know what is ‘in’ and what is ‘out’. Worse yet, if you’ve been hanging around the internet awhile, you may not realize what screams “I’m from the previous millenium!”. Which is, for most websites, a bad thing.

The new Web 2.0 look has become a de-facto standard. What is Web 2.0? We’ll cover that another day. For now, it’s enough to know that the following changes will make your website look like you’ve got the 2.0 thing going on. And making over your website will subliminally tell website visitors that your website is from this millenium. Which is a good thing.

Sample website before makeover

Website before makeover - click to enlarge

So here are six easy changes that will update your website and give it some of that much-vaunted Web 2.0 look. We even have a before-and-after: Terry Jepson has been kind enough to let me to use his Wisco Survey Power website as an example.

  1. Confine and center

    Our sample website (above) goes all the way across the page. That worked better when most monitors were the same size, and small. Now, though, you don’t know what size monitor your potential customer will have – but you know it will be large. And probably wide, like my monitor. So in order to increase readability and make your website look good, you should confine your webpage to a uniform width (around 900-960 pixels is average), and then center it on the page. Take a look at some of the more popular websites today, and you will see that confining and centering the webpage is standard. And standards are good. Standards help sell, too.

    Confined and centered - click to enlarge

    Confined and centered - click to enlarge

  2. Drop the top

    Another little trick you might notice is that the confined, centered webpages are often dropped a little from the top of the browser. This is a popular Web 2.0 look, and sends a subliminal message that your website was designed in the last few years. The dropped top is not required, but take some time to notice website designs next time you cruise the web. How many cool, up-to-date websites have dropped tops? Quite a few. I like the look. Oh, and I pulled off the top black bar with the 4 menu items in it – those menu items didn’t need to be in the header. (The sitemap & privacy links could go elsewhere, and the other two could just go.)

    Dropped top - click to enlarge

    Dropped top - click to enlarge

  3. Round the corners

    Oh, baby. Current design, not just in websites, is all about curves. Things used to have corners, now the corners are rounded. Take a look at your new printer. Your new notebook PC. Your new Microsoft box. Other packaging, too. Corners have become curved, and curves are cool. And curves are definitely part of the Web 2.0 look. Again, looking at popular, hip websites, note the round corners. Most popular websites will have curves somewhere. So add a few curves to your website – rounding out your header corners, and maybe a content box or two, is a great way to add some cool curves.

    Rounded header and left menu corners

    Rounded header and left menu corners

  4. Get some glass

    Glass is in. Whether you’re a Mac or a Windows person, the latest coolest graphics often have a glassy look. An easy way to update your website is to get some glass in there. It’s simple to add glassy-looking buttons (do a search and you’ll find websites that make them for free). If you have a horizontal navigation bar, using a glassy-looking background image can give your website an immediate pop. I took it a step further in our sample website and gave the previously plain header a slightly glassy look, too.

    Get some glass - click to enlarge

    Get some glass - click to enlarge

  5. Not quite normal

    Not quite normal in graphics placement and selective fonts can be a good thing, in limited amounts. Try having your header graphic (or some other graphic) break outside the box – have an edge stick out or stick up. (Color outside the lines!) This is a cool, hip look in graphic design, and definitely a Web 2.0 thing. I’ve added a little more glass here in the form of an iconic logo image, and the top of the image sticks up above the header a bit. Cool, huh? And fontography is making a come-back, too. (But only in limited quantities. Too much weird fontography makes things hard to read, and looks amatuerish.) So I’ve put the site name into a cool font. (BTW, if you like that green glassy icon image, you can get it and 684 more like it for just $9.99, below).

    Not quite normal - click to enlarge

    Not quite normal - click to enlarge

  6. Bust out backgrounds

    Last but not least, and most often ignored, are backgrounds – and the striking difference they can make. Bust out of boring by adding a subtle background color here and there. If you’re brave, make the colors bolder, or add background images (careful there, don’t go too crazy unless crazy will sell to your customers). Definitely, add a background color for the entire webpage, so that your confined, centered content stands out. Then try adding backgrounds to any extra menus, columns, and blocked text, and see how it looks. Good use of backgrounds can take your webpage from blah to brilliant.

    Backgrounds added - click to enlarge

    Backgrounds added - click to enlarge

If you can implement only a few of these ideas, I recommend trying numbers 1, 3 or 4, and 6. Center and confine your webpage, add a curve or glass somewhere, and make sure you use backgrounds to define the separate areas. If you do just that, your website should look better. You can always address the other makeover items later.

80% Discount on website icons for blog readers

Glasso Icons Sample

Glasso Icon Images Sample

If you want some nice glassy-looking icon images for your website (or for anything else), I’ll give you an extra-special discount as a reader of this new blog. Only $9.99 instead of $49.95 for the Glasso Icon Set.

Use the coupon code GETGLASS on the Glasso Icons final order page to get the discount. (It goes on the same page as your credit card number; don’t forget to click on the “update coupon” link to change the price.)

19 Responses to “Six easy changes to makeover your website”

  • Andy Brice says:

    Interesting, thanks. The makeover is big improvement. Not convinced about the colour of the right bar though.

  • Susan Pichotta says:

    Hi Andy,
    Thanks. And yea, I’m not sure of that color myself. I was trying to pick up the green out of the heading image, but it kept being too green-y, so I took it pretty far into gray. At any rate, I hope it will give people an idea of what a difference different background colors can make.

  • Thanks, that is a great article.
    I’ll take the tips for the remake of my own site!

  • HMcG says:

    ā€œIā€™m from the previous millenium!ā€. Which is, for most websites, a bad thing.!ā€

    Unless you target reader is from the last millennium – that is, the guys(/girls) that still have money to spend, instead of the maxed out gen. 2.o.

    Personally, I can’t wait until we get back to text-only web. Bah, Humbug. ;-)

  • Scott Kane says:

    Hi Sue,
    Good article!

    Gotta say though I tend to disagree with HMcG. The 2.0 look is still refreshing and it’s no longer “new”. Been on the “web” since 1995 and the “Internet” via a variety of protocols prior to that. “Getting back to text-only web”? Geez. Maybe we should go back to ANSI bulletin board UI’s we used to love to hate in the 80′s?? ;-)

  • Jeff Camino says:

    Very well done article, Sue! A concise, easy-to-follow guide and very accurate. I just added it to our “resources” page as a recommended read: http://www.nstarsolutions.com/resources/misc.html

  • KrisBelucci says:

    Hi, good post. I have been wondering about this issue,so thanks for posting.

  • I found your blog on google and read a few of your other posts. Very nice read.
    Be reminded to continue to build back links for traffic and seo.

    Darren.

  • Awesome! thanks for adding this

  • Susan Alta says:

    This is a custom theme, created to match the altawebworks.com website. I designed both, thank you! :)

  • Martin marsh says:

    I love the curves bit..
    Websites should definately have more curves..
    Keep up the good work