Monday, April 6, 2009

What are web safe colors?

Colors that look the same on any browser or computer are known as web safe colors. These color codes are used in HTML elements like background, text etc. They are a combination of hexadecimal digits (00, 33, 66, 99, CC, FF). While choosing colors for HTML layout, try to use one of the hex color codes shown below.
Hex Code Color
#FFFFFF
#FFFFCC
#FFFF99
#FFFF66
#FFFF33
#FFFF00
#FFCCFF
#FFCCCC
#FFCC99
#FFCC66
#FFCC33
#FFCC00
#FF99FF
#FF99CC
#FF9999
#FF9966
#FF9933
#FF9900
#FF66FF
#FF66CC
#FF6699
#FF6666
#FF6633
#FF6600
#FF33FF
#FF33CC
#FF3399
#FF3366
#FF3333
#FF3300
#FF00FF
#FF00CC
#FF0099
#FF0066
#FF0033
#FF0000
Hex Code Color
#CCFFFF
#CCFFCC
#CCFF99
#CCFF66
#CCFF33
#CCFF00
#CCCCFF
#CCCCCC
#CCCC99
#CCCC66
#CCCC33
#CCCC00
#CC99FF
#CC99CC
#CC9999
#CC9966
#CC9933
#CC9900
#CC66FF
#CC66CC
#CC6699
#CC6666
#CC6633
#CC6600
#CC33FF
#CC33CC
#CC3399
#CC3366
#CC3333
#CC3300
#CC00FF
#CC00CC
#CC0099
#CC0066
#CC0033
#CC0000
Hex Code Color
#99FFFF
#99FFCC
#99FF99
#99FF66
#99FF33
#99FF00
#99CCFF
#99CCCC
#99CC99
#99CC66
#99CC33
#99CC00
#9999FF
#9999CC
#999999
#999966
#999933
#999900
#9966FF
#9966CC
#996699
#996666
#996633
#996600
#9933FF
#9933CC
#993399
#993366
#993333
#993300
#9900FF
#9900CC
#990099
#990066
#990033
#990000
Hex Code Color
#66FFFF
#66FFCC
#66FF99
#66FF66
#66FF33
#66FF00
#66CCFF
#66CCCC
#66CC99
#66CC66
#66CC33
#66CC00
#6699FF
#6699CC
#669999
#669966
#669933
#669900
#6666FF
#6666CC
#666699
#666666
#666633
#666600
#6633FF
#6633CC
#663399
#663366
#663333
#663300
#6600FF
#6600CC
#660099
#660066
#660033
#660000
Hex Code Color
#33FFFF
#33FFCC
#33FF99
#33FF66
#33FF33
#33FF00
#33CCFF
#33CCCC
#33CC99
#33CC66
#33CC33
#33CC00
#3399FF
#3399CC
#339999
#339966
#339933
#339900
#3366FF
#3366CC
#336699
#336666
#336633
#336600
#3333FF
#3333CC
#333399
#333366
#333333
#333300
#3300FF
#3300CC
#330099
#330066
#330033
#330000
Hex Code Color
#00FFFF
#00FFCC
#00FF99
#00FF66
#00FF33
#00FF00
#00CCFF
#00CCCC
#00CC99
#00CC66
#00CC33
#00CC00
#0099FF
#0099CC
#009999
#009966
#009933
#009900
#0066FF
#0066CC
#006699
#006666
#006633
#006600
#0033FF
#0033CC
#003399
#003366
#003333
#003300
#0000FF
#0000CC
#000099
#000066
#000033
#000000

Website Layout - Tips & Tricks

The importance of a good site layout

Websites are judged by content and layout. How good your content maybe, if your layout is not appealing, visitors will not be eager to come back. Everyone is not born with a quality of creating layouts that are pleasing to the eye. If you have been to different Yahoo groups, you might have found various color combinations that the group owner has chosen. Some of them have red backgrounds with blue colored text creating a blinding effect. Although Yahoo provides all the possible color combinations, some choose the wrong colors.

Points to consider while designing a website layout

