Bookmark This Site

A Website Designer's Checklist

A Website Designer's Checklist

Author: Derwin Remedios
Submission Date: 2005-05-24
Website: www.daremedy.com
Email: daremedy@daremedy.com

Designing a website is much like trying to build most anything from scratch. Using your imagination and creativity is the key to creating a unique website, and a unique website is key to being noticed on the world wide web. Why create a layout that has already been done? When I started creating websites, I always tried to mimic someone else's design and then I used it for my own site, with modifications of course. Finally one day it dawned on me, why not just make my own layout? It's easy to use a template, copy someone's code or just buy a program like Macromedia Dreamweaver that does 90% of the work for you. Regardless of whether you personally code your website or hire someone to do it, there are a few things you should check before you fully publish your site. If you hire a professional, this article should be second knowledge to them, but if you're new to designing and just want to know the basics to creating a "friendly" website, definitely read on.

My eyes! My eyes!

Having helped a lot of people design or fix up their websites, there's one thing that constantly annoys me when done incorrectly, code formatting! Throughout my university life, I was brought up with the idea that properly formatted code saves time and makes programming 100 times easier. First of all, what is formatted code? It is code that is aligned property, allowing someone who is viewing the code to easily read through your code. I'll give you an example. Lets say we were creating a table that contained an image called "foo.jpg". I'll show you two ways of coding it.

Sample #1:

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0"><tr><td><img src="foo.jpg" width="100" height="100" alt="foo"></td></tr></table>

Sample #2:

<table width="100%" height="100%" cellpadding="0" cellspacing="0" border="0">
     <tr>
        <td>
           <img src="foo.jpg" width="100" height="100" alt="foo">
        </td>
     </tr>
</table>

Look at both the samples. If something went wrong with your website, which code sample would you rather look at? Which one would be easier to read? The second one, of course. Formatting your code makes it easier to debug your programming code and, to those viewing the code, will make you look more professional in your approach to designing. Little things like tabbing and spacing your code show your attention to detail and speak to your professionalism. Web designers with messy code will usually use the excuse that "it doesn't matter if your code is ugly to look at, people don't look at your code anyway, you can only see the final visual result". True, very true. But look at it this way, if you were buying a new car, would you want the manufacturer just connecting all the electrical wires and pipes randomly and without any care as to the driver's safety? You can't "see" the wires and piping, so who cares right? An extreme example, but web design is just as similar in concept to designing most any other object. So with the foundation taken care of, the hard part now is making sure your code meets the internet standards.

Standardized Testing

The World Wide Web Consortium (W3C) was developed 1994, its mission was to create a set of web standards and guidelines for development. These standards have transformed the way web designers develop their code. Before, it was ok to leave out some attributes in certain tags. For example, lets take the image tag. Almost everyone I know codes the image tag as <img src="myimage.jpg">. Straight forward right? Well the W3C standards require that every image tag contain an "alt" attribute, describing what the picture is about. Why would you need that? Well, if someone has disabled images when viewing a website (56k users especially), they will see a bunch of red x's in place of where images should be. If you plug in the alt tag, they will at least be able to see the description of the image, so that they know what they're missing out on. It is kind of like labeling what goes where on your website, so that people who are not familiar with it will still know what goes where. There are a whole bunch of other rules that you need to follow, for example, you site needs to have a DOCTYPE. The DOCTYPE defines the overall structure of your HTML code, basically what format of code you are using. W3C explains this in detail on their site, here. To get your site validated, W3C has an online validation tool, simply enter your site's url into the validation box and it will tell you what errors your site has ( Validator). Keeping your site standardized is one step to making sure that the look and feel of your site remains consistent no matter what browser a visitor is using. Remember, not everyone uses Internet Explorer. You have to make sure that your site still looks the same in other popular browsers like Firefox and Netscape. The W3C testing definitely helps you with that.

Scalability

