Monday, September 27, 2010

CSS3 Shadow Effect


web designing packages hyderabad India

Shadow effects are specified based on specified order. The property dont increase the size of the box, though they can extend past its boundaries.



.shadow {
text-shadow: 5px 5px 5px #a1a1a1;
font-size:3em;
color:#000;
font-family:"Times New Roman", Times, serif
}


The above class specifies text shadow effect, it extends 5px to the right and 5px below the text, and the 5px blur.

Browser Support

IE8 - None
FF3.5+ - Yes
SA1.3+ - Yes
OP9.5+ - Yes

shadow value must specify a shadow offset and a blur radius and color.

Using two lenghth values the offset will specified.

* First value represents the horizontal distance to the right of the text in positive.
The negative value move the text to left side.

* Second value represents the vertical distance below the text (if it’s positive) or above the text (if it’s negative).

The blur radius is specified after the offset values; it’s a length value that represents the size of the blur effect. If no radius is specified, the shadow will not be blurred.

Color can be specified before or after the offset and blur radius values.


web designing packages hyderabad India

Sunday, September 26, 2010

Developing a Website


website designing India

Many people want to have a website. They do not have the technical expertise to put it together themselves. There is no need to panic. In a capitalistic economy where there is a need there is always someone to fill it. Web development is no different. You can hire these resources to be done or find resources to teach you how to do it yourself.

A search on the internet will find you resources. You can go more independent and hire someone to do a custom web design. They will help with the set up look and graphics on your site. They can even make some suggestions as to content. These services will cost you but may be a very good investment. If you want the best chance at making your site stand out and do what you want it to then hiring a web designer might just be the way to go. You will want to compare prices on what services they have to offer.

You can also choose to download software to use on a web hosting site and make your own design. This may not be as original but will cost less than hiring someone exclusively for your site and web development. The software that is offered is made for the non expert to use. You can even find resources to help you make a shopping cart if you want to set up a store. You can also set up blogs and forums. As noted earlier, if there is a desire for a resource then there is someone to fill that need. A lot of this software is free to download. You will want to compare prices of the hosting sites as well. They are usually relatively inexpensive.

If you want people to see your site you will need to think about website promotion. Web promotion is what gets people to your site. Using an SEO service may help you in this area. Search engines are what people use to find sites and you want to make sure your site comes up as one of the first on its list. You may pay for services to have your site listed. You can also use methods such as using keywords to get your website to be on a list from a search engine. Some hosting sites will also offer web promoting services.

When you develop your site you must be clear in your goals. Decide if you want it to be for personal satisfaction. You might just be sharing a blog about your life with your friends and family. On the other hand, you might have a goal of making money. Those are two distinct goals and you will have to decide which your focus is.

AeeSoft offers quality website Design and web development at very affordable price.

website designing India

Article Source: http://EzineArticles.com/?expert=Nav_K_Singh

Wednesday, September 22, 2010

Important Suggestions For Using Web Design Tips


website designing India

When it comes to a functional and profitable website, there are some details which can be implemented to help your visitors find their way around and be more likely to purchase from you than from your competitors. Below you will find web design tips which can help you in deciding what to display on your pages.

Clutter will only confuse your visitors and they will quickly leave your site to click on the next link in the search engines results. Taking the time to plan the layout of your website will not only improve the appearance, it will improve the functionality required to assist visitors in finding the shopping cart.

A good method to prevent clutter is to divide the website into categories of related information, or products. By doing this you can free up space on your home page by creating links to additional pages which now contain the information that was previously cluttering up your front page.

When a person is about to spend money, they want to know how to get in contact with the owner of the site. Providing a Contact Us form will greatly ease the mind of those who would otherwise leave in search of a site that wants to hear from their customers. This simply little form also provides the business owner with the email address of a visitor so that you can keep them updated as to new specials you are conducting.

A blog is an area where you can allow visitors, and customers, to leave messages for every visitor to your site. It can also be used by you to keep fresh content available for the search engines to enjoy. By using certain keywords you will be in compliance with the indexing requirements of search engines and your site will appear higher up the rankings list.

Another business tool that can improve your site management is known as an Opt-in Newsletter. Unlike the Contact Form and Blog, this convenient correspondence tool can help you organize the list of people by location and interest and only provide product offers that are focused on their previous purchases.

A good website has fresh content, ease of use and organized information which can focus any visitor to the items which brought them there, and improve the chances that they will make a purchase before leaving your site. It is better to clean house and improve your site with web design tips than your lose a customer to your competition.

Moustique Design are an affordable freelance web development company offering custom website design London including CMS (content management systems), graphic design, ecommerce and much more.

Article Source: http://EzineArticles.com/?expert=Carolyn_Clayton

How To Achieve Internet Business Growth and Profitability in The Recession


mobile web developers hyderabad India

After the economic slump, it's hard to believe that profits even exist. For many it feels like pigs are more likely to fly, over their business making profits. Even though competition between internet businesses is tough, it's not impossible to make a decent profit, if you have the right tools at hand, a decent marketing plan and excellent customer service.

Whether you're selling a product or a service online, it's vital that you have a good customer service plan, which will give you the advantage over your competition. Excellent customer service does mean you go that little bit further for your customers, but it is definitely worth it. If a customer is happy with the service, they will mention it to others and pass it on the chain. It's a good marketing plan, word of mouth, as it costs nothing; all it takes is your effort and time with customers. These days, word of mouth is still just as powerful as the internet, and can make or dismantle your business. So always make sure what customer's say is positive about your business, rather than negative, by providing top standard customer services.

Providing a top quality service is not only about getting the goods posted or services booked as soon as possible, it's also about interaction. Interaction is key to providing a personal service, after all customers often don't like impersonal services, where they can't have their question answers. Because your business is based online, you may not be able to speak to them face-to-face; however, you still can offer a personal service by providing a contact area on your website, a direct point of contact such as 'live chat' and a blog where they can comment. Add to these social media sites and you have every point of contact possible, making you accessible, which is key to a personal service.

Build your website around your customer's wants and needs by providing product or service information, several points of contact, articles, reviews and newsletters to update them on services, offers, and other vital bits of information. Keep them interested with newsletters, however, keep it as an option rather than an imperative by asking them to sign up if they want to - not everyone likes to read newsletters after all! Allow the customer to have freedom and control, and they will come to you when they need you.

Building up a relationship with your customers is certainly not easy, but can be done through interaction and providing special services and discounts to the loyal customers. Discounts for you and one friend, also open up the opportunity to pass on how good your products or services are by word of mouth. Keeping customers, rather than just attracting new ones, is far more profitable and useful way of marketing in an economic downturn and upturn.

If you are interested in website design Birmingham, have a look at www.aimprouk.com

Article Source: http://EzineArticles.com/?expert=Marie_Coles

Tips on How to Make Your Website User Friendly


web designing packages hyderabad India

Usability is the key concept that will make your website an instant success with your customers - the theory is to attract and retain. Here, an effortless experience is the desired outcome that you want each customer to experience time and time again on your site.

Below are some core usability tips that have been put together with the help of Surrey web design:
1. Simple Navigation:
There is nothing more frustrating than arriving at a website that has no easy navigation, particularly when you are in a rush to find what you are looking for. Users are very impatient and if they cannot find what they are looking for they will leave your site. The simple solution to this is to have an accessible menu bar with appropriate tab headings e.g. Home, About Us, Products and Contact, that is consistent across each page. Keep these tab headings short and specific as this is all you need from your primary navigation. Note, if a user can not find what they want in 3 clicks they'll leave your site.

2. Homepage Link:
It is imperative to continually have a consistent link to your home page at the top of your site so that users can be directed back to the homepage at all times. Remember your homepage is like a hub of information - users will use this page the most as it shows a summary of everything on the site and how to get to it. Tip: remove the homepage link on the actual homepage so not to confuse users if they are actually on the home page.

3. Help Users Out
Offer your users helpful tabs such as 'FAQ' and 'Contact Us' so that they can get their queries answered efficiently. Also including a search tool within your site will benefit lazy or inexperienced users who will not click through to your secondary navigation. Here users can type in a search phrase such as 'website designer surrey' and after hitting enter they will be shown all pages within your site that relate to this.

4. Use Breadcrumb Trails
Breadcrumb trails or cookie crumbs enable users to visibly see what page or section they are on within your site. This helps them see how they got there and shows all the primary and secondary navigation to display how each section has related to one another.

E.g: Home > Our Services > Web design surrey

