Slicing A Web Design Into SEO Optimized XHTML

When you create a custom web design you want it to bring in the most website conversions and sales. This capability is enhanced greatly when your website can be seen consistently in all browsers. This is called cross-browser compatibility. If your website appears distorted or is rendered terribly by any of the top browsers then your website will look unprofessional - and that is the last thing you want with a new website design.

If you are creating a custom web design then there are many reasons for doing it right the first time. This process is given little press but can provide a major advantage for your website over your competitors. The process of slicing takes the original design, usually in the form of a vector file like Adobe Photoshop (.psd) or Adobe Illustrator (.ai), and converts these vector image files into web page content which includes images, html files, cascading style sheet files and javascript files. The HTML files can be named differently depending on which technology your website uses. Examples are .htm, .html, .php, .asp, .aspx and there are many more.

Once all of the pages from the website designers have been approved, they must be sliced into web page components. The preferred version of HTML to use is the latest and is the most compatible with all browsers including mobile browsers - XHTML 1.0 Strict. Ideally you will also create error-free Cascading Style Sheets (CSS) code.

Below is a list of slicing requirements that ensure the code you create and your website renders optimally in all browsers:

Do not slice the design until explicit approval has been provided on all templates. Early slicing of the vector files causes problems in that any changes after that become too unwieldy to change in XHTML as opposed to a vector drawing.
Always slice starting with error free XHTML 1.0 Strict code.

The pages must work correctly in the latest versions of both IE and Firefox and one full version back. Then, depending on the customer, Opera or the Safari browser used on Mac computers may also be important.

When the vector file is sliced we need an optimal slice so solid colored areas aren’t images but instead colors defined by #nnnnnn type of definitions. This speeds up page load times by reducing HTTP requests for images from the server.
Do not place text or numbers into images as the text content changes often - even phone numbers. This is extremely important, in particular if the text contains product information, product names or keywords.

Text should be able to be read by all people. The user should be able to resize text size on the pages so relative definitions must always be used like 1.0em or 1.2em instead of 12 pt.
When a box contains text it should be sliced in a way that allows the box to expand vertically with it’s contained content. This allows for future content changes and additions - which always happens. If the box height doesn’t change with the content then the code is essentially broken.

All nav links should be keyword-based text links, not images, and they should also be defined and controlled by the cascading style sheets (CSS).
Use an h1 tag for the most important headlines on the page, h2 tags for subheads and h3 tags for other section titles. This is important for W3C accessibility compliance.

Put all images into a folder named /images. This also helps SEO since search engines are now indexing images separately and emphasizing them in the search engine results pages (SERP).
Place a link on the top-left logo to the home page. Do not place the image into CSS as a background image since it won’t print as a background image. Add relevant alt text.

Add relevant alt text to all images that are substantial to the content. If an image is only used for layout and design then set the image alt tag to “” (alt=”").

If a page needs to be printable then background images will not display, so ensure printable pages show correctly before finalizing the code.

Instead of image names like ‘box-right.jpg’, please use text appropriate to the reason for the site like cute-doggie.jpg for the image name and alt tags that uses the main keywords on that particular page.

Ensure that all logo, footer and other links to the home page use the full home page URL consistently, for example use http://www.yourdomain.com instead of index.php, http://www.yourdomain.com/index.php, http://yourdomain.com, or http://yourdomain.com/index.php.
For usability reasons body text links should be underlined, (maybe) bold and the on hover event should remove the underline and light up the color of the link. Once the link is clicked it should be a darker version of its original color. This does not apply to menu links.

Always deliver the original vector files along with the HTML files when slicing is complete.
Icons on pages should use CSS sprites to reduce the number of HTTP requests to the server. The process combines several images into one image which only requires one image request, then identifies coordinates to each image when they are needed. This is a huge page load time benefit.

More infomation on Web Design Services