2 – And easier to encode :

3 – It even works with Internet Explorer
You only have to add the following script in the tag which allows you to correctly show your new tags on every IE versions lower then IE 9 :

document.createElement(“header”);
document.createElement(“section”);

Even better, using the Modernizer script allows you to declare the HTML 5 tags and also to have an alternative to CSS3 tags.

4 – The page structure is simpler
header: the header, that’s not his position that defines it but its contents, namely an introductive group.
nav: links of the main way to navigate.
section: to gather thematically your contents.
aside: has different contents that the main contents.
footer: gathers several information about the author, the copyright…

5 -HTML5 is an efficient remedy to accute divite !

6 – You can add a purpose to your tags to reinforce your document’s semantic :
main : defines the main contents of a document.
secondary : represents a secondary part of your document.
navigation : defines the navigation of your document.
banner : at the top of your page, it contains your firm’s logo, advertising…
content info : information about your page’s contents : copyrights, legal notice…
definition : the definition of an element.
note : a note in brackets or at the bottom of a page.
see also : it indicates the element has other data in this page.
search : a research form.

7 – You can add rich media (audio and video)
Without using a plugin (like Flash), with or tags. Then your media can be shown on every smartphone. Browsers only have to agreed on a common video codec.

8 – More elegant forms with More User-Friendly
placeholder : to show the text in an input.
required : forbids the browsers to validate a form if a required field was not filled.
auto complete : to complete automatically a form or not, it’s useful if you want some sensitive fields (like bank ID) not to be complete automatically
There are still numerous useful things to discover !

9 – Microsoft seems to understand the HTML 5 and CSS3 revolutions
They respect WC3 standards with Internet Explorer 9. Let’s not forget Microsoft Corporation is a member of W3C, the world organization which dictates recommendations to follow for the Internet but for years Microsoft didn’t follow these recommendations.

10 – Adopt now HTML5
Better now than never ! Webmasters have more and more an influence on how the Internet will develop tomorrow, you can influence the use of a language, you make the web the way it is, not apps’ developers !

Why Online Business need appealing and stunning websites?
Why there is a great rise in the demand of PSD to HTML conversion services?
Well, attractive and interactive websites play a very crucial role for any online business because website is the face of an organization and every website needs to be well coded by expert developers. But, one of the most important tasks for a web developer is to convert PSD based files into HTML. With the help of this conversion, you can create W3C validated, Cross browser compatible and semantic websites.

But, how to convert PSD files to HTML? PSD to HTML conversion process is an answer for the question. This conversion process and coding helps in creating search engine friendly website. PSD to XHTML conversion is complex and time consuming process. Steps involved in conversion and coding a website is given below:

Structure of a File:

In PSD to HTML conversion process, the web developer has to first create separate files to avoid any kind of confusion. To avoid confusion, give separate names to files as index.html (HTML codes), style.css (CSS styling codes) and reset.css (Reset CSS codes).

Slicing of a PSD File:

The Second step in the conversion process is slicing of a PSD file. The slicing of PSD file results into various layers. Web templates design, saved in PSD format needs to be sliced later on. In HTML based file, one can easily edit theme according to their need. After some changes in HTML files, you can save your files in the JPG, GIF or any other compatible format.

PSD to HTML Conversion:

Once the slicing has been done for the PSD based web template, the next step is coding. It is more important for a web developer to provide quality and pixel perfect code. Quality codes and better conversion process create utility in pre designed web template.

Content and Logo:

The most important step in the conversion process is to add quality content, brand logo and perform certain activities to make a website user friendly. Use of an effective logo is very much essential for a business web design.

Testing of a Website:

Website testing is the last step but not the least one, because it is an important step in the conversion process. Once, the developer creates well structured HTML webpage then he/she has to test the website at different web browsers (such as Firefox, Internet Explorer, Opera, Safari, Chrome) to check sites accessibility.

#main {
width: 530px;
padding: 10px;
float: left;
}

#main #nav{
background: #fff;
width:100%
}

#main #left-col {
background: #efefef;
margin: 8px 0;
}

2)Grouping and commenting your CSS rules

Setup certain sections in your CSS files that always exists: page structure, links, header, footer, lists, etc. Those sections are always CSS commented to name each section appropriately.

/* Header Styles Go Here **************/
…CSS Code Goes Here…
* End Header Styles *************/

1. Header
2. Structure
3. Navigation
4. Forms
5. Links
6. Headers
7. Content
8. Lists
9. Common Classes

