SitePoint Sponsor

User Tag List

Results 1 to 18 of 18
  1. #1
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    First attempt at a responsive design

    Hello

    I want my site www.samtaleterapi.com to be responsive

    I have uploaded my first attempt to www.samtaleterapi.com/debug

    What is the current wisdom on:

    1. whole designs based on position: absolute (on tablet.css and mobile.css)?
    2. javascript dependent navigation (on mobile.css)?

    Any other considerations would be much appreciated as well

    Thanks
    Rasmus

  2. #2
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by samtaleterapi View Post
    whole designs based on position: absolute (on tablet.css and mobile.css)?
    I avoid absolute positioning for layout like the plague. It's just not flexible enough. If you ever decide to have a footer, for example, you'll be in a world of pain, as the natural flow of elements is disabled with absolute positioning of elements. I also suspect that it's unpredictable and hard to work with on small screen devices, too.

    javascript dependent navigation (on mobile.css)?

    It seems less likely that people have JS turned off on mobile devices, but still, at least make sure there's a fallback for when it is disabled or not available. It's just adding another layer of complexity and opportunities for the layout to fail.

  3. #3
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I have uploaded my first attempt to www.samtaleterapi.com/debug
    If you are looking for a review then you need to post in the review forum after reading the guidelines there.

    Regarding the questions you posted then I agree with Ralph and absolute positioning for whole layout is not a good idea. It's fine for small controlled areas within a layout but generally not the main structure.

    Your layout looks to be floated anyway or was your question not about your own layout?

  4. #4
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    Your layout looks to be floated anyway
    Absolute positioning kicks in as the browser narrows.

    Off Topic:

    Quote Originally Posted by Paul O'B View Post
    absolute positioning for whole layouts is not a god idea.
    No need to bring religion into the debate, although I agree with you, all the same.

  5. #5
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Quote Originally Posted by ralph.m View Post
    Absolute positioning kicks in as the browser narrows.

    Off Topic:



    No need to bring religion into the debate, although I agree with you, all the same.
    lol - I should employ a proof-reader.

  6. #6
    SitePoint Enthusiast
    Join Date
    Sep 2013
    Posts
    34
    Mentioned
    1 Post(s)
    Tagged
    0 Thread(s)
    You should first look at skeleton css framework and several tutorials to learn more. Also always make sure your website resize to browser size.

  7. #7
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    absolute positioning for whole layout is not a good idea
    Hi

    The allmedia.css layout is floated, the tablet.css is completely absolute and the mobilejavasafe.css is continuous with selected absolutely postioned elements

    I hear what you are saying, but I dont understand why a absolutely positioned layot isnt logical and browser safe
    It does what I want (on tablet.css): a fixed width navigation and a content column that adapts to varying viewport sizes

    Can you explain what the problems are?

    Thanks
    Rasmus

  8. #8
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by samtaleterapi View Post
    I dont understand why a absolutely positioned layot isnt logical and browser safe
    I gave you a clue in post #2:

    If you ever decide to have a footer, for example, you'll be in a world of pain, as the natural flow of elements is disabled with absolute positioning of elements. I also suspect that it's unpredictable and hard to work with on small screen devices, too.

  9. #9
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Suppose I dont need a footer
    How could it be unpredictable and hard to work with? I use absolute positioning for a medium size viewport, so there is enough room (as I use a different layout for smaller viewports)
    Are you talking about absolute positioning in generel or the way I propose to use it?

    Thank you very much
    Rasmus

  10. #10
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by samtaleterapi View Post
    Are you talking about absolute positioning in generel or the way I propose to use it?
    In general—because it's rarely a good way to lay out a page. It's inflexible and has unpredictable results on various devices.

  11. #11
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    OK thanks
    Unpredictable results are certainly undesirable

    Will search for different solution to my wish
    Cheers
    Rasmus

  12. #12
    It's all Geek to me silver trophybronze trophy
    ralph.m's Avatar
    Join Date
    Mar 2009
    Location
    Melbourne, AU
    Posts
    24,176
    Mentioned
    454 Post(s)
    Tagged
    8 Thread(s)
    Quote Originally Posted by samtaleterapi View Post
    Will search for different solution to my wish
    The standard layout means currently is to float page items side by side on larger screens and remove the float on narrow screens and set elements to width: 100% (or thereabouts) on smaller screens. This is done nicely with media queries.

  13. #13
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    Hi,
    I dont understand why a absolutely positioned layout isnt logical and browser safe
    One of the most important aspects of web design (regardless of device) is to maintain the flow of the document.

    In simple terms that means that one element can follow the next and you don't have to do anything special to make that happen. If you want another paragraph you just add the text and there it is under the paragraph above. If you then want to remove the first paragraph you just delete it and the content underneath just rises up into position all on its own. If you narrow the browser window all paragraphs flow together and push down the page without overlapping.

    Now imagine you are absolutely placing those paragraphs. If you want to place a second paragraph you have to absolutely place it below the other one at an exact height or it will overlap. However if the content changes, the text is resized, or the window narrowed then the content overlaps because all elements are removed from the flow and do not care about anything else.

    If you remove one of the absolute paragraphs you leave a hole in the page and the other content does not fill the space. If you want to add more paragraphs you have to position them at the bottom but you don't actually know where the bottom is.

    As you can see its a nightmare to manage at every stage unless you have the simplest layout. A 2 column absolute layout is not that bad and can be maintained but you can never have a footer or put content at below both columns. In this case it would just make sense to float them (or use display:table-cell for ie8+ if needed) and avoid the issue altogether.

    Floats, although removed from the flow , can be cleared and thus thus flow of the page is maintained. You should always take the route of least resistance and when you code with the flow of the page then in most cases you don;t need to do anything special as content takes care of itself. Just a few margins and tweaks and everything falls into position.

    That doesn't mean avoid absolute positioning as you can use it in controlled situations to good effect. e.g. within a fixed height container such as a header banner you could absolutely place a logo in the top corner easier than floating especially if you want it on top of something else.

    There are always special cases but in the main you want to keep everything in the flow of the document (one element follows another naturally).

  14. #14
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    so would the following be safe and maintainable (simplified version) - or does it depend too much on absolute positioning?

    tablet.css
    * margin: 0; padding: 0;
    body font-size: 13px;
    #header height: 100px;
    #headertext
    #mobileface display: none;
    #tabletface position: absolute; top:0; right: 0;
    #outer
    #navigation position: absolute; top: 100px; left: 0; width: 200px;
    #content padding: 20px 20px 20px 220px

    mobile.css
    * margin: 0; padding: 0;
    body font-size: 13px;
    #header height: 100px;
    #headertext display: none;
    #mobileface position: relative; float: right;
    #tabletface display: none;
    #clear clear: both;
    #outer
    #navigation (hidden with javascript - but visible if javascript is turned off; click to show; click to hide again)
    #content
    #menu position: absolute; top: 0; left: 0; height: 100%;

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <link rel="stylesheet" media="screen and (min-width: 527px) and (max-width: 769px)" href="sheets/tablet.css" type="text/css" />
    <link rel="stylesheet" media="screen and (max-width: 526px)" href="sheets/mobile.css" type="text/css" />
    <!--[if lt IE 9]>
    <link rel="stylesheet" type="text/css" href="sheets/allmedia.css" />
    <![endif]-->

    <body onLoad="P7_swapClass(1,'navigation','showIt','hideIt','div')">
    <div id="outer">
    <div id="header">
    <div id="headertext"></div>
    <div id="mobileface"></div>
    <div id="clear"></div>
    </div><!--header-->
    <div id="tabletface"></div>
    <div id="navigation" class="showIt"></div><!--navigation-->
    <div id="content"></div><!-- content -->
    <div id="clear"></div><!--clear-->
    <div id="menu" onClick="P7_swapClass(1,'right','showIt','hideIt','div')"><a href="javascript:;"><img /></a></div>
    </div><!--outer-->
    </body>

    thanks
    rasmus

    ps there is one thing that doesnt work proporly: when i open the site on a mobile portrait and tilts it to landscape the text size increases until i refresh the page - can that be fixed?

  15. #15
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    It's hard to tell without all the content but as you are switching the menu from bottom to top then you will need to absolute place it when you want it at the top but of course you will need to preserve the space for it. I assume the menu is a fixed height so you should be ok.

    The columns should be ok as long as you don't need a footer.

    Regarding the text-size in landscape you could try this which is present in bootstrap and boilerplate.

    Code:
    body{ -webkit-text-size-adjust:100%; -ms-text-size-adjust:100%} 
    /* Prevent Webkit and Windows Mobile platforms from changing default font sizes, while not breaking desktop design. */

  16. #16
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Well the webkit/ms fix works great

    The content is all there on www.samtaleterapi.com/debug

    I forgot to mention that the #menu div is not displayed on tablet.css
    I dont understand what you say about switching the menu from the bottom to the top
    On tablet.css the #navigation div is always visible (the javascript isnt active, and the #menu div is hidden), and on mobile.css the #menu div is just the button that shows and hides the #navigation div
    On mobile.css the #navigation div isnt absolute or relative/floated but - what is it called? - continuous(?)

    Im very grateful that you (plural) are taking an interest
    Would you judge the layout to be workable?
    Or is it just not good idea?
    Rasmus

  17. #17
    SitePoint Enthusiast
    Join Date
    Oct 2007
    Posts
    42
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Quote Originally Posted by Paul O'B View Post
    switching the menu from bottom to top then you will need to absolute place it when you want it at the top but of course you will need to preserve the space for it
    oh now i get it
    yes that is what i do with both layouts
    i use padding on the left to clear a space and then absolute place something in that area
    on tablet.css its the whole #navigation div that is placed absolutely (below #header on the left of #content)
    on mobile.css its the #menu div {width: 35px; height: 100%;} (on the left of #header, #navigation and #content)

    sorry to not be able to clarify that from the beginning
    thanks
    rasmus

  18. #18
    The CSS Clinic is open silver trophybronze trophy
    Paul O'B's Avatar
    Join Date
    Jan 2003
    Location
    Hampshire UK
    Posts
    40,355
    Mentioned
    179 Post(s)
    Tagged
    6 Thread(s)
    I think now that you understand the implications and limitations you will be fine and the layout should suffice.

    The beauty and problem with CSS is that there is always more than one way to do something and the method you use usually depends on what happens next


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
  •