PSD to XHTML Best Practice

While we are going to convert PSD file into a fully CSS based xhtml page we should use below techniques and best practices.

• Identify possible problem areas
• Group layers
• Fixed, Fluid layout
• Web safe fonts

• We should take a closer look at the elements and identify possible problem areas.
  At this early stage you may need to make important design decisions so you must have a clear idea of how the design can be achieved from the very start. If you identify areas that are impossible to create on a living web page or would cause to many browser issues then its best to locate them now and notify the client before you begin.

• Webpage Layout
  After analyze your mockup Make webpage structure layout , Group content together, wrap each group with an rectangle, name each rectangle,  comment each layer with comment.

• PSD Group layers
  Unnamed layers (Layer 1, Layer 1 copy, etc.) can be confusing and time consuming. Items that are logically connected should be grouped together. If your psd template is not proper group ask designer for grouping or just link each layers with groups.

• Fixed, Fluid layout
  The first question that needs to be asked is whether this is a fixed or liquid layout where each column can stretch.
  We can group web-page layouts into three categories based on how their
  width is set: fi xed-width, liquid (or fl uid), and elastic. for detail visit: http://www.flexiblewebbook.com/downloads/FlexibleWebDesign_sample_ch1.pdf

• Browser support and accessibility
  Confirm about target browser and audience before slicing your page.  If client not targeting ie6 browser then you can free to use png image without any trick.However, if your target audience is broader or less computer savvy, then make sure to program for IE6. If website user also using ipad/iphone then use viewport for iPad sites.

• Web safe fonts?
  If in layout used fonts are not web safe font then clear client about the  performance and browser related issue. Install font in your matchine before slicing your template.

• File and Folder Structure:
  Let’s create a proper folderand/file structure in root folder. When I set up a site for the first time my first job is to design how the pages are going to look then I usually construct the front page. This page should always be called index.htm or index.html. If your site is a small site, with only 5-10 pages, you may want to just have your web pages within your root folder without any subdirectories, but if your site is larger, and especially if you expect it to grow over time, you might want to consider having each page in it’s own directory.
  1. images – containing all your images.
  2. styles – containing your style sheets
  3. pages – containing all your html pages
  4. template – containing any templates
  5. documents – containing any documents other than html pages such as Adobe Acrobat files, Word Files etc.

• Site define: Create and configure a site in Dreamweaver. If you do not think about your site structure before designing, you most likely will have a big mess of files and folders that will become cumbersome to manage.
  Benefit: Your links can be tracked and maintained easily.Steps: http://www.pserie.psu.edu/compcntr/guides/ConfigureDreamWeaver.pdf
  http://www.adobe.com/designcenter/tutorials/drw8at_configure/
  
  • Open Dreamweaver. Choose Site > New Site. The Site Definition dialog box appears.
  • Local Root Folder – This is where all the files for the site are stored, the one which you created earlier. Browse for this folder and click on select.
    
  • Enter a name for your site.
  • Type in the location of this folder, or use the browse button to locate
  • If this is checked, it can speed up your site management operations. You should have this checked.
    Define your Remote Site
    
    • Select Remote Info from the Category list in the Site Definition dialog.
    • Select FTP in the Access menu. enter all required fields
      
      • Your Domain:
      • Your Username:
      • Your Password:
      • Your site’s IP address:

• Grab font sizes, font families and basic colors from the PSD and set up up CSS defaults for these including your favorite  snippet.
• Measure the layout width so that we can create a #container block for the content as the page needs to be centred so all content can be within the container.  For standard 1024px monitor target we use 1002px max width. If you layout more than this width then clear your client for the same.
• In the index.html file let’s type our basic layout with the main divs with proper comments.

