Hi Marcus,
Layouts like this can be tough but you are almost there with your header. The trick is to make sure that all of your measurements in the header are based on percentages rather than pixels. You can then divide the width of the header up into logical percentages so they all make the full 100% width.
For example you can see below how I’ve added a border to each of the three header elements and how they all span the full width of the header;
404 File Not Found - Jumpshare http://jmp.sh/cr8lbZC
I tend to use the web inspector in Safari for these sorts of things as it is very easy to tinker with the layout in the browser without writing too much code. Start by giving each of the three elements an outline of 1 pixel so we can see them in the browser. Outlines are better than borders as they won’t adjust the overall size of the item.
The ‘header’ item is 100% width of the page. The ‘headerwrap’ item inside of this is only 96% and has a fixed padding of 24 pixels. Start by changing the padding on this to 2%. If we take the 96% width and remove the 2% padding on each of the left and right hand sides we get an overall width of 92% (96 - 2 - 2 = 92). All of the widths of the children in this box need to add up to 92%. With that fixed in our thoughts we need to set the widths of the items in the header. I set the ’sunshine’ logo to 25% and the padding to 1%, the ’twoyears’ to 15% and the padding again to 1%, and the ‘slogan’ item to the remaining 54%. If I’ve got my sums correct that should make them all add up to our 92%.
Now when you adjust the width of the browser window these items should all resize based on their percentages. The items inside of them (the images and font sizes) are still set as fixed sized items and you have some styles set at different breakpoints that adjust the layout slightly but you should see how the header layout will flex from the very largest to the very smallest browser width and keep the items all in proportion and all in a single line.
There will come a point when you are flexing the width of this page that you’ll want to re-layout the items in the header. Make a note of the browser width (again the Responsive Design Mode in Safari is great for this) and create a breakpoint in Freeway. From here you can adjust your header items so they are either resized or stacked and adjust the layout until you are happy with it.
Moving forward you may want to change the images in the header so they are resized along with the header as the browser width changes or you may decide that they always need to be a fixed size. That is a design (and usability) decision but making the images flexible is just a case of adding a few extra CSS styles to them. You can see that in this screen shot I’ve adjusted the logo on the left to be responsive (it stays within the bounds of the red box) but the seal on the right is still a fixed size and is starting to push out of the parent box;
404 File Not Found - Jumpshare http://jmp.sh/f4KZbkI
Both are valid ways of working depending on what you want achieve.
All of the responsive layouts I do in Freeway are based on this simple principle and it generally makes for a very easy and productive workflow. It means that you only really need to define break points for your page when the content actually breaks the layout. Rather than designing for the screen size of a certain device (of which there are thousands) your layout will be full flexible and look great at all screen widths regardless of the device used. It does require a little bit of thought to get the layout you need but the final result is well worth the extra mental effort.
Good luck with the adjustments and let me know how you get on.
Regards,
Tim.
freewaytalk mailing list
email@hidden
Update your subscriptions at: