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

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.

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.

There’s no rules :slight_smile:

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/an-introduction-to-meta-viewport-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.


<meta name="viewport" content="width=device-width">

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?

Yes, if you’re using that viewport meta tag you can resize the browser window to 320×480 and see how it would look on an iPhone.

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

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.

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.

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.

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.

Thanks for your help.