Making A Better Layout

One of the biggest challenges when creating any website, whether it’s a personal website, a graphics website, or a large commercial website, is deciding how to design the layout. You have to create the best possible combination of usability for both you, the owner, and the visitor, as well as making the layout as aesthetically pleasing as possible. It has to create a good first impression, and stand up to that impression, as well as being able to showcase the content and keep the visitor willing to return time and time again. But how do you find a balance?

What is a good layout?

A good layout is as simple as it possibly can be, while still remaining effective. A good layout looks nice, and uses color effectively- sometimes a lot, sometimes sparingly. It doesn’t blind the visitor with neons, nor does it force the visitor to squint at tiny text. Here are a few of my personal favorites:

• Dreamling
• Orbi
• Anomalyd
• Barack Obama Official Website
• The June Sky

These websites all use clean designs, make a good use of color, and are easy on the visitor’s eyes. They’re easy to use and functional, simple but not dull. So how can you create the same effect on your website layout?

Readability

Before you can even go into what your design looks like, it’s even more important that you ensure that your visitor can read what you’ve written. Let’s start with padding. The padding is the space between the edge of a content area and the text inside of it, and, frequently, the padding for the content and sidebar areas are overlooked.

• Good padding ensures that text isn’t smashed right up next to the edge of your divs, and ensures that text from divs that are positioned close together isn’t almost to the point of overlapping. In my designs, I usually find about 10px of padding to be a good place to begin, but sometimes, that isn’t enough. It’s good to give your content plenty of room to breathe!
• In addition to padding, make sure that you use a decent font size. Relative sizes (ems) are your friend, but if you don’t feel like calculating out an em value, then make sure your text is set to at least 11px! Not everyone has 20/20 vision, thank you.
• Also, a good body text should make good use of line-height. I find that a line-height of about 160% is easy to read, but it wouldn’t hurt to go a little higher or lower.
• Font choice is a big decision, and can impact how easy it is to read your content. For a body text, try to use a sans-serif font, like Arial or Verdana. Serif fonts, like Georgia, can be hard to read as a body text. While I’m at it, Century Gothic does NOT look good as a body font, either. When it’s set to smaller sizes, I have a difficult time reading it, and I have perfect vision. Imagine if someone with a vision impairment tried to read your website? Century Gothic is best left to headers.
• Don’t set your body text to bold by default. ‘Nuff said. (Though you’d probably be suprised by the number of people who actually do this… and think it looks good/is acceptable…)
• Make sure that all of your text contrasts properly with your background. If you have light-grey on white text, people are going to have to highlight to read it, and that’s a pain. If you have a dark background, use a light font, and if you have a light background, use a dark font.

In addition to these tips for your font stylings in your CSS file, when you’re writing on the internet, please, please, please make use of the paragraph tags. Using paragraphs makes text easier to read and skim over; large blocks of text, by contrast, are not only unattractive, but difficult to read.

Graphics

Almost every layout uses at least a few images. This is what really separates the professional-looking layout from the tacky-looking one. There are, however, tricks you can use to make your layout graphics look better.

• The use of subtle gradients will get you far. Don’t take this to an extreme- I’m talking SUBTLE gradients here (and an orange-to-lime green gradient does NOT count as subtle, no), but a background of a lighter shade to a slightly darker shade always gives header graphics that extra “pop”.
• Make your colors appealing. It’s all right to be daring, but don’t make our eyes bleed with horrid combinations of bright orange and lime green. Every color in your graphics should be tastefully matched to the others. If you’re stuck for good combinations, try going to ColourLovers for some creative and pretty combinations.
• Match. Your header, footer, background, and any other image that you use in your layout should MATCH. I shouldn’t have to say this, but if your header and footer don’t go together, it completely ruins the flow of your layout, and it’s like the layout’s good aspects have become invisible.
• Optimize your graphics before saving them; do your research and find out what kind of file type is appropriate in what situation. Fuzzy images never make a layout look good.
• Useage of images where you wouldn’t necessarily think to put them can make a layout stand out. Good ideas include making a coordinating background for comments, blockquotes, or forms, or making a light patterned image as a background for your sidebar. Just make sure that you can read the text that is on top of the image you’ve used.
• Your website’s background is important, and it needs to be well thought-out. There are lots of ways to pull off a good background- patterns, large images, or textures. Experiment and find the option that best fits the type of layout or look that you’re trying to accomplish.
• Don’t use images which you don’t own or have permission to use in your layouts. This would include celebrity photographs, and, yes, even that random cat photo that you found off of Google Image Search. Find a stock photo site for your photo needs, or just make an image entirely on Photoshop. I find that layouts without photographs tend to look better anyway.

User-Friendliness

I’ve already talked about how text size and stylings can affect how easy it is for someone to use and read your content, but what about everything else? A website isn’t just text, and other things about your website can impact your user’s experience.

• Don’t use iframes. Read the article if you need convincing.
• Style your navigation in a way that makes sense. Make your navigation stand out so that it’s easy to find, and make sure that it’s fairly obvious what the links are pointing to. This means that using numbers as your main navigation isn’t a good idea (even if they are huge and obvious). First of all, the visitor might not realize that the numbers are actually a navigation system- and if they did, how would they know where each number went?
• Make your links stand out, so that the user doesn’t have to hover their mouse all over the page just to find an embedded link.
• Make sure your links have a defined hover setting (that they change when you mouse over them). Again, it makes the fact that this text is indeed a link all the more obvious.
• Don’t mess around with the stylings on your bold, italic and underlined text. Not only is it unattractive, but the average user could mistake decorated italics for a link, then become confused when the text isn’t clickable. Bold and italicized text is for emphasis, not for the decoration of your webpages.

Coding

While the actual design and structure of a layout is very important, it’s only half of a website. The other half, what the user doesn’t necessarily see, is the coding that makes the layout possible. Even more so than design, there is a right way and a wrong way to code. The right way can lead to cleaner, faster-loading, cross-browser compatible websites, while the wrong way can lead to a messy design that only works in one browser. Incorrect coding can even cut down on your traffic.

• Use an external stylesheet, rather than an embedded (internal) one. These actually decrease on the loading time of your website. They’re also a convenience for you, the website owner.
• Include a doctype. This helps browsers read your webpages’ code, set standards for displaying your webpage, and also contributes to your webpage displaying similarly across most browsers.
• Once you’ve set a doctype, take the time to validate your coding, or at least eliminate all the errors that you can. This will, again, decrease your page’s loading time and help browsers to display your page correctly. Besides, once you’ve validated, you can put up a link on your website saying so, and doesn’t that just make you feel special inside?
• Structure is important. The basic page structure is as follows:
  <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title></title>
<link rel="stylesheet" href="stylesheet.css" type="text/css">
</head>
<body>
</body>
</html>

Conclusion?

It’s true that there are a lot of different elements that go into making a visually pleasing, well put together web layout. But the good news is, within the realms of the visually pleasing and accessible, there’s tons of room for creativity and personality. The ultimate thing that will make a webpage look amazing is your own personal spin on it, and don’t think that there’s only one way to go about a design! All of these tips will help you to make something nice, but only you can make it unique, memorable and creative. I hope you’ve enjoyed this article, and maybe gotten a little bit of inspiration to make some improvements to your own layouts along the way.