Adido have three offices across the South in Bournemouth, Guildford and Southampton. The company specialise in web design, web development and SEO. The agency are one of the leading website designer surrey.

Article Source: http://EzineArticles.com/?expert=Jo_Da_Silva

Monday, September 20, 2010

Meaningful Trans-Created Website Translations

Current business practices dictate that most companies will use websites or some kind of online presence to market their business. In most cases these sites are nothing more than online brochures. But websites are more than a place to share basic knowledge and services; they are marketing vehicles that should be driving business through your door and directly to your cash register.

Online analytics gives us the ability to track our website visitors and tweak the information we present in a way we never could before. Which leads to a very important question... should we offer translations of our website?

Content in your website is like location to a Realtor. We log onto the internet to find information, to research products and read reviews... among many other things. Providing the best, easily accessed information puts you at the top of the search engines and increases the likely hood you'll be found by your prospects.

According to an AOL study, most Hispanics consume online media in English. This makes a lot of sense because most of the internet's content is in English, 27.6%. Chinese websites come in second with 22.1% and Spanish ranks a distant third at 7.9%.

This study also tells us that almost 50% of new (over the last 7 years) Spanish speaking American's "prefer" to surf the net in Spanish. However, the general consensus in the Hispanic community is to mistrust translated websites.

Why?

Most sites are literally translated instead of meaningfully trans-created. Free services and instant online translations add to the general misgivings about the accuracy of the content provided and instead offer a feeling of being undeserved.

Knowing how easy it is to create a misunderstanding in the English language with simple punctuation - IE the famous "eats, shoots and leaves" vs. "eats shoots and leaves", thank you Lynne Truss, you can imagine the issues and confusion that may arise with a literal website translation.

The message your website conveys has meaning and so must the translation. Investing in a trans-created website will provide your visitors with information in a way it was meant to be received and will position you as an expert in your field to the audience you are trying to attract.

Article Source: http://EzineArticles.com/?expert=Tami_Ross

Thursday, September 9, 2010

Cross Browser Compatibility

There are literally hundreds of web browsers in use around the world. All of them implement the W3C document standards a little differently. Web designers must wrestle with these differences to make a web site work. This article discusses the effect those different implementations has on design.

What is Cross Browser Compatibility?

If a web page is completely cross-browser compatible, it will look more or less the same in all of the existing web browsers. The most commonly used browsers are Internet Explorer, Netscape Navigator, Firefox and Opera.

Each one of these browser implements HTML, JavaScript and Cascading Style Sheets (CSS) a little differently. Some difference only create cosmetic difference others can break the webpage. The situation gets worse because each browser is free to implement “enhancements” to the W3C standard version of each of these formats.

Then to compound matters even more the underlying operating systems also creates difference in how the computer displays graphical elements and text differently. When you add the fact that people are also using multiple versions of each of the browsers, no wonder web designers get headaches.

So what is a web designer to do?

Obviously, 100% compatibility with all potential browsers is impossible. But it is possible to design your web page so it will work in the most popularly used browsers.

To accomplish that, a web designer must write squeaky-clean code that conforms to the W3C standards to get consistent results across all browser platforms. The whole idea behind the standards is that if each browser adheres to the same set of rules, you will get more or less consistent results in all of the existing browsers.

Conforming can be a real challenge. It will limit some of the neater effects available in specific browsers. There are online code validators available. You can validate HTML code at http://validator.w3.org , the validator can also validate your CSS and links. The service is free.

The validator checks your code based on the DOCTYPE you specify on the webpage. The DOCTYPE tells the browser which version of HTML or CSS the web page is using.

HTML Editors

There are some compatibility issues associated with anything other than hand coding for HTML (and for that matter, even with hand coding.)

Best Choice - The best choice for compatibility is Dreamweaver but you cannot use layers. Layers must be converted to tables to be used.

Worst Choice - The worst choice is FrontPage. FrontPage is loaded with problems because it uses Microsoft and therefore internet explored specific code. Items that will not work in other browsers include:

Marquees – you can use a JavaScript scroller to create a similar effect that will work in the most common browsers.

bgsound tag – this is IE specific.

Page Transitions – this is IE specific.

Front Page generated Style sheets - this is IE specific and can have unexpected results or crash other browsers.

Front Page generated DHTML – it is better to use JavaScript to create the effects you want since it is more likely to be cross browser compatible.

Hover Buttons - this is IE specific and has been know to crash browsers including older versions of IE. You can use JavaScript, flash or CSS to get similar effects.
Other HTML Editors – the rest of the HTML editors will fall somewhere between Dreamweaver and FrontPage in cross browser compatibility. You just have to test the code your HTML editor generates.

CSS Style Sheets

Not all of your style sheets will work correctly in all of the browsers. However, style sheets rarely crash a web browser, but sometimes the pages will be downright ugly if not completely unreadable. One of the major CSS problems is absolute positioning since most browsers do not support it and it will cause different block to overlap others and create a jumbled mess.

Flash

Flash is great for adding style to a webpage and Macromedia provides flash plug-ins for all of the major web browsers. But don’t build the entire site with flash. Browser for the blind, most handheld devices do not support flash.

A small but significant number of users don’t like it and don’t install the plug-in so they won’t be able to access a flash site. Also, search engines spyders can’t follow the links on a flash site and won’t index it.

Graphic Links

While these are attractive, they have the same problems as flash with browsers for the blind and hand-held devices. Always use the alt tag with graphics.

Bottom Line – even code that is validated may not work correctly in all the major browsers. The best way a web designer can create cross browser compatibility is to test all of their web pages in the most popular browsers to see what happens. Personally, I find that a combination of style sheets and tables works best to ensure my pages look good in all of the browsers.

Source : http://articles.webdesigners123.com/cross_browser_compatibility.php

Using Colors On A Website

Choosing the right colors for your website is just as important as selecting graphics and content. This article discusses what factors to consider when selecting your website colors.

Colors have many effects on people. Certain colors can invoke specific emotions in people. Emotional reactions can affect the image of your company in the visitors mind and can have a major effect or your company’s “brand”.

If you doubt color evokes emotion, consider the phrases, “green eyed monster” “seeing red” or “in a black mood”. The green-eyed monster is a reference to jealousy, seeing red means a person is angry and a black mood refers to depression. People do associate colors with specific moods. Scientific texts have proven that different colors can make people happy, sad, relaxed, excited, angry or afraid.

Anything that can evoke those responses in people needs to be looked at carefully when designing your website. Colors tend to be classified as “neutral, “warm” or “cool”. So, let’s take a look at some of them.

Neutral Colors

Whites – Whites stand for purity and cleanliness. In eastern cultures white is the color of death while in western cultures in is the color of marriage and hope.

Grays – Grays exude reliability and conservatism. Shades of gray are one of the most popular colors for business attire.

Browns – Browns stand for the earth, home and family.

Blacks – Blacks tend to signify power, elegance and sophistication. In western cultures also stands for death.

Warm Colors

Reds – Reds are good for attracting attention. That is why they are frequently used in sales letters to emphasize specific points. Red symbolizes, anger, violence, lust, passion and can actually raise people’s blood pressure.

Yellows – Yellow can mean weakness or cowardice as well warmth and happiness.

Oranges – Orange is associated with fall harvesting and Halloween. It can also stimulate a person’s appetite.

Pinks – Pinks usually symbolize innocence, femininity and romance.

Cool Colors

Blue – Blue has a calming effect on people. It exudes intelligence and trust. It is a surprising that many financial and health care institutions use blue themes. Blue can also suppress appetite.

Green – While the green stands for jealousy, greed and inexperience, it also stands for money and wealth.

Purple – Purple tends to symbolize creativity. The darker shades were once reserved for royalty and the lighter shades are usually associated with romance.

Web Safe Colors

Vacuum tubes, LCD and Plasma screens all display colors differently. There are 216 colors that can be displayed on every type of monitor in every web browser and will look almost identical. These 216 are called web safe colors. If consistent color is important, you should only use web safe colors on your websites.

Color Schemes

Color schemes can be composed of a single color, complimentary colors or contrasting colors.

Single Color -- Single color schemes uses several different shades and intensities of a single color on a white background. For example, if you want to use a red color scheme, you can use everything from the lightest pink to a red so dark it is almost black.

Complementary Colors – Complementary color schemes use two or more colors that look good together and create a pleasant blend that is appealing to most people. One color may be dominant and the other used to compliment it.