Website design is not a one time activity. Almost all websites alter their layouts to give it a new and better look. Also with advancement in technology, underlying code also changes accordingly, adding new possibilities of providing a better layout.
  1. Keep it simple:
    A simple website layout is user friendly. Do not create complex navigational links using complex scripts or images that maynot be viewable correctly in different browsers. Also search engines cannot index the site properly if complex navigation is involved. Minimize the use of bulky images which take long to load. Use smaller icons to attract visitor's attention instead.

  2. Readable font size and face:
    Use a standard font size of "-1" (11 or 12 pixels if using styles) so that visitors can read the content easily. Select a professional looking font face (Verdana, Arial, Helvetica, sans-serif are very common). Avoid using fancy fonts like Comic Sans
    (unless it is a personal website). Use appropriate spacing between lines (12 or more pixels) to avoid clumsiness.

  3. Use web safe eye pleasing colors:
    The choice of colors may reflect one's personal taste. Every webmaster or designer wants the color combination that he/she likes best. However, it is a wise decision to get feedback from users or friends about what they feel about the color combination
    of the website. Use web safe colors whenever possible.

  4. Webpage Dimensions:
    One important aspect of layout is keeping track of dimensions of a web page. Most successful commercial websites limit the width and height of the webpage so that the important content of the webpage lies within the top 600x600 viewable area without scrolling. To avoid a horizontal scrollbar, set the page layout to expand and shrink with changes in browser window size. Sometimes this interferes with image and text positions relative to each other and throws the layout structure out of sync. The best choice is to limit the width by placing a table with a fixed width of 750 or 775 pixels. See the layout of this web page for an example.

    The page height should not be any more than 4 scroll lengths. Limit the content of the page and if more content needs to be added, move it to a new web page. Provide a navigational link to the next page and a link back from the second page. This will also increase your web site's page views (adding more advertising space).

  5. Limit File Size:
    Webpage size is defined by the total size of text, images and supporting files (including javascript, flash etc.) that is downloaded from the server to view a webpage. Page size is very critical for high volume websites because of high bandwidth needed. However, it is also very important for any other site in order to keep loading times to a minimum. Most of the population on the internet use a slow 56K modem to access the internet. And smaller page sizes load faster. If you look at some very high volume websites like Yahoo.com and Google.com, they hardly have any images, making their site load faster.

    There is a trade off between making your webpage look nicer with lots of graphics and making it faster to load. The rough target for page size should be below 35K for at least the cover page. However, for e-commerce sites, it is often not possible because they have to present multiple product images to attract attention. As a general rule of thumb, a visitor will leave your site if the loading time is more than 8 secs.
Tips & tricks
  • Extract Javascript code and styles from within the html page to external .js and .css files. Create a link from each html page to these external files. Browsers download these files only once and caches them on the user's computer. This will reduce the size of the individual html pages.

  • Use server side includes for centralizing common content.

  • Use a background which creates a contrast to the font colors and graphics. Look at media sites like movies.com for an example. It uses a dark background with lighter fonts in order to create a theatre like setting. However, the site is easy to read and navigate.

  • Check regularly for broken links. Using a link checker or checking the list of 404 errors (File not found) in your website logs (or stats) will help maintain site links. Maintenance of links to external sites can be centralized using link tracking tools

Web Hosting :: Tips On Using SubDomain

Points to consider before using subdomains

Subdomain makes the URLs shorter and nicer. It allows website owners to categorize the
content of the website. It also
helps in improving the search engine rankings as most of the search engines treat
the subdomain as a separate website address. However, there are certain things to
consider before setting up subdomains for your website.
  1. packages. If you have subdomain and want to move your site, you have to
    choose one which supports subdomains.

  2. Most web hosts charge extra for subdomain setup and maintenance.

  3. If you use cookies in your website, a cookie set from a subdomain
    cannot be read from the main domain and vice versa because of the security
    association feature tied to the domain which set it. This is also true for
    session cookies, where, if the user is logged in on the main site, and
    then moves to a subdomain, the subdomain site will not be able to access the
    same session cookie, and will assign a new session (hence forcing the user
    to login again). However, session persistence
    across subdomains can be maintained by implementing URL rewriting instead
    of session cookies.

  4. Your website stats will often not include the statistics of the
    subdomains. Therefore, you have to setup separate statistics for your subdomains.

  5. One of the advantages of using subdomain is that the website can be broken down into
    smaller pieces without losing the brand image associated with the domain name. The subdomains can be hosted on
    separate servers in order to reduce the burden on the main domain hosting server.

Sharing cookies among all subdomains