And a sample separator that is most easily noticeable

/* ———————————–*/
/* >>>>>>>>>>>>> Menu<<<<<<<<<<<<<<<<-*/
/* ———————————–*/

3) Keep style type on single line

Combine properties onto a single line by using shorthand properties means that your CSS will be easier to understand and edit.

Instead of this:

h2{
color: #dfdfdf;
font-size: 80%;
margin: 5px;
padding: 10px;
}

Do this:

h5{color: #dfdfdf; font-size: 80%; margin: 5px; padding: 10px;}

4)Break your CSS into sheets

Separate your CSS stylesheets for different sections, use one stylesheet for layout, another for typography and another for colors .Mixing layout / typography properties will make you find that you are needlessly repeating yourself.

#main { @import “/css/layout.css”;
@import “/css/typography.css”;
@import “/css/design.css”;
@import “/css/design-home.css”;
@import “/css/extra.css”;

5)Reset your elements

Many designers clear the styling of their sheets with a global reset which has an impact on some elements like form buttons and fieldsets that are completely destroyed with the global reset.Instead, you should pick-and-choose the elements you want to reset.

So instead of doing this

*{ margin: 0; padding: 0; }

Do This

html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, font, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td {
margin: 0;
padding: 0;
border: 0;
outline: 0;
font-weight: inherit;
font-style: inherit;
8. font-size: 100%;
font-family: inherit;
vertical-align: baseline;
}

6)Place color scheme in one place for refrence.

Before you start your CSS file, comment your common colors and add it to the top of your style sheet.This will save you ton of time and will insure that your site has one color scheme.

/* Colors: Dark Brown #473B38 Light Blue #A8EFEE Pink FF4095 */

7)Use a meaning naming system.

Having a naming system for classes and id’s saves you a lot of time when updating your document or debugging, you can use parent/child structure. The parent would be the container. So if our DIV is named “header”, and two divs nested called “menu” and “logo”. The naming structure in your css would be:

#header #header_menu #header_logo

8)Alphabetical Properties

It makes specific properties much easier to find.

body {
background:#fdfdfd;
color:#333; font-size:1em;
line-height:1.4;
margin:0;
padding:0; }

9)Keep a library of helpful CSS classes.

Useful for debugging, but should be avoided in the release version (separate markup and presentation). Since you can use multiple class names, make use of them debugging your markup.[Richard K. Miller]

.width100 { width: 100%; }
.width75 { width: 75%; }
.floatLeft { float: left; }
.alignLeft { text-align: left; }
.alignRight { text-align: right; }

Undated information will make your content irrelevant and cause the user to leave sooner rather than later. Remember to always provide a date. A useful addition is to use a “last updated” date for articles or posts that changed after being published.

2.Don’t use HTTP based resources on a HTTPS page

Internet Explorer interrupts the download and displays a confirmation dialog whenever it detects the use of mixed content on a secure page.

In IE 7 and ealier, this dialog would cause annoyance to users but generally didn’t cause any other significant problems because most users would click on the Yes button and allow non-secure content to be downloaded. However, the wording in the IE 8 version of this dialog has changed and to download the content a user would now have to click on the No button.

3.Don’t use protocol relative paths to CSS files

Internet Explorer 7 & 8 will download stylesheets twice if the http(s) protocol is missing.

4.Don’t be skipping heading levels

One of the benefits of a proper and consistent heading structure in an HTML page is that they can be repurposed to improve access to the content. Also keep in mind that skipping a heading level makes navigating by headers less usable for screenreader users.

5.Don’t link pages to themselves

Do not include links that point to the current page, as this can only confuse the visitor. In navigational menus, omit the link to the current page to also indicate the current location.

6.Don’t use empty HTML elements

You should avoid inappropriate HTML use such as putting empty elements just for float clearing.

7.Don’t add reset buttons in forms

Don’t add reset buttons in forms unless you have a very good reason. Ask yourself, what is the real benefit from resetting the form? If a user resets the button by mistake, there is no way to undo the reset, the data is lost and the form has to be filled out all over again.

8.Avoid CSS expressions

While JavaScript expressions in CSS have their upsides, they are very resource intensive. That will affect the speed of the website because the expressions are frequently evaluated by the browser, causing the site to be sluggish.

9.Don’t allow CSS caching

When updating the HTML and CSS in your site, CSS file(s) can get cached. This can cause your site to break if your users are served the new HTML but not the new CSS. You can avoid this by adding a variable to the *.css file you are updating and prevent caching.

10.Don’t use H1 for site title exclusively

H1 represents the top level heading, while the title tag represents the web page title. They can sometimes be the same, for instance on the website index. However, they shouldn’t be the same on the subpages.

Many website coders do not make good use of the cascade, ending up with more complicated code. Learn how to use the cascade properly and define the importance of individual styles.

2.Specify a text colour for img elements

Some browsers display the alt text when an img element is not displayed. The alt text can sometimes be invisible or hard to read, if the color of the text is similar to the background color. Therefore, specify the color(s) and check how it looks in the browser.

Ex: #header img {
color:#fff;
}

3.Plan the absence of Javascript

The fact is that some of your website’s visitors will have JavaScript disabled. Should hidden content remain hidden even if JavaScript is disabled? Should all content be available to screen readers and search engines? If a piece of content becomes visible only after an AJAX call, how do you adequately fill that space when JavaScript is disabled?

4.Always provide an alt text in img elements

The alt attribute is a textual replacement for the image which is not being displayed. It must always be used, even if the image in question is purely decorative–in that case, the alt attribute should be an empty string.

5.Use tables in HTML email

Tables are inappropriate for layout, but a necessary evil in HTML e-mail. Mail clients have bad CSS support which means we must use tables when coding newsletters to ensure consistent display across clients.

6.Get familiar with CSS escape sequences

Escape sequences are useful because they allow style sheet authors to represent characters that would normally be ignored or interpreted differently by traditional CSS parsing rules.

7.Use the title attribute on form elements

The title attribute offers an extra avenue for associating text to a form field. It should not be used as the first means of associating a label text with a corresponding form field. In situations where supplementary information is useful, the title attribute is helpful.

8.Skip navigation links

Provide a link to skip over navigation links, helping keyboard and screen reader users to jump to the main content of the page.

9.Combine screen and print styles to save a HTTP request

Save a HTTP request by combining print and screen styles into one single stylesheet. You can do this by using @media rules, which will speed up your website.

10.Organize your CSS with flags

Use flags (text hooks) in your CSS code to quickly find what you are looking for. By doing this, you can jump to certain sections of CSS and speed up your work significantly.

Ex: * Header
* Structure
* Nav
* Search
* Headings
* Lists
* Forms
* Links
* Misc

11.Organize your CSS with flags

Use flags (text hooks) in your CSS code to quickly find what you are looking for. By doing this, you can jump to certain sections of CSS and speed up your work significantly.

1 . Trends

Keeping up to date on the latest trends is important – however “trends” does not mean “copy”. Get inspiration and create your own style. See this highly effective post of 2008 Design Trends.

2. Learn & Develop

Great designers are always learning and stay fresh on the latest styles. A great resource for finding specific collections for interface design on the web is PatternTap.

3. Think on Paper

Sketching should be your best friend, especially if your in the beginning stages of a wireframe or even simple list ideas. Getting away from the computer and onto paper gives you less distraction. Check out The Importance of Sketching.

4. White Space

Sometimes less is more. Don’t clutter your designs – readability is key to the success of a website. Minimal or Simplistic does not mean boring. For some great examples check out MinimalSites.

5. Technology / Applications

Keep up on the latest programs in your field (But Don’t Upgrade to CS4!) and if your looking for online training I suggest checking out Lynda.

6. Read

These are some great Magazines I recommend flipping through: .Net, Communication Arts, Computer Arts Magazine

If your having an inspiration block check out: Feeling the need for some Inspiration.

7. Know your Audience

Revisit the original creative brief, just because your designing something you like – doesn’t mean the client will like it. You have to look at the age group and demographic target your trying to reach, all these things are very important and you should take extra steps to not lose site of this.

8. Ask others Opinions

Recently I was redesigning a logo and simply “tweeted” on Twitter. I received over 45 replies as well as in depth detailed comments on my Flickr page where I posted the comps. You don’t have to show everyone either depending on the content, ask a colleague you trust. They may point out problems or errors that didn’t cross your mind.

9. Build a “Toolbox”

I keep a harddrive full of assets, code, old work & forms that I made need to grab someday. I organize it by the type of work (ex. CSS, Flash, Vectors, Forms). When your searching for something while working on a project it’s a lot easier when your organized. Trust me it will save you time!

10. Competition