Contrasting Colors – Contrasting color schemes use two or more dominant colors to create an “eye grabbing effect”. For example, using a dark blue page background, a deep red frame around a white background text area with black text is a typical contrasting color scheme.

Web designers need to be careful when using contrasting colors because some combinations tend to “vibrate” such as red text on a blue background and can hurt some people’s eyes, while other combinations are just had to focus on. Other combinations “clash” and are unpleasant to look at.

General Color Guidelines

The following guidelines are suggestions that should make your web pages readable for everyone.

Text should be readable. Obviously black on white is the default choice but others are also good. White or Yellow or other light colors work on black or any other dark color background. But, Yellow, Green or Gray on white does not.
Use colors that are attractive and pleasing to the eye.
Select the colors that portray the image you want to give your visitors.
For consistent colors across different browsers, use web safe colors.
Do not use a normal color intensity images as a background behind text. It makes it difficult to read. If you use an image, use it as a faded watermark.
Colors should be uniform on all your web pages to create a “brand” for your site and let your visitors know they are still on your website.
When you come to designing your website, choose you color scheme just as carefully as you choose your graphics and content. The overall appearance will determine the impression the visitor gets of your company and can mean the difference between success and failure.

Source : http://articles.webdesigners123.com/using_colors_on_website.php

Why Good Website Navigation Is Important ?

Web surfers are basically an impatient bunch and if a website is hard to figure out because the links are not obvious, they will click away never to return. Website navigation is one of the most crucial elements in determining the effectiveness of a website. This article discuses the basic principle of designing website navigation.

To be effective website navigation must first and foremost make sense to the average person. While there is always room for creativity, well-designed websites tend to have similar navigation layouts.

As a web designer you must always keep in mind the basic purpose of the website and the intended audience when designing navigational elements. Most websites exist to either inform the visitor about a product or service or to actually sell the product or service. Therefore there are some basic guidelines to follow:

Make sure all navigational elements are clearly links by using standard conventions for links such as buttons, menus, underlining the text or changing color on mouse. Resist the temptation to use clever or ambiguous names for links.

When using non-conventional links, explicitly tell the visitor that this is a link. For example, suppose you design a web page where you want to use a map showing several different cities and want to let the user click on the city name to pull up information about that city. Just make sure you tell the user to click on the city name to get more information about that city.

Remember the “Three Click Rule” that most professional web designers use. Studies have shown that most users will not click more than three links to get to the information they want. So every page on your website should be reachable within three clicks.

I do not recommend using a flash movie or other type of splash page on your website. Keep the web page design simple yet attractive. But if you do decide to use one, make certain you use the META REFRESH tag to take the visitor automatically to your home page after a few seconds and provide a clickable, clearly marked button or link so the visitor can skip the entry page and go directly to your home page otherwise a large percentage of visitors will just click away never to return. Remember most visitors are looking for information not entertainment.

Navigation Element Locations

Top Menus – a top of the page menu bar is usually located directly below the page header graphic that contains the site logo. These menu items may be single links, drop down menus, or expanding menus. Each menu item can be represented by a graphic or just text. In ether case a hyperlink is associated with each item that the visitor can click on to get to the information described.

Left Side Navigation – left side navigation is typically implemented as either a column or text area on the left top portion of the webpage. Like the top menu, each item can be a single link or an expanding menu.

Right Side Navigation – right side navigation is not used that often, but when used, it is implemented as a column or text area on the top right side of the webpage. Most designers use this area for advertisements rather than site navigation.

Bottom Menus – bottom menus can be either a menu bar or footer. Menu bars use either graphics or text links while footers almost exclusively use text links.

Important Navigation Elements

Internal Page Links – Every page on the website should be within two or three clicks from the home page. Important pages should be ONE click away. The type of website will determine which links are more prominently displayed.

Login Boxes – login boxes should be prominently displayed. Common locations are top left, top right or inside the page header.

Shopping Carts – if you use a shopping cart to sell your products, you should prominently display a view cart button on each page. The most commonly used location is the top right side just below or as part of the header.

Order Buttons – if you use individual order buttons they should be large and visible. The fewer clicks it takes to get to your order page, the more orders you will get.

Breadcrumbs – breadcrumbs are both links and a graphical representation of where you are in the site. Breadcrumbs are usually located at the top left of the page just under the header. Each word is a link back to the previous page. They are in the form

Home-> Articles-> Marketing

External Links – external links can be used anywhere but are most frequently used inside the text areas on a website. They may be references to more information located on another site, to recommended products, or to almost anything else.

Advertisements – advertisements are usually either a graphic or text with an associated hyperlink. Ads can be placed anywhere on a webpage but are usually used just under the header banner, down the right hand side of the page, under navigation elements on the left margin, across the bottom of the page or even interspersed within the test areas of the page. Studies show that ads “above the fold” are more effective.
(“Above the fold” refers to the area of a webpage that is visible without having to scroll.)

Downloadable Items – if you offer downloadable items such as audio, video or pdf files, make sure that you tell the user haw big the file is and whether they need an application to use the file. If they do an application, provide a link to the application. For example, provide a link to the free Acrobat reader if you offer pdf files.

Site Map – A site map is a good way to layout your entire site for your visitor. (Search engine spyders like them too.) It is just a hierarchical listing of every page on your site with a clickable hyperlink to that page.

Summary

A good navigation system can increase the numbers of pages viewed by each visitor. This in turn can increase signups, customers, sales, members or whatever it is your site is designed to do and make your website more successful.

Graphic Formats

Although hundreds of graphic file formats exist web browsers only support a few of them. This article describes the different graphic file formats that are available to web designers and when they should be used.

The graphic file formats supported by most popular web browsers are Graphic Interchange Format (GIF), Joint Photographic Experts Group (JPEG), Portable Network Graphics (PNG) and vector graphics. Some of the properties of graphic files are:

Transparency – this property allows the image to be varying degrees of opaqueness from solid to completely transparent (see-through).

Compression – this property allows the image to be stored in a much smaller file by using a mathematical algorithm to handle groups of pixels as a single item.

Interlacing – Interlacing allows the image to be loaded by first drawing the odd rows and then going back and drawing the even rows. It allows the visitor to see the picture sooner.

Animation – Animation gives the appearance of movement by using a series of successive still pictures. Animated gifs do not require a browser plug-in and can work on almost all devices.

Progressive loading – Progressive loading is similar to interlacing in that it only loads a portion of the picture initially but is not based on alternating rows and allows the user to see the picture quicker.

GIF

GIF was originated in the 1980 and was adopted by web designers in the early 1990s as the preferred graphic format for web pages. GIF files use a compression algorithm that keeps file sizes small for fast loading.

They are limited to 256 colors (8 bits) and support transparency and interlaced graphics. It is also possible to create animated graphics using the GIF format. All browsers can display GIF files.

GIF Advantages:

Most widely supported graphic format.
Diagrams look better in this format.
Supports transparency.

JPEG

JPEG files are compressed but support “true color” (24 bit) and are the preferred format for photographs where image quality matters. JPEG supports a progressive format that allows for an almost immediate image that will improve in quality as the rest of it loads.

Unlike a GIF file, the compression for JPEG files can be controlled by the web designer, which allows for different levels of picture quality and file size. All browsers can display GIF files.

JPEG Advantages:

Large compression ration mean faster download speeds.
Produces excellent quality for photographs and complex drawings.
Supports 24-bit color.

PNG

PNG is a fairly recent format that was introduced as an alternative to GIF files. PNG supports up to 24 bit color, transparency, interlacing and can hold a short text description of the image’s content for use by search engines.

Unfortunately, most browsers do not support PNG and the ones that do support it, don’t support all of its features yet. But that will change in the future.

PNG Advantages:

Overcomes the 8-bit color limitation of GIF.
Allows text description of the image for search engine use.
Supports transparency.
Diagrams look better than they do in JPEG.

Vector Graphics

Most web graphics are raster images or bitmaps, which consist of a grid of colored pixels. Drawing and illustrations should be created as vector graphics which consist of mathematical descriptions of each element that makes up the lines shapes and color of the image. Vector graphics are created by drawing programs such as Adobe Illustrator and Macromedia Freehand and are the graphic artists choice for creating drawings. Vector graphics must be converted to either GIF, JPEG OR PNG format to be used on a web page.

Which Format Should You Use?

A web designer could choose either the GIF or JPEG format for most uses. But, since the file size of a GIF is usually small than the file size of a JPEG, most web designers will use the GIF format for backgrounds, boxed, frames and any other graphical element that look fine using 8-bit color.

