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.

countless customers come to me at my Southport web design business having experienced problems with previous designers incorrectly registering URLs for them. Instead of registering the customer’s domain name in the customer’s own name or business name, they have registered it to the design company’s name. When this happens loads of customers don’t even notice. They maybe aren’t aware that the design company may possibly make a selection of who they say is the owner. It is only when problems occur at a later date that they realise it has gone wrong.

If you were setting up a shop on a busy high street and registering a new company name, then the last thing you might aim is that the landlord demands to be registered since the owner of the business name. You might intend them to be not involved, so that if you want to move to bigger premises at a later date you might do so freely.

And the same should be said about websites. The domain name might be registered to the business or the owner of the business, not the person who creates the website. If in a year or two you want an update and to move to someone else, then you don’t want to be trapped and unable to continue trading with the same domain name.

There are loads of reasons why a designer should register a domain name in their own name. a number of innocent, a quantity of not. But I could see no valid reason for them doing so. It’s part of your business ? your website address ? so it should be registered to you.

The first reason this happens tends to be for the reason that the designer doesn’t understand or fully appreciate the implications. They register it to themselves for the reason that a mistake. Mostly, these will pass the domain name over to the customer when it’s moving and you then basically need to arrange for the official switch of name.

But there are some that do it for other reasons. Apart from the customer not wanting to divulge their contact reasons, I’ve never seen any valid reasons in my years of Southport website design. many of these most likely have other ideas in mind when they register the domain name.

For example, I’ve heard it said by loads of that they have registered the domain name for free. This is rubbish. You pay the invoice, that pays the costs. Why should they want to be the owner of your website name?

When you try to move to another designer some of these designers play awkward and refuse. They are trying to force you to stay for the reason that their customer. Worse still, if you concede the battle and the new designer creates a new domain name, you may well uncover competitor services being publicised on your old website. This is the one you have been marketing for the past however long and your loyal customers are returning to.

Whatever you do, when getting a website built, ensure it is registered in your own name!

Grab timely tips in the topic of one way links - this is your personal guide.