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.
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.
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.
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
that can probably be adapted to fill your needs. You might give it a look.
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.
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.
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.
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.
Alright, So I got this started but having trouble getting the ballon image in. Right now on the body I have the cloud image. One other issue I’m noticing is on mobiles the text is quite large could probably make it about 50% smaller same as the logo image as well the background image clouds are way too large on the mobile too. But believe heading in somewhat the right direction if can solve those issues. Here is the link to what I have begun…
Just updated a bit to have the clouds moving in the background with a parallax effect. But now on mobile seems to all be off grrr this is giving me nightmares lol and still need to figure out how to do the ballon and keep clouds moving and not have horizontal scroll on mobiles devices lol
In that way you won’t get scrollbars and as the screen gets narrow the balloon juts gets cut off which I think is fine. Or you can just use media queries and hide the balloon for mobile or offer a smaller image.
You seem to be making progress anyway but I would suggest that you add a switch that allows the infinite animation to be turned on/off as a lot of people won’t like that constant twitching.
Using what you provided me put the ballon up in the top corner so I removed left: 0 and top: 0 and put it into the bottom. For some reason its not right in the bottom of the view finder, any reason why that would be? When you take a look at the site, is this what you meant? Should the ballon be a background image or just like this? Also, on the current landing page I did http://lowerys.com/scribbles/ I have the ballon like floating there is this possible to do with leaving it at the bottom of the page and still not cause a vertical scroll?
Also with the infinite animation its something they will probably love, but I do notice it twitching a bit is there a way to make it a smoother animation at all?
Once I get one page figured out I believe the rest will all fall into place.
Is there any way to resize the image cause I’m on a 27" Mac and of course the image is kind of out of the way. So is it simple to resize it according to the browser size? Just would like to have it look correct on all browsers sizes.
Is this a good way to resize the images if I give the div a wider size and make the picture quite large for large browsers then use the code on this site to resize as browser resizes?
Woot woot!!! Think it works well, I used it and seems to work well, can you let me know if you see any issues with doing it this way when you get back. Now if I could figure out how to make it float without causing any scrollbars that would be great and if can fix up some of the choppiness on the background images.
If theres anything else you may see wrong with the layout that may cause problems please let me know beofre I begin with the menu.
Is there any way to resize the image cause I’m on a 27" Mac and of course the image is kind of out of the way. So is it simple to resize it according to the browser size? Just would like to have it look correct on all browsers sizes.
Thanks
I already gave my suggestions of using a background image in a fixed div but you didn’t use them. You can use background-size to stretch the image as I mentioned in my first post and if you need animation then you could possibly just animate the div.
As it stands now it looks very odd to me with your balloon cut off and sticking out the top of the page and at smaller windows intermingling with the content and looking messy.
So now to do the ballon thing that you recommended how can I do it to the ballon, I make the ballon a background image instead? I won’t need to animate the ballon.
What would my CSS look like never played with stretch before lol
Just having the picture issue now with the ballon (homepage), flowers (menu) and the moon (location). Also, the pagetitle I’m sure theres a much easier way to style it with CSS to look like the PDF on my first post, so don’t need multiple h1 tags and <br> all in there. Another issue I’m seeing is the menu.html page on a mobile it doesnt display property the prizes probably cause the percent is so small how can I resolve this issue?
Otherwise I think got most of it ready to add and style the menu, think its just those little things that I can spot.
You would probably need to hide it for mobile as it will get squished at smaller window sizes. Otherwise I would probably have used a standard sized background image (as per normal) placed to the right and let it get cut off at smaller sizes
Your heading isn’t very semantic with multiple h1s and I would do it like this.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>Untitled Document</title>
<style type="text/css">
body { background:red }
h1 {
font-size:200%;
margin:0 0 1em;
overflow:hidden;
zoom:1.0;
}
h1 span {
float:left;
clear:left;
background:#fff;
padding:5px 10px;
margin:0 0 5px;
}
</style>
</head>
<body>
<h1><span>Mix it up for</span><span>your next</span><span>meeting</span></h1>
</body>
</html>