Most designers will select the JPEG format for photographs and illustrations where the compression doesn’t compromise the visual quality of the image.

As PNG becomes fully supported by most web browsers, it will probably replace GIF as the web designer’s choice for non-photographic page elements. However, GIF will still be used for animation.

Bottom Line – GIF and JPEG are universally supported and the web designer’s choice is determined by the graphic element being used.

Source : http://articles.webdesigners123.com/graphic_formats.php

Website Templates

Website templates are web page designs created by professional web designers that are sold to others for their use. Templates normally have dummy content used as a placeholder so you can see what a finished page will look like. A template is an easy way for a novice to create a good-looking professional quality websites quickly and easily.

Most of the commercially available templates can be found in a variety of themes and color schemes. Theme templates come complete with appropriate graphic for each theme. If you have some graphic or web design skills and a knowledge of HTML, you can create a customized professional looking website at a fraction of the time it takes to create everything yourself. Just remember you don’t own the copyright to the design.

Before selecting a template, you will need to identify the goals you have in mind for your website so you can select the most appropriate template.

Advantages of Using Website Templates

There are several advantages to using templates such as:

Templates provide the basic webpage layout.
Templates can provide a consistent look and feel for the site.
Most come with professional quality graphics.
Most allow you to customize the graphics if desired.
It is usually easy to add your content using almost any HTML editor.

Disadvantages of Using Website Templates

It can be difficult to make any web design changes unless you are skilled in both HTML and can use a graphics program like Photoshop.
Although features like a login box may be part of the template design, the programs needed to make them work are not included.
Any interactive features have to be integrated into the template.
You do not own the copyright to the design unless you actually purchase it from the designer.

Features of a Quality Website Template

The following items are things to look for in a well-designed web template. A template should:

Be easily editable.
Be compatible with most HTML editors.
Upload easily.
Come with complete html files.
Have header graphics provided in psd format for easy editing.
Have their both the fla and swf files if the template uses flash.
Download quickly after the content is added.
Retain the original design no matter how much content is added.

Customizing an HTML Web Template

If you want to customize a web template but don’t have the necessary skills to do it, most template designers and other web designers offer template customization services as reasonable prices. These services usually involve minor design changes, customizing header graphics, adding logos, removing unneeded unattractive elements, etc.

Many web developers will be happy to integrate any interactive features into your template. Please keep in mind that the developer will either need to write the necessary scripts or modify existing scripts to make the interactive features work. If an existing script is not freeware, the web developer will have to add the cost of purchasing a license for the script to his labor charges.

Customizing a Flash Web Template

If you want to do anything more than just add text or substitute a graphic file in a flash template, you will either need have expertise in creating flash programs or hire a flash programmer to modify the template.

If the fla files came with the template, you can modify it using a flash editing program such as Macromedia Flash or Swish. If the fla files are not available the first thing that needs to be done is to decompile the movie since the swf files are movies. Once the movie is decompiled, the necessary changes can be made and the flash movie recompiled in any flash editor.

Summary

A quality web template can allow a novice webmaster create a professional looking website quickly and easily at a reasonable cost. Since the templates came in a variety of industry specific themes and color schemes, you should be able to find one that is right for your website.

Web template can offer the professional designer a lost cost alternative to creating the web design, header graphic, logo and all of the other graphical elements, which will allow them to charge less for their work. In either case, it is important to purchase a quality template.

Source : http://articles.webdesigners123.com/website_templates.php

Photo Optimization

Photo Optimization is necessary to allow a web page to load in the shortest amount of time possible. Fast loading time require small files. This article discusses the methods used for photo optimization.

In an ideal world, a web designer could use the highest quality photos and have the webpage download lightening fast. Fast loading requires small file sizes for pictures. Unfortunately, there is a trade off between picture quality and file size.

Web surfers are a notoriously impatient bunch. If a website takes too long to load, they will just click away and never come back.

Computer monitors can only display images at 72dpi (dots per inch). So the first step in photo optimization is to reduce the resolution to 72 dpi. Large picture can be sliced up into smaller ones and the put back together on the web page. Each piece will be a very small file and together will load in a fraction of the time a single image file would load.

Most graphic files contain information about the color palette of the image. This information is usually unnecessary for displaying on the web. Many graphic programs included the ability to “Save for the web”. This option discards all of the unnecessary information in the file without any loss of picture quality.

Another method that appears to speed up load time is to use either the GIF or PNG interlaced or the JPEG progressive property. Both of these properties allow the picture to load gradually as first a blurry image that becomes sharper and clearer. In reality the picture actually loads a fraction of a second slower than the regular formats do but it appears to load faster the site visitor.

Width and Height IMG Attributes

The HTML tag tells the web browser to create a specific sized box to hold the graphic. That way the browser can continue loading the rest of the web page while the graphic file is downloading. If you don’t put the width and height attributes, the web browser must pause until the images is downloaded before it can load the rest of the page.

How Many Images should you use?

Some web designers use images for everything. While it may look good, it will definitely slow down the speed of the page loading. Page loading speed in the sum of the HTML file plus the size of all of the embedded files. Images constitute more than 50% of the download time.

Using fewer images will speed download time and just may keep a visitor from bailing through impatience.

Photo Quality

Photo quality is determined by the clarity, color purity and detail of a photo. Use a graphic editor to remove noise and other unwanted features. Most editors allow you to correct red-eye and sharpen edges to improve clarity.

Professional editors like Fireworks or Photoshop will let you change the background, adjust the color levels and do almost anything else you want to do to the photo.

You can also use a thumbnail on the webpage that links to a larger and higher resolution version of the image so that people who want to can view it.

Photo Optimization Guidelines

The following suggestions will allow you to optimize your photos for fast download times without sacrificing picture quality:

Change the resolution of all images to 72dpi.
Convert graphic text into stylized text.
Crop the images to the actual size needed.
Minimize color depth when it’s not necessary for quality.
Specify the actual width and height of all images.
Use thumbnails where appropriate.


Bottom Line – Graphics should enhance the content of a web page except in that rare occurrence where the images are the content. In either case, you need to optimize photos and other graphic files to allow for the fastest downloading time possible for the web page otherwise you risk losing the visitor forever.

Source : http://articles.webdesigners123.com/photo_optimization.php

Web Design Guidelines

The goal of most web designers is to create an attractive, easily accessible and functional website that will convince the visitor to do something. Creating such a website requires good graphic design, easy and intuitive site navigation, logical site layout and good web copy. The following suggestions are general web design guidelines.

Web Content

You want the visitor to see you as a knowledgeable information source and/or a reputable business. Poor grammar and spelling will immediately reduce your credibility. Remember that people use the internet to find information. Whether you are selling your own product or recommending someone else’s products, you must first provide valuable information to the visitor or they will click away and find a website that gives them what they what they want.

Cross Browser Compatibility

There are at least a hundred different browsers in use. You must design your website to work properly in the most widely used browsers. To do that you may not be able to use all of the really great special effects that are available because they may not be supported in most browsers.

Even though most web browsers are free, people do not necessary bother to upgrade to the latest versions. The average surfer may not know how to upgrade their browser or have the attitude, “If it works, don’t fix it.” Remember your visitor may have a PC, a MAC, a Linux box, a PDA or a cell phone and they all use different browsers.

Good web design requires your web pages to work in Microsoft Internet Explorer, Netscape, Firefox, Opera and Safari at a minimum. Validating your HTML code will help but the final test is to view your website in different browsers running on different platforms.

Graphics and Photos

Web surfers are impatient and studies show that most people will click away if a webpage takes longer than 10 seconds to load. Always optimize your photos and other graphic files to have as small a size as possible without sacrificing picture quality.

Always use the height and width attributes on the picture so the rest of the page can load while the graphic files is downloading. Use the ALT HTML tag so people with graphics turned off and those using hand held devices know what the picture is supposed to be.

Background Colors

If you use anything other than white behind text, be sure to specify link colors otherwise the user’s browser defaults will determine what color the links are which can make them unreadable.

Multimedia

Multimedia is composed of flash movies, video clips, audio clips and background music. Always use streaming media because it reduces download time. Make sure the visitor can stop and start multimedia files or in the case of flash introductions, skip them if they want. That way people with slow connections or devices that don’t support multimedia can ignore them.

Also, put any important information presented in multimedia in text as well so the visitor has access to that information without using multimedia. If a plug-in is needed to use the multimedia, always provide a link to it so the user can install it. Finally, always remember the 10-second rule for site loading when deciding to use multimedia.

