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: cufon-screen.css cufon.js Informa_english.js block_english.js Include this line of script before body closing tag eg: 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. Standard-assets-for-freelancers-dev.zip contains all fonts needed for this project – install fonts before opening PSD. Supporting scripts used: Respond.js: https://github.com/scottjehl/Respond/ HTML5 polyfill for IE9: [if lt IE 9] <script src="//html5shiv.googlecode.com/svn/trunk/html5.js” [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 http://html5boilerplate.com/ ? Media queries ‘bullet proof’ solution http://www.vcarrer.com/2010/07/bulletproof-css3-media-queries.html ? List of touch/swipe libraries https://github.com/bebraw/jswiki/wiki/Touch ? 320 & UP - Possible alternative starting template with additional styles and media queries already set - may be useful for more flexible ability in content. http://stuffandnonsense.co.uk/projects/320andup/ ? Generate Responsive template quickly http://responsify.it/ Keywords: CSS, HTML5