| 0 comments ]

This is a simple but very powerful script which will prove the jQuery library's ability. The following script will make all the hyperlinks in the page bolder and add opens the link in new window if clicked.

<script src="../_scripts/jquery-1[1].3.2.js" type="text/javascript"></script>
<script language="javascript">
$(function() {
$('A').css('font-weight', 'bold').attr('target', '_blank');
});
</script>

| 0 comments ]

Sometimes, we require intercepting whenever a page is posted or submitted to the server.
The below jQuery snippet will alert teh user with a confirm box with teh message "Are you sure to continue?" Clicking "Yes" will post the page and "No" will cancel the submit.

<head runat="server">

<title></title>

<script src="_scripts/jquery-1.3.2.min.js" type="text/javascript"></script>

<script language="javascript">

$(document).ready(function() {

$("form").submit(function() {

return confirm('Are you sure to continue?');

});

});

</script>

| 0 comments ]

There are a lot of details to consider when designing and developing a web site. In reality, it can seem like an endless list — but if you look carefully you’ll see that there are certain elements that are more important than others, elements that are used consistently among the most successful sites.
Once you’ve completed the Planning Stage of your website, the rest of the elements fall into broad categories ranging from User Interface Design to Content Creation to actual Development. Of course, there are also the issues surrounding Search Engine Optimization (SEO) — but we’ll save that for another day…

With that in mind, here are the 15 elements that should always be included on any top web site.

1. Good Visual Design

First things first… Visual design. I don’t know about you, but if I go to a web site that is not visually pleasing, it is a quick turn off.

That’s not to say that every top website needs an incredible visual design — but if a site looks like it hasn’t been updated since 1994, it’s just not going to be associated with other great websites.

A clean and simple design is usually all you need. Bells and whistles are nice, but I’m one who tends to go with the “less is more” theory. You don’t want your design to be over crowded. You just want it to look good so it can stand out from your competitor(s) in the minds of your potential clients.

First impressions are key. Although good design alone will not keep someone on your site — an eye-catching design will, at the very least, grab their attention long enough to take a look around.

2. Thoughtful User Interface

User Interface / NavigationAlong with good design comes a good user interface. The user interface is the foundation of any good functional web site. When designing a site, you’ll need to take into consideration your average user. Who is going to be visiting your web site — who is your ideal customer? Are they tech-savy? Are they computer illiterate?

It’s helpful to create an image of your ideal visitor and have them in mind when planning out the design for your site. Be sure you offer everything on your site that they would want to find before buying from you or becoming a subscriber.

You’ll want to be sure that your navigation is easy to spot and consistent throughout the entire web site. Make it obvious where the user should click both in terms of your primary navigation, as well as for links within your content areas.

3. Primary Navigation Above The Fold

Part of having an easy to navigate web site is ensuring that the primary means of navigation — links to the key areas of your site — are kept above the fold. With today’s large computer monitors and growing screen resolutions “above the fold” is generally considered to be within the top 500-600 pixels of your site design.

Elements to include here are your logo (which should link back to your home page), as well as links to the main sections of your site. If you can link to sub-pages here that is great, but in most cases that will over-clutter your design.

For example put “Home | About | Services | FAQ | Contact” in a very easy to find location at the top of your site. You can place sub-links such as About-Bio / About-Resume somewhere else, such as in your sidebar or as sub-links under the main page title of that section, etc.

Consistency is key here — be sure to place both your primary and sub-navigational links in the same spot throughout the various pages of your web site.

4. Repeat Navigation In The Footer

If you use images (or even flash) for your main navigation, it’s especially important to offer a duplicate set of navigation links in your footer. Even if you use text links at the top, the duplication is still helpful. You want to make it as easy as possible for people to find the content they are looking for on your site.

Often times the footer will link to additional information — such as Terms of Service — as well. Things that should be easy to find, but not necessarily something you want taking up real estate on the primary navigation area of the site

5. Meaningful Content

You know the saying… “Content is King” — you might have a pretty web site which will catch someone’s eye, but if the content is no good, you can be willing to bet that they aren’t going to stick around.

When writing the copy for your web site, it’s important to provide helpful, knowledgeable information about your company, products, services, etc. If you’re running a blog, informative articles related to your area of expertise are incredibly helpful as well.

While it’s important to sell yourself or your company, you also don’t want to oversell, either. Particularly in a blog setting — people reading a blog don’t want to hear all about “me me me” — they want to know how you can help them.

6. A Solid About Page

Among the top 10 most popular pages of my own site (after the home page, blog, 3 specific blog posts and my portfolio) is the About page. I have more clicks to my about page than to my services or portfolio pages, if you can believe that!

It’s simply because people are curious. They want to know who is behind a company or a blog. I was personally quite shy about including a photo on my own bio page, but finally did it a few months ago. It’s amazing what the sense of curiosity does — I myself am always clicking on about pages too, trying to find out more about the designer or writer, etc.

Include information on your background and how it pertains to your own business and expertise, etc. The about page gives potential clients a little bit more information about you and can often help create a more personal bond. If they are reading your writing and know a bit more about you, they’ll have a better sense of connection and better be able to relate to you on another level.

More often than not, a potential client will select the company with a “real” person behind it, rather than the faceless organization that refuses to get even a little bit personal.

7. Contact Information

Contact InformationNothing can turn off a prospective client more than not being able to find a way to contact you. If they’re interested in your services, and can’t find a simple contact page with a way to get in touch and hire you they’re going to end up going over to the competition.

Ideally you’ll want to give more than one method of contact. At the very least an email address and contact form. To make you more “real” though you should try to include a phone number (and if possible a mailing address) as well. I know many freelancers work from a home office – as do I. A quick solution is to get a separate phone line for business calls, as well as either a PO Box or other mailing service address.

Keep in mind that these are tax deductible expenses and makes you look that much more professional than someone who only includes an email address. To other home business owners in the same boat, it might not make a difference. But if you work with any larger or corporate clients, they’ll see a public phone number and address as an added sign of stability and that could play a small part in them choosing you over someone else.

8. Search

If you have a large web site or blog, having a search field is incredibly helpful, as well. There’s nothing like wading through hundreds of pages to find specific content without a search feature. If a potential customer can’t find something easily on your site, but Joe Designer over there does… odds are they are going to go with Joe whose content is easy to search through.

You can often use a Google Search on your site, or if you have WordPress (or another blogging platform or CMS / Content Management System) this will be fairly easy to accomplish. It’s not quite as easy to set this up with a static html site, but there are still services out there that will let you incorporate a functional search box onto your site.

9. Sign-Up / Subscribe

RSS SubscriptionIf your web site offers content on a consistent basis — such as with a blog — you’ll want to make it as easy as possible for people to sign up for updates.

This is something else that’s extremely easy to add if you have a WordPress blog. By default they’ll provide you with a feed address. But if you want to step it up a notch, you’ll want to sign up for a free account with FeedBurner. Better yet, you might consider using the FeedBurner FeedSmith plugin that will help re-direct all feeds through your FeedBurner account for easy tracking of your subscribers.

If you don’t have a blog, but still want to offer subscriptions to an email newsletter, for example, there are many companies that will let you setup and manage a mailing list. They will provide you code for your site to enable your web site visitors to sign up for updates using their email address. (FeedBurner allows you to collect email addresses too, btw). In some ways this is better than an RSS subscription because you are able to collect email addresses of potential prospects. While you can keep track of subscription numbers and other generic statistics, RSS subscribers get your updates via feed reader and have no need to provide an email address.

10. Sitemap

There are two kinds of sitemaps – one for humans and one for the search engines. An html (or php, etc.) sitemap meant for visitors to your site can be an invaluable tool for finding just what they are looking for.

Creating a sitemap – a structured list of all pages of a web site – is especially useful if you are unable to add a search feature to your site. A link to the sitemap is another item that is helpful to place down in the footer of your site, as well. A good sitemap will list out every page of your site in a hierarchial format – clearly showing the relationship of pages in terms of primary pages with sub-pages and sub-sub-pages, etc.

11. Separate Design from Content

Long gone are the days of using html tables for layout and design. The best developed sites use a combination of XHTML and CSS (Cascading Style Sheets), which create a separation of design vs content.

With use of tags you can create containers for various areas of text and images on your page. Without a corresponding CSS file you’ll see just the basics – text – which is what the search engines want to see, too.


By linking to an external CSS file in order to separate your content from the design, it leaves your html page with mostly nothing but actual relevant text in your source code. The separate CSS file is what specifies the fonts, colors, background images, etc. for your site design.

What’s great about this is you can update just one CSS file and have the change made site-wide (no longer having to go into each and every html page of a static site, to change your main link color from blue to green, for example).

