Make a responsive, Wordpress site from my Illustrator design files and (almost) all content on the website www.wendelsberg.se. The site has one breakpoint, so every page will have two layouts. The different layouts are in the range 320-679 px, and 680-960 px. I have given you two examples for each layout so that you can see approximately how the content will flow/scale. The site should be fully fluid responsive, so that the content will always* (or at least up to 960 px) fill the browser window nicely (but with margins, described below), like the images and text scale on for example these two pages:
[url removed, login to view]
[url removed, login to view]
*Many images though, are quite small and should not be scaled up. For instance, images in the left column of the current site.
Create the site either at your own server or in a subdirectory to the current site at [url removed, login to view], and then move the site to the root of [url removed, login to view] once it is complete.
For the page side margins, you will see that they are different for different widths. Use em or % for the margins so that they scale nicely.
The images must be easily replaceable. Don't hard-code them in to the theme.
Use some responsive image script/plugin to minimize traffic for narrow window widths. This is a pretty good script if you do not have a better solution: [url removed, login to view]
For headings and big text, use the Warnock Pro font with @font-face technique. I will provide you with the font when we have an agreement. All text except for the logo should be real text and not graphic. Note that the paragraph text is slightly bigger in the narrow layout than in the wide layout.
For the narrow layout, there will be a drop-down menu, consisting of the menu items from the two top menus from the wide layout. Open the file “[url removed, login to view]" for reference. When the menu button is pressed on the finished page, the menu expands in an animation like the menu on this page [url removed, login to view] (view it in a narrow browser window so that the menu is collapsed at first.)
The new menu item “Mat, boende & konferens” is a new page that combines the “Mat & boende” and “Konferera” pages. So put the content from these two pages into a single one. Use the heading from the current “Mat & boende” page for this new page, and the content from the sidebar on the “Konferera” page.
The Wordpress installation should be in Swedish, and must support the Swedish characters "åäöÅÄÖ".
The layout should be made with HTML5 standard.
The site should work in all browsers; IE 8-11, FF, Chrome, Safari (including iPhone/iPad), and on Android devices with the default internet browser.
The site must be well optimized – it should rank at least 60/100 for mobile and 70/100 on desktop on Google PageSpeed.
The design files are in PDF format, fully layered. I created them in Illustrator so you need to open them in Illustrator.
Use the CSS transition effect from the left menu from the current start page, on the wide layout of the new site – both on the start page and on the [url removed, login to view] pages.
Use CSS effects for gradients and other effects (like for the mobile menu, the top bars on the expandable items under “Aktuellt” on the start page…), instead of images.
Set the max-width of images floating in text to 60 % in the wide layout.
The full description can be viewed in the attached Word document (about 5.5 pages long).