SitePoint Sponsor

User Tag List

Results 1 to 11 of 11
  1. #1
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Is CSS liquid layout ok for mobile devices?

    Hi, I'm wondering if a 2 or 3 column liquid css layout would be good for mobile devices, smartphones etc,
    as well as laptops and desktops?

    Thank you

  2. #2
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    There's no rules.
    I don't think it's wise to port an existing 3 column layout designed for desktop straight to a mobile display.

    With @media queries you can display different layouts for each media you are targeting, that seems like a good approach to me.
    Just represent your content in the best way you can in the available space.

  3. #3
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    But with media queries, would it be necessary to make a separate style sheet especially for mobile devices?

    Or would it be like making 2 versions of the website, one for normal laptops /desktops, and the other for mobiles?

    On the other hand, I see that a simple liquid layout is quite easily viewed no matter how I resize my laptop screen.

    But would that mean the site would also adapt to the "resized" smartphone screen for example? Would the main disadvantage

    be having to use a lot of vertical scrolling? Thank you.

  4. #4
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    There's no rules

    http://colly.com/ is a classic example to show what I'm referring to.
    It's not having two versions of the site or stylesheet. It's only a handful of other styles in addition to the default which can override certain features to make it display better on a small screen.

    But would that mean the site would also adapt to the "resized" smartphone screen for example?
    You'd need to test it at the resolutions you're targeting.
    http://dev.opera.com/articles/view/a...-and-viewport/ explains another important feature that prevents the zooming which was only introduced so that sites that weren't optimised for mobile would still be accessible.
    If you're going to the effort of optimising for a mobile device you probably want to enable this.
    Code:
    <meta name="viewport" content="width=device-width">

  5. #5
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    ok, at the moment I'm playing around with a 3 col liquid layout. It displays ok on my laptop , no matter how I resize (make narrow) the
    screen. I don't have a smartphone or other small screen devices to test it, but my question is, would a smartphone screen
    be more or less the equivalent of resizing my laptop screen to roughly that of a smartphone size? In other words, can I get a laptop
    screen to simulate a mobile device screen? Your link http://colly.com/ gets a score of 96% in W3C mobileOK Checker. My liquid layout
    gets 46%... Is it possible be fully mobile friendly and pass strict validation?

  6. #6
    padawan silver trophybronze trophy markbrown4's Avatar
    Join Date
    Jul 2006
    Location
    Victoria, Australia
    Posts
    4,108
    Mentioned
    28 Post(s)
    Tagged
    2 Thread(s)
    Yes, if you're using that viewport meta tag you can resize the browser window to 320480 and see how it would look on an iPhone.

    I have those dimensions saved in the Web developer toolbar > Resize feature in Firefox.

  7. #7
    Community Advisor silver trophybronze trophy
    dresden_phoenix's Avatar
    Join Date
    Jun 2008
    Location
    Madison, WI
    Posts
    2,802
    Mentioned
    34 Post(s)
    Tagged
    2 Thread(s)
    Hi, I'm wondering if a 2 or 3 column liquid css layout would be good for mobile devices, smartphones etc,
    This is really a concept problem. CSS can be used for evil or for good, even if you KNOW how to make bullet proof layouts out of perfectly semantic code. chances are, if you coded your page right, it will display just fine in most mobile devices as is, however that doesn't mean its GOOD.

    You are trying to fit 3 columns of info (at least two of them might be fixed pixel width) in a device that may be 360-480 px wide... on average. That is slightly larger than the average sidebar width. What I am trying to say is that COLUMNS are a bad idea for cellphones and even some tablets. It is best to have a "alternate" possible layout for small screens. DON'T ATTEMPT TO CREATE COLUMNS!!!.


    Best practice is a scrollable single column in this order
    LOGO/NAVIGATION
    MAIN CONTENT
    SEC. CONTENT
    FOOTER

    or

    LOGO/click for nav
    MAIN CONTENT
    SEC. CONTENT
    NAVIGATION
    FOOTER


    You can ( and probably should) rely on media queries as mentioned above. Any mobile device that supports css most likely supports MQs. It's also easier to design for small screen first, and the ADD code if the MQ is false.

    You COULD ALSO do it the old fashioned way. Assuming your sidebars are fixed px width. You could attempt order your source code in a way that and make the sidebars wide enough so that they drop in predictable order at 360 or 480px width using width:100% min-width/max width.

    example:

    #header,#footer {width:100%} (keep in mind #header shouldn't be so tall that it takes up the whole screen )
    /* Do not float the main content!!*/
    .sidebar {float: (as needed); width:100%; max-width:480px;*/you can play around with the max-min and % width depending on the desired effect*/

    The theory here is that on mobile phones header will be displayed first, the floated sidebar will be too wide to be displayed side, so they will drop below each other and fill the screen ,on larger mobile devices they might present themselves side by side, on full screen the with will essentially = the max-width. since the main content is not floated the columns will appear on the sides when there is space for all 3.

    This is , of course, just a general guideline but I hope it gives some idea off what to try.

  8. #8
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    IF you code your columns correctly, you can use media queries (with a tiny scripting fallback) to strip the columns from your screen layout. That's the ideal... Semi-fluid is a great way to support large and small desktop/notebook screens, but it usually falls apart at anything smaller than 800 wide... which is why you just strip the columns out completely and make it a single column in-order layout when it gets that small.

    Though we'd have to see what it is you are working on to weigh in on the best approach to go about it.

  9. #9
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    I'm playing around with a 1-column liquid layout and so far I have got to 82% in the w3c mobile ok test. I checked the iPhone screen size in Firefox (320 x 480), and it looks fine.But I'd like to improve it. This is the test page (as of now): www.profesornativo(dot)com/newww.htm. Thanks for the help.

  10. #10
    Non-Member bronze trophy
    Join Date
    Nov 2009
    Location
    Keene, NH
    Posts
    3,760
    Mentioned
    23 Post(s)
    Tagged
    0 Thread(s)
    Ok, you're shooting yourself in the foot with outdated markup methodologies and to be frank, code that just doesn't make any sense... much less that using things like media queries is very hard to do when you inline your CSS in the code.

    WHY do you have H3 with no H1 or H2? Why are your content fonts all in absurdly undersized px fonts (accessibility-wise further exacerbated by the use of serif fonts)... the XML prolog making cross-browser consistency near impossible since it puts IE into quirks mode... and just the plain code bloat in that table with attributes like STYLE and ALIGN that have little to no business in the HTML.

    You really should be starting out with clean semantic markup of your content using the same HTML for all your different layouts -- what you have right now is a nonsensical blur of code with broken/nonsensical headings, incorrect usage of many tags, and hordes of unneccessary/outdated code... to the point I still can't figure out what it is you're even trying to do here.

    Is the home page of that domain the layout you are working with for non-small screen devices? If so it's just as problematic from a code and accessibility standpoint as your newww.html file is. H4 for no reason, unneccessary div, lists in non-list elements and tables around lists, improper form structures...

    In both cases my advice would be to throw it away and start over... I suspect when it comes to your heading tags you are choosing them based on their default appearance instead of their structural meaning -- and as I always say if you choose a tag based on it's default appearance, you're choosing the wrong tags.

  11. #11
    SitePoint Addict
    Join Date
    Apr 2003
    Location
    spain
    Posts
    283
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks for your help.


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
  •