With this separation of content from design, the search engines no longer have to wade through all of the excess code to find out if your content is relevant, either. And with separate files, the content can load quicker, too – always a good thing in the mind of visitors to your site.

12. Valid XHTML / CSS

It’s not just enough to develop your site using XHTML and CSS, though. It has to be accurate code. Two invaluable tools for checking your source code are offered by the World Wide Web Consortium (W3C):


There are many reasons to write valid code… With valid code, you are a few steps closer to ensuring your site will look good across the different web browsers (see number 13 below) and will help you with the search engines, too. If your site is built to current web standards, the search engines can easily wade through your content.

Not to mention it just shows that you know what you are doing. Yes, many clients don’t know the difference, but a few do – and specifically request standards compliant code. If you can offer this but your competitor can’t – that gives you an extra edge.

And besides this, other web developers are likely to check out the source code of a site to see what’s under the hood… both out of sheer curiosity, and just because they can!

13. Cross Browser Compatibility

Although you might live and breathe inside Firefox, your client may not. There’s a good chance your client is using Internet Explorer. Unfortunately there’s an even better chance they’re using Internet Explorer 6 (please don’t get me started on this issue – lets just say I know I’m not the only web developer who wishes this browser will simply GO AWAY!)

It’s imporant that your own web site and the site(s) you create for customers display well in as many of the mainstream web browsers as possible. If you can make them compatible across platforms too, that’s ideal. Most end users are on a PC so this is probably the most important platform to target. However many people in the creative fields are on a Mac, so if this is your audience they are important to pay attention to as well.

Unfortunately most people aren’t lucky enough to have both a PC and a Mac (not to mention Linux, etc.) but with the help of a site called Browser Shots you can enter a URL – select from a variety of web browsers across different platforms – and have them create screenshots for you. Very helpful if you’re on a PC running Vista for example, where you no longer have access to an old copy of IE6.

14. Web Optimized Images

When designing for the web, it’s important that you save all your images in a compressed format. Not too much that your images become pixelated, but as much as possible while retaining quality.

If you’re accustomed to doing print work, you know that 300dpi is the standard. Not the case with web sites, though. When designing for the screen you’ll want to save your images at 72dpi which will make for a much smaller file size (aka quicker download time for your web visitors).

Programs like Adobe Photoshop have a “Save for Web” feature that will automatically convert your image to 72dpi if you forgot, as well as give you a variety of compression settings when saving your imges. For web this will likely be either png, jpg or gif depending on the particular usage.

15. Statistics, Tracking and Analytics

Although this element is behind the scenes and not one you’re likely to know about as the web visitor — as a web site owner it is crucial, if not down-right addictive!

There are many services that offer tracking of web site statistics which include information such as:

  • How many hits does my site receive?
  • How many of these are from unique visitors?
  • How are people finding my web site?
  • What search terms are they finding me under?
  • What web sites link to me?
  • What are the most popular pages on my site?
  • Who is my average visitor (platform / browser / screen resolution)?

It’s actually quite amazing what kind of information you can keep track of with a good analytics program. Perhaps the most popular site for this is Google Analytics which offer a very robust (and free) tracking solution.

If you want to monitor your web site’s performance and figure out how you can improve your site, having a good stats package is key!

| 0 comments ]

SEO is such a hot topic these days. How do you get your web site within the first page or two of the search engines? How do you increase your Google page rank?

There are companies who dedicate themselves full time to doing SEO at a pretty penny. Something a lot of people can’t necessarily afford to pay for or spend the time on.

However, there are some simple things you can do when building your site that will help increase your chances of having good results. In no particular order, below are 10 of these items…

1. Title Tag

Near the very top of a web site’s source code you’ll find various meta tags — the standard ones being the Title, Description and Keyword tags. The title tag is technically not a meta tag, though it is commonly associated with them. The title tag plays such a large role in the indexing of your web site, that it is considered the most important of the three.

A page title is the first thing a search engine will look at when determining just what the particular page is about. It is also the first thing potential visitors will see when looking at your search engine listing.

It’s important to include a keyword or two in the title tag — but don’t go overboard – you don’t want to do what’s known as “keyword stuffing” which does nothing but make your web site look like spam. Most people will include either the company name, or title of the particular page here, as well.

2. Meta Tags

