PSD to HTML5 responsive page (existing template)

Goal: To translate a design in PSD format to a HTML5 responsive Landing page (template that is already built) or desktop, tablet and mobile. Deadline is Monday 13th August, NDA will be required. Approach: The main focus here to use an existing template we have created and modify the content within it to cater for a new design. The template is already fully functional & responsive so it will not take a great deal of time to update the content, but you will need a great understanding of HTML5 & responsive design. The page’s primary focus is all major Desktop but also must translate well to tablets and mobile devices. We have used the tried and tested HTML5 Boilerplate as a base and modified it for our own purposes using the most common @media queries to respond to relevant screen sizes. The new content must be: ? Fast loading on desktop and handheld devices ? Easy to manage with clear, clean commented code. ? Responsive with a mobile first approach and look pixel perfect in desktop plus portrait and landscape views for all major handheld apple/android devices. ? All styles and @media queries contained in 1 style sheet + 2 additional style sheet for Internet Explorer 7 & 8 desktop. ? Design is to a 960px grid for desktop and should be condensed using your best knowledge to fit on tablets, then content can be ‘stacked’ for mobile devices using media queries. Notes: *Branding elements will be supplied such as font’s and colour use. *Note the polyfills and scripts on the initial brief to include into head of template. *As we are working with a client CMS we cannot contain any .htaccess or .php scripts - purely HTML5, CSS & javascript. *Cufon rendering will be used for brand fonts and work in a way that H1, H2, H3, are BLOCK font used for headlines. H4, H5, H6 are Informa Pro font used for sub headlines. Body and p standard font is always Tahoma Included in folder ‘scripts to include in header’ – include in head section of template: [login to view URL] [login to view URL] [login to view URL] [login to view URL] Include this line of script before body closing tag eg:</body> <script type="text/javascript">[login to view URL]();</script> Please see ‘example template’ folder in assets provided before commencing work. You may use this build to speed up development time – feel free to improve on any techniques used here. Follow file structure within this template. [login to view URL] contains all fonts needed for this project – install fonts before opening PSD. Supporting scripts used: [login to view URL]: [login to view URL] HTML5 polyfill for IE9: [if lt IE 9] <script src="//[login to view URL]”</script> [endif] Other resources for reference: Included in the package is a slider script that you may utilise for the jQuery slide section. ? HTML5 boilerplate to use as starting point [login to view URL] ? Media queries ‘bullet proof’ solution [login to view URL] ? List of touch/swipe libraries [login to view URL] ? 320 & UP - Possible alternative starting template with additional styles and media queries already set - may be useful for more flexible ability in content. [login to view URL] ? Generate Responsive template quickly [login to view URL]