7 Inspiring Website Designing Ideas

Designing a Website with a strong conceptual design and paying close attention to some basic rules about visual design, interface, usability, navigation and style will have a better foundation to build on. The following design ideas can help you create a compelling Website that grows gracefully:

1. Simple, Easy and Clean

Creating a simple and easy navigational system is one of the most important elements to creating a Website. The only frustrating thing for your visitors/users is, not being able to find what they're looking for. Make navigation easy and simple so the the visitors can easily navigate in all sections your website and make sure he/she can navigate from every page. Providing a site map of your website at the bottom of every page (in a footer) would be good practice.

Example: Home > Section > Sub Section > Final Destination

You can best do this by creating a set of links to each of the main sections and placing it at the top (under header) or side of every page. Using a graphic icons can make your navigation more attractive. Your goal is to make sure that viewers don't have to use the Back button in their browsers to move around your site.


2. Design - Audience First

It doesn't matter how technically interactive a Web site is or how great the usability, user interact with the design first. Make sure that design for your Web site should be user friendly. The right design is one that best suits your audience — that may or may not mean lots of fancy graphics and animations.

3. White Space Consistentancy

One of the best design features you can add to a page is white space. White space gives the eye a rest, something readers/users need even more often when they're staring at a computer screen. White space can be use to separate one type of information from another and to focus the viewer's attention where you want it most. Some of the most beautiful and compelling designs on the Web use only a few well-thought-out elements against lots of white space.

4. Back-up Your Website

Always keep in mind that you have a system in place to back up your Web site. Make sure you have a copy of all the files that are on your server in a separate location and update it regularly to make sure you have the latest version of your site backed up at all times. Even the best Internet Service Providers sometimes have technical problems, so you should keep a backup of your site where you have easy access to it and can get it back online quickly if something ever does happen to delete any or all the files you have on the server.

5. Small & Fast

Making sure that your pages download quickly makes your viewers more likely to keep clicking. If your page designs take a long time to download, here are a few tips to make them load faster:


First, If you have a large Flash introduction at your home page try to reduce the size or have a option in the page for the users to skip large multimedia files. You especially don't want to make users wait too long for the first page of your site. If you noticed that static images are the problem, consider compression methods and use a program such as Photoshop, Fireworks or ImageReady that are designed for optimizing images for the Web. Finally, use Dreamweaver's code cleanup feature to get rid of extra tags that can contribute to a heavier page.

6. Follow the 3 Clicks Rule

This rule define that no important piece of information should ever be more than three clicks away from anywhere else on your Website. The most important information should be even closer at hand. Some information, such as contact information, should never be more than one click away. Make it easy for viewers to find information by creating a site map and a navigation bar — a set of links to all the main sections on your site.

7. Provide A Site Map

As your site grows, It is tought to provide easy access to all the information on your Website. One of the better solution is to provide a site map, which is a page that includes links to almost every other page in the site. This page should be fully functional — it doesn't matter if it looks pretty or not. Don't put lots of graphics on this page; it should load quickly and provide easy access to anything that your visitors need.

Get A Free TutorialFeed Widget Box For Your Blog

I'm really exciting to release TutorialFeed widget box for my readers. This widget box is just like other blogger widgets, after installing it in your blog you'll get recent posts of TutorialFeed. Its very easy to install just like other blog widgets.

How I said, this widget is totally free. Take a look at this preview:



How to install TutorialFeed Widget Box

Step 1. Login into your blog.

Setp 2. Go to Layout > Page Elements then Add a Gadget

Step 3. Add HTML/JavaScript



Step 4. Copy and paste following code:

<script type="text/javascript" src="http://cdn.widgetserver.com/syndication/subscriber/InsertWidget.js"></script><script>if (WIDGETBOX) WIDGETBOX.renderWidget('abed3f27-d7b4-4377-8ab3-94b07a41ac04');</script><noscript>Get the <a href="http://www.widgetbox.com/widget/web-programming-tutorials">Web Programming Tutorials</a> widget and many other <a href="http://www.widgetbox.com/">great free widgets</a> at <a href="http://www.widgetbox.com">Widgetbox</a>!</noscript>

Step 5. Last and final step is save your blog and publish it.

Congrats!!! you are done.

Understanding CSS Units of Measure

In this post I'd like to share some facts about CSS units of measurements for Length units, Percentage units & Color units:

1. Length Units

<length> indicates a number followed by a unit of measure:24px.

The number can be an integer or a decimal fraction, and can be preceded by + or -.

Units can be absolute or relative:

Absolute: mm, cm, in, pt, pc (millimeters, centimeters, inches, points, picas)

Relative: em, ex, px (the element's font height, the element's x-height, pixels)

Font size may be defined in points, pixels, inches, or centimeters (pt, px, in, cm) or as a percentage.

<absolute-size> can be:xx-small, x-small, small, medium, large, x-large, xx-large.

<relative-size> can be:larger, smaller.

2. Percentage Units

<percentage> indicates a number followed by a % sign:50%.

In the text-indent, margin, padding, and width properties, percentage values are relative to the width of the parent element.

In the font-size property, percentage values are relative to the font size of the parent element.

In <color> values, percentages can be used to express RGB values.

3. Color Units

<color> can represent either <color-name> or <rgb> values, as defined below:

<color-name> can be: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, yellow

<rgb> can be:

#<hex><hex><hex>

rgb(<number>, <number>, <number>)

rgb(<percentage>,<percentage>,<percentage>)

<hex> represents a hexidecimal value, <number> a decimal value, and <percentage> a percentage.

source:webmonkey.com

How to show retweet counter on your posts with Tweetmeme

Twitter is the best service you can use to drive constantly a big amount of traffic on your blog. If you want to increase the popularity of your blog posts or your web content within twitter community Tweetmeme is great tool for it.

The Retweet button is for website and blog publishers that want to encourage their audience to retweet their content on twitter.

Best of all it will work on any web page, anywhere!



If you want to add the tweetmeme button on your blogger template copy and paste the following code anywhere on the page:

<script type="text/javascript">tweetmeme_url = '<data:post.url/>';</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"> </script>

The only thing you have to change from the original code provides by Tweetmeme is set the var tweetmeme_url = <data:post.url/>.

You can also use compact version of the tweetmeme button with the same options as the larger button:

<script type="text/javascript">
tweetmeme_style = 'compact';</script>
<script type="text/javascript" src="http://tweetmeme.com/i/scripts/button.js"></script>