As explained earlier, cookies are not shared among subdomains or between the domain
and the subdomain. In order to set cookies accessible by all subdomains, use the
following techniques:
  1. While writing the cookie, set the cookie domain to ".domain.ext" so that it applies
    to all subdomains.

  2. If the cookie domain is set to ".domain.ext", it will not be accessible by a user
    who types in the address without the www before the domain (i.e. http://domain.ext).
    Therefore, redirect all requests without www to http://www.domain.ext.
There are some reported problems with the above approach. It is safe to set the default cookie
with no domain specified and then set another one with domain as ".domain.ext". In this case
there is no need for the redirects.
However, remember that session cookies are set by the web server software and you may not
have control over how the cookie domain is set.

Web Hosting :: Subdomain Configuration

Subdomain Configuration
A subdomain configuration is very similar to a domain name configuration. The only difference is that the subdomain entry is tied to the corresponding domain name lookup. A request for the subdomain (e.g. http://content.iatahni.com) will be routed to a DNS server containing the DNS information for the parent domain (iatahni.com). Once the DNS record for the subdomain is resolved to a particular IP address, the request is sent to the web server listening on that IP address. The web server can now delegate the request to the particular website based on the subdomain name in the host header of the request object. Various combinations of subdomain configurations are possible by using DNS server entries and web server application setup for load distribution, application isolation or security purposes.

Subdomain Setup on DNS server
The forward lookup zone of the parent domain in the DNS server should contain a pointer to the sub domain using either an alias (CNAME), a hostname (A) or a mail enchanger (MX) entry. The alias (CNAME) record is used for a subdomain if the subdomain points to a website running on the same web server at the same IP address as the parent domain website. A new hostname (A) record is used if the subdomain points to a different web server, or to the same web server listening on a different IP address (as in the case of load distribution).

Alias (CNAME) Setup: An alias points the subdomain to the same web server, which hosts the website for the parent domain. The canonical names (CNAMES) are added for each of the subdomains as shown below. Once the subdomain is resolved to the IP address of the web server, the web server can route the request to a different website (see section on web server setup below). Note that an alias for www is setup as a subdomain by default by most hosting companies, so that requests to www.domain.com is sent to the same website that handles the requests for domain.com.

www IN CNAME domain.com.
subdomain1 IN CNAME domain.com.
subdomain2 IN CNAME domain.com.


Address (A) Record Setup: A hostname DNS entry is required if the subdomain is pointing to a different IP address than that set for the domain name. Add the address (A) records to the forward lookup zone of the parent domain and associate the address records with the IP addresses of the web servers, which will handle the requests for the subdomain.

subdomain1 IN A 123.2.33.45.
subdomain2 IN A 123.2.33.46.


Mail Exchanger (MX) Setup: The mail exchanger subdomain configuration is required if an email server is setup to handle the subdomain mail accounts. For example, an email address like joe@arts.myschool.edu will require a subdomain setup for resolving the mail server for arts.myschool.edu. The setup is similar to the CNAME setup but with MX records.

subdomain1 IN MX 10 subdomain1.domain.com.
subdomain2 IN MX 10 subdomain2.domain.com.


Note: If the sub-domain is configured on another DNS name server, a Name Server (NS) record has to be created for the sub-domain on the corresponding domain name DNS server, so that it can delegate the sub-domain lookup to the other name servers. Using different name servers can eliminate security issues in cases where the sub-domains are maintained by separate administrators. However, the lookup carries an additional overhead.

Configuring the web server for sub-domains
Once the DNS server is setup to send the request for the sub-domain to the corresponding IP address, the work of the web server begins. The web server needs to be configured appropriately to handle the request for the sub-domain based on either the IP address or the host header entry. Host headers are commonly used by web servers to host multiple domains or sub-domains on one IP address.

Microsoft Windows IIS : In case of Internet Information Server (IIS), create a new web site for the subdomain using the IIS Manager, and add the sub-domain (e.g. subdomain.domain.com) as a new host header value listening to the same IP address as specified in the DNS entry. The port is set to 80 (the default for http requests). The host header can be added by clicking on the advanced tab next to the IP address configuration for that web site application. If the subdomain points to a subdirectory of the web site for the domain, then set the home directory for the subdomain web site to the subdirectory. For example, if the domain.com points to C:\Inetpub\wwwroot\ and the subdomain needs to be setup for C:\Inetpub\wwwroot\subdomain, then the directory for the subdomain website should be set to C:\Inetpub\wwwroot\subdomain.

Apache Web Server : In case of Apache web server, the subdomain is configured by virtual host entries in httpd.conf as shown below.

Listen 80
NameVirtualHost *
<virtualhost>ServerName www.domain.com
DocumentRoot /home/httpd/htdocs/
</virtualhost><virtualhost>ServerName subdomain.domain.com
DocumentRoot /home/httpd/htdocs/subdomain/
</virtualhost>

example:
Listen 80
NameVirtualHost *

<virtualhost>
ServerName www.iatahni.com
DocumentRoot "C:/WWW/public_html"
</virtualhost>

<virtualhost>
ServerName wap.iatahni.com
DocumentRoot "C:/WWW/public_html/wap"
</virtualhost>

<virtualhost>
ServerName aksi.iatahni.com
DocumentRoot "C:/WWW/public_html/aksi"
</virtualhost>

Conclusion
Sub-domain configuration starts with an entry in the DNS server of the parent domain and the lookup resolves the sub-domain to an IP address of the web server. The web server in turn delegates the requests based on its configuration for the sub-domain. Various sub-domain configurations can be used effectively to distribute the load evenly among available web applications or web servers listening to different IP addresses. The load distribution is achieved by the DNS round robin feature of the BIND. Other uses include application isolation, simpler and professional looking URL, content categorization etc.