Sunday, September 16, 2007

Setting up your own website...

This is a compilation of several articles from rediff.com

Hosting options:

So you want to tell the world you have arrived or you have a business and want to expand its reach, whatever your motivation, setting up your own website is a great way to get noticed.

Before you shrug off the idea pleading ignorance of coding, Photoshop, web design and everything else related to the topic, take a look at our easy-to-follow guide to setting up your very own website.

The first decision you need to take is whether you want a free (almost free) web page or if you're willing to shell out a certain amount on a paid domain name and hosting services. (The domain name is the name through which people can access your WebPages. Hosting is the service that provides you space on the internet to save the web pages that you have created.)

Free hosting services
Freewebs.com, tripod.lycos.co.uk, geocities.yahoo.com, freewebsites.com and many others provide you with space on their servers where you can host your website for free. For most of these free hosting services, you do not need to buy a domain name. These services would provide you with a sub domain name on their server.

For instance, I may host my web pages for free on geocities and anyone on the world wide web may access my pages on 'http://geocities.com/ankurjain/index.html'. Some of these free hosting servers may also provide you with easy-to-use utilities to create web page polls, feedback forms, albums and blogs on the web pages you host on their servers.

However, if you are a firm believer in the saying 'Nothing comes for free', you aren't far wrong. The catch here is these sites will take up a prominent space on the pages you host on their servers (a small, but prime spot). The company will use this space to display advertisements relevant to the content of the webpage and relevant to the visitors to your page.

For instance, if you are an expert on financial planning and you plan to host some articles on financial planning, then the service provider may use the space to post an advertisement from a company dealing in mutual funds or tax consultancy firm.

So, while this option is very handy for people with tight budgets, if you are using a free service to host your company's web page, be warned that your clients might just end up seeing your competitor's advertisement on your home page.

That's where paid hosting services come in.

Paid hosting
Once you decide on your hosting options, the next step is to book a domain name. To buy a domain visit any of the following websites: godaddy.com, buydomain.com, net4omains.com.

If I am hosting a website about myself, then I might want to buy the domain ankurjain.com. Since domain names are unique, only one website can exist with the name ankurjain.com. If someone has already booked this domain name, I could opt for ankurjain.in or ankurjain.name among others.

After checking the availability of the domain and the other domain options, the website will show you the annual price listing for each. You will need to renew the registration at the end of the end of every year if you want to continue using the domain.

If you take the time to search, you'll find a number of good offers by Indian hosting providers for web hosting on the net. You can also just choose to host your site with your registrar (the place you buy your domain from). For example, if you buy a domain from and host your website at GoDaddy.com, you can get 500 MB of web space, a 25-GB data transfer limit and 100 e-mail IDs with both POP3 and web mail access for just $3.95 (approx Rs 170) a month!

What hosting provider you eventually choose depends solely on your needs and budget, but you should trawl the web for user reviews that are a good pointer to the most user-friendly and dependable service providers.

Most of the hosting services provide you with complete know how on how to setup your website on their servers. They provide easy to understand step-by-step documents for uploading the pages created/designed by you on to their servers.

The only drawback is that you have to have a credit card!

Designing a homepage :

What affects your online presence most, either as an individual or as a company, is, perhaps, your website. Your home page is the one thing that defines you most, for the millions of strangers online. Today, with so many free options for web-hosting, it's almost a crime not to have a functional and regularly updated site.

We will walk you through the basics of designing a simple site. You need to decide where and how your site will be hosted. All the millions of options you have can be categorised into either free or paid solutions. Once you've decided on the type you want, you can go ahead and start planning the look of your site.

A common misconception is that coders who know HTML and other web design languages can only design sites. In this age of software empowerment, anyone to do anything: Web design has not been spared. Design programs such as Microsoft FrontPage and Macromedia Dreamweaver make sure that a good design is simple to achieve.

Frontpage

