SitePoint Sponsor

User Tag List

Page 1 of 2 12 LastLast
Results 1 to 25 of 30
  1. #1
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)

    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

  2. #2
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  3. #3
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  4. #4
    SitePoint Mentor bronze trophy
    ronpat's Avatar
    Join Date
    Jun 2012
    Location
    NJ, USA
    Posts
    2,519
    Mentioned
    61 Post(s)
    Tagged
    2 Thread(s)
    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

  5. #5
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  6. #6
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  7. #7
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  8. #8
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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.

  9. #9
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul, will begin on this one tomorrow when I wrap up this other one.

  10. #10
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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...

    http://lowerys.com/scribbles/site/

    I have uploaded the ballon image here is the link...

    http://lowerys.com/scribbles/site/img/ballon.png

    This may not be possible but I was wondering as well if its possible to have the ballon at the bottom right to float like I have it here...

    http://lowerys.com/scribbles

    Is it possible to resize it depending on the monitors?

    Or what would you suggest for this just so looks slick across all browsers.

    Thanks,

    Mike

  11. #11
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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

  12. #12
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Hi,

    Why don't you place the balloon at position:fixed and just use top,right left and bottom.

    e.g.
    Code:
    .ballon {
        bottom: 0;
        left: 0;
        margin:0;
        min-height:0;
        position: fixed;
        right: 0;
       top:0;
    }
    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.

  13. #13
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Thanks,

    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.

    Thanks,

    Mike

  14. #14
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    Hi Paul,

    For some reason its not right in the bottom of the view finder, any reason why that would be?
    The image is an inline element and will have a gap at the bottom as it is placed on the baseline.

    Use this:

    Code:
    .ballon img{display:block}
    Have to rush out now - back later

  15. #15
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    That didnt seem to work.

    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

  16. #16
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    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?

    http://blog.kurtschindler.net/post/f...mages-with-css

    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.

    Thanks,

    Mike

  17. #17
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    That didnt seem to work.

    Yes it did I tested so you must have a made a typo.
    Code:
    
    .ballon img {
        display: block;
        height: auto;
        max-height: 100%;
        max-width: 100%;
    }
    That will cure the space at the bottom.
    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.

  18. #18
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Ok fixed the display: block;

    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

  19. #19
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Well I've got lots more completed on it began the other pages...

    http://www.lowerys.com/scribbles/site
    http://www.lowerys.com/scribbles/site/menu.html
    http://www.lowerys.com/scribbles/site/catering.html
    http://www.lowerys.com/scribbles/site/location.html

    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.

    Thanks,

    Mike

  20. #20
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    HI,

    You seem to be making progress

    You could try something like this for the balloon.

    Code:
    
    .ballon {
        bottom: 0;
        left: 0;
        margin:0;
        min-height: 0;
        position: fixed;
        right: 20px;
        top: 0;
    }
    .ballon img {
        display: block;
        height: 100%;
        max-width: 100%;
        float:right;
    }
    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.

    Code:
    <!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>

  21. #21
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    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?

    You should be using media queries to deliver a simpler menu for mobiles. Change it to a one column layout instead of two for mobile and that will give more room for the prices. You can set larger font-sizes also if needed but you will need to set the viewport meta tag accordingly so that mobile doesn't scale.

  22. #22
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul,

    Things seem to be coming together, still having a few issues with the ballon and other images. When the browser is wide the images show up in the middle of the browser so it conflicts with the text alot, how can I make them be flush to the right?

    I don't have much knowledge in media queries just a bit how would I tackle this to hide the images on a mobile and make the menu just one column.

    Thanks,

    Mike

  23. #23
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've moved the site as well to different server and begin implementing Wordpress now I have a little bit of an annoying vertical scroll, how can I get rid of this? Then need to fix the images so they flush right on wider monitors as well.

    Then if I can get some help with media queries for the menu and how to remove the images think everything will be almost there. I'm going to begin implementing the navigation too, may need some help there to get it looking how does on the PDF.

    I've got the navigation in there think I need it to stick out first instead of being hidden with the little menu thing on the bottom to click to hide it. I still need to do the links but just want to get the functioning of it correct first, but so far looking good.

    But on some of the pages with the navigation when it slides back in it leaves a bunch of black lines, well in Chrome it does for the location and catering page.

    Heres is new links I don't have menu page up on here yet still have to prep that for Wordpress...

    http://modocom.ca/scribbles/
    http://modocom.ca/scribbles/catering
    http://modocom.ca/scribbles/location

    Thanks,

    Mike

  24. #24
    SitePoint Guru
    Join Date
    Aug 2009
    Posts
    641
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    I've been making some good progress with the navigation I believe. But I think I did my list in it incorreclty I tried to display: block and only the word would still be a live link not the whole li so I had to put the anchor infront of the li which I know is incorrect but how can I solve that issue. Then I'd like these to be squares so when you resize the browse the li resize with itand the background image of like the house, coffee cup etc but not sure how to make that resize and need to move my text down below the background image and of course be white which I know how to make it white. Then just the menu thing to hide and show the menu. Solve those picture problems to move to the right and then tackle the mobile last.


    *EDIT - I fixed the images so they are flush right now.

    So just the navigation and then got to do that menu page as well and mobile stuff, woot woot I see an end in sight.

    Thanks,

    Mike

  25. #25
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,367
    Mentioned
    180 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by mbond5 View Post
    I've been making some good progress with the navigation I believe. But I think I did my list in it incorreclty I tried to display: block and only the word would still be a live link not the whole li so I had to put the anchor infront of the li which I know is incorrect but how can I solve that issue.
    You need to put the anchors back inside the list items and instead of styling the list element you style the anchor instead.

    Code:
    .navbar li a {
        display: block;
        font-size: 12px;
        font-weight: 700;
        line-height: 80px;
        margin: 0;
        min-height: 100px;
        padding: 0;
        text-align: center;
        text-transform: uppercase;
        width: 100%;
    }
    So just the navigation and then got to do that menu page as well and mobile stuff, woot woot I see an end in sight.
    The mobile techniques you need are provided in the link I gave above.

    Basically you either make the default styling of the page suitable for mobile only and then use media queries to enhance the display for wider viewports (the preferred method), or you just add media queries now for the smaller devices (easier option as you have already styled for the desktop).

    A media query (or queries -that are targettedt at specific screen widths) is placed after the rules that it needs to modify and then changes the property/values of elements to make a different display. e.g. where you have two floated columns you would set them to float:none so that they line up under each other and maybe change their width to be 100% wide rather than a fixed or percentage width.

    You can also do things like setting images to display:none, removed fixed positioning and simplify navigation. It may be that you have to change things around to allow this to happen or add some extra elements into the mix to allow it all to happen. It's not a simple fix but something that you must build into the logic.

    But on some of the pages with the navigation when it slides back in it leaves a bunch of black lines, well in Chrome it does for the location and catering page.
    I didn't notice any black lines in Chrome so you may have fixed this but I have seen that happen on sites before and the fix was to add the folowing to the rule:

    Code:
    -webkit-transform: translate3d(0,0,0);
    -webkit-backface-visibility: hidden;


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •