Responsive Fluid Design

Hello,

I haven't yet tackled this site yet, but got the design here from the designer. What looking for is a responsive fluid design to work on everything.

Below is a link to the design, what needed is on the left side a menu that can show and hide when clicking on it in the bottom, may need to use javascript for that unless theres way to do it in CSS which will always be to the left of the browser and as you can see 100% height. Then will have all the content, the graphics such as the flowers and etc we wil need coming from the bottom like that.

Before I jump into anything I wanted to get some recommendations or examples on how this should be tackled maybe just a bit of help and advice so it will look great on every device and keep its responsive and fluidness of the site.

Here is the link...

http://modocom.ca/scribbles/design.pdf

Thanks,

Mike

Just on my way out the door so will comment later in detail but that doesn't look like a viable design for a responsive layout.

How can you have the images flowing from the bottom of the page as the bottom of a page could be any distance and your images are a fixed height. You can of course place background images at the bottom of the page but that doesn't mean they will line up with the top of the page because that depends on the viewing device and how wide the window is open etc. It looks as though that was all designed with one specific height in mind which would be bad for a website.

The designer should do a mock up of how they expect that layout to look at small window widths and heights. You will probably have to lose the background images at smaller window sizes anyway or they will interfere with the content.

I'll have a better look later when I have more time but those were my first concerns.:)

Thanks Paul,

Thats what I was wondering too that its going to be tough one and that those images will need to be background images most likely.

So if you could take a peak at it when you have more time later today that would be great to help me with a direction, I'll talk to the designer more today to see what he had in mind.

EDIT*** Spoke with the designer and it will be fluid and responsive the images of like the ballon, flowers etc should be positioned at the bottom on all screens and portrait as well, so will most likely need to use some media queries to make this responsive and fluid to work well just not sure whats best way to jump into it.The only thing with fixed height would be the menu bar which will always be 100% height with navigation at top and the show and hide positioned at the bottom of the browser window.

Thanks,

Mike

mbond,

In your first message you said fluid and responsive. Did the designer give you any mockup images of how this site should appear on smaller screens and in different orientations (portrait/landscape)? Would be helpful to understand where the tradeoffs are before starting.

@Paul O'B posted a pull-out menu just 7 threads ago
http://www.sitepoint.com/forums/show...hat-to-call-it
that can probably be adapted to fill your needs. You might give it a look.

Cheers

Hi ronpat,

No the designer did not he just said use what you think would be best just make sure content is visible that the ballon and flowers pictures should be at the bottom and overall the look and functionality should look similar across all devices but does understand it will look b it different on portrait style devices.

Thanks,

Mike

Hi,

As Ronpat said the side pullout menu is similar to the one I did the other day and could be adapted to fit. You can change it to be triggered with javascript instead of hover and for accessibility make sure it is first shown open but then can be closed if needed. You can use fixed positioning for that side menu and that will allow you to place the toggle at the bottom of the viewport. You will however need to use a media query and set the menu to be position:absolute when the viewport is not tall enough to hold all the menu because fixed menus are inaccessible when they extend out of the viewport. For smaller windows/mobile lose the side nav altogether and go for the usual vertical nav or menu button etc.

The images on the right can be background images placed on the right of the page at a bottom background position. You can again use background-attachment:fixed to keep them at the bottom and then just let them naturally disappear when the window is closed smaller. You may need to demo this first to see the best way to handle it as it may be better to place the images at the bottom of the page rather than the viewport but both may work. Of course it will assume that you don't have any very small pages or very little of those images will show.

The other content can just be normal columns. You may be able to make them flex a little or just set them into one column at smaller screen sizes.

It won't be possible to match those background images to the content positions exactly because that will depend on content and what size the user may have their text at but you can probably get something close. You may be able to use "background-size" to stretch the images in capable browsers but results can be varied.

Usually with designs like these I run a few quick tests of the ideas I mentioned to see which works best before you get into the real detail of coding. Just knock up a basic page with those background images and see what it looks like next to a couple of columns. Don't worry about the side nav for starters as that can be worked in once you see how things look.

Thanks Paul,

Will be starting this today. Do you happen to have any examples that you've seen almost the same as this for responsive/fluid design so I can just have a better direction, if not I can tackle and post up here and see where need to make improvements.

Thanks

I think you will just have to jump in and see how it evolves. :)

Make some rough demos to test things out as I mentioned above to see what's going to work. Don't bother with the finer details to start with but just get the basic structure in place. Create your background image and a couple of columns and then see ow things are going to fit at different screen sizes. Once you have something to work with then it will be easier for us to make other suggestions.

Thanks Paul, will begin on this one tomorrow when I wrap up this other one.