Site Navigation

Site navigation should be simple and intuitive. Studies have shown if a visitor cannot access the information they want within three clicks, they will leave the site. This is called the 3-click rule. Every area of your website should be reachable within three clicks from anywhere else on the site. If you use anything other than simple text links, make sure to test your navigation in all the major browsers.

Links

Periodically test all site links to be certain that they are valid. Nothing chases a visitor off faster than broken links. There are several free online services that will periodically check your links.

Frames

Avoid using frames, since they make it difficult to bookmark individual pages on your web site and you want people to bookmark pages so they can come back.

Summary

Good Web design is a combination of common sense and good planning. Your site should be attractive and easy to use and most importantly provide the user with the information or services they want.

Source : http://articles.webdesigners123.com/web_design_guidelines.php

W3C and Validation

Who is W3C? W3C stands for the World Wide Web Consortium. The goal of W3C is to provide a set of web standard and guidelines that will help alleviate the problem of code incompatibility in the hundreds of different web browsers in use throughout the world today.

The standards are only a guideline, but smart web designers and web developers pay heed to what the organization has to say. In fact many of the web programming jobs found on web design freelancer job boards, specifically requests that the code used to build a website is W3C validated. Although fairly common for XHTML and HTML it is becoming increasingly important especially if the web site is a total CSS web site.

Tim Berners-Lee who pretty much invented the World Wide Web when he developed the first web browser back in 1989 and other industry pioneers created the consortium to promote the standardization of the technologies used on the World Wide Web. Without some level of standardization, the internet would not be a global medium it is today. Interoperability between different machines requires a standard interface and standardized data communication protocols to carry the information back and forth.

That is the W3C’s mission. To publish the standards necessary so that all computers can speak the same language and communicate and all web browsers render web pages so that look and act the same way. The consortium also engage in efforts to educate web designers and developers so they will work together to build their websites on the W3C standards.

Because of the work of the consortium, someone using a Macintosh in China or a windows XP machine in Canada can access a web page hosted on a Linux server in South America. If that web page was created using validated HTML and CSS code, the webpage should appear very similar and have the same basic functionality on all of the different operating systems and web browsers available.

Why is Using Standardized and Validated Code Important?

Although all web browsers understand and render HTML, they don’t all do it the same way. Each browser has proprietary extensions to HTML and CSS that it uses to create special effects because none of the standardized code can do what they web designers wants to do. The result is that code that looks and works great in Internet Explore may crash Firefox, Opera or Safari and vice versa. Unfortunately, many web designers choose to code for internet explore and ignore the other 35% of web surfers. There are hundreds of different browsers and more appearing as PDAs, cell phones and practically every other imaginable electronic device is being built to be “internet compatible”.

It is impossible to test your web pages on every browser. While testing on the major browsers will probably be sufficient for most people, web designers who want their websites to work on as many different platforms as possible can check the code they write to see if it meets the standards.

Why don’t all the web designers and web developers use W3C validated code?

They don’t use it because none of the most popular HTML editors generate 100% compatible code. The newer the standards, the less likely the code generated meet them. Of all the HTML editors available, Dreamweaver does the best job and Front Page the worst job. It’s not surprising that FrontPage, which is a Microsoft product, writes code almost exclusively for internet explorer. The rest of the popular HTML editors rank somewhere between FrontPage and Dreamweaver.

Hand coding is no guarantee that the code will meet the standards either unless the person writing the code is well versed in the latest standards. Another problem is that a lot of the fancier and nicer features available are not universally supported by web browsers. Many web designers and web developers choose to ignore the 35% of web surfers so they can use the effects they want to use. In some cases, the site looks ok but doesn’t have all the functionality. Drop down menus are a common element commonly used that don’t work in some popular browsers. A good web designer will add a text link somewhere on the page for the parts of the menu that don’t work in all browsers. That way, the majority of visitors get the cool features while the others can still get where they want to go.

Summary

As the number of web browsers continues to increase, standardized code becomes absolutely essential. If you use non-standard, non-validated code that doesn't work in a particular browser, it is your fault. If you use standard, validated code and it doesn't work, it is a bug in the web browser. The W3C organization offers an official public validator service at http://validator.w3.org.

source : http://articles.webdesigners123.com/w3c_validation.php

Communicating Your Needs to Your Web Designer

Communicating with a web designer can be the most difficult part of the hiring process because you and the web designer don’t speak the same language when talking about the details of a website. This article explains how to get your ideas across to the web designer you want to hire.

Ok, so you’ve decided to hire a professional web designer to build your website. You spent some time looking for the right person. Eventually you found the right web designer that you believe will design the most “remarkable”, “extraordinary” website the internet community has yet seen.

So now what? Explaining to the web designer the layout design you have in your mind can be a very frustrating process. You will find that putting the “picture” in your mind into words can be a difficult task. Actually in most cases this is the biggest hurdle between you and the final outcome. No matter how talented the web designer is, if you can not communicate with him properly, in his own professional language, he will not be able to use his talent to achieve your design.

There are two possible situations you may face:

You know what content you want on the website but have no clue how to present it to the user.
You know what content you want on the website, and you have the layout in your mind, but you don’t know how to implement it.
In both cases you will need to explain your thoughts to the web designer. Although most people who read those lines are probably thinking that being in the second situation is better then being in the first situation. However, real life experience shows the opposite to be true. Giving a web designer the complete freedom of action regarding the web design based solely on the website content is usually a smart thing to do. You will find that explaining to the web designer what the nature of your website is, whether it’s a product that you want to sell or a hobby item, is much easier then trying to explain to him the temperate of the color schema or an undefined shape that you would like to have in the website header.

Actually for both of the situations, I would suggest you use the same approach, but with a minor modification to each situation. If you know of a website that has all the features you want or need and/or a site that looks the way you want your site to look, be sure to give the site’s url to the web designer. Doing so will give him some idea of want you want. You will both be looking at the same thing but will actually look at it from a different angle. Therefore, it may be better to give him more than one website as an example. The more websites you find that can express your feelings and/or needs, the easier it will be for web designers to understand your intention without you having to use a single “technical” term. Chances are that you won’t find a single website that has all of the feature you want. After all, if such a website already exists there would be no place for your new web site to be born. Use several websites to express the different features you want. Spend as much time as necessary until you find just the right websites to provide examples of your needs. Doing research at this stage will definitely save you a lot of time later trying to point the web designer in the right direction.

Although you are the one who needs to express your self to the web designer, you must learn to listen to him as well. When he uses technical terms, ask for their meaning. Do not finish any part of the conversation unless you are absolutely sure that both sides are on the same page. Remember that when a web designer speaks about the temperature of a color, he is not talking about the next day’s forecast.

Remember, you hired a professional web designer because you want a professional looking website and you couldn’t do it yourself. So, trust the web designer’s judgment when they tell you something you want won’t work or isn’t the best way to accomplish your goals. After all, you are paying them for their expertise. Don’t try to tell them how to do their job.

It is OK to require that a web designer gets your approval each step of the way so you can tell them if one of your goals isn’t being met. Also, if you really don’t like how something looks and want it changed, tell them immediately. Don’t wait until everything is done and then decide you don’t like it.

A final word about cost

You have agreed on what needs to be done and the web designer has given you a price quote. Simple modifications and bug fixes are usually included in the price. However, other major changes or outright revisions may or may not be included. Make sure the agreement states what is included, what constitutes a revision rather than a fix, and how many changes you can make after delivery without incurring additional costs.

Source : http://articles.webdesigners123.com/communicating_needs_web_designer.php

Banner Design Success Techniques

Banners have been a major part of the World Wide Web world since its early days. Copywriters burn the midnight oil looking for new designs that will grab the visitor’s attention and compel him to click on their banner. This article discusses some of the most successful banner designs.

Teasing your curiosity

“Do Not Click Here”. How many of you have seen this slogan in a banner? What did you do when you first saw it? If you are like most people, when you first saw it, you clicked on it. What makes this simple sentence so powerful that it compels the visitor to click on it? The answer is curiosity !!!

Copywriters and web designers are always looking for ways to arouse the website visitor’s curiosity. As banner designers their goal is to attract the visitor to the banner, usually completely ignoring the other elements on the web page that are more important to the website owner. However, because the “Do Not Click Here” slogan tells us nothing about what is on the next page, it arouses the visitor’s curiosity and makes it almost impossible not to click on this banner to see what’s behind it.

