You are here

Website Designing Tips And SEO Techniques

It is now more than 2 years since I have launched my website. Below are some of the things which I think one should keep in mind while designing a website. This article was mainly written when I had a hand-coded website. Though now I am using a CMS (Drupal) for my website, I think most of the points still apply.

XHTML 1.0 Strict and CSS 2.0 Compliance

I think keeping this as the first point itself shows the importance of following standards. Unless really necessary, it is always best to make your website XHTML 1.0 and CSS 2.0 compatible. Following such rigid standards will be of great use later as you will have to worry less about cross-browser and cross-platform compatibility. You can more know more about XHTL in Wikipedia. Even CMS like Drupal produce code which are XHMTL 1.0 and CSS 2.0 compliant.

Liquid Page Layout

Try resizing the browser window and viewing. Change your resolution (make it higher (1024x768) and lower(800x600)) and observe. No matter what your browser size is and in what resolution you are viewing, you shall find the content filling the entire browser and the scrollbar being avoided wherever unnecessary. This is what is called "Liquid Page Layout" because it changes depending upon your browser size and the resolution. The easy part is that writing code for liquid page layout is very simple. Generally liquid page layout is achieved by defining the height and width of all elements in percentage. The difficult part is trying to make this liquid page layout design work in all the browsers :-).

Templates

The concept of templates is simple. In simple words, a template is a page with some parts of the page being the same across all pages. So let us say your page is divided into a header, content and footer. The header and footer remain the same through out the site where as the content changes from page to page. In this case, it would be a good idea to have the header in one file, the footer in one file and then for every content page include this header and footer file. The main advantage of this is that changes in the single header file / footer file will be reflected across all the pages of the site. For example let us say the header file is header.php and the footer file is footer.php. The header file could consist code for your menu. The footer file could contain the copyright notice and probably some acknowledgements. Then your content pages would probably look like this:

header.php:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" 
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">
  <head>
    <title>My Website</title>
  </head>
  <body>
    <div style="text-align: center">
      <a href="content-page-1.php">Content Page 1</a> * 
      <a href="content-page-2.php">Content Page 2</a>
    </div>
    <div>

footer.php:

    </div>
    <div style="text-align: center; color: #cccccc; font-size: small">
      This site is designed and maintained by Rahul Amaram
    </div>
  </body>
</html>

content-page-1.php:

<?php include('header.php'); ?>
This is Content Page 1.<br/>
This is Content Page 1.<br/>
This is Content Page 1.<br/>
This is Content Page 1.<br/>
This is Content Page 1.<br/>
<?php include('footer.php'); ?>

content-page-2.php:

<?php include('header.php'); ?>
This is Content Page 2.<br/>
This is Content Page 2.<br/>
This is Content Page 2.<br/>
This is Content Page 2.<br/>
This is Content Page 2.<br/>
<?php include('footer.php'); ?>

Avoid Frames

Whether or not to use frames is always a controversy. Using frames, one would not have the need to go through the hassles of templates. There could be two parts (frames) with the links in one frame and the content in another frame. But then frames are unethical. They give out ugly scrollbars. Of course, there are always inline frames. Using inline frames you can display a frame anywhere in a page, even in a table! All you have to use is use the 'iframe' html tag. But then the problem of bookmarking which was there with ordinary frames is not solved even with inline frames. For example, you browse to some page in the inline frame and add to your 'Favourites' list. Later when you click on this Favourite page, you get always the content of the first page in the frame and not the page to which you had browsed. Therefore inline frames are only used by me when I give link to an external site and few other places. You can find more arguments on this at http://www.apptools.com/rants/framesevil.php and http://www.cti.hull.ac.uk/malang/authoring/design/frames.html.

Make latest updates easily accessible

In other words, the easier for the user to find newer content, the more likely is he to visit your site regularly. Adding a "What's New" or "Recent blog posts" section is a real value addition to your website.

Comments

Unless you want your website to be some kind of broadcast network (like a Television :)), it is important that you provide some facility of taking feedback from users. Not doing so would mean you are not listening to your user's opinion. Nor are you providing any facility where in the user can interact.

Dealing with Spam (having some kind of anti-spam feature)

Yes you won't believe it. There are many crawlers out there which automatically post comments mostly related to porn. There are some well proved techniques to fight this kind of spam. For example, one can use some kind of image authentication (captcha) for posting comments. Another technique is to use some kind of learning agent which keeps improving over time in deciding whether a comment is spam or not learning from the previous spam comments.

Domain registration

I used a free url initially "amaramrahul.uni.cc" provided by uni.cc . But later I purchased "rahul.amaram.name". My suggestion is that even if you have the smallest plan to own a website, first buy a domain name. Domain names are damn cheap (350-700 Rs. per annum). So buy one and keep it. And also remember the more you delay, the lesser are the chances that you'll be finding your domain name. Here is an excerpt from one of my previous posts:

-------------------------------------------------------------

