Web Site Design Tips

Like many of you, I have been surfing the Web for many years and have visited hundreds of Web sites. I have found Web sites through search engines, e-mails, and other Web sites. Many of these Web sites have a great layout and provide very valuable, useful information. Others are more complex to navigate and don’t really help with anything.

In this post I will provide several points that I think makes a Web site great. Many of these points are common sense, and can easily be implemented.

Points to Keep in Mind

1. Easy Navigation – This is a very important point, and one that will determine whether I stay and visit more pages. It is important to ensure that your visitors can easily find their way around your site. This can be a simple menu list on the left or right side of the Web page, with the content right next to it. You can even have a menubar at the top of the Web page for more important categories.
2. Readable Text – Many sites now try to use a very small font size. The author of the Web site may be able to easily read the text, but many of the visitors may have trouble reading small fonts. I try not to go below a 10pt font equivalent on my Web pages. I also try to find a common font that is easy to read such as an Arial or Verdana font. If you use CSS, then you can set the font family and size in one file that can be easily changed if you choose.
3. Appealing Colours – I am not to keen on Web sites that have a bright pink or yellow background. I find it hard to view the Web page, let alone read the content. If I want a bright background, then I usually choose white and have black text. This is what most people are probably used to. I then add colours to my Web pages through the use of images and borders.
4. Small Image Sizes – I hate Web sites that have large images that take some time to download. I have a broadband Internet connection, but there are still sites that make take some time to download because of a large image. You should try to compress your images as much as possible to reduce the size of the images.
5. Reduce Page Size – This point goes hand-in-hand with the previous point. I like to write long posts in this blog, but if you can try to keep your page sizes to a minimum. Including the previous point you should try to break large articles into several pages, reduce the Javascript, CSS and HTML sizes. Create separate Javascript and CSS files that are included in your HTML pages, and remove excessive spaces, tabs and comments from your HTML.
6. Flash Introduction – This is a worthless and pointless page. I have seen sites that display some flash animation when you visit the Web site. If the there is a skip intro button, I usually just click that to avoid seeing the introduction.
7. Too Much Advertising – I don’t mind if people place ads on their Web sites, but sometimes they can go overboard. I have visited Web sites that have ads on what seems like every inch of a Web page. Sometimes there is so many ads, that I have trouble finding the actual page content.
8. Write Unique Content – This is probably the most important point when creating a Web site, especially for generating traffic. Spend the time to write you own unique content instead of copying someone else’s content. There are sites out there have the same content as many other Web sites. I like to read unique content that provides more and different information than other sites.
9. Ask for Opinions – Join Web sites that have the same niche as yours and then ask others to visit your Web site and provide an opinion. This can help you determine what you need to change.

Summary

This post provided many points that you can apply to your Web site to make your visitors enjoy their visit. As always, your Web site will probably change over a period of time since no Web site keeps the same look over many years.

Introduction to Cascading Stylesheets (CSS)

In a previous post title Designing Web Pages: Tables or CSS, I briefly talked about using CSS to layout the content of a Web page. I didn’t go into detail about how CSS files are used in conjunction with Web pages or even how they are created.

In this post I will provide a simple introduction to cascading stylesheets and how you can link them to an HTML file.

Overview of a CSS file

Before discussing how to create a CSS file, it is important to provide a quick overview on stylesheets. Cascading stylesheets (CSS) are nothing more than simple text files that define the look of a Web page. Before CSS files, you would define fonts and colours within your HTML file. When you use CSS files, those definitions would be stored in a CSS file and removed from the HTML file. You can then link a CSS file, or even multiple CSS files to a single HTML file.

Using CSS files to define the look of your Web site has a few benefits. The first is that you can now change the look of your entire Web site by simply changing one CSS file as opposed to multiple HTML files. The second advantage to using CSS files is download speed. When you have all your definitions within your HTML files, it makes the files much larger, which takes more time to download. By moving the definitions to a CSS file, visitors would request a HTML file, which would also download the linked CSS file. Now any subsequent pages that use that CSS file would now read it from the visitor’s cache instead of re-downloading the CSS file again. Your HTML files will also be much smaller as they no longer contain the definitions.

Creating a CSS File – An Example

Let’s use a quick example to show how easy it is to create and link a CSS file to a HTML file. To follow this example you will need only a text editor such as Windows Notepad.

