Home > Services > Web Design > Design File Format Guidelines

Design File Format Guidelines

This page contains information about the types of file formats we can accept for website development purposes. If you need to get a design to us to ‘slice and build’ this document should provide you with the necessary information you need to output your file so we can turn it around quickly.

Supported Graphic/Document Formats for Conversion to Websites

Design files intended for web use should be exported from the source application in a lossless format (or as close to lossless as possible). This rules out .JPG files (which tend to be blurry and blocky) as well as highly compressed (low quality) PDF files.

Regardless of the source application, Dovetail requires the following when preparing a source file for web use:

First choice is always an Adobe Photoshop .PSD file, with layers and fonts intact.
Second Choice: High Quality (press quality settings) .PDF file.
Third Choice: Flat uncompressed (e.g., .TIFF) graphic file, with a separate document listing font faces and styles used.

Font specifications for Web Site Development

The basic rule is that HTML browsers are simple creatures when it comes to font rendering. CSS (Cascading Style Sheets) allow for more control than we had previously, but the most important thing to consider is that webpage text is rendered in the browser using the fonts available on the viewer's computer. If you use a common font like Arial, you are safe, because almost everyone has Arial on their machine, and if not, it will map to very similar fonts like Helvetica or Sans-Serif. Using a widely-available font like that ensures that the page will render correctly for everyone.

As soon as you introduce a less common font - Frutiger (http://en.wikipedia.org/wiki/Frutiger) for example - you are taking a risk. How many people have Frutiger on their machines? You can specify a downward conversion path in the CSS or font tag so that people who don't have Frutiger will see Gil-Sans, and people who don't have Gil-Sans will see Arial, but then you are essentially guaranteeing that the page will look different on different machines.

The general rule is to stick with common fonts for browser-rendered text. These fonts are listed here:

http://www.ampsoft.net/webdesign-l/WindowsMacFonts.html

If you are going to use a less common font on a website, you should create a GIF, JPG or PNG graphic rather than relying on browser rendering of font text.

Specific Application Notes

Adobe Fireworks
We do not support Adobe Fireworks directly. Adobe Fireworks creates files in layered PNG format.
To supply a file created in Adobe Fireworks to Dovetail for production, please first convert it to a layered PSD file using the export function in the program.

QuarkXPress
We do not support QuarkXPress directly. A Quark file should be exported to a format that can be read by Adobe Photoshop. A PDF (if exported using the ‘High Resolution’ setting) will work.

Screen Resolution

There are several things to consider when deciding on whether to target a 800x600 design…

Less than 4% of users have a screen resolution of 800X600. Thus, close consideration should be given to the target visitor and their likely screen resolution.
To avoid scroll bars you actually need to be no larger than 780px wide. That is to say some browsers will take an additional 20px for the scroll bars.
Height is not usually as big a concern and content is often expected to extend down the page past 600px.
When putting together all of the expected content and desired design elements to create the right user impression and experience it is often difficult or impossible to fit all of the content & design elements within 780px and/or if you do then it doesn’t look good in larger formats.
A common approach to minimize the scrolling is to put the more important content/elements within the viewable space even at the lower resolution, and then use a liquid design by programming the HTML in a way that will scale or expand out (width and height) when viewed in larger resolution displays.
There is often a limit as to how wide looks good and sometimes a fixed width with centering approach is taken. Further, consideration has to be given to design elements if centering is used for example background images may only look good when anchored to the left side of the screen.

At Dovetail we have found using a design process that includes a digital rendering helps us work through all of these challenges visually with the customer. Here are a few links on this topic and statistics on screen resolutions in use today and in the past few years.