How to show related posts in your blog in six easy steps

In this post you'll learn how to show related posts/article below your post or at the end your content by following simple steps:

Adding related posts just below your posted content

Step 1. Go to Layout/Edit HTML/Edit Template

Step 2. BACKUP your template! Do not skip this!

Step 3. Check Expand Widget Templates, then Find a code line below:

<div class='post-footer-line post-footer-line-3'/>   ... </div> 

Step 4. Add one more line to be:

<div class='post-footer-line post-footer-line-3'/>   ... </div> <div id='related_posts'/> 

Step 5. Go to the end for:

</body> </html>

Step 6. Add two more lines to be:

<script src='http://www.google.com/jsapi'/> <script src='http://brps.appspot.com/brps.js' type='text/javascript'/> </body> </html> 

You can customize your code if you want add related post in the sidebar or below the post by visiting the project page.

Advantages of showing related post
:: Gives readers easy navigation (about what to read next)
:: Makes your posts sticky
:: More Click Through Ratio (CTR) for your pages
:: More CTR = More Adsense impressions.

10 Basic HTML tips bigenners must know

Today I'm going to share some basic HTML tips for biggeners. These tips are very useful for day-to-day HTML:

1. Changing Table Background Colors on Mouseover / Mouseout

This is very easy trick to learn and very useful, Place your mouse pointer over each of the HTML table cells below to view this HTML mouseover effect.

This HTML code will enable you to give your HTML tables a more professional look and feel, as it will greatly improve the presentation of your HTML table data.

Your Table Data

Your Table Data

Your Table Data

Here's the code of above table:

<TABLE BORDER="0" CELLPADDING="1" WIDTH="100%">
<TR onMouseover="this.bgColor='#CCCCCC'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#CCCCCC'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
<TR onMouseover="this.bgColor='#CCCCCC'"onMouseout="this.bgColor='#FFFFFF'">
<TD>Your Table Data</TD>
</TR>
</TABLE>

