Build a Better Website

I admit it - I'm a very picky web browser. I surf so many sites each afternoon, looking for great new product, and I confess that I could easily be missing a lot of great stuff simply because of my Internet prejudices. I'm sure in a lot of respects I'm a pretty basic Internet user - I'd say you have about 5 seconds to capture my interest, and if it's busy or cluttered, you can pretty much count on me closing the window before I get further into the site.

After a particularly long string of sites that turned me off today (and I concede the point that I've had a pretty bad week, so I may have been a little more impatient than usual), I decided to dedicate an entire post to tips on how to create a cleaner, more professional website. I'm not going to point out what not to do, since that would be unfair to the website owners, but I will list sites that I think are displaying my points well. Hopefully that will give you great inspiration!

1. Don't use a free server. Seeing banner ads or pop ups on a business websites is frustrating to the user and doesn't give you a professional appearance. This applies to text ads like Google's AdSense. If you can't afford professional hosting services, you should be selling on a place like Etsy or Mintd before upgrading to your own site - with the extra hit potential generated by those kinds of sites, it's probably better for smaller or beginning operations anyway.
2. If you don't have web experience, hire a professional. While I love the do-it-yourself spirit of the crafters who make the great products I see every day, I get concerned when I see websites that don't demonstrate the level of craftsmanship I know so many of you are capable of. The web is a scary medium - if you don't know how to use it to the best of its ability, you run the risk of looking less professional than you actually are. Hire a professional, or if you can't necessarily pay them a huge amount, either purchase a site template from a designer or negotiate a barter system. Aeolidia offers web design services as well as really attractive prefab designs that can be easily customized to suit your needs.
3. Don't use blink or marquee tags, or use a large block of h1, h2, or other headline text. Blink and marquee tags don't work on all browsers and often slow down your load and scrolling time because it takes a computer longer to process it. Headline tags should be used sparingly - like its name, it's really supposed to be reserved for, well, headlines! If you use an entire paragraph of headline text, it's incredibly difficult for the reader to understand what call outs you're trying to prioritize. If it's kept as a navigational device to bring the reader into different sections, it's a lot more legible, and you'll have an easier time of bringing people into the information you're trying to hand them. Avoiding use of these three no-no's in internet typography will make your site seem a lot more mature.
4. Try to keep your typefaces down to three, maximum. This is probably my biggest pet peeve, and the mistake I see being used the most often. A lot of sites use a huge variety of different typefaces and try call out different product styles or categories by doing it, but it only makes the whole site a LOT more confusing. Your whole site should boil down to no more than three typefaces ("fonts"): your Internet-standard text font (Verdana, Helvetica, Arial, Century Gothic, Trebuchet MS, Tahoma) and up to two "brand fonts". Brand fonts are those that fit in with your company - you may use them in your logo or on your packaging. If you can reduce it down to one font (not including your logo), then that's even better! Try to avoid script faces in this area as they are often hard to read, especially as they get smaller. I find that san serifs work the best for me on the web, as you can tell from this current layout, which utilizes the typeface Gotham by Hoefler & Frere-Jones.
5. White space is your friend. Just because there's still room in your layout doesn't mean you need to fill it. White space is a great design element that helps even the busiest of layouts breath and look less "all over the place". White space, of course, doesn't need to be "white"; here the word refers more to "empty" than to a fixed light value. Of all sites, I think Wild Garden does a phenomenal job respecting their white space. The right panel has a lot of room to breathe, and the large detail images of their shirts, which rotate on each refresh, are all photographed on a white background to help give the feeling of even more white space. This could work also with a colored background - I would just advise that whatever color you photograph on matches the intended background of the rest of the site.
6. Sketch out a clear and concise way to organize your information before you get started, and always consider how YOU would use the site if you were just a visitor, not the owner. The most successful sites I've been to have a logical way of moving around their logo, their navigation, their news, and their features while still giving each area its own clearly definited space to live in, room to breathe, and an appropriate level of hierarchy. In this area, I have a lot of respect for what Freshly Blended Press is doing with their site. Their masthead is clearly defined from the rest of the site by the choice of a color (chocolate brown) which clearly contrasts from the background of the rest of the site (white); it also cleanly goes across the whole page rather than only a portion of it, making the separation more pronounced and attractive. The navigation is basic and logically placed; the faint pattern behind it is not busy or contrasted enough to distract the browser while using it. The page's content is clearly sectioned off with a lot of white space; photos, dotted rules and large dated numbers are used to help break up the areas into highly legible sections. Font size changes between the feature area and the updates help establish a hierarchy and draw you to the feature area first; the type size change gives a good range of font sizes while not being too small or too large.

Remember - having a clean, professional website does not mean it has to be devoid of personality. It's a more practical concept than that - is it easy to use and legible? Is it logical? Can your visitors understand it? Does it look to visually busy? There are a bunch of good examples of sites bursting with personality that are effectively organized - I think Modishoppe and queenthings are great examples of sites that reflect the brand and the owner but still are well designed and organized (yes, I know Jenny's got a placeholder there right now, I just realized that - but I'm sure her next incarnation will be just as successful as the last one!).

I may continue this post later. There's a long list of thoughts I have in this area, so I know I'm forgetting something. Got questions? Need advice? Let me know! I'm here to help.

Comments

[jacqueline Wolven]

I love your site. I love the look of it. I just love everything about it actually. I am so SLOW to creating the site I really like for myself and it was wonderful reading your insights. Thank you so much for your thoughtful responses.

[Maddy]

More than happy to share! Please let me know if you have any other questions!

[Christine]

GREAT info. I have to agree on every single point. Not a lot of people realize this as you pointed out. Especially the thoughts on those who are crafty and try to do their own web design/site and the whole font thing. Drives me crazy!!!

[Lora]

Great tips! Thanks so much for the insights.

[Maddy]

Well, I think you've always had a really good eye, C. I've never seen you do any of this - not that I can remember.

We're all guilty of it at some point in our web design learning curve. I certainly did this - granted, like 10 years ago when I was 13 or 14, but I still did it. You learn from it though. I think the really key thing when designing a site in general though, is to think like the customer - would you buy something from your site if you didn't own it?

[Nicolette Tallmadge]

I've been designing web sites since 1996 and I think the best piece of advice is #6. Whenever someone wants me to create a website for them, I always have them figure out a site map, so they know what pages they want and how they connect to each other. One thing that I've learned is that the design process begins with a piece of paper and a pencil not with the computer.