Take a look at what other web designers are doing. Being aware of what’s happening in your industry is a must. There is not a shortage of gallery sites around but these are the ones I visit most: (http://screenfluent.com/) (http://www.lightondark.com/sites/) (http://bestwebgallery.com/) (http://www.faveup.com/) (http://www.webcreme.com/) (http://www.designbygrid.com/)

some important tips that will aid the average and even above average web designer in improving their SEO skills.

1. Make the code prettier than the design

When building the front end of your site, make sure to use semantic code. By using descriptive tags to structure your pages, search engines will be able to read and have a better understanding of your content. This will also make the process of styling your site much easier and cleaner.

2. Use but don’t abuse your keywords

Keywords are the words that describe your content. It’s important to have them appear in strategic places throughout your page, such as: URL, title tag, and main heading tags. It’s also important to have it appear often in the body of the content, but not too often, which might cause your content to be penalized for keyword stuffing.

3. Avoid using Flash for navigation

As tempting as it is to whip out some nice looking drop down effects for your site’s navigation using flash, don’t do it. Search engines have trouble reading flash files, which means the links used in the navigation can’t be followed.

4. Use unique page titles

Each page on your web site should have a title attribute, and each title should be unique. If you use the same title for every page, search engines will think that every page on your site is about the same subject.

5. Don’t forget about images

Make use of the alt attribute of an image to properly describe it. As smart as search engines are, they can’t see what an image looks like. Failing to this can cost you substantial traffic from image searches.

6. Don’t use generic links

Search engines place a high importance on links. So when linking to relevant content, be sure to use a word that describes the content. For example, if you were giving your reader a link to learn more about Photosop, use something like “Learn more about Photoshop” as opposed to just “Learn More”.

7. Don’t use images to replace text

As designers, we always want to make things look as good as possible. This means sometimes replacing ugly browser rendered heading text with a nice smooth image. Try to avoid doing this. Again, search engines can’t see the contents of an image, and this is where you should be putting your keywords.

Edit: Looks like I misspoke(or mistyped) on this one. There are valid ways to accomplish this, such as FIR.

8. Use AJAX sparingly

Ajax is great for enhancing the user experience, but try not to over do it. Content generated with ajax can’t be linked to. A good rule of thumb is: if what you are loading with AJAX can be an individual page, then avoid using it.

9. Get indexed quickly

To get your site indexed in search engines in a timely manner, try getting it linked to by a popular site in a related niche. Submitting it to Google also works, but sometimes it can take several days if not weeks.

10. Build incoming links

The number and quality of incoming links plays a big role in the placement of your site in search results. Having quality and unique content is a good way to get people to link to your site. Another way is to be generous with your own links.

11. Use a consistent URL

When you build a site, decide from the beginning if you want to use or drop the “www”. Once you decide, stick with it. Search engines, for example, see www.nareshrokkam and nareshrokkam.com as two different sites and as duplicate content, which they do not like.

cross-compatibilityYou could easily spend hours optimizing your pages for every browser from the first iteration of Mozilla forward. At some point you have to ask yourself, who is using this?

Does your website cater to contractors and DIY homeowners who may use their cell phone for texting, but are more comfortable surfing the net on a PC? Are you trying to reach C-level execs who have their iPhone surgically attached to their hand?

Think about their native technology environment, and prioritize your compatibility efforts based on the technology your audience prefers. The idea is to shape your message to their medium, or browser in this case.

Tip: Do not guess about what your audience is using.

Research and prioritize intelligently, and be prepared to back up your decisions with facts. Everyone loves seeing statistics.

Let’s say your client or your boss asks you to make the website compatible with their pet platform. You need something more compelling than, “Your browser is out of date; you should upgrade.” Let them know you mean business. “Your browser currently represents .5% of global browser users,” carries the weight of authority. And you can back it up.

Fun W3Schools Usage Statistics as of November 2009:
95% of browsers have JavaScript enabled
90% use Windows family operating systems
62% use Windows XP

Tool: W3Schools – Browser Share Statistics

W3Schools has the latest numbers for browser share past and current. They offer a monthly breakdown of the most popular browser platforms, including which versions garner the lion’s share of users. Firefox and IE ( versions 6, 7, and 8 ) are the most common browsers. At the back of the pack, Google Chrome has captured 8.5 percent, with Safari holding 3.8 percent. These statistics are extracted from W3Schools’ log-files, but W3Schools monitors other sources around the Internet to assure the quality of these figures.

W3Schools – Browser Share Statistics

Tool: W3Schools – Browser Display Statistics

This breakdown will show you what screen size visitors will most likely use to view your website. You can also see how colors will be viewed on your site.

Surprising, most computers are using a screen size of 1024×768 pixels or more, with a color depth of at least 65K colors. Remember the old standby screen size of 800×600? Only 4 percent of visitors actually use that setting!

Keep in mind, this data comes from W3Schools, a website catering to web technology hounds. Definitely a tech-savvy audience there. Your mileage may vary.

W3Schools – Browser Display Statistics

Tip: Website audiences are unique.

Global averages are helpful, but the important thing is how your users see your site. Website audiences are unique as a fingerprint. Some web site users favor the latest technology, while others have grudgingly accepted email as a universal form of communication. Dig into your website analytics to find out what technology your visitors use to access your website.

“First get your facts; then you can distort them at your leisure,” – Mark Twain.

Tool: Google Analytics – Browser Capabilities

Google has a fantastic (and free!) tool to analyze your own Browser statistics. From your dashboard, select Visitors > Browser Capabilities to access this tool. You can view by Browser alone, or look at the OS driving the browser technology.

This Analytics section provides very detailed information about your visitors. You can view typical screen resolutions, screen colors, operating systems, and so much more.

Wondering how your latest Flash creation or JavaScript app will play with your audience? You can see which version of Flash your visitors are using, and how many have JavaScript enabled.

Another useful feature of Analytics enables you to look at visits, time spent on site, new visits and bounce rates for these various browser segments. You can also view goals and conversions for each type of browser, OS, and screen resolution. See how these technologies affect your goals for the site.

Google Analytics

Tip: Do not idolize statistics.

In the immortal words of Oscar Wilde, “The pure and simple truth is rarely pure and never simple.”

Keep in mind, many statistics may have incomplete or faulty browser detection. It is quite common by many web-stats report programs not to detect the newest browsers.

Also, if you find that a small segment of your traffic is extremely active or spending a lot of money on your site, you may want to optimize for them. Even if they’re a small part of the overall pie, they could be crucial to the success of your site.

“You cannot – as a web developer – rely only on statistics. Statistics can often be misleading.” – W3Schools

Each div or item called in starts with the opening curly bracket and ends with the closing curly bracket. Each style called in needs to end with a semicolon. The last declaration within an item doesn’t need a semicolon, but it’s best to use it in case you plan on adding more items later on, you may forget to add it back in. An example of proper use:

#divname {
width: 40px;
height: 30px;
}