I purchased the domain "rahul.amaram.name" for Rs.350/yr from Sify. So my new website address is http://rahul.amaram.name :-). Some interesting things I noted during this entire process of domain name registration are:

  • If you are considering to have your own domain name, I would suggest .name, .in, or .ind.in. Though .com is very popular, .com generally refers to commercial websites. .NAME is the official top level domain registered by ICAAN for personal websites. .IN domain names are available to anyone! Companies, individuals, and organizations in India and abroad are eligible. .IND.IN is for individuals (ind) in India (in).
  • I tried for "rahul.name" and "rahul.in" before deciding on "rahul.amaram.name" but they were not available. "rahul.name" was registered by some Shyam and he was not ready to sell it as his son's name was Rahul :-). "rahul.in" was for sale and I quoted 70$ to buy the domain. Here is the best part. The seller got back to me with a quote of 75000 USD =)). So this gives you guys an idea as to the money involved in domain name market. Domain names are generally re-sold for thousands of dollars. A furthur interesting fact is .IN was officially opened to the public on 16 February 2005 and "rahul.in" was purchased by Dot Name Communications on 16-Feb-2005 06:32:27 UTC :-). So that also tells you the demand in the domain name market.
  • Here are a few links which u may find interesting:

--------------------------------------------------------------

Good URL

So, What is a good url? As mentioned in http://www.w3.org/Provider/Style/URI, a good url is something which does not change in 2, 20 or 200 years. This is especially important for content related pages. A simple example would be "http://rahul.amaram.name/blog/2006/11/31/why-we-adopted-boozi". A similar scheme scheme is followed in wordpress. This article may come under any location, any category but the url will always be the same. mod_rewrite can be used to convert these urls to dynamic urls. You will observe that a lot of care has been taken on my website to make all urls good urls. With regard to the same, it is also a good idea to have some naming convention for urls. Some related links are:

Separate content from view

A very important paradigm. The presentation layer has to be separated from the data layer. This can be achieved only using dynamic urls. To elaborate, you will have the content in some database / flat files. When displaying each page, all you will do is just read in content from the database / flat files, populate the page with it and have it displayed. The main advantage of this abstraction of the content from the view is that the view (i.e. look-n-feel of the site) can be changed without making any changes in the content. All Content Management Systems follow this paradigm.

Title

It is a bad practice to have no title / the same title (ex. "My Homepage") for all the pages in your website. Apart from giving information about the content of the page currently being displayed, the title is also used by Search Engines. Hence make sure that each and every page has a custom title.

Site monitoring

It is a good practice to have your site monitored for downtimes. There were periods when my site used to be down and I never realized it for days. Below is an excerpt from one of my previous posts:

----------------------------------------------------

Added two new monitoring services for my website so that I can get immediate alerts when my site goes down. Apart from this I also get a weekly and monthly report showing me the site uptime stats. Some things you have to look out for while subscribing to these services are:

  • Monitoring interval - most free services offer 1 hour monitoring interval but you can also get a monitoring interval of 15 mins
  • False Alarm protection - this means that the site would be tested from various locations to be doubly sure that the website is really down
  • Contacts to be Alerted - sometimes it may be necessary to recieve the alert at a different email than the one with which the login was created or to receive the alert at multiple email ids
  • Performance Reports - Daily, weekly, monthly reports provide useful stats

Generally free services do not provide the whole set of facilities. I am using both InternetSeer and SiteUptime to monitor my website :D. Two other services which could probably be conisdered are (I have not tested them) Killer Website Monitor and MrAlert Free Website Monitoring Service.

------------------------------------------------------

Site statistics / Web Traffic Analysis

Understanding the kind of traffic which you get and most importantly the kind of pages your visitors visit, will help you to make your website more popular. Two great sites for website traffic analysis are Google Analytics and StatCounter

Content Delivery

Make the content reach your visitors rather than the visitors reaching your content. Using emails and RSS, content can now be delivered directly to your user.

Guidelines

It is a good practice to follow guidelines. Below are links to some websites which provide you general Web Design Guidelines and also coding Guidelines.

To be frank, I have not referred the coding guidelines in detail. It is not necessary that you stick to these coding guidelines. But then do follow some convention so that making changes later to your webpage will not pose a big problem and also it will help anyone trying to understand what you wrote :-).

References

Below are some of the websites I had referred for constructing my website.

  • W3Schools Online Web Tutorials - This is an excellent site which can be used for reference while building the homepage as it contains descriptions of all HTML tags, CSS 2.0, compatibility of tags with browsers, etc.
  • HTML 4.01 Specification and XHTML 1.0 - This site contains information about the W3C recommendation for building web pages using various tags. This is an extremely huge site and I recommend this to use as a reference only and not as a must read.
  • irt.org - This is another site which can be used for reference. While searching for solutions in google, I found most of the solutions were linked to pages in this site.

There are a lot many things you can do to increase your ranking in search engines (like Google). The above are just some points which help you address design issues and increase site ranking in Google.

Category: 

Add new comment