Wednesday, March 31, 2010
Some of the things people do with websites boggle my mind. There seems to be this initiation period almost everyone goes through when making a website the first few times, and I've yet to meet anyone who really didn't go through it.
This phase of new webmasters mirrors growing up in some frightening ways. Looking back, it's so obvious you should have taken the advice of those who had gone before you, but for some reason at the time you just wouldn't hear it. You were right, you knew you were right, and nobody was going to tell you otherwise.
Well, if you're that new webmaster, reading this article probably won't change your mind. It certainly wouldn't have changed mine back in 1995, because I knew what a webpage should look like; every good web page had 15 animated gifs, all different colors. A good page had background music playing in a midi file, and you couldn't even turn it off. It had lots of javascript and three versions of a guestbook, and forums galore!
What this article will do is expose you to some of the dead ends you can get into with web design, so when you do wake up from that "kid in the candy store" phase you'll wake up wiser.A website should be packed with content first, functional second, compatible third, search engine friendly fourth and beautiful fifth.
Great content is an unmatched promotion machine
Everything is secondary to quality content. For your website to be a success, it needs to deliver something people want. Get your content lined up first, and lots of it. Without it, you'll be fighting a constant uphill battle. With great content, the rest will fall into place much more easily.
Good navigation is paramount
Websites that have poor navigation annoy and confuse visitors, causing them to leave frustrated, and unlikely to return. This doesn't bode well for gaining repeat visitors. If you're just learning web design, learn to write code that validates. If you've already learned html,learn to write code that validates. Functionality is key: viewers don't want to go digging for links. A website with less than 25 pages can usually list them all in a single navigation menu. For a website with lots of pages, separate them into descriptive categories, and build a hierarchal menu. Place the navigation menu in the same place on every page. Avoid drop down JavaScript menu systems. Nobody wants to open 8 drop down menus to figure out which one contains what they're trying to find. Being reliant on JavaScript to display something as necessary as a navigation menu is a very poor choice. Utilize a sitemap page with categorized links to every (finished) public page on your website. This will ensure that users have a backup for finding things, and more importantly a search engine that deep crawls your site will find every page.
Cross Browser Compatibility
Compatibility is important on different levels for different websites. Personal websites aren't really counted along these rules, because there is no necessity involved with a personal site. With that said, any other website should display properly on all major browsers (IE, Firefox, Netscape, Opera, AOL, etc). Any website should (at least) be compatible with the major screen resolutions, currently 800x600 and 1024x768. Corporate websites, product sales sites, and ecommerce sites should validate with W3C standards, because not doing so will often incur cross-browser compatibility problems, ending in potential customers being lost. It's good to note there are some quirks in the way different operating systems display things as well, so Firefox on a Macintosh at 1024x768 may not show up identical to the same page with Firefox on a PC at 1024x768. When you code to W3C standards, you can avoid nearly all this uncertainty, and if you're learning to code, there's no reason not to learn the standards. They'll save lots of headaches in the future.
Search engine friendly means free targeted traffic
A search engine being able to properly navigate your website, find all the pages in two jumps or less, and determine what links lead where with what text is essential to good rankings. Most search engine spiders will navigate a website only a few links 'deep'. In other words, the spider will follow a link from the index page to the games page and from the games page to the RPG page. If there are more links on the RPG page to even more pages in the site, the spider might not dig that deep, so some pages could end up not getting indexed. A sitemap never hurts, and if you have links that go more than two deep, it's highly recommended you use one to make sure a search engine finds every page in your website.
Be consistent in design
Since that's all out of the way, now it's time to make sure your site looks nice. This means a consistent design flow on all pages. Most of the time, 3 or 4 colors that compliment each other well will do very nicely. Switching colors for each section is not normally recommended, though some websites pull it off nicely. Switching layouts between pages on a website is one of the bigger mistakes new web designers make.
If you aren't good with design, there are literally thousands of professional scale templates available around the web, many for under $20. This can be a great investment, considering a good custom design can easily cost upwards of several hundred dollars.
Some other pitfalls and tips to avoid them
Hit Counters are wholly unnecessary, tacky, and unless you're getting millions of hits, embarrassing. Don't use them.
Clipart type graphics and animated gifs you get from free graphics type websites should be avoided. It's almost impossible to find clipart that works well together, and even then most of it is second rate at best. No graphics are better than bad graphics.
The white paper test is an excellent way to determine whether a design "works". Look at your webpage with the design applied. Now look at the same page on a blank white background with no graphics or styling applied - only basic html structure tags. For example, look at it with the h1 tag, but not with a font applied to the h1 tag. If it doesn't look considerably better than the white sheet version, something is very wrong. If you build your layout separately with CSS all you need to do is temporarily disable the link to your style sheet.
Text is meant to be read, so use a decent sized font. (I avoid fonts smaller than 14px - 16px, except in the case of footnotes). Avoid using Times New Roman. It doesn't display well on the web (and it's the default font.. go figure). A few fonts that do display well are the more rounded styles. Personally I prefer Verdana, but Garamond, and Century Gothic also look good.
Avoid graphic heavy layouts. A webpage shouldn't exceed 60K, except where the purpose of the page is to display photographs or multimedia, such as a picture gallery or flash cartoon. Ideally a page should be less than 30K. A large portion of web users are still on dialup, and most will wait 10 or 15 seconds tops for a page to completely download.
Don't mess with the normal options a user has available. Disabling right-click, fancy scripting to make the status bar not show where a link leads, and other tricks annoy visitors. If you're worried about people downloading or stealing images you make, you have two choices: 1) watermark them with your name (or web address), 2) don't post them to the web.
If you're building a content based website with a regular update schedule, get at least one month worth of new content, or eight good sized updates finished before you go live with your website. Do this over what would be a regular update schedule. You'll get a feel for whether or not this is something you've can keep doing over a long period. Additionally, it'll give you a decent buffer. On regularly updated sites, I try to have several articles written ahead of time (in queue). That way if I get too busy to produce something new one week, updates continue uninterrupted.
Additional help with web design
For additional help with web design, to receive the latest tips on design issues, or to get specific questions answered and find additional resources and tools for design, join our subscribers area. The forums are also an excellent place to find help with specific questions related to web development. If we can't answer it, we will definitely be able to send you to someone that can.
0 comments:
Post a Comment