Condensing your stylesheet and putting all declarations for a div on one line is up for debate. I prefer to put each declaration on its own line, I think it’s easier to edit that way, but some may say that it just produces longer code.

Not Using Global Styles

Many things should be styled globally like paragraph and heading styles for text as well as link styles. This will reduce the risk of mistakes and will also cut down on the amount of code in your stylesheet.

Not Using Unique Names for Ids and Classes

It’s very important to choose names that are unique so that it’s easy to edit later on, and easy to identify in your stylesheet. Name your divs specific things like #home-left-column which is better than just #left.

Not Using Shorthand Code

Shorthand code is another way to condense your stylesheet, which is helpful for speeding up user load times as well as finding things when you’re editing later on. Instead of calling in padding-top, -left, -bottom, and -right you can just use:

padding: 5px 10px 0 10px;

Shorthand code can be used for many declarations including: padding, margin, border, and font.

Not Using Shortened Color Declarations

Hex numbers that repeat like #ffffff and #000000 can be condensed to #fff and #000. This is another way to condense your code and keep things short and easy to look at.

Incorrectly Using Positioning

Positioning is tough to understand when you’re first starting out with CSS. Your choices are static, relative, absolute, and fixed. Static is the default option and is positioned according to the normal page flow. A relative item is positioned relative to itself, meaning you can move it up, down, left or right, based on where it would normally sit. Absolute allows you to place an item anywhere on the page, and is the most misused positioning statement. The values you set for it will be relative to the last parent item with relative or absolute, and if there aren’t any, it defaults back to the html tag, allowing you to position it anywhere by declaring top left right or bottom values. Fixed is positioned relative to the browser window, so an item will stay in place if a user has to scroll. Learning how to use positioning correctly is important, but shouldn’t be used excessively. I rarely use these at all in my stylesheets.

Validate

Validating your HTML and CSS files will help in reducing errors and figuring out where a problem might be coming from. Your website may function correctly with some of the common HTML and CSS mistakes, but it doesn’t make it good practice or valid code. The validator will help identify these problems and you’ll be able to adjust the way you code for the future.