Klixo can convert Adobe Photoshop and Fireworks designed documents into webpages. We convert PNG/PSD to XHTML and PNG/PSD to XSL by hand. Here are some guidelines for graphic designers who are laying up a web page design.

Which format?

We prefer layered PNGs, but we also can import PSDs with the layers intact

What resolution?

Minimum would be 72 DPI, maximum 150 DPI, 96 DPI is a good compromise and is the default resolution for most Windows XP desktops.

What size?

This is a tricky question to answer simply. If one objective of your website it to satisfy as many visitors as possible, we suggest you design the document to occupy a space that is 750 pixels wide. Any greater width than this and you are going to start frustrating a percentage of visitors (13%) who will have to scroll sideways to read the entire page.

Have a look at our screen resolution guide for designers that will help you to choose the size for your desired target audience. Don't forget in web design (as in most mediums) everything is a trade-off. You may choose to trade happy visitors for a better looking site!

• Screen resolution guide for designers

There are several size factors to consider when designing a web page:

Browser window: This is the window through which you view a document. Windows are elastic in size, a user can resize them at any time to a maximum of the size of the screen, so we have no control over the size of the window that a user will view your design through. Having said that, we assume that most people will have a browser window that allows them to view at least 750 pixels wide by 600 pixels high without scrolling. Scroll bars take up about 25px.

Document body: The document body contains the content of the page itself. We can control the width and height of a document body to some degree, but the height of a document will vary depending on how much content is in it. With content management systems (CMS) being used for most websites now, it is import to design for varying amounts of content.

The Fold: The fold is the point below which a user must scroll to see what is in the document. Major eye catching features should be presented to a user "above the fold".

Gutters: The gutters are the margins to the left and right of the document body that will vary in size according to the browser window size. Make sure you design a colour or theme for these too.

Tips for Graphic designers:

1. Remember to provide us with instructions on what to do with the gutters
2. Only use commonly supported fonts, see a definitive list here:
   http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html. We have developed a font viewer tool that you can use to test various font/size/variant combinations. Please list the font families used when you send us the instructions, and if you can, the CSS code.
3. Web page layout is not WSYWIG. It is at best a pretty good attempt. The resulting webpage will never look exactly like the design that you supply, it will be a compromise between factors including, speed, optimisation, compatibility and usability.
4. All elements on a page must be relative to something. We cannot always absolutely position elements (using x and y), we more often have to say "this element is 10px to the right of that element".
5. We usually centre a document body in the browser window, although we can align it to the right. We try and avoid designs that expand to fill the available window space, because it is fundamentally impossible to get a result that is satisfactory to a graphic designer.
6. There must be text links on the site for every page for Search Engine Optimisation and Accessibility, so you may need to design a text menu at the bottom of the page that search engine robots and screen readers can follow.
7. Don't forget a space for a copyright statement or website credit if you or your client requires one
8. Alpha transparency is not currently supported by all browsers. We will always have problems with gradients and semi opaque images (not saying it is impossible!)
9. Free flowing text columns are not currently supported by all browsers. We do have a hack, but it is pretty clunky.

Pricing your project

A Klixo account manager will work with you to price the development component of your project. Before we can do this we require:

1. A site map showing the relationship between each page on the site, if you need help drawing this up, contact us.
2. An order (as an email or PDF attachment) that lists the templates that you would like us to develop
3. Any information you can provide regarding the functionality, layout and style of the web pages
4. Whether or not you would like us to host the site
5. Whether or not you would like us to register a domain name
6. Whether or not email accounts are required

We will respond with a estimate of initial and ongoing costs, as well as a rough timeline.
 

What we need

Before we begin your project we need:

1. The finished artwork
2. Notes on how the pages should be aligned in the browser (left or centre)
3. A list of browser fonts to use and if possible the CSS rules for each font (the Klixo font viewer is a useful tool for preparing CSS rules)
4. Notes on how drop down menus should work, slideshows, any other features

Before we finish your project we need:

1. All of the content (text and images) that you would like us to load
2. Email addresses of who form-to-mail emails should be delivered to

Let us help

We can help nip any problems in the bud if you send us a JPEG of your design in the draft stages. That way we can discuss with you the best way to make your creative design a technical reality!