FrontPage has always had the distinction of being really easy to use, but has generally been less respected as a web design tool by hard-core designers. However, for those just starting out with Web design, there is no simpler tool. As with most Microsoft products, you'll take almost no time to get to grips with the interface.

Let's take a look at MS FrontPage:

~ When you run FrontPage, it starts off with a blank page.
~ You can choose to build a site from a template. There are several templates available -- choose one that matches your needs.
~ We chose to build a 'Corporate Presence' site.
~ Change the logos and add suitable text where clearly marked, and save each page.
~ Check the pages you've designed in different browsers by going to File > Preview in Browser.
~ Once all the pages have been edited, upload the entire web folder to your hosting server.
~ Check all the pages again, and your site is done.

Though this sounds a little too simple, the fact is FrontPage is designed that way, so the easiest way to experience its simplicity is to install it and try it yourself.

Web Components:

Web components in FrontPage are very important. FrontPage calls Flash movies, hit counters, buttons, etc 'Web Components'. The simplest way to see what each does is to open a blank page, insert one of each component and then preview the page in your favorite browser.

Pictures:

Inserting a picture in FrontPage is very easy: just go to Insert > Picture and choose the appropriate option.

Themes:

Use a theme to get a predefined colour scheme and save your time trying to think up one.

Import:

If you already have a site, and are looking to modify the existing site rather than building a new one from scratch, you can choose to import your site by going to File > Import.

Dreamweaver

Macromedia Dreamweaver is the preferred professional Web design tool. Though it is not as easy to use as FrontPage, it is considered to be much more powerful. Of course, this does not mean it is impossible to use, and it is actually quite simple to accomplish basic tasks, just like in Microsoft FrontPage.

When you run Dreamweaver, you are presented with a blank page. You can just close that page and go to File > New, and in the 'New Document' dialog that pops up, choose 'Page Designs' from the 'Category' pane on the left. You will see a long list of options in the 'Page Designs' pane in the middle, and clicking on one will show you a preview of what that design looks like in the 'Preview' pane on the right.

Choose one that suits your needs for the page you're designing and click 'Create'. Just like in FrontPage, you are shown a page with blank images and dummy text. All you have to do is edit the text and images by double clicking on them.

Once you are satisfied with your final page, press [Ctrl] + [Shift] + [S] and choose where to save the web page. Create all the pages you want for your site and save all pages in the same folder relative to the index.html page. If you need to make new folders, do so and make sure to keep all images in a separate 'images' folder. This will help you sort your data more efficiently.

Once you are done creating all the desired pages, make sure to right-click to see the many options easily available to you. Preview all of them in a browser -- you can do this by pressing [F12]. The last step is to upload all the pages and images to your web server. Remember to keep all relative paths exactly the same as they are in your root folder (where 'index.html' is saved) on your hard disk.

Inserting Objects:

In Dreamweaver, you can insert a large variety of objects into the current page. Just click on the 'Insert' menu to see the list of available objects. Once done, don't forget to save your page.

Right-click:

Dreamweaver's right-click menu is quite exhaustive. Right-click anywhere on the page to see the long list of options available.

Tables:

Drawing tables is easy in both Dreamweaver and FrontPage. All you need to do is look for the 'Insert Table' option in the 'Insert' dropdown menu.

Task Panes:

In order to use Dreamweaver more efficiently, you'll need to learn to use the various task panes provided on the top, bottom and right-hand side. The best way to learn is to use each task pane and get the hang of the software.

Covering both the tools in detail would require a big fat book. Just start using these tools -- look up Internet tips and tutorials, and basic information about them for help.

Avoid these errors:

More often than not, web designers get carried away by technology and create websites that have a lot of frills and fluff but nothing that actually tells the visitor what the website offers. There are hundreds of websites sporting constantly changing images and floating objects, but falling desperately short of holding the visitor's attention long enough to find out more. What you need to keep in mind if you want your website to be seen and visited regularly, is that (as in life) looks aren't everything.

Here are some of the tools you need to use with care:

Frames

Five years ago, frames were the 'in' thing -- they let one or two parts of your site remain constant, while only one frame changed. This idea caught on like wildfire, and every second designer, at one point, was designing sites with frames. However, when content on the web started to grow, search engines became more popular, and the concept of bookmarking caught on. Frames didn't gel well with bookmarks.

In the context of search, the concept of frames is flawed: it uses one HTML page that gets content from two or more other pages and places the content in pre-defined parts of the page. Though this sounds like a good idea, search robots will visit the index page and catalogue it as the content of your site -- ignoring the entire HTML code that refers to other pages. This led to sites with frames dropping rapidly in search engine rankings. This was perhaps the major reason why frames are no longer popular, after all, search engine optimisation (SEO) is a full-time business now, and is also a major aspect of web design.

Misleading or useless page titles

The page title is the text that is supposed to describe the current page, or at least your site as a whole. This text appears between the '' code tags in an HTML page. Sadly, most amateur designers fail to notice the importance of titles, and leave it as "Welcome to xyz.com".

Again, this is very wrong when you take into account the way search engines display results: almost all search engines make the link to the page title. Even if a search throws up your page as a result, all a potential visitor sees is the text "Welcome to xyz.com", and a few lines from the site.

The page title is what will draw a visitor to your site, and as the latest generation of internet surfers is quite comfortable using search engines, they have learnt to ignore sites with such title tags.

Let's say you're in the business of selling computer hardware, and your site is called 'xyz.com'. Another company also sells IT products, and has a site called 'abc.com'. Let's assume a potential visitor or customer searches for "computer hardware vendor India" in a search engine and gets the following results:

"Welcome to xyz.com

We believe in finding the right solutions for your pocket. Whatever your budget for computer hardware, we have a configuration that will fit your needs. Vendors of --

www.xyz.com/52K-8 Aug 05. Cached - Similar pages"

"Something.com

Your source for in-depth computer hardware info.

www.something.com/524K-10 Aug 05. Cached - Similar pages"

"Abc.com: The best computer systems in India at unbeatable prices

ABC is the leading computer hardware information resource on the 'Net. We have all the information you need about computer hardware, including vendors.

Abc is a renowned computer hardware vendor based in Mumbai. We deliver anywhere in India within 48 hours, and have over 1,000 service centers located at."

www.abc.com/24K-10 Aug 03. Cached - Similar pages"

Even though your site, xyz.com, may show up first, chances are potential visitors will click on the link to Abc.com, only because the title tag matched what was searched for. In an age where internet users estimate relevance based on a quick scan of content on search engines and web sites, the wrong title tag could kill your chances of getting hits.

Size matters

Considering that India is still to achieve the mass adoption of broadband, sites with large file sizes for pages are frowned upon. When you get data transferred to you at around 5 KBps, the average 100 KB page takes 20 seconds to load. This is already too long in terms of visitors' patience, and the only reason most sites get away with is because here in India we're used to waiting for pages to load.

However, if you have a site that has a 500 KB start page, this translates to a minimum of 100 seconds of waiting for the page to load. On an average, try to keep pages as small as possible -- less than 100 KB -- by using fewer images and other unnecessary design elements. This will ensure that users have a better experience at your site.

Flash designs

Although the use of Macromedia Flash has revolutionised the way content can be stored on your site and displayed to visitors, it is another bandwidth hog. Since Flash is generally used to compress videos or animations to display on web pages, the file sizes are always large. Even simple button animations can add a few kilobytes here and there, which can total up to a lot.

You also need to remember that text almost always loads before graphics, and most users will scan through whatever appears on your site first and decide whether the content is what they are looking for. Even though you may have relevant content neatly displayed using a fancy Flash links menu, many users may not stick around long enough to see this.

Gaudy colours

Some websites give you the idea that the people who designed them are colour blind! The net is jam packed with sites that use vivid reds, pinks and purples that distract rather than attract. There isn't much to explain here, with millions of colour combinations available it's purely up to you to decide what combinations are just not right.