Simple integrated design

When Larry Page and Sergey Brin first introduced their product, “Google”, to potential investors, they mentioned Adwords as a backup option in case they didn’t make any money. We all know how lucky they were that they eventually needed to use that backup plan. What made these “boring” ads such a great success?

Unlike other ads, Adwords neither arouse the visitor’s curiosity nor disturb the main flow of the web page. In fact, the opposite is true. Adwords are meant to look like part of the search results giving the user the feeling that those ads are there because he asked for them. No one has any doubt that this simple design helps Google to promote both their search engine and the Adwords advertising program.

Take part in the action

Banner designers wisely used interactive technologies like Flash to develop type of banners that invite the user to take part in the action. Drawing the user into the action can be accomplished in many creative ways. Some web designers use popular old games elements as part of the scene. You all know the famous game pacman. One of the banners that I like the most is the one where the user is allowed to let pacman “eat” few dollar signs. At the successful completion of this mission, a nice slogan is revealed asking him to open a saving account that will earn money with a fixed interest rate. The idea behind those interactive banners is simple: Let the user take part in the action and then at the right moment when his mind is less resistant, show him the sales message. Those interactive banners proved to be very efficient. Their biggest disadvantage is that most webmasters will not allow that kind of banner because it distracts too much from the web page content.

Back to Black and White

Website designers are always seeking to be different with their design ideas. One banner fashion trend that can be found lately is Black and White banners. Although research shows that blue and yellow are the most efficient color to use in a banner, Black and White banners have been seen a lot lately. It’s probably something that will eventually vanish, but the idea behind it is to be different and to make the user wonder what’s up and hopefully click on the banner to find out.

Get Out of the box

Have you heard about the milliondollarhomepage.com? If not, check out this website before continuing to read this article. This website has proven that creative thinking not only can bring you money but also create a whole new trend. Right after the milliondollarhomepage.com got the internet community’s attention, many designers used this idea to deign a banner on which they sell a 10x10 pixel area. Like the original concept, this banner design had its impact. Advertisers are investing money on these ad spaces while at the same time visitors are curious enough time after time looking at those unorganized pixel banners to click on them.

What about the next trends

What the next trends of banner design will be is something that probably no one can accurately predict. It’s up to some web designer to come up with a new concept that proves to be efficient. There is no doubt that in the future we will see new ways of designing banners, especially when more and more advertising budgets are being spent on the internet instead of commercial TV and other types of advertising media. I guess we will just need to be patient.

Source : http://articles.webdesigners123.com/banner-design-success-techniques.php

Annoying Website Design

Have you ever considered that your website may be annoying? When it’s comes to website design, knowing what visitors hate most is a must, unless you don’t want them to visit you again. This article describes what you should exclude from your website. If you know about an annoying website, feel free to send this article to its webmaster.

A few weeks ago I received an email from a colleague asking me to check one of the website he had developed. He is a web designer and his client wanted a nice attractive flash header. The flash header was great. You can’t miss it at all. Some nice graphics elements were flying in while sound effects created just the right atmosphere. However, after starting to explore the website, the header became very annoying because every time you clicked on the website the header restarted. What was pleasant initially became very annoying very quickly, disturbing your concentration and making it difficult to read what was on the page.

He is not the first to create what I like to call – "annoying website design". Many webmasters, especially new webmasters are totally “in love” with their ideas and tend to go overboard with their design in one way or another. It’s nice to have an attractive header, but is it really necessary to assault the visitor’s mind with it? In my opinion, absolutely not!

Webmasters sometimes forget that their website design should send a message to the visitor that should reflect the website topic and not the programmer’s skill level.

Is Your Website Design Annoying?

Well…. It’s not that hard to be annoying. However, some webmasters are much better than others at annoying their visitors. Check my top 5 list and decide for yourself whether you have been annoying your visitors.

Background music – Unless you are operating an online internet radio station or sell music CDs, why play a midi/wav file in the background continuously on every page?

Huge font size – If you are designing a website for people with a disability then you are doing the right thing, but if not then you are shouting. People don’t like it when someone shouts at them.

Small font size – Do you want to be heard? Keep a normal tone, don’t shout but "speak" in a reasonable volume.

Overlapping layers – Layers can be very useful up to the point. But not when they are being used to put an annoying message in the visitor’s face. Don’t try to force your visitor to read your messages. Try persuasion instead of brute force.

Popup windows – Even though popup windows are now blocked by many add on tools, webmasters keep using them. The annoying part of popups is sometimes we actually miss important information because of those anti popup tools. Haven't you heard the old phrase "if you can’t beat him, join him”? Don’t use pop up windows. Put your important messages in a central place on your website.

Most likely each one of us has our own private top five lists. You probably have many more annoying design cases in mind. Well, you’re right, the list is much longer then that. I just wanted to describe some of the highlights in order to bring this important subject your attention.

Some of you are probably reading those lines and smiling while some others have a feeling a deja-vu. Keep in your mind that as a webmaster the last thing you want to do is put lots of effort into your website and then find out that your visitors hate it. It's not a matter of taste, it's more about being the same polite person we all try to be when we go to a party.

I tried to point out a few things that might be useful to some web designers and webmasters. I don’t know about you, but I’m going to send this article to my friend, hopefully he’ll send it to his client :)

Source : http://articles.webdesigners123.com/annoying-website-design.php

How to find a good freelancer ?

Whether you currently deal with a freelancer website, or are just looking for the best place to find a freelancer, the biggest problem you face is how to find a good reliable freelance, one that will do the job properly with good quality work and finish it on time.

Many sites offer you, the webmaster, a place to post your projects to be bid on by freelancers. All of these sites let you contact offshore workers that live in countries where wages are only a fraction of what they are in the more industrialized nations. This allows you to keep your project budget low and save money by keeping your full-time staff small.

So, how can you find this “diamond in the rough”? You know, that reliable individual who delivers quality work on time and within agreed upon budget? There is no simple answer. The best you can do is using the tools provided by the freelance website to try and minimize your risk.

Unfortunately, most of the existing freelance websites use a very poor rating system that only allows a webmaster to rate a freelancer on a scale from 1-10. This system doesn’t take any of the more important variables into account, such as the complexity of the project.

The complexity of a project is important. A freelancer doing many simple and inexpensive jobs may have an excellent rating and do very good work for that kind of project. But, there is no guarantee they can handle a more complex project. Since the more complex projects cost more to get done, at least one freelance website has developed a rating system that takes complexity into consideration by using the dollar amount of the project as part of the rating formula to provide the webmaster with additional information. Thereby, hoping to make the webmaster’s decision a little easier.

Here are a couple of additional suggestions for hiring a freelancer:

Do Not Post a Budget !!!

“Why not?” you ask. If you post a budget, most freelancers will bid based on the budget amount. Unfortunately, a reasonable cost in one part of the world is insanely high or ridiculously low in another part of the world.

For example, you want someone to create a logo for you. Any decent graphic artist should be able to do that. So, it probably is safe to go with the lowest bidder. But, suppose you need a sales letter written for an Australian audience, do you really think someone is Eastern Europe or China will be able to do as good a job as a native Australian? Probably not, but, the cost of living is a lot higher in Australia and that individual would need to charge more for the same amount of work.

Do Not Hire Outside of Your Expertise.

But, you say, “If I was an expert, I wouldn’t need to hire someone else!” While that may be true, you do need to be sufficiently familiar with the area of work to be able to accurately describe the project, to know what and isn’t technically possible and know whether the bids you receive are reasonable for the amount of work involved.

If Necessary, get advice from someone who does know the area of work. Most sites provide a message board for you to negotiate with the bidders anonymously before you select one of them for the project. Pay careful attention the freelancer’s reaction to the project. The ideal candidate is one who loves his work. Ask them to describe similar projects they have done in the past or to provide samples of their work if feasible. Graphic artists, web designers and writers will be able to provide samples. Programmers and some others may not be able to provide samples but they may be able to provide references if they haven’t already been rated by other webmasters.

Following the steps above and keeping the lines of communication open will dramatically increase your chances of having a successful experience with your chosen freelancer. It can save you both time and money as well as help you manage your business in the most effective manner. After all, you face all of the same challenges in dealing with freelancers as you face in dealing with any employee, plus the additional challenges created by being in different geographic locations.

Good luck.

source : http://articles.webdesigners123.com/how_to_find_good_freelancer.php

Wednesday, September 8, 2010

Embed Audio and Video in HTML 5 Pages

