There is a bit of a demilitarized zone (or perhaps it really is militarized) between graphic design folks and software developers. Luckily I'm in the latter group but how do I field practical questions from clients about how to dress up their site? For the self serve crowd what follows are some rule-of-thumb guidelines for the types of graphics that may be required for web sites generally and what formats to provide them in.
Pixel Density
Historically web designers have used 72dpi as a rule of thumb to generate artwork that renders well on a computer screen and is not overly large. However, these days the pixel density on a monitor is in fact closer to 100dpi and we recommend this density for all artwork.
Graphics File Formats
Some of the most common graphics formats are JPEG, GIF and PNG. GIFs use a lossless compression but are limited to 256 colours, and this format is owned by Unisys and may be required to be licensed in the future. We recommend that you avoid GIFs for these reasons. Only use this if you need quick and dirty low resolution animations and have no other options.
JPEGs are lossy but manage up to 16 million colours and may be used for relatively large photographs are images.
As a rule of thumb prefer PNG, which is patent-free, uses a lossless compression, compresses fairly well unless the image is very large, in which case use a JPEG.
Fonts
The fonts that are displayed in the browser are loaded from the local machine when the browser renders a web page, so if you are using a commercial font it may not render well in the browser.
While there are methods existing and in development to permit the download of fonts, this can have a significant impact on initial rendering and, more importantly, may entail intellectual property issues that are better avoided. Restrict the use of commercial fonts to text that is pre-rendered as a graphic and choose a font and font family that is likely to work in a range of browsers. See http://en.wikipedia.org/wiki/Web_typography and http://www.speaking-in-styles.com/web-typography/Web-Safe-Fonts/ for specifics.
If you have some existing branding or templates for official communications, it probably makes sense to choose fonts that are consistent with those materials. If you are using commercial fonts in your branding, for example in a business card, ask your designer to tell you what is a similar font or font family based on the list of web safe fonts provided above.
Colours
Regular computer monitors won’t necessarily have high fidelity but simply specify your colours as regular RGB triplets. (Your graphics designer will know what this means.)
Ideally your graphic designer can provide you with a few colours that can work well together.
Logo
A standalone logo may or may not be used on a site, sometimes it is incorporated in a banner. A logo that can appear in each page template, generally something that is about 85px high and proportionately wide. If you have business cards you probably already have a logo in digital form, to reprise the theme: talk to your graphic designer.
Favicon
The favicon is a small graphic that is so named because it was originally intended to decorate a site name in the favourites list in the browser. These days it may also decorate the URL bar and/or the tab, depending which browser you are using.
While a favicon may be created in different formats and sizes, for broadest support we recommend a 16x16 pixel ICO format file in RGB colour format.
See http://en.wikipedia.org/wiki/Favicon for more information.
While a favicon may be created in different formats and sizes, for broadest support we recommend a 16x16 pixel ICO format file in RGB colour format.
See http://en.wikipedia.org/wiki/Favicon for more information.
Banner
A banner is a graphic that appears at the top of each page and may display your company logo, motto, and puppies/flowers or whatever else is appropriate to your site. Ask your site designer for dimensions.
Other Graphical Content
A picture is still worth a thousand words and it is useful to decorate pages with appropriate graphics or photos that convey the subject of that page. If you are selling a product these may be photos of the product, if it is a contact page perhaps it is a photo of you or your store. More evocative images may also be appropriate. We advise you to take care of intellectual property rights, if you are reusing images that you have found on the web make sure they are licensed for free reuse.
Your graphics designer should be cognizant of intellectual property issues and will have sources for stock commercial or open sources images, and perhaps their own stock. So, more simply, once you have determined what content you would like to have in your site consider discussing with your graphic designer whether they have any images that they can license and/or provide to you to choose from to accompany specific pages.
Your graphics designer should be cognizant of intellectual property issues and will have sources for stock commercial or open sources images, and perhaps their own stock. So, more simply, once you have determined what content you would like to have in your site consider discussing with your graphic designer whether they have any images that they can license and/or provide to you to choose from to accompany specific pages.