• Use Proper Image Formats and Optimize GIF, JPG, PNG files
  If you use the wrong image format, your images will be distorted and unclear, and will also slow down the speed of loading a website. When choosing an image format, we basically have three popular formats to choose from: JPEG, GIF and PNG. Each format has its own strength and weaknesses:
  • JPEG (JPEGsare the default choice for the web. JPEG can display millions of colors and because it has the smallest file size of all, it is the best choice for detailed images and photographs )
    • Excellent for rich coloured images
    • Decent file size compression to quality ratio
    • Doesn’t support animation
    • Doesn’t support transparency or alpha-blending
  • GIF (GIFsare similar to PNGs. Using this format your limited to 256 colours, GIF is a lossless format, which means that no image quality is lost when the image is compressed. GIFs can be made transparent and can be animated as well.
    • Small file size
    • Supports transparent regions
    • Supports animation
    • Limited colours (supports up to 256 colours maximum)
    • Doesn’t support partial transparency or alpha-blending; making transparent regions look chipped and unsmooth
  • PNG (PNGs are my preferred choice when it comes to background images and logos; especially when full or partial transparency is involved)
    • Can be in true or indexed colour format
    • Supports true transparency and alpha-blending
    • Cannot be animated
    • File size can be big
    • Cross-browser support is an iffy deal (especially when it comes to Internet Explorer)
      
  PNG-8 and PNG-24 – 8-bit PNGs mean that the image is 8 bits per pixel, while 24-bit PNGs mean 24 bits per pixel. PNG-24 can handle a lot more color and is good for complex images with lots of color such as photographs (just like JPEG), while PNG-8 is more optimized for things with simple colors, such as logos and user interface elements like icons and buttons. PNG-24 natively supports alpha transparency, which is good for transparent backgrounds.
  For details: http://sixrevisions.com/web_design/web-designers-guide-to-png-image-format/
• There are other formats too – such as TIF,TGA, ICO, and others but none of these are useful on the Web since they are not viewable in Web browsers.
  You can read more about these image formats on Wikipedia:
• Start at the top and work down.
  Working logically helps you break the job down into sections so that you can work on one thing at a time and plan the work accordingly.
• Naming convention
  I like to use logical names for the sections and although there is some debate about what to use for each element it does help if your naming convention allows for the fact that maybe your html will be arranged at a later date and that your element names still make sense. If for instance your left column is called #leftcol and the at a later date you switch it using CSS to be the right column then it could be very confusing. It’s better to use a more generic but functional name such as #sidebar1 for the left column and #sidebar2 for the right column.
  Remember that IDs must be unique and can’t be used more than once per page.
• CSS Reset and CSS Framework
• Declare the Correct DocType
  The DOCTYPE goes before the opening html tag at the top of the page and tells the browser whether the page contains HTML, XHTML, or a mix of both, so that it can correctly interpret the markup.
• Don’t use inline styles
  Inline styles cause more maintenance headaches. Inline CSS should not be allowed in strict doctypes.
• Add all CSS Files Within the Head Tag.
  Putting stylesheets in the HEAD allows the page to render progressively
• Place Scripts at the Bottom of Your Page
• Set up some reasonable defaults for text, link colors and font styles heading, img border, clear property
• Ensure All Tags are Closed
• Tag Names Lowercase
• Compress Your CSS and order the properties
• Minify JavaScript and CSS
• Don’t forget the “alt” tags
• Save HTTP Requests by Combining Images
  CSS Sprites are the preferred method for reducing the number of image requests.
• Group External CSS Files
• Group Selectors
• Use Shorter Class and ID Names
  Utilizing long class names can add additional bytes to a site, and slow it down in the process. Long names are great for allowing designers to understand them more clearly, but using shorter class and ID names can be more beneficial in the long run.
• CSS Comments Should Be Removed
  create grouped css blocks and define each group in top in a comments
• Abbreviate Hexadecimal Colors ( color:#fff;)
• Providing Fallback Fonts
• Redundant Units For Zero Values (padding:0 0 5px 0;)
• Avoid Mountain of Div Tags
• Use Modular IE Fixes
• Using Global Styles
• Encoding Special Characters
• Don’t use improperly nesting tags
• Define accesskey when appropriate
• Using a stylesheet for print allows you to hide elements you don’t want printed
• Don’t use quotation marks around paths/URLs when setting a background image
• Declare relative font sizes instead of absolute.
• Avoid !important.
• Clear floated containers
• Avoid Extra Selectors
• Use shortcuts while slicing it will save your time.
  Photoshop shortcut:
  http://morris-photographics.com/photoshop/shortcuts/downloads/PSCS3_Keyboard_Shortcuts_PC.pdf
• If you do not use the web font for your design, please:
  Substitute images for the fonts
  Utilize them by using the Cufon technique
  Utilize them by using the sIFR technique
  Utilize them by using the @font-face technique
• Test with different browsers
• Validate Your Code