In Lesson 1 and Lesson 2 of our HTML 5 tutorial, we looked at some new structural tags you can use to help eliminate the “div-soup” of HTML 4.x layouts, as well as some other semantic tags to help give your pages easy-to-parse dates, metadata and captioned images.

Now it’s time to take a look at what might be the most-hyped part of the HTML 5 specification — the audio and video tags.

Contents
Video’s a tough nut to crack
Using the <video> tag
Using the <audio> tag
Conclusion

Video’s a tough nut to crack
Currently, the only way to reliably embed video on a web page so that all users can see it regardless of browser or operating system, is with Flash. This requires the Adobe Flash plugin and a combination of the <object>and <embed> tags.

Most users have the Flash plugin installed already (actually, something like 95% of web-connected users have some version of it), but proponents of HTML 5 are pushing for an open video standard that doesn’t require any plugins. That’s the idea behind the new <video> tag in HTML 5 — it provides a way to embed (and interact with) video without the need for a proprietary plugin like Flash.

Unfortunately, video isn’t that simple. Not only does the browser need to understand the <video> tag, it also needs to have the necessary codec to play the video. The obvious solution would be for the authors of the HTML 5 specification to pick a video codec and mandate that every browser maker implements it.

That was the idea that was proposed, anyway. It’s also the point when the fur started flying. The debate over various codecs is rather complex (we covered it on the Webmonkey blog, and our sister site Ars Technica has a nice in-depth look at the debate), but the short story is that browser makers couldn’t agree on a video codec. Apple doesn’t like the proposed Ogg Theora codec and Opera and Mozilla don’t want to pay the license fees necessary to ship their browser with the H.264 codec. Google is implementing both, and Microsoft stayed largely out of the fray since it currently has no plans to implement the HTML 5 video element at all.

Faced with a standoff among the browser makers, HTML 5’s benevolent dictator, Ian Hickson, effectively threw up his hands and said “screw it” — so now there’s no specific video codec named or mandated in the HTML 5 spec.

Does that mean the video tag is useless? No, it just means that widespread adoption of a video codec is still a ways off.

In the meantime, let’s take a look at how you would use the video tag, and how you can use it today with some fallback code for the browsers that can’t handle it.

Using the <video> tag
Lest you think what we’re about to wade through is ultimately an exercise in futility, if there is no agreed upon standard, consider this: Google is chomping at the bit to use the video tag for YouTube.

In fact, there’s already a mockup of what YouTube would look like using only HTML 5. While the company hasn’t announced a timeline to convert YouTube to use the HTML 5 <video> tag, you can bet that when they do, a sizable chunk of the web will follow suit.

So how does video work? Well, are you ready? Here’s the code to embed a video in HTML

5:<video src="/myvideo.mp4"></video>


Pretty simple right?


Well, ideally you would do something more like this (which is what the aforementioned YouTube demo does):

view sourceprint?
1 <video width="640" height="360" src="/demo/google_main.mp4?2" autobuffer>
2
3 <div class="fallback">
4
5 <p>You must have an HTML5 capable browser.</p>
6
7 </div>
8
9</video>

There are also a number of useful attributes for the <video> tag, including auto-play controls, a “poster” attribute that points to an image file to display before the video is loaded and a boolean attribute for play/pause controls. The full list of video tag attributes can be found on the W3C schools site.

The <video> tag also has a whole host of events you can hook into with JavaScript, allowing you to play movies inside movies and set up complex user interactions via mouse and keyboard events. Here’s an example that uses the video tag in conjunction with the Canvas tag and Web Workers (we’ll cover those in the future) to create a motion tracking system for web video.

Since not every browser can play MP4 videos, and since very few of them understand the video tag, what should you do today?

The unfortunate answer is that you’ll need to point to multiple videos. Hardly ideal, but if you want to push the HTML boundaries, you can embed your video using the <video> tag for browsers that support HTML 5 and fallback on Flash for those that don’t.

Something like this would do the trick:

01 <video src="video.mp4" controls>
02
03 <object data="player.swf" type="application/x-shockwave-flash">
04
05 <param value="player.swf" name="movie"/>
06
07 ...etc...
08
09 </object>
10
11 </video>

Obviously, all we’ve really done is wrap the same old <object> and <embed> tags with the new <video> tag — hardly a great leap for the web.

How about we get rid of the fallback code, keep our HTML limited to the video tag and use a little JavaScript to handle the Flash embedding behind the scenes?

Drupal developer Henrik Sjokvist has an example of how to do just that using the following HTML 5 code:

1 <video controls>
2
3 <source src="video.m4v" type="video/mp4" /> <!-- MPEG4 for Safari -->
4
5 <source src="video.ogg" type="video/ogg" /> <!-- Ogg Theora for Firefox 3.1b2 -->
6
7
8
9 </video>

Sjokvist’s Flash solution requires a little JavaScript to sniff out the browsers capabilities and then offer Flash if the browser can’t understand HTML5 (note that the code uses the swfobject library to handle the actual embed). We prefer this method since it keeps the actual HTML code cleaner and when video tag support is ubiquitous, all you need to do is drop the JavaScript. There’s no requirement to rewrite your actual pages.

Another possible solution would be to simply load the MP4 movie into a Flash container file. As of Flash Player 10, Flash supports dynamically loaded MP4 files, so all you would need is to use Sjokvist’s JavaScript detection code, but rather than feeding your player SWF a separate .flv video file, you could just load the same MP4 file.

If you need a refresher course on how to dynamically load videos into a Flash file, check out this Stack Overflow page which has a quick overview and some basic sample code.

Using that scenario, you’ve got a solution where every visitor can see your video and you only need to offer two actual files: Ogg Theora for Firefox and other browsers which support it, and an MP4 for everyone else.

Using the <audio> tag
The audio tag is more or less a duplicate of the video tag. The same codec limitations apply — Mozilla only supports Ogg Vorbis files, while Safari can handle pretty much anything QuickTime can.

The code looks very similar to <video>:

1 <audio src="/music/myaudio.ogg" autoplay>
2
3Sorry, your browser does not support the <audio> element.
4
5

</audio>

And as with the <video> tag, the same Flash-based workarounds would give you near universal support for today’s crop of browsers.

Conclusion
As you can see, the audio and video landscape in HTML 5 has some issues — namely the inability for browser makers to come to any sort of codec consensus. But bear in mind that the good old <img> tag also lacks a specific format mandate and we’ve managed to make that work over time.

Source : http://www.webmonkey.com/2010/02/embed_audio_and_video_in_html_5_pages/#Video.27s_a_tough_nut_to_crack

Sunday, September 5, 2010

How To Use HTML Meta Tags

Want to get a top ranking in search engines? No problem! All you need to do is add a few magical "meta tags" to your web pages, and you'll skyrocket to the top of the listings.

If only it were so easy. Let's make it clear:

* Meta tags are not a magic solution.
* Meta tags are not a magic solution.
* Meta tags are not a magic solution.

Meta tags have never been a guaranteed way to gain a top ranking on crawler-based search engines. Today, the most valuable feature they offer the web site owner is the ability to control to some degree how their web pages are described by some search engines. They also offer the ability to prevent pages from being indexed at all. This page explores these and other meta tag-related features in more depth.

Meta Tag Overview

What are meta tags? They are information inserted into the "head" area of your web pages. Other than the title tag (explained below), information in the head area of your web pages is not seen by those viewing your pages in browsers. Instead, meta information in this area is used to communicate information that a human visitor may not be concerned with. Meta tags, for example, can tell a browser what "character set" to use or whether a web page has self-rated itself in terms of adult content.

Let's see two common types of meta tags, then we'll discuss exactly how they are used in more depth:



In the example above, you can see the beginning of the page's "head" area as noted by the <HEAD> tag -- it ends at the portion shown as </HEAD>.

Meta tags go in between the "opening" and "closing" HEAD tags. Shown in the example is a TITLE tag, then a META DESCRIPTION tag, then a META KEYWORDS tag. Let's talk about what these do.

The Title Tag

The HTML title tag isn't really a meta tag, but it's worth discussing in relation to them. Whatever text you place in the title tag (between the <TITLE> and </TITLE> portions as shown in the example) will appear in the reverse bar of someone's browser when they view the web page. For instance, within the title tag of this page that you are reading is this text:

How To Use HTML Meta Tags

If you look at the reverse bar in your browser, then you should see that text being used, similar to this:



