Design Tips
When reading this article you should keep in mind that these are not necessary for every website and I will not necessarily be looking for each element in my reviews. However, in my opinion, they are possibly helpful tips to creating a more aesthetically pleasing design for your website.
Base Layout
The very first thing to keep in mind is what kind of website you have, and what sort of content is on it. For example, if it’s just a poetry site and you don’t write 3-4 paragraph entries, you’re not necessarily going to need an extremely large block of space to display your text. However, if it’s a blog with long posts and you want to show several on the index page, try to keep the ratio of blank space to writing space low. In other words, really skinny bars with tons of words aren’t so easy on the eyes. At the same time, you don’t want your text to run to the ends of the page, do you? When I sit down to create a site, this is the first thing I consider simply because it might help define what the rest of my layout looks like.
I am also one of those designers who advocates centered layouts with sufficient padding. It is possible to pull off non-centered layouts in some cases; however, my brain enjoys centered layouts much more, as do, I find, most brains. Padding is certainly something else to keep in mind - you don’t want too much of it, or else things start to look too spread out, and you don’t want too little, else instead of a website, you have a mushy soup of words and images. I don’t believe anyone can be strict about “padding rules,” or anything of that sort, so the amount of padding needed for your website is up to you. Test it using different values and see which looks best.
Padding layouts is also extremely important when considering different resolutions. Most people seem to have switched to 1024×768 resolution; however, it’s important to keep in mind that several do still use 800×600, and even more probably use larger resolutions. You’ll want to eliminate side-scrolling for your 800×600 viewers, but at the same time, you don’t want your larger resolution visitors to have to struggle to read your tiny text in your tiny layout box. Find a balance between what looks really exceptional in your resolution and what might look a little bit better in someone else’s. Because, after all, you’re probably visiting your website more often than anyone else, and you don’t want it to look silly to you only for it to look better to someone else who only visits once.
In less words: Be happy with what you’ve made, but keep in mind that your comments form has absolutely no purpose unless other people are happy with what you’ve made.
Navigation
Wherever it is that you decide to place navigation on your layout, make sure it’s easy to find and easy to translate. A lot of websites will have words other than “about,” “writing,” “domain,” and so on; they’ll try to be unique and use words like “storyteller,” “creativity,” “home base,” etc. This is fine, of course, as long as it is clear to the visitor what each link title means. Using lyrics, for instance, is probably not a good idea. A lot of visitors won’t want to continue if they have to guess where they’re going, even if the lyrics have something to do with the page being clicked (ie, “Meet Virginia,” “Paperbag Writer,” “I’m Going Home,” and obviously I am very poor at giving examples to this).
My preference to make clean navigation is to just use text links, but as exemplified by quite a few extremely well-designed layouts, successful image navigation is also very possible. You’ll want to try to keep accessibility in mind, however. I am not the Queen of Accessibility, as my websites consciously don’t have provisions for blind users or text-only browsers, but that doesn’t mean I won’t recommend it for others. If you do choose to use image navigation links, implement some CSS that will allow non-CSS browsers to view text links. For example:
CSS
#nav li.aboutme {background: url('aboutme.png');
width: image-width;
height: image-height;}
span.hide {display: none;}
XHTML
<div id="nav">
<ol>
<li class=”aboutme”><span class=”hide”>About Me</span></li>
</ol>
</div>
Another important navigation tip: Always, always keep a link back to your home or index page, whether it’s your header image or just a link that says “Home.” I find that when browsing sites, I like to return back to this page for one reason or another, and it’s annoying to have to take that extra step highlighting the URL and deleting whatever page I’m currently visiting. Call me lazy, or call it more convenient for your visitor.
Header/Footer Navigation
Header navigation is very common and very easy to implement on a website, especially if that site doesn’t have a lot of information to cram up there. I would wager using only five or six links in header navigation; this way, it can be spread out properly and easy to read. Some designers choose to include a small “about me” or “welcome” message also; but remember, your header navigation is meant to show up on every page. Your visitor does not need to read the welcome message after s/he’s already visited every page but the exits. Is it really necessary to clutter the top of every page with that information, or is it just as simple to include it once on the index page? It’s primarily the designer’s choice, of course, and most reviewers don’t seem to make comments about this decision, but I try not to encourage anyone to include information on every page unless it is useful for every page it’s on.
Footer navigation has become more popular lately, but I believe it’s a little more difficult to pull off. For one thing, you have to have exceptional content above it. No one is going to want to scroll all the way down to the bottom of the page to find the rest of your website if the first page they see is full of crap. I know that we all think our websites are brilliant, but other people have to agree with you for this type of navigation placement to be successful. Another thought when making bottom navigation is that the top now doesn’t need to be as full of information as you may have previously had up there. I’ve seen sites with “about me” snippets on the top and bottom, and that is just entirely unnecessary. It’s a waste of text, and of useful space on your website. Display a nice, clean graphic up top with your site name, throw out your awesome content, and then place any other information you think is vital to include on every page at the bottom.
Sidebar
The purpose of the sidebar is not to tell the visitor everything the entire site has to offer, in excruciating detail. You do not need to put your entire life biography on the sidebar, followed by a link that says “Read more?” Why would anyone want to read more after you’ve already said everything there is to say! Also, as general rule, try to stay away from too many gimmicky sidebar widgets. Unless you can truly pull it off (and I’d like to see you try), having more than one just makes the page look extremely cluttered. Some basic, acceptable, non-cluttering sidebar items might include: A short and sweet “about me” with a “more” link, or just an introduction/welcome message, recent posts, category list, or calendar if you have a blog1, search form, one other sidebar widget - what you’re reading, favorite links, something else relatively interesting.
Also note that sidebars are not absolutely necessary for a website. They can be convenient if you have something to put on them, but having a sidebar only for five navigation links is entirely useless. Header or footer navigation work out just as well. I wouldn’t recommend footer navigation and a sidebar, because the sidebar might take your visitor’s eyes away from the footer, and they’ll have a hard time finding the navigation links.
Coding
On most other review websites, you will find that validation is the key to great web design. This is an acceptable viewpoint, but it is not mine. I see the usefulness in validation, and recommend it above non-validation; however, as far as I’m concerned, if your website has clean, uncluttered coding and displays properly cross-browser and cross-resolution, there really is no defining reason to validate. It doesn’t make your website automatically suck if the coding isn’t prestine. You shouldn’t be excluded from an elite club just because you use <br> instead of <br /> in your code.
However, despite my general indifference to validation, I still encourage designers to use the code correctly. One of the most common mistakes I see on websites is the misuse of header tags. They are not there just to highlight or emphasize text; they are there to create an outline of your website, and should be used as such. If you’d like to see an example, click here, then revalidate with the Show Outline box checked. It is the validated “outline” view of this page.
[h1] Obiter Dictum
[h2] Design Tips
[h3] Base Layout
[h3] Navigation
[h4] Header/Footer Navigation
[h3] The Sidebar
[h3] Coding
[h3] Images
[h4] Header Images
[h4] Footer Images
[h4] Images Within Content
[h4] Images Used for Separation
[h3] Font Properties and Writing Content
[h4] A Note on Alignment
[h4] Styling
[h4] Writing Content
[h3] Short Conclusion
You can clearly see how the header tags are used to display an outline of what is on the page. In some cases, you’ll get something like this:
[h1] Site Title
[h1] Navigation
[h1] Sidebar
[h2] Exit
[h1] Footer Text
This is because people usually do use headers to emphasize text (and I admit, I am guilty of it myself). If this website outline were a school assignment and you turned something like that in? I’d hate to see your grade!2 This is just one of the examples of commonly misused tags; for further research, I suggest you check your page for validation and see what comes up!
In any case, one of my biggest pet peeves is when designers display the “validated” image or tag on a website which is clearly not at all validated. If you want to follow the trend, great, because it’s a great trend, but don’t put anything on your page that incorrectly represents it.
Images
Websites can be successful with or without using a lot of images. My suggestion is to use as few as possible, and to keep the images as simple as possible. I used to design “grungy” layouts with tons of brushes and five pictures blended into one. Now, however, I cringe at those the same way I cringe at my middle school diary. It’s very difficult to make an eye-pleasing layout with that sort of approach, and I’m sorry to say that it’s not exactly brilliant graphic design, either.
I’ve already discussed using images for navigation links, but what about for header images? What about images within content? What about separator images? What about footer images? As you can see, there are a lot of things to think about when deciding to use images in one’s website.
Header Images
Generally larger header images aren’t very pleasing - and by “larger,” I mean the ones that take up half the browser window, or more. Have you ever been to a website with a header image that extends past the screen, so that you actually have to scroll down to see the whole thing, and then of course scroll even further to get to where the content is? Unless I’ve been recommended to that website based on an interesting article or beautiful writing, or some other such reason, I usually close the window. It’s one thing to just see that on one page: while still annoying, it’s rather less annoying than browsing an entire website and having to scroll down on each page just to see any words. It’s totally unnecessary.
Depending on the type of site and what you’d like to do with the header image, I wouldn’t recommend it be any larger than 200 pixels in height. Larger header images are possible for a beautiful website, but rather rude when considering your 800×600 resolution-using visitors. Of course, I always think an excellent web designer can pull off almost anything, but if they’re expert they’re probably not reading this.
Footer Images
I’m personally a little undecided on footer images. I haven’t made any layouts that required very large footer images; only those that have used this idea to spruce up the bottom of the website. For example, if the top image had the outline of a city, the bottom image would have a smaller outline, or perhaps just one building off to the side. My opinion is that when using footer images that don’t surround content, the image should be short and sweet and sort of “top off” the layout - add that extra spruce to it. The footer should be entirely uncomplicated, very simple, and also very small. Whereas the header should only be about 200 pixels, the footer should only be 50 pixels in height or smaller. I am not a firm supporter of elaborate footer images because, like with header images that take up half the page, I find it annoying when footer images take up more room than what’s necessary. However, as with all things I’ve said, I believe it can be done if done simply, cleanly, and well.
Using footer images to surround content, such as those sites which have navigation or some miscellaneous content on the bottom, of course will require images larger than 50 pixels. I wanted to address this as a topic because it can be done very beautifully3, but as I don’t have a lot of experience using footer images I can only leave it at that.
Images Within Content
Do you see how the text is running to the left of this image? This isn’t a tutorial in HTML, so if you are trying to figure out how I did this, you might want to start with some basics (lissaexplains.com). It’s very important to make sure the images that are displayed within your text content look just as beautiful on the page as your text does within the layout. I’ve always preferred proper spacing, alternating locations, and appropriate sizes4.
With proper spacing, you’ll want to take padding into account. There are two ways to do this: the easy way involving some simple CSS, and the slightly more difficult but still entirely plausible way using an image editing program. I wouldn’t recommend padding more than 5 pixels around an image, unless the image is truly the main purpose of the entire page. In other words, don’t set it off too far from the text unless you want your reader’s eyes to be distracted from the text or, indeed, not want to read the text at all. Attention will be drawn to the part of the site that is set apart into its own little area.
In addition to spacing the text a little ways away from the image, you also probably don’t want the same boring look for each of the images on a same page. Of course, alternating also works between several pages. Having a little variety here and there will improve the visual aspect of your website, even if it’s something as seemingly simple as putting one image to the left of text and the next to the right. As I do not excell in explaining things occassionally, an example is seen on this page. The first image is aligned to the right, the second to the left.
Sizing your images appropriately can make or break the cleanliness of viewing your content. If they’re too large, you won’t be able to focus properly on the text; if they’re too small, you won’t be able to see the purpose of the images because, well, they’re too small to see. A good thumbnail size for clickable images is 100 pixels in width5; however, if you’re not going to allow larger views (which is perfectly acceptable, of course), the image should be less than half the width of your content.
Images Used for Separation
I don’t think I have to say that large glitter separator images aren’t particularly attractive. In fact, separator images that draw attention away from everything else on your website are generally a bad idea. They’re only there to separate content; I imagine that’s why the regular <hr> tag creates a boring gray line. There is no reason to have a flashy separator image. The easiest way to make a nice, attractive divider image is to take one of the colors, smaller images, or themes from your header image or overall layout and create a very small - no height greater than 5 or 10 pixels, long image. It gets its point across - dividing your content - but it doesn’t shout, “Hey! I’m dividing content! Look at me!” The width is entirely up to the designer, but I prefer to make divider images about 90% of the width of the content, centered.
Font Properties and Writing Content
When I first started designing websites, one of the larger trends on personal websites was tiny Arial font very squished together. Some people still do this. I usually move on from their websites. Some people today, however, think it’s very important to have really large default text that is resizable by the visitor6, usually using a clean, readable font such as Tahoma, Verdana, or Arial. A lot of people discourage using fonts like Times New Roman or Georgia simply because they don’t like those fonts, but the only font I think that is universally lame is Comic Sans. Keep in mind that those awesome custom fonts you have on your computer are not going to show up on everyone’s viewing of your website. It’s very important to stick to the fonts that by default come with a computer, because some people aren’t going to be interested in downloading Silkscreen just to view your website. If you still feel it is absolutely necessary to have a fancy font, list a second font in your CSS for those people who don’t want to download your special font.
For example, instead of:
font: .9em silkscreen;
make it:
font: .9em silkscreen, verdana, arial, sans-serif;
Covering several font families allows more or less happy visits from everyone. (Though note that I personally don’t advocate using custom fonts such as Silkscreen even if you take others into consideration. Pixel fonts, especially, are pretty uncomfortable to read and look ugly when resized.)
While I agree that it’s important to allow your visitor to resize the font as they please, I do not agree that along with that ability, you should also default your text size to “really large.” Though I still don’t like to land on websites with tiny text, if I can resize it, I’m okay with it. However, as with all designing elements, if it looks better on your page, then do it! Make enormous text!
A Note on Alignment
Unless you’re in a country where naturally you read right-to-left, please don’t right-align your text. For that matter, don’t center it unless you are emphasizing one particular part of it - for example, a short quote. It doesn’t look clean or neat to center text that is longer than two lines. In my opinion, the only acceptable methods of aligning text is left or justified. I personally prefer justified, but as it occassionally makes gaps between words or squishes sentences together to fit everything in, I understand why others prefer simple left-aligned text. I think the choppy endings make it harder to read; most people disagree. It’s all a matter of opinion on that point, but most people seem to agree that centered and right-aligned text are bad ideas.
Styling
I’ve mentioned font size, family, alignment, and next I’ll talk about breaking up the text while you’re writing content. However, you might be thinking about styling your headers and subheaders. If you’d like a clear example of what I prefer, scroll through this page and see how I’ve broken up each of the sections. The main header should stand out more than anything else on the page; subheaders should stand out less and less depending on how far down the food chain they are, but still stick out more than your regular text does.
Writing Content
In short, don’t use too much bold, or too many italics. You want to break up the text a bit so that your visitor isn’t staring at pages and pages of the exact same-looking text, but you don’t want to bold every other word or italicize everything. Use these features for emphasis only. Take styling into account when breaking up your text; use headers when appropriate. Don’t make your reader have to skim through large blocks of text to find a subject matter they like. If you can divide it into smaller parts, do so. Keep in mind other elements of web design that can cleanly and efficiently be used to break up the text such as blockquotes, bullet points, images, or even indenting lines instead of having them all run from edge to edge. Some web designers even impliment padding so there is a block of white space between paragraphs.
Short Conclusion
As I may have mentioned several times here, you are probably the person visiting your website the most, so you have to be happy with it to really pull off a successful website. Your visitors are giving your website a purpose, but there’s no reason to completely design to their fancy and produce something you don’t like at all. This is a review site, and as such, I give my opinions on the sites that are being reviewed. However, results from reviews - here or anywhere - should never be taken as rule, and should never make you feel required to change every little bit about your website. Take those points and comments into consideration which you find to be most helpful to your creativity, and leave the rest. Your website can’t be a complete success if you don’t feel like you’re a large part of it.
1 I find little need in having both a category list and a calendar, as well as an archives link, because the visitor is not going to utilize all three ways to get to your past posts; however, I would recommend that if you display a list of your most recent posts, you should also display a calendar, archives link, or category list. That way, those who have browsed back those five posts and found them interesting can also find an easy way to go further back in time.
2 Okay, yes, technically if I have one point I should have a second point, so there shouldn’t be one <h2> without a second one, and certainly not one <h4> without another to complement it. My outlining has never really been that great without making up some BS to fill in the gaps, but I didn’t want to do that with this website so…. you’ll have to deal with my sloppy outlining skills.
3 My intent with this article is, of course, to give tips for acceptable, if not exceptional, web design. However, I wouldn’t feel comfortable giving tips on something I’ve never done myself, and therefore don’t have any expertise in at all. Forgive the slight mention of this topic, but I didn’t want to exclude it as a possibility in great layout design just because I don’t find use for implementing it on my own websites.
4 However, when placing several images on the same page, please, please, for the sake of your viewer’s sanity, don’t let the images squish up against each other. By this I mean having one image to the left of the text and another image to the right only a few lines down, so that the text sort of jumps around and looks incredibly uneven. As a general rule, I try to compromise padding, alternating and sizing so that none of the images overlap on the same line. Every image is at least three or four text lines apart from one another, so that they do not take away from the content.
5 On that note, if you’re going to display any images for larger viewing, make thumbnails. That means: open the image in your graphics editing program and resize it 100 pixels in width, then save that as image_thumb.jpg. Never subject your visitors to <img src=”image.jpg” width=”100″ /> tags. They look sloppy and gross, and they don’t necessarily load any faster, especially for visitors using bad or unreliable connections.
6 Resizable by not using fixed line heights or fixed font sizes. Most web browsers (perhaps all of them?) will allow you to resize the text on the website you’re viewing just by pushing Ctrl+, or Ctrl- as the case may be, or View, Text Size, Increase/Decrease. However, you can disallow this in your coding, thus in some cases losing any of your visitors who want to actually read what you’ve written.