You can change color (#CCCCCC and #FFFFFF) according to your choice but whatever you change it should look nice.

2. Redirect to a New Page

Sometime you need to change your web page location for different reasons, but you dont want to lose your traffic linked to that page. So for this reason you may need to redirect your visitor to the new page.

Place the following HTML redirect code between the <HEAD> and </HEAD> tags of your HTML code.

<meta HTTP-EQUIV="REFRESH" content="0; url=http://tutorialfeed.blogspot.com/">

The above HTML redirect code will redirect your visitors to another web page instantly. The content="0; may be changed to the number of seconds you want the browser to wait before redirecting.

3. Gradient Background Effect

A gradient background effect will display your selected HTML background colors in ascending or descending color variations - from lightest to darkest or darkest to lightest.

This powerful HTML code effect can be used to give your web pages a unique look and feel. However, it must be used very cautiously.

This effect can be used for your entire web page background, or within your table cells.

To use the gradient effect as your web page background, use the following BODY tag:

<body style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');">

To use the gradient effect within your HTML tables, place the following code within your table tag:

style="filter:progid:DXImageTransform.Microsoft.Gradient(endColorstr='#C0CFE2', startColorstr='#FFFFFF', gradientType='0');"

Although you can edit the gradient colors indicated in red, keep in mind, in order for the gradient effect to display properly, you must select one light color and another color that is several shades lighter.

4. Using an Image Submit Button

It is not necessary to use default html submit button in your forms, you can use your own customized image button instead. Here's is the simple code for converting your html submit button to image button:

<input type="submit" value="Submit" style="background:url(../images/btn_bg1.gif) no-repeat;">

Using an image submission button within your HTML web page forms will enable you to easily spice up your forms.

5. Resizing Images

If you have a small web page image in JPG format and need to make it just a little bit smaller, you can do so simply by changing your image's HEIGHT and WIDTH values within your image tag. However, if you need to make a substantial change in the size of your image, this method is not recommended, as your file size will be the same.

Following the code for resizing images by changing the HEIGHT and WIDTH values:

Standard Image

<IMG SRC="yourimage.jpg" WIDTH="90" HEIGHT="130" BORDER="0" />

Resized Image

<IMG SRC="yourimage.jpg" WIDTH="39" HEIGHT="63" BORDER="0" />

When resizing a web page image, please ensure that you make the propotionate amount of change so the image will display properly.

6. Creating an HTML Email Form

You can create a simple form, to enable your visitors to send you comments, questions, product support requests, or whatever you'd like.

Copy and paste the following HTML code into the HTML portion of your web page:

<FORM action="mailto:you@xyz.com" method="post" enctype="text/plain">
<TABLE BORDER="0" CELLSPACING="0" CELLPADDING="4" WIDTH="90%">
<TR>
<TD width="30%"><DIV align="right">
<B>Name:</B>
</DIV>
</TD>
<TD width="70%">
<INPUT type="text" name="name" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right"><B>Email:</B></DIV>
</TD>
<TD>
<INPUT type="text" name="email" size="20">
</TD>
</TR>
<TR>
<TD><DIV align="right">
<B>Comment:</B>
</DIV>
</TD>
<TD><TEXTAREA name="comment" cols="30" wrap="virtual" rows="4">
</TEXTAREA>
</TD></TR>
<TR>
<TD> </TD>
<TD>
<INPUT type="submit" name="submit" value="Submit">
<INPUT type="reset" name="reset" value="Reset">
</TD></TR>
</TABLE>
</FORM>

Change the text indicated in bold to your email address.

Displaying an email form on your web page provides a great way to enable your visitors to contact you.

If you want to read detailed information about creating form Click here

7. Embedding Web Pages within Web Pages

Copy and paste the code below into your web page where you would like to embed the additional page.

<object data=http://tutorialfeed.blogspot.com/ width="600" height="400"> <embed src=http://tutorialfeed.blogspot.com/ width="600" height="400"> </embed> Error: Embedded data could not be displayed. </object>

Change the text indicated in bold to suit your needs.

8. Using list tag to show item in ordered list

This is very useful to tip to show items in a list on your web page. You can understand by following example:

Master Items

• Item 1


• Item 2


• Item 3


• Item 4


• Item 5

Copy and paste following code in your page where you want to show list items:

<ul><B>Master Items</B>
<li>Item 1</li>
<li>Item 2</li>
<li>Item 3</li>
<li>Item 4</li>
<li>Item 5</li>
</ul>

If you want to read more interesting facts about list tag click here

9. Showing two events on a single click by using Onclick

I have already posted article related to this topic in my previouse posts click here to read.

10. Auto Fill Email Subject and Body

If you're using a list management system that requires specific text to be placed within the email subject or body of your email, this HTML code is for you.

Many times, if you request your visitors to type in a specific email subject or body text in order to subscribe to your publication, they may not type the required text correctly. This mistake will cause you to lose your subscriber, as your system will reject the subscription request.

To prevent this problem, you can create an email link that will automatically fill in the subject line and body when clicked on.

yourname@xyz.com

Add the following code to your HTML.

<a HREF="mailto:yourname@xyz.com?subject=Your Subject&body=Message for the body">yourname@xyz.com </a>

Want to read more about HTML click here

Top 5 Alternatives to submit your blog to the top search sites for free

I'd like to share top 5 five sites that submit your blog to the top search sites and directories for free. Here's the following:

1. Blog Buzzer is a FREE easy to use tool that helps authors of blogs get their work noticed. Most blog entries are found by other internet users through search engines and blog related directories.

Blog Buzzer will automatically ping your blog to these directories and search engines for you.

Auto Buzzer searches all registered blogs on a daily basis to find the code snippet and check for updates to the blog. Once found Blog Buzzer will submit your blog to the sites that you have selected. By using Auto Buzzer it allows your blog to constantly be visible on the top blog directories and sites, without using resources or slowing down the performance of your blog.

Click here to know how to submit?

2. PingMyBlog.com is a service which does the hard work for you. They notify all the major blog directories in one go so that everyone knows about your latest blogs. It saves you the time of having to do each one manually! This is a great way to improve the popularity of your blog and make sure the search engines crawl and index your site properly.

Click here to go to pingmyblog.com

3. Ping-O-Matic is a service to update different search engines that your blog has updated.

It regularly check downstream services to make sure that they're legit and still work. So while it may appear like they have fewer services, that most important ones.

Click here to go to pingomatic.com

4. AutoPinger is a FREE and convenient service for all bloggers and podcasters. It is an easy set-and-forget service that lets concentrate more on developing your favourite blogs and podcasts.

Click here to go to autopinger.com

5. Pingoat is a service that pings or notifies a number of services that keep track of weblogs and publish them. By pinging, you let the services know that your blog has been updated and hence, they crawl and index your site, publishing your blog contents, thus increasing your blog's popularity.

Click here to go to pingoat.com

Five CSS Shorthands you always love

There are many shorthands of writing CSS but I'm going to share which I love the most. Here's the following shorthands of CSS:

Styles	Normal	Shortcut
Font	font-size: 1em; line-height: 2.5em; font-weight: bold; font-style: italic; font-family: arial;	font: 1em/2.5em bold italic arial;
Background	background-color: #fff; background-image: url(image.gif); background-repeat: no-repeat; background-position: top left;	background: #fff url(image.gif) no-repeat top left;
Lists	list-style: #fff; list-style-type: disc; list-style-position: outside; list-style-image: url(image.gif);	list-style: disc outside url(image.gif);
Margin	margin-top: 10px; margin-right: 1px; margin-bottom: 15px; margin-left: 4px;	margin: 10px 1px 15px 4px (top, right, bottom, left);
Border	border-width: 1px; border-color: black; border-style: solid; border-right-width: 1px; border-right-color: black; border-right-style: solid;	border: 1px black solid; border-right: 1px black solid;

Want to read more about CSS click here

10 Mind blowing tips for web developers / designers / techsavvys to handle global recession

Its recession time guys...who knows your boss fires you for a stupid reason. Now a days everyone affected by global recession and it is a hot topic to discussion among everyone across the globe. But if you prepared yourself to handle global recession you can easily win over your mindset. Here's the following tips to take global recession easy:

1. Timing is important

This is the most important factor of your job and responsibility. Your Time limit (or project deadline) to completion of your project must meet with the satisfactory level. Do extra effort to meet with the deadline of your project like giving extra hours to your project after office working hours.

2. Cost of crisis

Now the Cost of your project is very very important factor. If you are handling a costly project then you must focus on quality of the project otherwise your boss will kickout you if have come-up with any error because there are number of developers are there who can do your job better than you.

3. Money - Your longterm incentive

If you are a senior employee of your company than you shouldn't alarm your boss for money (Incentives, Bonus and Overtime dues etc.) everytime. You should ensure your boss that you are always with the company in the time of crisis. I agree that everybody is working for a money but sometime we have to show our honesty to the company.

4. Matter of confidence

Always shows your confidence to your boss if possible win your boss's trust on you. By doing this you'll keep your position safe if your boss is preparing a list of firing employee.

5. Take a call

If you were handling 2-3 projects at a time previously, then in crisis time you should take a call to help your boss in other project. This extra effort will be plus for you after recession period.

6. Don’t Panic

We are not denying that the times we live in are not reason to be concerned - but panicking is not going to do you (or those around you) any favours. Do what you can to have a level head and to look logically at the situation - if you can’t, find others who can and give them permission to slap you in the face next time you go into panic mode.

There are plenty of guys around whipping their colleagues into a frenzy about the economic downturn - why not do something different and provide a positive place?

7. Diversify your income

If your family fully relies upon your earnings it might be a wise move to think about how you can build multiple income streams rather than just relying upon one. I want to say that you must keep your earning safe for future because future is unexpected.

8. Cut your expenses

If you are a Manager or Team Leader in your company that you must have a extra benefits providing by a company like paid vacation leaves, petrol expenses for your car, telephone bills etc. You should avoid these extra benefits till the recession end.

9. Stop hiring

If you are a Team Leader then you should manage your team in a different way. Avoid hiring for new and extra projects you got. This is very difficult situation to handle but if you handle well then you'll be hero for your boss. After all you are saving company's money.

10. Work hard and be smart

Stop your R&D (research and development work) during project work. There is no escaping it - completing successful project takes a lot of hard work. Having said that - many employees also waste a lot of time. So my advice to all of them is to keep consentrait on your work and come-up with best result. You should always keep in your mind that how to manage your time, eliminate distractions, identify goals and objectives (both short term and long term) and keep focused.

Your opinion counts

You’ve read all points in this post about how to handle recession - but what would you add to the opinions and ideas expressed above?

Beware!!! Google's top 25 services spying on you

Hello guys, Everyone knows that Google has always known for its free awesome services among techsavvyes, bloggers, students and general computer users, across the globe. These Google services makes your life easier in terms of day-to-day workflow but on other hand Google spying on you for day-to-day activities. Today I'm going to share Google's top 25 most surprising services that can spying on your activities:

The blogs you read: If you use Google Reader, Google knows the blogs you subscribe to. Even if you’re not on Google Reader, Google knows all of the Blogger pages you visit.

Your social network and interests: Google indexes sites like Orkut, Facebook, and Digg, and as such, has access to information about what you’re interested in online.

Your schedule: Google Calendar opens your personal and business schedule up to the prying eyes of Google.

What’s important to you: If you’ve set up Google Alerts, Google knows all of the things that are most important for you to know about online.

What you’re searching for: Google is used by millions of people worldwide-and they know what every user is searching for, even if it’s not personally identifiable.

The web pages you visit: Google AdSense is used by many web pages for online advertising, and Google’s cookies record your visits to web pages with their ad program on them.

Your home address: Use Google Maps, AdSense, or Checkout, and there’s a good chance Google has your home address.

Your financial information: Users of AdSense and/or Google Checkout share financial information, addresses, and other personal information with Google.

The strength and popularity of your website or blog: For users of Google Analytics, Google knows what sites you control, how they are doing, and their trends.

Who and what you’re emailing: GMail users, and those who send mail to GMail users share a variety of personal and business information with Google.

What’s on your PC: If you’re using Google Desktop, Google knows everything that you keep on your computer.

Your research paper, bills, upcoming blog post, etc.: Docs and Spreadsheets are great web-based office tools, but using them means exposing the information in your documents to Google.

When you’re going to get the flu: Google can track flu related searches to find out where and when the flu happens.

Where you and your friends are: Using Google Latitude, cell phone users can share their location with others. Even if you’re not using Latitude, Google Maps for mobile can approximate your location.

What you’re watching on YouTube: Google owns YouTube, and knows about all the dirty videos you’ve been watching.

What and where you study: Google Books, Scholar, and University Search are tools that can reveal your academic life online.

Everything you’re looking at online: Users of the browser Google Chrome allow Google to see all of the web pages they are visiting.

Your problems: Asking a question or giving an answer on Google Answers will reveal your problems and personal life to Google.

Your medical issues: Do you use Google Health? If so, you’re sharing your entire medical history with Google.

Mobile number: On SMS, Google Mobile, and Gmail, you can reveal your mobile number to Google.

How your voice sounds: Using Google Talk will share the sound of your voice with Google.

What you, your friends and family look like and do: With the photo editor Picasa, you’re revealing your photographs, friends, and moments to Google.

Everything you do online: Google Secure Access encrypts your data, so everything you’re doing online is recordable.

What you want to buy and have bought: Product search and Catalog search can reveal what you’re buying and shopping for.

What your business is about: Keywords and purchasing patterns on Adwords share information about your business with Google.

10 Most common questions always asked in an interview

I have worked with almost 7 oragnisations during my career and there's lots of questions asked in interview related to the CSS & HTML. I'm going to share some most common questions that always asked in an interview:

Qestion 1 - How many types of CSS we use?

Answer: There are three types of CSS we generally use - External CSS, Embedded CSS and Inline CSS.

Examples:

External CSS
<link href="/css/test.ccs" rel="stylesheet" type="text/css" />

Embedded CSS
<style TYPE="text/css">
<!--
body {
background: black;
color: #80c0c0 }
a:link { color: #ff8080 }
a:visited { color: #ff0000 }
a:active { color: #a05050 }
-->
</style>

Inline CSS
This can be use with <span> tag:
<span style="width:50%; height:40px; font:arial 12px"></span>

Qestion 2 - What is the difference between id and class?

Answer: IDs identify a specific element and therefore must be unique on the page – you can only use a specific ID once per document. Many browsers do not enforce this rule but it is a basic rule of HTML/XHTML and should be observed.

Classes mark elements as members of a group and can be used multiple times, so if you want to define a style which will be applied to multiple elements you should use a class instead.

Qestion 3 - What is the difference between gif and jpeg?

Answer: JPEG (Joint Photographic Experts Group) is a standardised image compression mechanism. JPEG is designed for compressing either full-colour (24 bit) or grey-scale digital images of "natural" (real-world) scenes.

GIF (Graphics Interchange Format) It is an 8 bit format which means the maximum number of colours supported by the format is 256.

Qestion 4 - What is the major difference between CSS2 and CSS3?

Answer: Click here

Qestion 5 - What is the major difference Web 2.0 and Web 3.0?

Answer: Click here

Qestion 6 - What is the difference between HTML and XHTML?

Answer: Click here

Qestion 7 - How to show two events on a single click by using Onclick event in HTML?

Answer: Click here

Question 8 - How we can define a new font in CSS?

Answer: .fontstyle{font-family:"courier new"}

Question 9 - What do you mean by clear:both in CSS?

Answer: Image and text elements that appear in another element are called floating elements. The clear property sets the sides of an element where other floating elements are not allowed.

Question 10 - Why we should use DIVs instead of tables?

Answer: It is semantically wrong to show non-tabular stuff in a table.

5 Tips of Defining Vertical Centering With CSS

There are a multiple ways to defining vertical centering objects with CSS, but it can be difficult to select the easiest one. I’m going to share you all the best ways I’ve seen.

Vertical centering with CSS is not a every's cup of tea. There are many different ways that may not compatible with some browsers. Let’s review 5 different ways to vertically centering objects:

Method 1

This method sets some <div>s to display like a table, so we can use the table’s vertical-align property (which works very differently for other elements).

<div id="wrapper">
<div id="cell">
<div class="content">
Content goes here
</div>
</div>
</div>

#wrapper {display:table;}
#cell {display:table-cell; vertical-align:middle;}

Method 2

This method will use an absolutely positioned div, which has the top set to 50% and the top margin set to negative half the height of the content. This means the object must have a fixed height, that is defined by CSS.

Because it has a fixed height, you may want to set overflow:auto; to the content div, so if there is too much content to fit in, a scrollbar will appear, instead of the content continuing on outside the div!

<div id="content">
Content Here
</div>

#content {position:absolute; top:50%; height:240px; margin-top:-120px; /* negative half of the height */}

Method 3

In this method, we will insert a div above the content element. This will be set to height:50%; and margin-bottom:-contentheight;. The content will then clear the float and end up in the middle.

<div id="floater">
<div id="content">
Content here
</div>
</div>

#floater {float:left; height:50%; margin-bottom:-120px;}
#content {clear:both; height:240px; position:relative;}

Method 4

This method uses a position:absolute; div with a fixed width and height. The div is then told to stretch to top:0; bottom:0;. It can’t because of the fixed height, so margin:auto; will make it sit in the middle. This is similar to using the very common margin:0 auto; to horizontally centre block elements.

<div id="content">
Content here
</div>

#content {position:absolute; top:0; bottom:0; left:0; right:0;
margin:auto; height:240px; width:70%;}

Method 5

This method will only centre a single line of text. Simply set the line-height to the height of the object, and the text sits in the middle

<div id="content">
Content here
</div>

#content {height:100px; line-height:100px;}

This method is very useful on small elements, such as to centre the text inside a button or single-line text field.

CSS EXPLAINED: 6 Excellent tips to become a Master in CSS

I’m going to share that how to write CSS in perfection. This is explained version of CSS found to be very useful. Below is a list of tips to become a master in CSS:

ORGANIZE WELL

One of the most important factors in effective style sheet design is effective organization - it is a bad idea to separate styles into different sections: for example, into separate sections for fonts, margins and colors.

You should organize your style sheet by separating your rulesets into those that specify the formatting of elements (e.g., H1 {color: red}), those that specify the formatting of classes (e.g., P.copyrightnotice {color: red} or .left P {margin-top: 1em}), and those that specify the formatting of ids (e.g., #main {width: 60%}).

You should then place each section in alphabetical order.

You will now have a style sheet that looks something like this:

/* Elements */

A:link {}

ADDRESS {}

BODY {}

DIV {}

H1 {}

H2 {}

H3 {}

H4 {}

LI {}

OL {}

P {}

UL {}

/* Classes */

A.offsite:link {}

P.introduction {}

/* IDs */

DIV#body {}


SHORT IS ADVANTAGE

Above all else, the most important factor in writing effective style sheets is brevity - try to get rid of the superfluous garbage that clutters up your style sheet.

Here is an example of what I mean:

BODY {font-variant: normal;
font-stretch: none;
letter-spacing: normal;
word-spacing: normal;
text-decoration: none}

H1 {text-decoration: none;
font-style: normal}

This kind of thing is indicative of a bloated style sheet - no style sheet-supporting browser has any text-decoration on any element other than <A>, so text-decoration: none on BODY has no effect whatsoever, and neither does it have an effect on H1. Equally, all the other declarations here are totally useless, and are serving no purpose except to increase download times for viewers of your page.

Therefore, to improve your site at a stroke, cut all this garbage out of your style sheet, and just watch those download times plummet (and dedicated hosting costs, if you have to pay per gigabyte downloaded).

COMBINE, COMPRESS AND CONSOLIDATE

The next thing to do is to try to consolidate your style sheet by considering whether you really want all the styles that you have, and also by combining styles.

However, it is a bad idea to group elements (as in H1, H2 {...}), since this tends to complicate style sheets. Here's some examples:

A:active {
color: #FFFF66;
background: #9966CC;
}

Becomes:

A:active {color: #FF6; /* Each digit is repeated, so this is the same as FF FF 66 */ background: #96c}

And:

BLOCKQUOTE {
border-style : solid;
border-width : 1px;
font-style : italic;
line-height : 1.58em;
margin-bottom : .75em;
margin-left : .58em;
margin-right : 1.3em;
margin-top : .75em;
padding : .3em;
border-color: #c06565;
}

Becomes:

BLOCKQUOTE {border: 1px solid #c06565;
font-style: italic;
line-height : 1.58em;
margin: .75em 1.3em .75em .58em}

With:

H1,H2,H3,H4,H5,H6 {
font-style : normal;
line-height : 1.33em;
margin-bottom : .33em;
text-decoration : none;
font-family: "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif
}

H1, H2 {
margin-left: -7%;
}

H3, H4, H5 {
margin-left: -3%;
}

H6 {
margin-left: -1%
}

H1, H2, H3, H4, H5, H6 {
color: #66CCCC;
}

H1 {
font-size : 2em;
margin-top : 1.33em;
}

H2 {
font-size : 1.75em;
margin-top : 1.3em;
}

H3 {
font-size : 1.58em;
margin-top : 1.3em;
}

H4 {
font-size : 1.24em;
margin-top : 1.24em;
}

H5 {
font-size : 1.17em;
margin-top : 1.17em;
}

H6 {
font-size : 1em;
margin-top : 1em;
}

Becoming:

H1 {font: 2em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.3em 0 .33em -7%;
color: #6CC}

H2 {font: 1.75em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.3em 0 .33em -7%;
color: #6CC}

H3 {font: 1.58em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.3em 0 .33em -3%;
color: #6CC}

H4 {font: 1.24em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.24em 0 .33em -3%;
color: #6CC}

H5 {font: 1.17em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1.17em 0 .33em -3%;
color: #6CC}

H6 {font: 1em/1.33em "Arial Rounded MT Bold", "Twa TUR", "Trebuchet MS", Arial, Impact, sans-serif;
margin: 1em 0 .33em -3%;
color: #6CC}

The importance of doing this cannot be overstated - it will improve download times, improve maintainability by making it easier to spot bugs, and it will make it easier to use browser detection or browser avoidance techniques because there is less to change.

STYLE SHEET PERFECTION

The next thing to consider is that your style sheet should contain all of the declarations below (i.e., each and every block element must have declarations for margin, padding and line height, and CODE, BODY, PRE and CODE also require font size and family), although not necessarily the same values.

It is vitally important that you do this - if you fail to, it is inevitable that some users will encounter problems when viewing your page (the number of pages that I have had problems with as a result of the authors not following these simple principles grows ever greater).

If you are designing a style sheet from scratch, you should start with the style sheet below. This will ensure that no conflicts or differences will occur, whatever browser you use. If you are not starting from scratch, simply ensure that your style sheet includes these declarations (not necessarily these values) on each element:

Base style sheet

/* Elements */

/* Fonts - change 'sans-serif' to your preferred font */
ADDRESS, BLOCKQUOTE, BODY, CAPTION, CENTER, DD, DIR, DIV, DL, DT, FORM, H1, H2, H3, H4, H5, H6, MENU, OL, P, TD, TH, UL {font-size: 1em;
font-family: sans-serif}

/* Real styles */

A {cursor: auto}

A:link {color: blue;
background: transparent;
text-decoration: none}

A:visited {color: red;
background: transparent;
text-decoration: none}

A:active {color: green;
background: transparent;
text-decoration: none}

A:hover {text-decoration: underline}

ADDRESS {margin: 0em 0% 0em 0%;
font: italic 1em/1 sans-serif}

BIG {font-size: 1em}

BLOCKQUOTE {margin: 0em 0% 0em 0%;
line-height: 1}

BODY {margin: 0em 0% 0em 0%;
font: 1em/1 sans-serif;
background: white;
cursor: default}

BUTTON {cursor: auto}

CAPTION {margin: 0em 0% 0em 0%;
line-height: 1}

CODE {font-size: 1em;
font-family: monospace} /* To avoid overriding boldness/italicity by using font */

DIV {margin: 0em 0% 0em 0%;
line-height: 1}

DD {margin: 0em 0% 0em 0%;
line-height: 1}

DL {margin: 0em 0% 0em 0%}

DT {margin: 0em 0% 0em 0%;
line-height: 1}

H1 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}

H2 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}

H3 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}

H4 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}

H5 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}

H6 {margin: 0em 0% 0em 0%;
font: 1em/1 serif}

HR {margin: 0em 0% 0em 0%}

HTML {margin: 0;
background: white}

INPUT {cursor: auto}

KBD {font: 1em monospace}

LI {margin: 0em 0% 0em 0%;
line-height: 1}

OL {margin: 0em 0% 0em 5%;
list-style: decimal}

UL UL OL OL, UL OL UL OL, OL UL OL OL, OL OL UL OL, OL UL OL, OL OL {list-style: lower-alpha}

OL UL OL OL, OL OL UL OL, UL OL OL OL, OL OL OL {list-style: lower-roman}

OL OL OL OL {list-style: decimal}

P {margin: 0em 0% 0em 0%;
line-height: 1}

PRE {margin: 0em 0% 0em 0%;
font: 1em/1 monospace}

SAMP {font: 1em monospace}

SMALL {font-size: 1em}

SUB {font-size: 1em}

SUP {font-size: 1em}

TD {line-height: 1}

TEXTAREA {cursor: text}

TH {font: bold 1em/1 sans-serif}

TT {font: 1em monospace}

UL {margin: 0em 0% 0em 5%;
list-style: disc}

UL UL, OL OL UL UL, OL UL OL UL, UL OL OL UL, OL UL UL, UL OL UL {list-style: circle}

OL UL UL UL, UL OL UL UL, UL UL OL UL, UL UL UL {list-style: square}

UL UL UL UL {list-style: disc}

Set this up as your style sheet, and test it on your pages using IE 5 or Opera (Netscape 4.* is no use because it is too buggy; Internet Explorer 4 is tolerable, but is buggy on margin %).

There is no chance whatsoever that this base style sheet will produce what you want, but what it does do is force you to make style decisions for each element - although taking an approach that doesn't specify every style on every element might look o.k. in the browser that you are using, a different browser with different default settings might have it looking differently. The point of it is to make sure everything looks exactly correct when your users come to view the page - if you specify every relevant property, then there is no chance for problems.

To give an example, I was looking at a page that set margins on BODY but not on H1-6. In my user style sheet, I set margins on BODY and H1-6. The H1-6 had negative margin-lefts set that were designed to fit the margin I had on BODY. Since the page set margins on BODY, my BODY's margins were overridden, but since H1-6 were not set, the result (since the page had much smaller margins on BODY than I did) was that that part of the page's headings were obscured.

As a result, it is important that you never remove any of the declarations in the template - only alter them. This will ensure that there is consistency whoever is reading your page. It is also important to note that even though you might never use DT (or whatever), you should still keep its ruleset, since if you use it in future, you will then be forced into styling it appropriately.

In addition, you should not attempt to consolidate rulesets (e.g., by having H1, H2), since this tends to cause confusion. Furthermore, you should not mix classes in with the the element rulesets, but you should have them at the end of the style sheet.

There are a few points of note about the style sheet itself:

1. The use of the margin shorthand; although in each case margin: 0em 0% 0em 0% is expressable as margin: 0, I specify it like this to emphasize two things: firstly that you should specify vertical margins in ems and horizontal margins in %, and secondly that each side can be specified. The order is top right bottom left - margin: 0 5% 0 7% gives a left margin of 7%, top and bottom margins of 0, and a right margin of 5%. If you wish, you may change them all to margin: 0, but I find that it acts as a useful reminder.

2. The font declarations at the top; this should be set to the values you prefer - the declaration is setting the font family and size for the document. It is set like this to avoid the possibility of browsers applying their own defaults on any element.
The use of the font shorthand; this allows fonts' boldness, variant (i.e., small-caps or not), italicity, size, line height and typeface to be specified.

3. The typeface and size are both required; for example, font: 16px Arial is valid, but font: 16px is not. If line height is specified, it must follow the size separated by a / - e.g., font: 2em/1 sans-serif, which specifies a font size equal to twice that of the parent element and a line height equal to the font size, in a sans serif font. If bold, small-caps or italic is specified, they must come before the size - font: italic 16px Arial is valid, but font: 16px bold Arial is not.

4. You should not alter HTML's ruleset - it is likely to cause problems if you do; its official status with regard to backgrounds, etc., is poorly established, and its use is to be avoided.

Style sheet design checklist

Here is your style sheet design checklist:

1. Use shorthand properties where possible.

2. Avoid grouping elements unless all the elements have exactly the same styles (e.g., avoid H1, H2 {x} H1 {y} H2 {z}., but o.k. is H1, H2 {x}).

3. Always keep all declarations relating to an individual element in the same place.

4. Remove all useless declarations (such as font-style: normal).

5. Always declare margin on every block element.

6. Evaluate each declaration - does it have any useful effect?

7. Always use capital letters for the element_name in selectors - P, not p.

8. Separate into sections - elements, classes and ids, making sure that the elements are first.

9. Sort each section into alphabetical order.

10. Try adopting the compact but attractive and easy-to-read layout style of:

P {declaration: value;
declaration: value;
declaration: value}

Notice how compact this is. This is a definite advantage because it makes style sheets much easier to read, and makes it far easier to spot problems.

11. Try to always include the type selector when using classes (i.e., P.copyrightnotice, not .copyrightnotice) so that your classes are self-documenting (N.B. this doesn't apply to ids, since they don't work in Netscape or Internet Explorer when it is included).

12. Always use descriptive identifiers and elements that fit the content - bad is SPAN.pink {color: pink}, good is STRONG.attentiongrabber {font-weight: normal; color: pink}. As a reminder of what each element is used for, here's a list of the inline elements and their uses:

ABBR - Abbreviations
Acronym - Marking acronyms - IE 4 & 5 and Mozilla 5 only
CITE - Marks citations
Code - An instance of computer code
Dfn - Definitions
Em - Emphasis
KBD - Keyboard input
Q - An inline quotation
Samp - Sample output
Span - Anything not covered by these other elements
Strong - Strong emphasis
Var -A variable
And here's the block elements and their uses:
ADDRESS - Used for marking up addresses
BLOCKQUOTE - Block-level quotations
DD - Definition description; can only be used inside a DL; should follow the term that it is describing
DIV - Used for making logical divisions for styling purposes
DL - Definition list - container for DT and DD
DT - Definition term - term to be defined; can only be used inside a DL
H1 - Heading, level 1
H2 - Heading, level 2
H3 - Heading, level 3
H4 - Heading, level 4
H5 - Heading, level 5
H6 - Heading, level 6
LI - List item; can only occur inside OL or UL
OL - Ordered list; signifies that the LI that occur inside it should be numbered
P - Paragraph
PRE - Preformatted text (i.e., text in which the spacing is preserved)
UL - Unordered list; signifies that the LI that occur inside it should not be numbered

If you have followed this checklist successfully, the most complex style sheet will not exceed 3k for its elements (i.e., excluding classes and ids), and if it does, it is almost always a sign of poor design.

HTML DESIGN PRINCIPLES

It is important that your HTML is of reasonably high quality; for example, you should always think in terms of elements, not tags. E.g.:

<BODY>
<H1>
A heading
</H1>
The text after the heading.
<P>
Some more text
<P>
And some more.

This in an example of bad HTML, since 'The text after the heading' is not part of a P element, and therefore cannot be styled using the P selector. Better would be:

<BODY>
<H1>
A heading
</H1>
The text after the heading.
<P>
Some more text
<P>
Some more text
<P>
And some more.

This is better since every paragraph is now enclosed by a P element. If there is too much space between H1 and P, simply adjust H1's margin-bottom.

The next major point to consider is how you markup special text.

You should always do this with an element that is designed for the purpose; failing which, you should use SPAN or DIV with a class. In addition, most importantly of all, you should never use <FONT> tags.

source:richinstyle.com

231 Important color codes that Web designers / developers must know

EEEEEE	DDDDDD	CCCCCC	BBBBBB	AAAAAA
999999	888888	777777	666666	555555
444444	333333	222222	111111	000000

000000	000033	000066	000099	0000CC	0000FF
003300	003333	003366	003399	0033CC	0033FF
006600	006633	006666	006699	0066CC	0066FF
009900	009933	009966	009999	0099CC	0099FF
00CC00	00CC33	00CC66	00CC99	00CCCC	00CCFF
00FF00	00FF33	00FF66	00FF99	00FFCC	00FFFF
330000	330033	330066	330099	3300CC	3300FF
333300	333333	333366	333399	3333CC	3333FF
336600	336633	336666	336699	3366CC	3366FF
339900	339933	339966	339999	3399CC	3399FF
33CC00	33CC33	33CC66	33CC99	33CCCC	33CCFF
33FF00	33FF33	33FF66	33FF99	33FFCC	33FFFF
660000	660033	660066	660099	6600CC	6600FF
663300	663333	663366	663399	6633CC	6633FF
666600	666633	666666	666699	6666CC	6666FF
669900	669933	669966	669999	6699CC	6699FF
66CC00	66CC33	66CC66	66CC99	66CCCC	66CCFF
66FF00	66FF33	66FF66	66FF99	66FFCC	66FFFF
990000	990033	990066	990099	9900CC	9900FF
993300	993333	993366	993399	9933CC	9933FF
996600	996633	996666	996699	9966CC	9966FF
999900	999933	999966	999999	9999CC	9999FF
99CC00	99CC33	99CC66	99CC99	99CCCC	99CCFF
99FF00	99FF33	99FF66	99FF99	99FFCC	99FFFF
CC0000	CC0033	CC0066	CC0099	CC00CC	CC00FF
CC3300	CC3333	CC3366	CC3399	CC33CC	CC33FF
CC6600	CC6633	CC6666	CC6699	CC66CC	CC66FF
CC9900	CC9933	CC9966	CC9999	CC99CC	CC99FF
CCCC00	CCCC33	CCCC66	CCCC99	CCCCCC	CCCCFF
CCFF00	CCFF33	CCFF66	CCFF99	CCFFCC	CCFFFF
FF0000	FF0033	FF0066	FF0099	FF00CC	FF00FF
FF3300	FF3333	FF3366	FF3399	FF33CC	FF33FF
FF6600	FF6633	FF6666	FF6699	FF66CC	FF66FF
FF9900	FF9933	FF9966	FF9999	FF99CC	FF99FF
FFCC00	FFCC33	FFCC66	FFCC99	FFCCCC	FFCCFF
FFFF00	FFFF33	FFFF66	FFFF99	FFFFCC	FFFFFF

How to 'set tutorialfeed as your homepage' script

Here is simple script to set tutorialfeed as your homepage and you can use this code in your blog or website:

<a href="#" onclick="this.style.behavior='url(#default#homepage)';this.setHomePage('http://tutorialfeed.blogspot.com/');" style="font-size:12px;color:#ffffff;font-family:verdana;">Set tutorialfeed as your homepage</a>

Demo: Set tutorialfeed as your homepage

Here is script for bookmark tutorial feed:

Bookmark tutorialfeed script

<a href="javascript:window.external.AddFavorite('http://tutorialfeed.blogspot.com', 'Tutorialfeed')" style="font-size:12px;color:#000000;font-family:verdana;">Bookmark tutorialfeed</a>

Demo: Bookmark tutorialfeed

How to show 'Status Bar Message' in 4 different style by using JavaScript

I would like to share how to show 'Status Bar Message' in four different styles by using simple JavaScript. Its Very useful script for day-to-day coding. This is very helpful for biggeners also. Here's the code:

1. Static

<script language="JavaScript">
<!--
window.status = "My tutorial";
-->
</script>

2. Bouncing

<Script LANGUAGE="JavaScript">
<!--
var Message = "- My tutorial -";

var Leftspace = " ";
var Rightspace = " ";

var message1 = Leftspace + Message + Rightspace;
var dir = "left";
var speed = "100";

function bounce(){

if (dir == "left"){

var message2 = message1.substring(2,message1.length) + " ";
window.status = message2;
setTimeout("bounce()", speed);
message1 = message2;
if (message1.substring(0,1) == "-") dir="right";
}

else{

message2 = " " + message1.substring(0,message1.length-2);
window.status = message2;
setTimeout("bounce()", speed);
message1 = message2;
if (message1.substring(message1.length-1,message1.length) == "-") dir="left";
}

}

bounce();
// -->
</Script>

3. Scroll out

<script language="JavaScript">
<!--
var space = " ";
var speed = "100";
var pos = -20;
var msg = "My tutorial";
function Scroll()
{
window.status = msg.substring(pos, msg.length) + space;
pos++;
if (pos > msg.length + 10) pos = -20;
window.setTimeout("Scroll()", speed);

}
Scroll();
-->
</script>

4. Continuous scroll

<script language="JavaScript">
<!--
var space = " ";
var speed = "100";
var pos = 0;
var msg = "My tutorial";
function Scroll()
{
window.status = msg.substring(pos, msg.length) + space + msg.substring(0,pos);
pos++;
if (pos > msg.length) pos = 0;
window.setTimeout("Scroll()", speed);
}
Scroll();
-->
</script>

10 Things that every web author must know

1. The Web is not WYSIWYG

It's frustrating but true. The Web is not What-You-See-Is-What-You-Get. Well, actually, that's not exactly true. What you see is what you get, ofcourse.

The problem arises when you mistakenly assume that what you see is what everyone else gets. The key thing to remember here is that there are millions of Websurfers out there who don't use your favorite browser, your ----- card, your screen settings, or even the same kind of computer as you.

2. HTML is a structural markup language, not a page-description language

When you write HTML, you are defining the structure of a document, not specifying its layout. Yes, HTML does include some basic formatting and alignment tags. But it's very easy to misunderstand and misuse these tags.

You heard right -- it's possible to misuse HTML tags. In HTML, there are actually rules for what tags are okay, and where they are okay. There are even tools available to check your pages to see if they follow these basic rules of HTML.

3. Web authoring is not word-processing

When you create a word-processing document, you can exercise precise typographical control over some or all of a printed page. Defining the structure of a Web page is a much less predictable process.

Get over the urge to control every little formatting feature of your Web pages. The surest way to create a Web page that looks good to all your readers is to trust that your readers' browser will render your page the best it can, if not exactly the way you'd like.

4. Not everyone browses graphically

Graphics are a great way to spice up a Web page. But there are at least a million people in the world who, whether of necessity or by choice, don't browse graphically. That's a lot of readers. Build pages that convey their message and navigate easily, even without graphics.

5. Most "cool tricks" aren't really all that cool

When you're new to the WWW, pages that automatically load other pages seem almost magical. But most of the cool stuff you're encountering for the first time has actually been around for quite a while. It's been done already. Truth be told, it's been done to death.

6. Gear-driven Web pages get very old, very fast

The Web is like a high-tech toy store. Everyday, someone comes up with some cool new toy that's the absolute latest in smell-o-matic-blur-o-vision technology. And like all good toys, these new techno-gadgets are undeniably fun to ---- with.

Here's the problem: twenty bazillion other people are also rushing to employ this latest breakthrough in trendy technology. And after you've seen 10,000 smell-o-matic-blur-o-vision pages, it's hard to get excited about seeing number 10,001.

7. Original content is the key to a good Web page

Presentation is an undeniably important element of good Web design. But more folks use the Web as information source than as an entertainment source.

By implication, there is simply no substitute for good content on a Website. Individuals and organizations alike can make a unique contribution to the World Wide Web. Simply share what you know and think about the things that interest you.

It doesn't really matter whether it's needlepoint, or motorcycle engines, or landscape architecture, or stupid Unix tricks. After all, you think it's interesting, so it's a good bet that there's other folks who think so, too. Building a good set of Web pages means putting some of yourself into your Webspace.

8. Don't use reports of your browser's popularity as an excuse for invalid, exclusionary, non-HTML markup tags

Statements like "97% of all people use Netscape or MSIE" are:
1. statistically suspect and verifiably untrue
2. irrelevant
There's actually a fairly complex set of statistical reasons why these reports are inherently suspect and statistically invalid. But you don't have to be a statistician to understand that if you build a page that only works in, say, MSIE, pretty soon, all the people who come to your Web page use MSIE! (Surprise!)

The reason it's irrelevant is that there are literally dozens of versions of these two programs floating around out there. Thus, the terms "Netscape" and "MSIE" actually refer to dozens of different feature sets, quirks, etc.

Web clients are unpredictable, idiosyncratic, and buggy. Structuring your pages to accommodate or exploit browser quirks is a fairly spectacular example of letting the tail wag the dog. (It's also a great way to build a very high-maintenance Website.)

9. Fast-loading pages make for happy Websurfers

Most folks' biggest beef about the Web is piggish, slow-loading pages. Fast-loading pages make for more (and happier!) visitors to your Website. The key to building fast-loading pages is simple:

Send less data.

There are two key elements to building fast-loading pages. One is to build relatively small pages, and then use hyperlinks to connect these smaller pages into a larger Website. The other key is to reduce the size of your graphics files; it's really fairly easy to do, and your visitors will love
you for it. Honest.

10. Watch your step

Web design is undeniably fun and exciting. As your Webspinning skills evolve, you'll probably find yourself interested in exploring new avenues for your technical and creative talents.

As you explore, it's important to bear in mind that "the Web" is actually dozens of different technologies under a single name. All of these technologies are still very young, and many are still fairly unstable. Some are even downright dangerous.

Proceed cautiously, and realize that a lot of uncertainty still exists about almost everything Web. In fact, about the only thing you can be sure of is: you'll never be bored.

source:pantos.org