1. Create a directory on your local computer that will contain the CSS and HTML files.
2. Open your text editor and type the following (include the semicolons):
p
{
font-family: Arial;
font-size: 20pt;
}
This will define any paragraph (the p tag) as using the Arial font with a font size of 20pt.
3. Now save the file as site-style.css into the directory created in step 1.
4. Create a new text file and type in the following:
<html>
<head>
<link href=”site-style.css” type=”text/css” rel=”stylesheet”>
</head>
<body>
<p>This is a test Web page for CSS files.</p>
</body>
</html>
All this text file does is display a message on the Web page. The important part in the HTML is the link definition in the head section. This tells the browser to use the file defined in the href tag. That file is of type text/css and it is a stylesheet. This entire line is how a CSS file is linked to a HTML file.
5. Save the new file as csstest.htm in the same directory as the CSS file.
6. Open the csstest.htm into your Web browser.
What you should now notice is that the message on the Web page is now displayed in the Arial font and has a size of 20pt. You should try changing the font family and size in the site-style.css file and refresh your Web page. You will notice that the message text changes.
You can also try using other HTML tags such as the heading tags (H1-H6), or create a second Web page that links to your CSS. You will then notice that as you change your CSS file both Web pages change.

Summary

This post provided a quick overview on CSS files and a very simple example of using CSS files but you can see how they can be very useful. There are entire Web sites on the Internet dedicated to learning CSS including all the various definitions you can use. If you want to make your Web site easier to manage and maintain, I suggest you learn more about CSS files.

Designing Web Pages: Tables or CSS

There is some debate recently about the best method to design and layout a Web page. Traditionally, HMTL tables have been used to handle the layout of a Web page. Today, however, a new layout method is gaining more popularity which uses CSS (Cascading Stylesheets).

Which method is the best way of designing a Web page? I will explain both methods in this post and provide my own opinion. This post, however, won’t explain how to create the HTML files as I’ll save that for a future post.

Using HTML Tables

If you view the source of many Web pages on the Internet, you will probably see the entire layout of the page constructed using tables. Tables have been the main method of providing the layout of a Web page since they were first introduced. They make it easy to provide a header, footer, and content sections to a page.

Recently, however, many Web designers have been declaring that tables should only be used to display tabular data. This makes sense as many applications, such as Excel and database GUIs have a structured table look. The Web designers also state that the look and feel of a Web page should be separated from the HTML Web page.

The advantage to using tables is that they are easy to use. You define a table (<tabl>), then a row (<tr>) and finally a cell (<td>). You can span rows across columns and columns across rows to make cells larger. Formatting a table can be accomplished in the HTML code itself, or a CSS file.

Another advantage to tables is that all browsers in use today support tables. This means that a visitor won’t get a mangled Web page when it is viewed in their browser.

A disadvantage of using tables is they need to download the entire HTML first before they are rendered. This is because the browser can’t be sure how the table will look until the entire HTML can be rendered. As more people switch to broadband Internet, this will probably be a moot point.

I have designed many Web pages using tables, and have had no problems. I have, however, started to design Web pages using the new method: straight CSS with no tables.

Using CSS

The second method of laying out a Web page is using pure CSS and not tables. This method has been gaining popularity, especially among the processional Web designers.

So how exactly is CSS used to layout a Web page? The answer: through the use of division tags (<div>). These tags are used to divide your Web page into various sections. One large section will contain all the sub-sections, which is usually called the container. Within the container you may have header, footer, navigation and content sections. The look and positioning of these sections is defined by the CSS.

The CSS as I mentioned earlier is an acronym for Cascading Stylesheets. These are text files placed on a Web server that are downloaded along with the HTML file. A CSS file contains definitions, known as styles, which provide the look and feel of your Web site. The best part about using CSS files is that you only need to change one file when you want to change the look of your entire site. For those that manage thousands of Web pages, this can be a huge time saver.

One disadvantage to using CSS to layout your Web pages is that not all Web browsers support all the CSS style tags. Your Web pages may not display nicely to visitors on older Web browser. With each new version of a browser, this becomes more of a moot point.

I currently use the CSS method for Technically Easy, which is also my first site designed in this manner.

The Verdict

I usually call the last section in my posts "Summary" but this time I think I’ll provide my verdict, or opinion. I have used both methods to design Web pages, and have seen the advantages and disadvantages to both.

I decided to go with CSS for my new sites since that looks like the future of Web pages. I have accepted the risk that for many visitors on older browsers, the Web pages may not display correctly. I have also examined my Web site statistics and realized that for the most part my visitors are using newer browsers. I have tested my CSS site on IE 6.0+, Firefox 2.0+ and Opera 9.0+, and haven’t had any problems.

If you are a beginner to Web page designing, I suggest you use tables since they are easier to work with. Once you become familiar with HTML and CSS, you can then try using CSS for the layout, if you choose. I do recommend, however, that you learn CSS quickly and apply that to your Web pages as it can make changing the look of your entire site easier.

In the end, I don’t think it really matters which method you choose, as no one cares what your Web page source looks like. All that matters is that you Web pages display correctly.

What are Web Feeds?

A Web feed is used extensively on the Web especially for those who own a blog. They provide a means to distribute the contents of a Web site to subscribers. There are, however, two main types of feeds that can be used to send the sequentially and updated content from a Web site. This post will describe the two feed types and how someone can use them.

RSS

The RSS (Really Simple Syndication) (RSS 2.0) feed started out first as Rich Site Summary (RSS 0.91), which then became RDF Site Summary (RSS 1.0 and RSS 0.90). All formats are specified using XML.