Meta TagsThere are two primary meta tags in terms of SEO — the description and the keyword tag. It’s debatable whether the search engines use the description tag as far as ranking your results. However it is one of the more important tags because it is listed in your search result — it is what users read when your link comes up and what makes them decide whether or not to click on your link.

Be sure to include a few relevant keywords in this tag, but don’t stuff it with keywords either. The description tag should read like a sentence — not a keyword list.

Due to “keyword stuffing” many search engines now completely disregard the keyword tag. It is no longer nearly as important as it was years ago, however it doesn’t hurt to include them in your source code.

When creating your keyword list, you’ll want to think of the specific terms people will type in when searching for a site like yours. Just don’t go overboard — too many duplicates are not a good thing (as in “web designer” “web designers” “custom web designer” “html web designer” “your state here web designer” – you get the idea). Those are all basically the same, so pick one or two variations at the most and move onto the next keyword.

3. Proper Use of Heading Tags

This is a very important element to consider when writing out your site copy. Use of heading tags helps users, web browsers and search engines alike know where the major key points of your copy are.


Your main page title should use the "h1" tag — this shows what your page is about. Use of additional tags, such as "h2" and "h3" are equally important by helping to break down your copy. For one, you’ll see a visual break in the text. But as far as the search engines are concerned, it will automatically know what your topics are on a page. The various heading tags give a priority to the content and help index your site properly.

4. Alt Attributes on Images

Putting alt attributes on your images actually serves two purposes. In terms of SEO, putting a brief yet descriptive alt attribute along with your image, places additional relevant text to your source code that the search engines can see when indexing your site. The more relevant text on your page the better chance you have of achieving higher search engine rankings.

In addition, including image alt attributes help the visually impaired who access web sites using a screen reader. They can’t see the image, but with a descriptive alt attribute, they will be able to know what your image

5. Title Attributes on Links

Including title attributes on links is another important step that any good web site will have. That’s the little “tool tip” that pops up when you place your mouse over a link. These are especially important for image links, but equally useful for text links.

As a note, you should use descriptive text for your links. “Click here” doesn’t really tell a person – or more importantly, the search engines — what the link is. At the very least put a title tag that will explain that “Click Here” really means “Web Design Portfolio” for example. Better yet – make the main link text something like “View my web design portfolio” — this will give some value to the link showing that the resulting page is relevant to searches for portfolio’s.

6. XML Sitemap

My last post referenced the sitemaps used by web visitors to help them navigate through your site themselves. However, there’s another version — XML sitemaps — that are used by the search engines in order to index through your site, as well.

This list of ALL pages / posts / etc. of your site also includes information such as the date the page was last modified, as well as a priority number of what you feel the most important pages of your sites are. All elements that help the search engines properly find and link to all content of your site.

7. Relevant Content

Having content relevant to your main page or site topic is perhaps the most important SEO aspect of a page. You can put all the keywords you want in the meta tags and alt image tags, etc — but if the actual readable text on the page is not relevant to the target keywords, it ends up basically being a futile attempt.

While it is important to include as many keywords in your page copy as possible, it is equally as important for it to read well and make sense. I’m sure we’ve all seen keyword stuffed pages written by SEO companies that honestly don’t make much sense from the reader’s point of view.

When creating your site copy, just write naturally, explaining whatever information you’re discussing. The key is to make it relevant, and to have it make sense to the reader. Even if you trick the search engines into thinking your page is great — when a potential customer arrives at the site and can’t make heads or tails of your information and it just feels spammy to them — you can bet they’ll be clicking on the next web site within a matter of seconds.

8. Link Building

We’ve probably all heard of Google Page Rank — it seems to be every web site owner’s dream to have as high a page rank as possible. While the algorithm for determining page rank encompasses many elements, and is constantly changing, one item is the number of links pointing to your web site.

Now, you’ll want to steer clear of link farms and other spammy attempts at getting links to your site. However there are many reputable and niche directory sites that you can use to submit your web site, or specific blog articles to.

With genuine content — especially if you have a blog — you’ll be able to generate links with other web sites and blogs, as well. It’s somewhat of a give and take, in that if you link out to other sites, you’ll find sites linking back to you — and hopefully see your page rank going up, as well!

9. Social Media

Although technically not SEO, Social Media is such a growing factor in getting your web site noticed, that it’s an important element to include in your plan.

Social media ranges from social networks like Twitter, Facebook and LinkedIn — to social bookmarking sites such as Delicious, Digg, StumbleUpon and many more. There is a lot of relationship building involved, but as you build your own networks and build quality content on your web site or blog, you’ll see traffic to your web site increasing, as well.