Some browsers also supplement whatever you put in the title tag by adding their own name, as you can see Microsoft's Internet Explorer doing in the picture above.

The title tag is also used as the words to describe your page when someone adds it to their "Favorites" or "Bookmarks" lists. For instance, if you added this page to your Favorites in Internet Explorer, it would show up like this:



How did that little Search Engine Watch logo also show up? Everyone always asks. The article below provides more help:

Creating Your Own Favicon.ico Icon For IE5
Web Developer's Journal, March 7, 2000
http://www.webdevelopersjournal.com/articles/favicon.html

But what about search engines! The title tag is crucial for them. The text you use in the title tag is one of the most important factors in how a search engine may decide to rank your web page (see the Search Engine Placement Tips section for more details). In addition, all major crawlers will use the text of your title tag as the text they use for the title of your page in your listings.

For example, this is how Teoma lists the page you are reading:



You can see that the text "How To Use HTML Meta Tags" is used as the hyperlinked title of this page's listed in Teoma's results.

In review, think about the key terms you'd like your page to be found for in crawler-based search engines, then incorporate those terms into your title tag in a short, descriptive fashion. That text will then be used as your title in crawler-based search engines, as well as the title in bookmarks and in browser reverse bars.
The Meta Description Tag

The meta description tag allows you to influence the description of your page in the crawlers that support the tag (these are listed on the Search Engine Features page).

Look back at the example of a meta tag. See the first meta tag shown, the one that says "name=description"? That's the meta description tag. The text you want to be shown as your description goes between the quotation marks after the "content=" portion of the tag (generally, 200 to 250 characters may be indexed, though only a smaller portion of this amount may be displayed).

For this page you are reading, I would like it described in a search engine's listings like this:

This tutorial explains how to use HTML meta tags, with links
to meta tag generators and builders. From SearchEngineWatch.com,
a guide to search engine submission and registration.


Will this happen? Not with every search engine. For example, Google ignores the meta description tag and instead will automatically generate its own description for this page. Others may support it partially. For instance, let's see again how this page is listed in Teoma:

You can see that the first portion of the page's description comes from the meta description tag, then there's an ellipse (.), and the remaining portion is drawn from the body copy of the page itself.

In review, it is worthwhile to use the meta description tag for your pages, because it gives you some degree of control with various crawlers. An easy way to do this often is to take the first sentence or two of body copy from your web page and use that for the meta description content.
The Meta Keywords Tag

The meta keywords tag allows you to provide additional text for crawler-based search engines to index along with your body copy. How does this help you? Well, for most major crawlers, it doesn't. That's because most crawlers now ignore the tag. The few supporting it can be found on the Search Engine Features page).

The meta keywords tag is sometimes useful as a way to reinforce the terms you think a page is important for ON THE FEW CRAWLERS THAT SUPPORT IT. For instance, if you had a page about stamp collecting -- AND you say the words stamp collecting at various places in your body copy -- then mentioning the words "stamp collecting" in the meta keywords tag MIGHT help boost your page a bit higher for those words.

Remember, if you don't use the words "stamp collecting" on the page at all, then just adding them to the meta keywords tag is extremely unlikely to help the page do well for the term. The text in the meta keywords tag, FOR THE FEW CRAWLERS THAT SUPPORT IT, works in conjunction with the text in your body copy.

The meta keyword tag is also sometimes useful as a way to help your page come up for synonyms or unusual words that don't appear on the page itself. For instance, let's say you had a page all about the "Penny Black" stamp. You never actually say the word "collecting" on this page. By having the word in your meta keywords tag, then you may help increase the odds of coming up if someone searched for "penny black stamp collecting." Of course you would greater increase the odds if you just used the word "collecting" in the body copy of the page itself.

Here's another example. Let's say you have a page about horseback riding, and you've written your page using "horseback" as a single word. You realize that some people may instead search for "horse back riding," with "horse back" in their searches being two separate words. If you listed these words separately in your meta keywords tag, THEN MAYBE FOR THE FEW CRAWLERS THAT SUPPORT IT, your page might rank better for "horse back" riding. Sadly, the best way to ensure this would be to write your pages using both "horseback riding" and "horse back riding" in the text -- or perhaps on some of your pages, use the single word version and on others, the two word version.

I'm using all these capital letters on purpose. Far too many people new to search engine optimization obsess with the meta keywords tag. FEW crawlers support it. For those that do, it MIGHT! MAYBE! PERHAPS! POSSIBLY! BUT WITH NO GUARANTEE! help improve the ranking of your page. It also may very well do nothing for your page at all. In fact, repeat a particular word too often in a meta keywords tag and you could actually harm your page's chances of ranking well. Because of this, I strongly suggest that those new to search engine optimization not even worry about the tag at all.

Even those who are experienced in search engine optimization may decide it is no longer worth using the tags. Search Engine Watch doesn't. Any meta keywords tags you find in the site were written in the past, when the keywords tag was more important. There's no harm in leaving up existing tags you may have written, but going forward, writing new tags probably isn't worth the trouble. The articles below explore this in more detail:

Death Of A Meta Tag
The Search Engine Report, Oct. 1, 2002

Meta Tags Revisited
The Search Engine Report, Dec. 5, 2002

Still want to use the meta keywords tag? OK. Look back at the opening example. See the second meta tag shown, the one that says "name=keywords"? That's the meta keywords tag. The keywords you want associated with your page go between the quotation marks after the "content=" portion of the tag.

Inktomi says that you should include up to 25 words or phrases, with each word or phrase separated by commas. More advice from Inktomi can be found on its Content Policy FAQ.

FYI, in the past, when the tag was supported by other search engines, they generally indexed up to 1,000 characters of text and commas were not required.
Meta Robots Tag

One other meta tag worth mentioning is the robots tag. This lets you specify that a particular page should NOT be indexed by a search engine. To keep spiders out, simply add this text between your head tags on each page you don't want indexed. The format is shown below (click on the picture if you want to copy and past the HTML for your own use):



You do NOT need to use variations of the meta robots tag to help your pages get indexed. They are unnecessary. By default, a crawler will try to index all your web pages and will try to follow links from one page to another.

Most major search engines support the meta robots tag. However, the robots.txt convention of blocking indexing is more efficient, as you don't need to add tags to each and every page. See the Search Engines Features page for more about the robots.txt file. If you use do a robots.txt file to block indexing, there is no need to also use meta robots tags.

The meta robots tag also has some extensions offered by particular search engines to prevent indexing of multimedia content. The article below talks about this in more depth and provides some links to help files. Search Engine Watch members should follow the link from the article to the members-only edition for extended help on the subject.

Image Search Faces Renewed Legal Challenge
The Search Engine Report, August 22, 2001


Other Meta Tags

There are many other meta tags that exist beyond those explored in this article. For example, if you were to view the source code of this web page, you would find "author," "channel" and "date" meta tags. These mean nothing to web-wide crawlers such as Google. They are specifically for an internal search engine used by Search Engine Watch to index its own content.

There are also "Dublin Core" meta tags. The intent is that these can be used for both "internal" search engines and web-wide ones. However, no major web-wide search engine supports these tags. More about them can be found below:

* Dublin Core Metadata Initiative
* Dublin Core - Tagging the Web for better search and retrieval
WebReference.com, Nov. 5, 2000

How about the meta revisit tag? This tag is not recognized by the major search engines as a method of telling them how often to automatically return. They have never supported it.
In Conclusion

Overall, just remember this. Of all the meta tags you may see out there:

* Meta Robots: This tag enjoys full support, but you only need it if you DO NOT want your pages indexed.

* Meta Description: This tag enjoys much support, and it is well worth using.

* Meta Keywords: This tag is only supported by some major crawlers and probably isn't worth the time to implement.

* Meta Everything Else: Any other meta tag you see is ignored by the major crawlers, though they may be used by specialized search engines.

More Resources

At the bottom of this page are more resources about meta tags, including tutorials and meta tag building applications. But first.

If you've been following the "Next" buttons to read the numbered sections of the Search Engine Submission Tips guide in order, you've now reached the last page. Congratulations!

There's still more information you might find helpful, however. Please review the rest of the articles on the SEM Basics section for additional assistance with search engine marketing issues.

In addition, do consider becoming a Search Engine Watch member, for access to even more information on search engine marketing issues.

Now, here are those additional meta tag resources and articles.

For Website Designing and Development
Web Development hyderabad
eMail : varadesigns@yahoo.com
phone : +91 9676739333

Source : http://searchenginewatch.com/2167931