The first version of RSS was first used in March 1999 on the My Netscape portal and has since been modified by various people and corporations. This has led to some incompatibilities and issues between the various versions, which I won’t go into detail here.

Atom

The second popular type of Web feed is the Atom feed. Similar to RSS feeds, Atom feeds are also specified in XML. This type of feed was developed because of the many incompatible versions of RSS feeds.

The Atom feed has gone through two versions: 0.3 in December 2003 and 1.0 in December 2005.

Publication

Many blogs and other Web sites have the ability to publish both RSS and Atom feeds. When content on a Web site is updated, the publishers send out the feeds with the updated content in sequential order to their subscribers. This provides an automated method for the subscribers to read the new content from many different Web sites without actually visiting each one. This automated process is known as syndication.

Syndication

Imagine you enjoy reading the content on 20 different Web sites, and visit all 20 each day to read any updates. After a while you would probably be tired of visiting that many Web sites each day. With syndication you don’t have to because the content comes to you.

Syndication is the process of automatically receiving a Web feed (RSS or Atom) from a Web site. All you need is a news reader that would automatically check the Web sites that you choose for new content. In the case from above, the news reader will check 20 Web sites for updates. Only the updated content is downloaded, so if only 5 sites have updated their content, you will only receive content from those 5 sites.

Summary

With the advent of RSS and Atom Web feeds, the information from Web sites has never been easier to receive. You can automatically receive information from any Web site that provides a Web feed provided you have a reader. In turn, it also is easier for publishers to send updated content to their subscribers simply by converting that content into an RSS or Atom feed.

How To Generate Web Site Traffic

There is much discussion on how to generate traffic to your Web site, but I decided to list a few points on the methods I like to use.

1. It’s All About Content
   You may have heard that "content is king." What does this mean? Visitors to your site like to read updated and unique content. This means you must update your Web site on a regulary basis to keep your visitors coming back for more. Search engines also love unique content. The more content you have the more you will get listed in search engines. When you first start a site search engines may be your main traffic generator so it’s best to get listed in them. Also remember to check your spelling and grammar.
2. Write Content For Your Visitors
   When writing your content, write it for your visitors and not search engines. This means don’t load up the content with keywords that is hard to read and understand. You need your visitors to keep coming back and not the search engines. If you write unique content the search engines will list you…don’t worry.
3. Linking to Your Web Site
   This is a big part of getting listed in search engines, and thus getting more traffic. The more quality Web sites that link to yours, the better search engine rank you will receive. You should have sites that share the same niche as your site link back to you. When a search engine indexes the other site, it will find the link to yours and then index your site.
4. Get Listed in Directories
   Besides search engines, there is another type of site you should get listed in: a directory. A directory is a list of Web sites that are organized into various categories. Many of these Web sites are very popular so getting listed in one of them can help you generate traffic. A bonus to getting listed in a directory is that they usually have a high page rank, which will help increase yours. Do a search for directories that contain your Web site niche and get added.
See also Open Directory Project.
5. Forums and Blogs
   I put these two into the same point because they essentially do the same thing: you leave comments and a link to your Web site. Let me explain. Do a search for a forum that is related to your niche, and sign up. Add your Web site name and URL in your signature to your profile. Now leave comments to some of the posts in the forum. Search engines will index forums, and at the same time will find the link in your signature which will once again act as a link back to your site. Leaving comments in blogs acts the same way as comments in forums.
   See also Website Babble.
6. Write Ezine Articles
   Ezine articles are similar to magazine articles except they appear online. There are several free Web sites that allow you to write your own article. These are great as you can become a well-known leader in your niche. You should then put a link at the end of your article to your Web site, so anyone reading it can click the link and go to your site. Search engines will also index any article you have written. Other sites that also enjoy your article may print your article with the link to your Web site included. You can’t get any better than that for something that cost you nothing but time.
   See also Ezine Articles.
7. Good Site layout
   This one is important to get your visitors to return. Make sure your site is easy to read and navigate. Having light grey text on a white background may be hard for some to easily read, so use black instead. A visitor to your site should be able to understand how to navigate within the first few seconds of loading the page. Keep the navigation simple, such as a menu on one side of the page or across the top.
8. Submit Your Feed
   If you have a blog make sure you submit your feed to various Web sites. A feed is the content that you have created in a specific format. You can also create feeds for a regular Web site as well.
   See also Feedburner or Ping-o-matic.
9. Advertising
   This point is not one to generate traffic as much as revenue, but I felt it important to list, as it can reduce your traffic. Placing advertising on your site is a debatable issue. The issue that is up for debate is when should you place advertisment: when you first start your Web site, or when you get a large number of visitors? My take on the issue is that it is your choice, just don’t load your site with advertisment. I hate sites that display advertisement at almost all possible locations on a Web page: top, bottom, left and right. I prefer that the advertisement be in one location and blend into the site and not stand out.