Browser support

Most designers don't seem to care about whether their sites work on browsers other than Internet Explorer (IE). In fact, it's not just site design you should worry about, you should also choose a hosting solution that is compatible with most browsers. For example, Microsoft's ASP technology is largely targeted at IE, and browsers such as Opera and Mozilla Firefox often run into trouble with some ASP pages.

The best way to check the functionality of your site is to check it using the most popular browsers. We suggest you start with Lynx, the popular text-based browser in Linux, to see what your site will most probably look like to a search engine bot, and then work your way through IE, Mozilla Firefox, Opera, and others.

Balanced content

Sites with only text, or even those with only graphics, can be very irritating to view. Even if your site has only text, try and make the text layout look good.

You should never substitute text with graphics, such as making an animated GIF image with changing text. Doing this only increases the size of a page, and also takes away people's ability to resize the text on the page according to their needs. It also almost always results in a low-resolution image that shows very poor quality text.

A good rule of thumb is the ratio of 80:20 -- 80 per cent text to 20 per cent images. This means that when you look at the pages you design, no more than 20 per cent of the screen area should be images.

You also need to remember that websites have depth, so there's no reason to try and cram everything you offer into your homepage. Divide your content into little piles, study your existing as well as target audiences, and then tag your content in decreasing order of importance or interest to this audience.

The top 50 per cent of your content should be easily accessible from your homepage, and the rest can either be distributed lower down on your homepage or stored in lower levels (different pages) of your site.

Navigation

Very often, you come across sites that lead you to a page best described as a virtual dead-end. Somehow, visitors might get stuck at a place, and have no clue as to how they got there. This usually results in a visitor clicking on the little [X] on the top right corner, banishing your site from their screen forever! The entire reason for taking pains to design sites is to avoid this from ever happening -- yet it does!

So what causes this problem? Simple. Bad design!

All the pages your site contains should at least have links to your homepage and major sections. The easiest way to do this would be to have a constant navigation bar that has a fixed position on every page of your site. A good rule to follow is the 'three-click rule': no page in your site should be more than three clicks away from any other page.

Being over-creative

Sometimes, designers have delusions of grandeur, and think they would make good copywriters or visualisers in advertising agencies. This leads to sites that are cryptic to the common man. Such sites might be acceptable if the business or individual is attempting to show off their creative prowess -- as might be the case with an actual copywriter or advertising agency, or perhaps an artist's homepage. However, most often, such sites are a big no-no for the majority.

Outdated pages

Nothing is worse than having a site that has outdated content. Sites that contain content on the homepage that was last updated over a couple of months ago are often considered 'neglected', and are ignored by visitors. This holds true especially if you add a 'News' section to your site and start updating it regularly and then somewhere along the line, falter and stop updating it.

No resizing

Web pages that cannot be resized are a big no-no. Often, people browse websites without maximising the window. If half your content is not visible because your site does not allow for resizing windows, you have a problem on your hands. This also holds true for text resizing: nothing is more irritating than text on a page that visitors cannot increase or decrease the size of by using their browser's text resize option.

Moving text and images

Scrolling text marquees are ugly! They are not considered good design any more, and you should avoid putting in scrolling text as far as possible. The only form in which scrolling text is acceptable is as a ticker on your site, such as a stock quote ticker, news ticker, or Shout box, where visitors can leave a message for other visitors. Basically, only if you need to dedicate a very limited space to content that changes rapidly, or is input by visitors, should you consider scrolling text.

Animated GIF images, too, are now considered amateurish. Most often, only jokes and ads contain GIF animation. Web users are accustomed to seeing GIF animations as advertisements, and have learnt to ignore them at sight. This means that all the effort you put into animating an image will be wasted on the majority of visitors.

If you have to include moving pictures, make sure the animation is done well and flows smoothly, otherwise it's likely that you'll make your site look unprofessional.

No comments: