This is the Yart internal standard to build HTML from artwork supplied by a Designer.
1. Ask the designer for Photoshop files. (Make sure your Photoshop color setting is set to web)
2. Confirm that the site will not be wider than 1000px. If it is, ask for new artwork no more than 100px wide.
3. If the artwork has been supplied as a png, remove gamma correction as it will lead to different appearances on different browsers.
More info on removing gamma information on PNG
4. Take the screen with the most detail and cut out the entire page as a:
a) jpeg
b) and a png
And put it in a web page. If hosting has not been set up put it in a directory like www.yart.com.au/clients/yourclientname/home.aspx
5. Preview these two pages yourself in IE 6, 7, 8, Firefox and Safari. Some of these browsers display certain images differently.
IE shows gamma information from PNG files, Firefox ignores it.
6. Send the designer the URL and ask them if this is correct.
7. If not, read the attached article from here and try and fix things. Credit http://www.gballard.net
8. Cut out images as:
- Gifs (for non photos where there are less than 256 colours. Suitable for buttons, logos, graphs, headers etc)
- jpegs if they are photos
More info on JPEG vs GIF vs PNG
9. Only use PNGs for:
a) Graphics that have a large number fo colours and sharp edges.
b) If an image has alpha transparency.
c) Or a colour gradient and they didn't work to well as gifs
d) Do not use pngs for photos.
Remove gamma correction on pngs so they display the same in all browsers.
11. Check that the fonts sizes the designer has supplied are not smaller than 11px. It is quite common to recieve artwork in tiny font sizes as these look OK on Mac screens. If they are smaller, recommend an increase to 11px. Note that this may cause line breaks that were not in the text previously. The designer can preview fonts at http://www.yart.com.au/fonts/view_fonts.aspx
This issue is critical in fixed sized websites (such as http://www.rocksolidgroup.com.au/Home.aspx) if the sample text is in 9px and fills the screen. In such a case, increasing the font size may require you to recut out HTML. A designer using fonts below 9px must confirm they are final and be told changing them later could lead to an increased cost from us when we have to recut the site.
12. Get the designer to approve the colours in the two pages.
How To Know If You Have Finished HTML
1. Check the site in IE6, 7, 8, 9, Firefox, Chrome and Safari.
2. In each browser, try collapsing the site and check it does not distort.