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]
Hello sir, i have checked your project and would like to have your project. I am confident to fulfill your requirements in timely manner, along with quality work. Please check your pmb.
psd to xhtml5/css3 expert here interested in taking up your project. I provide tableless, w3c valid, cross browser and well managed psd to xhtml5/css3. Please view PM for my past works and other details.
Dear sir,
Greetings!!!Certified person is here according to your requirement. I understand your requirement clearly. Please check your private message for bid details. Thank for your consideration.
Regards
Dear Sir,
I understand you demands,i am also doing this type of work on freelancer.com...
I am ready for work,please hire me so i start working and give you your demand as soon as possible.
Thanks