Web Design Standards
WD-3A: PSD to HTML for desktop designs
Last Updated: 22 March 2015 - Update Log
This module produces the finished HTML, CSS, & jQuery code for a given page design from a PSD file. A draft must be submitted & signed off first before extensive final testing is started.
Alternative A: Fixed width Foreground 980 pixels
Alternative B: Variable width Foreground Min 980 & Max 1400 pixels. Foreground width increases with increased screen width. Proportions of PSD design are maintained as foreground width increases
Objectives
Produce a fully coded webpage that passes all testing.
Skill Set Required
1. HTML, CSS, jQuery
2. Photoshop, GIMP or other image editing software
3. FTP client like FileZilla
Freelancer will be provided with
1. PSD file of the page design.
2. Image notes file detailing the various fonts that have been used within the page design.
3. Images that have been purchased for the page design.
4. Server FTP login details.
5. Subdomain that maps to the server.
Coding Requirements
1. Expandable page elements for varying text sizes - More Infomation
2. The href value for all links to CSS, jQuery, images, pages must begin with a forward slash "/"
3. Use Google Fonts & Standard Browser Fonts as specified in Image notes.
4. Images are to be located in the folder: /images/
5. CSS files are to be located in the folder: /css/
6. jQuery files are to be located in the folder: /scripts/
Work Stages & Submission of Work
Stage 1. Draft work supported by Draft testing & filling in the Draft testing forms with the findings as specified under Draft Testing below
Stage 2. Final work supported by Final testing & filling in the Final testing forms with the findings as specified under Final Testing below
All work must be uploaded to the server using FTP details and subdomain details provided
Draft Testing
1. The draft web page shall be compared to PSD design using Sauce Labs Browser and Screen Resolution Testing - Windows 7 & Latest version of Google chrome
Alternative A: Fixed width Foreground 980 pixels
Windows 7, latest Version of Google Chrome, Screen resolution tests: 800x600, 1024X768, 1400X1050 pixels
Alternative B: Variable width Foreground Min 980 & Max 1400 pixels
Windows 7, latest Version of Google Chrome, Screen resolution tests: 800x600, 1024X768, 1400X1050, 1600X1200 pixels
2. Expandable page elements for varying text sizes - More Infomation
3. Google Fonts & Standard Browser Fonts as specified in Image notes.
4. Complete draft test result form Download Here
Final Testing
This part of the work must not be started until the draft has been approved & signed off
3. The web page shall be compared to PSD page design using Sauce Labs. Browser and Screen Resolution Testing. Windows 7 browser combinations: IE 11, 10, 9, 8 ; Google Chrome 39, 38, 37, 36,35 ; Firefox 33, 32, 31 and OS X Mavericks browser combinations: Safari 7. If there is any newer browser version , it should be included.
Alternative A: Fixed width Foreground 980 pixels. Screen resolution tests: 800x600, 1024X768, 1400X1050 pixels
Alternative B: Variable width Foreground Min 980 & Max 1400 pixels. Screen resolution tests: 800x600, 1024X768, 1400X1050, 1600X1200 pixels
4. Expandable page elements for varying text sizes - More Infomation
5. Google Fonts & Standard Browser Fonts as specified in Image notes.
6. The href value for all links to CSS, jQuery, images, pages must begin with a forward slash "/"
7. Complete final test result form Download here.
Timelines
Unless otherwise stated
1. The Draft work will be submitted by the Freelancer by uploading in the server, within 7 working days of receipt of the Order, for comments and acceptance by XYZ Directories.
2. XYZ Directories will send back comments and acceptance of the Draft work or otherwise, within next 10 working days.
3. The Final work will be submitted by the Freelancer by uploading in the server, within 5 working days of reciept of the acceptance of the Draft work.
4. XYZ Directories will check the submitted Final work and will inform their acceptance or otherwise within 7 working days.
Reporting
The Freelancer will report on the status of assignment briefly every 3 days to their manager preferably through e mail or, over phone in exceptional situations
Payment Terms
Unless otherwise stated
1. 60% of the fees in the Work Order will be released on acceptance of the Draft work.
2. 40% of the fees in the Work Order will be released on acceptance of the Final work.