As with any relationship, it is a give and take. Don’t just expect to join a site like Twitter for the pure sake of pushing your content. That just won’t fly — your true intentions will stick out like a sore thumb and do nothing but turn people off.

Even if you are on the site purely for networking reasons, the key is to make friends. Help out members of your network if they ask for a “retweet” or Digg, give helpful advice if asked, etc. You’ll see the same in return.

If you write a great post and have built meaningful relationships with peers in your niche, you’ll often find that friends will submit your posts and give you votes on the social bookmarking sites. The more votes you receive, the more likely your post is to be noticed by others and shared around, often resulting in additional link backs from other blogs, etc.

10. A Few SEO Don’ts — Flash and Splash

Flash PlayerAlong with any list of Do’s come the Don’ts. As far as SEO is concerned, two of these items are splash pages (often consisting of a flash animation) and all flash web sites.

Yes, flash is pretty! Full flash web sites can actually be amazing to look at — their own bit of interactive artwork. But unfortunately the search engines don’t get along well with Flash. Although there is talk of possible advancement in this area, for the most part the search engines cannot read Flash.

All that great content that you wrote for your site will not be seen by the search engines if it’s embedded into a Flash web site. As far as the search engines are concerned, your all flash web site might as well be invisible. And if the search engines can’t see your site content, a good chunk of potential customers will miss out on what you have to offer, too.

Equally as “pointless” are splash pages. Once very popular, the splash page should no longer be an important feature of any site. While splash pages used to serve as an introduction into a web site (often with a flash animation), it is no longer seen as helpful, and often times might actually annoy visitors.

For one — it’s an extra click to get into your content. Worse is when you don’t give a “skip intro” option or set of links into your main site content — because you’re essentially forcing your visitors to sit through the full animation. If you’re lucky, this will only annoy them… if not — they’ll just leave without giving your main web site a shot. And without an html link pointing into your site, the search engines have no way to continue either (unless you made use of a sitemap.xml file — but still…)

A good alternative to both issues is to make use of a flash header. There’s no problem to include a flash animation at the top of your main site, or as a feature within the content area, etc. Because this is an addition to your web site, as opposed to a full separate element.

| 0 comments ]

Alt Tag Definition:
With the help of HTML tag which provides alternative text when non-textual elements, typically images, cannot be displayed.
ALT Tag is a one of the important factor while Optimizing Image for a web page.

Alt Tag in Html:
The alt attribute is used to define an "alternate text" for an image. The value of the alt attribute is an author-defined text:
Free SEO Article

Important Factor for On-page Optimization Alt Tag to Image:

Alt tag generally means the alternative tag. Alt Tag is the HTML tag that tells search engine about the images. Because search engines cannot read text in the images, so with the help of alt tag, search engines come to know about images.

Search engines crawlers are able to index text but they are unable to index the text in the images can create problems. So while making a website you can not only target search engines but the outcome will be generated through visitors.

According to Google friendly site guidelines, we have to create a website SEO friendly and it must helpful to visitors. If we are using the images in the WebPages, in such a situation, alt tag is the best option to add more beauty to your website.

Here are few Tips to add Alt Tag Text to Images:

  • Use ALT Tags to label every image on your web page.
  • Only use the most relevant keyword in ALT Tag to label your image.
  • Do not add unrelated keywords in ALT Tags.
  • Try not to make ALT Tag look like spam for search engines.
  • Add keyword or phrase for important images.
  • For other images like background images, spacers, dividing lines, table borders, and other images used for designing use alt=”” as the Alternate Text.
  • Do not repeat keywords.
  • ALT Text should be a sentence or phrase, instead of keywords separated by commas.
  • The correct way to use ALT Text is:”FreeWhere seo.jpg is the image name and “Free SEO Articles” is the ALT Tag added to the image so as to label it.
It is recommended to use ALT tag with every image of your web page.

Alt Tag optimization Tips:
  • Use alt tag for all images in the web pages and add most relevant keyword in your Alt tag.
  • Use keywords that are present in title tag, Meta tag and body text.
  • Use 2-3 relevant keywords rather than the repetition of keywords.
  • Use plural keywords in alt tag.
  • Alt tag should not be long and must not exceed more than 7 words.
  • Avoid using of irrelevant keywords in the alt tag that are not related to images instead use keywords that directly explain the images.