Here's a concept that not many people pay attention to. First of all, what is scalability? It is basically the ability for your site to adapt to different screen resolutions. All of your visitors will not have the same screen resolution that you are using, some will have smaller screen resolutions, others will have bigger ones. Sites that are not scalable will usually have those dreaded horizontal scroll bars at the bottom of the browser, so you have to toggle left and right to view the content of a site. A site that doesn't scale to different resolutions is considered to be unprofessional and unfinished. There are two ways to ensure that your site is scalable. The first is a bit of a trick. The absolute smallest resolution considered humane is 800x600 (although there are smaller resolutions), so you can assume that all of your visitors will have at the very least a resolution of 800x600. Then you simply design your site around those constraints. In theory, you've covered the worst possible viewing scenario that a visitor can encounter. Also, viewers with resolutions greater than that should not have any problems. The other way to do it is to use percentages. So if you're using tables, you would set your width to 100% to make it full screen, 50% would cover half the screen, etc. Using percentages takes away the guessing game, the percentages will automatically adjust the viewers resolution and display the content in terms of what the viewers resolution is. Both ways are efficient and both ways cover scalability issues. Make sure to always test your site viewing at different resolutions to make sure that the content is readable.

And Then There's Google

There's no point in having a site if no one visits it. The most effective way to get your site noticed is to make sure that your site gets onto search engines, like Google or Yahoo. You can enter your site for submission into search engines, but you want to first make sure that you have your meta data set. Meta data are special tags that tell search engines a bit about what to expect from your site. There are many meta tag options, but two most important ones are the keywords and description tags. The keywords meta tags tell the search engine what the key words of your website are. So for example, if your site is about web design, you would have a tag similar to:

<meta name="keywords" content="web design, web designer, php programmer">

Something along those lines. Just give all of the key words that best describe what a visitor will find on your site. The other tag, description, is rather straight forward, it's a description of your site. If you looked at mine, its rather simple.

<meta name="description" content="Official Site for Derwin Remedios">

Nothing fancy. Just give whatever description you want for your site. For both tags, make sure you don't go overboard. Don't plug in every last word you know into them, this will deter the search engines from going too deep into your site. Keep it short and sweet.

Along the same lines, make sure that every page has a title. This is usually contained within your tags. The title is what shows up when results are returned on search engines. If possible, make sure that each unique page on your site has a unique title describing it, this will make it more likely that your site will be found in search engines for a search containing the words in your title tag. Boy, that last sentence was a mouthful!

Keep it Fresh!

The most important and overlooked factor to making your site successful is to keep the content fresh. The one regret I have with my site is that I never updated it as often as I should have, mostly due to school. So before, if you did a search for Daremedy in a search engine, I wouldn't be in the top 10 results. After I realized the err of my ways, I've now optimized my site to keep the content fresh and exciting and now I'm ranking within the top 10, still not #1 however on Google but I am in Yahoo. Regardless of rank, having new content will keep the viewers coming in. Not just content, but useful content, information that other people can use. You should always be thinking of what would make someone visiting your site make them want to bookmark you. Is your content good enough for someone to frequent your site? There's a saying among designers, "content is king", meaning that you could have the ugliest looking site imaginable, but if your content is worth coming back for, then you've succeeded. Personally, there are dozens of site that fit that description to a tee that I visit strictly for the content, regardless of how unappealing their site looks.

Are You Ready to go Online?

I've mentioned just a few notes for designers that want to make sure they're sites meet the standards. There is a lot about web design that you have to learn through experience. But I definitely wish I had read an article like this a few years back that outlined what to look out for when designing a site. Hopefully this helps some of you re-think the way you go about designing your website. Be sure to also check out the website validation thread in my forum for sites that will help you make your site standardized. Now that you know the basics, get out there and start coding!

Rate this article: Lowest = 1 to Highest = 5
View PDF   Bookmark   Printer Friendly

[ ^Top ]    [ Go Back ]