My designer keeps throwing out the term "liquid" layout. What does this mean?
Thanks for the clarification, I have always just called this a percentage layout, and thought he was saying that the pieces could be moved around, and that was liquid
A "liquid" layout is a site layout that expands to fill the entire available area as the browser window is resized. Typically this is done using CSS. Liquid layouts can be quite helpful for certain types of sites, but they also tend to be significantly more effort than fixed width layouts, and their usefulness depends on the site content and how well implemented they are.
From http://www.maxdesign.com.au/presentation/liquid/ :
All containers on the page have their
widths defined in percents - meaning
that they are completely based on the
viewport rather than the initial
containing block. A liquid layout will
move in and out when you resize your
browser window.
Basically, it's a layout of a web page that doesn't rely on a specific width specifications for elements in the page.
See the discussion over at Wikipedia.
It means a layout which adjusts dynamically to the browser (or whatever client) width and height, to make efficient use of all available screen space, as opposed to (mostly) fixed width layouts which are made to fit a common denominator resolution at that particular time (e.g. 800x600 used to be the norm for websites for many years).
See this:
http://www.time-tripper.com/uipatterns/Liquid_Layout
Liquid Layouts refer to the design concept of a website. A liquid layout will move in and out when you resize your browser window, due to is having percentages and relative widths in the CSS.
It just means that it will contract/expand to fill the browser's window size (usually the width), up to a certain point if things are done well. Otherwise text can get quite hard to read on big (24"+) monitors.
One of two:
The design will scale to the width of the browser (as in, if the browser was 1024px wide, the design will be as well)... although this does get quite fun when designing for 100px wide browsers (sometime designers will actually set a min-width though).
The design has a fixed width, but is set in a measurement using a relative size... for example "em"... so as the font size is increased, the width of the page increases.
A liquid layout is a method of CSS layout that defines all widths in percentages, so the areas of the page will grow/shrink when the viewport (browser window) is resized.
They're very useful if trying to create a site that will fit both large and small screens. They're a little more difficult to work it than fixed layouts, because you're relinquishing some level control over how everything fits in the page, and you have to pay very close attention to your content, to make sure it doesn't fall apart aesthetically on resize.
I would say liquid layouts are most useful for text heavy sites with a fairly basic column layout. You might also find a happy medium with an 'elastic' layout -- one that has both liquid and fixed areas.
In a true Liquid layout, your content expands and contracts to fit your user's browser window in a meaningful, calculated and intelligent way. So it's more than just setting your column and container widths to percentages.
Done well, this can result in a increase of perceived quality. Done poorly, it's a usability nightmare.
Going Liquid is a huge pain the rump. The pain is worth it though if the topic/client/product(s) you are building the site for have a strong visual quality to them (think summer blockbuster film site), require a certain fit and finish, or if it needs to display large chunks of data.
Note: I'll update this a bit later with links to good examples and citations for my claims
Related
I see that a lot of fluid websites use a min-width and max-width property on their web pages designed mainly for desktop. When the browser width is less than min-width, content stops shrinking and the user has to scroll horizontally. I can relate to the rationele behind it. As far as I understand, it basically means that the content is designed so that shrinking its width past this point will make it unusable. It is acceptable, because that page is designed with a minimum width in mind.
But I cannot fully understand the use of max-width property on the main content. These websites usually limit the growth of the content container and center it. Why not let it fill the screen since you are already using percentages instead of pixel values? Web sites like Outlook or Gmail fill the screen whereas a lot like Amazon choose to limit the width and center the content.
It's nothing more than a design decision. Or maybe they were not implemented to support such wide viewports that could make the site to look broken.
In terms of user experience, it can be hard to read text when the lines are too wide so making shorter, leaner paragraphs make sense.
I was wondering what are you opinions about when coding css, when/why coding fixed or liquid style sheets?
I agree that fixed size style sheets are easier/faster to code because liquid requires more time in order to have all elements well adapting to their parents.
So, when do you chose liquid over fixed (or vice versa)? Why?
Update 2 I think the best practice now is design a site with responsive and adaptive capabilities for any screen size. Liquid CSS may not have the pitfalls that you would think such as long lines of text (instead the block of text position adjusts on-the-fly) - examples of Responsive Design - browser-side code where pages adapt to any screensize:
http://surrey.ac.uk/
http://bostonglobe.com/
http://thoughtfulweb.co.uk/
Adaptive design: server hosting the site detects browser type that requested the page and serves up appropriate page layouts e.g. mobile. This has pitfalls in that the user agent identifiers aren't always precise - e.g. many browsers include the mozilla string in their id, for example, so it might not always be best to rely on this data.
Previous answer
Liquid layouts (layouts that horizontally shrink or stretch to fit the horizontal width of a window)
Advantages: the content reformats on the fly to fully utilise the
Window width. Which means that the dilemma of choosing the most
popular fixed width e.g. 940px, 960px or 978px is not required. This
is particularly useful for small screen handheld devices which vary
slightly. You have to do less work in considering all possible screen
sizes.
Disadvantages: For the reason that the site will shrink or stretch to
fit horizontally, you cannot control the layout as much as fixed
width. Aesthetics and how nice the site looks will be less under your
control. You may find that my point about having to do less work to support all screen widths is not true after all - as here you are considering scenarios where the screen is really small and your menu navigation is all bunched up and ugly or too far apart on a large screen
Fixed layouts (layouts that are fixed and don't change to fit the available horizontal width).
Advantages: Once you have settled on the most popular width e.g. 940px, 960px etc. you would not need to test the site at different screen widths. The layout is neat and things don't move around, aesthetics, how nice things look remains constant
Disadvantages: Some users with small screens, handhelds may need to scroll horizontally to view your site if your fixed width is larger. Unless you also support a mobile edition too that those users can use
Have a look around at major sites - what are they using. To me it seems fixed widths are more popular, including stackoverflow.com
That said, look at this fluid site: http://derekallard.com/
Here, the developer uses fluid layouts to advantage by using layers of graphics that slide over each other as the site width adjusted in your window.
update: There is no wrong or right answer. Both Have merits. Media folk who have come from television, film and newspaper into web may tend to favour fix widths owing to their familiarity with those media having that.
It's not a matter of technique, it's a matter of decision making.
You choose liquid if you (or the client) WANT liquid.
I myself do NOT WANT liquid. Why? With a very wide window you get very long copy text lines, which are hard to read.
OK there are some other parts you must consider. Is your page intended to be accessible? Then you have to make a sort of liquid layout for the ones which zoom the page.
You could also look for responsive web design. The one that works in mobile browsers, too.
http://www.alistapart.com/articles/responsive-web-design/
When left with a choice, I rarely use liquid layout in anything except business style web apps.
I.e. for apps where the customer insists on lots of horizontal information in e.g. tables, I'll go with a liquid layout for obvious reasons. For more standard websites, I'll stick with fixed if at all possible.
When I do go liquid for the latter, I'll mostly still enforce a max-width on copy text, because I'm not particularly politically correct, and making the site a joy to read for 99% of visitors is more important to me than making it a (relative) breeze to use for a few - as long as I keep it accessible to those few. Like yunzen says, line length of copy text is very important to both design and readability. Don't let those lines stretch to infinity...
Mostly, my fixed layout sites will have different ways of accomodating the smaller screen size rather than just simple liquid stretching - moving side bars and such beneath the text, and possibly adjusting the copy text width to fit the device viewport. Sometimes, but not always, that requires css media queries.
(see e.g. http://www.quirksmode.org/mobile/viewports2.html)
Usually fixed layouts are easier to design and develop, also visitors are used to this kind of layout.
Fluid layouts need more planning and also do not fit in all kinds of web application. I do not use the fluid approach very often.
This question already has answers here:
Closed 11 years ago.
Possible Duplicate:
what is the difference px,em and ex?
I have a question for all the coding geniuses on StackOverflow.
I am a newbie, and I am about to start building my third website. Being that I had some problems with the layouts of my first two websites, I am asking this question before I start on my third:
What measurement is it best to use for
the css elements? Percents,EM's or Px?
Which form of measurement will ensure that I have a site that will not get distorted on different browser sizes/resolutions? Is there anything else that I have to be careful of when building my site so that it will not get distorted when a user zooms, or looks at the site from a different browser size/ resolution? (as was he case on my other sites)
Thanks for your time, guys. Any help would be greatly appreciated!!
Thank you.
Whichever is easier for you to work with.
Modern browsers (i.e. everything in use today except for IE6 and IE7) have a concept of "CSS pixels" which is different from "actual pixels," so e.g. zooming changes the size of a "CSS pixel." Fonts will scale just fine; if you say the font is 14px, it will start out that way, but if the user zooms it'll get bigger. Thus, if it's easy for you to measure in pixels, for example to size page elements relative to an image of a given pixel size, you should do pixels.
Sometimes you want to size things relative to text, though. If the width of an em-dash is a useful measurement, somewhat representing the "longest possible character," go ahead and use ems.
And finally, if you're trying for a fluid layout, percentages can be great: a gradient that starts fading 50% across the page is often what you want, as opposed to one that starts fading after some fit number of pixels. Even if you're not fluid, and the width of your container is fixed to e.g. 900px, it's still often useful to say "this goes at the 50% mark" or "I have one thing at the 33% mark and one at the 66% mark." That's much easier to work with than figuring out what the corresponding pixel offset is every time, and makes your intent clearer to anyone reading your code.
Short answer: it depends.
Longer answer:
There is a place for all three units, frequently in the same design. There is no "best" unit; they serve different purposes.
Pixel units generally offer the most precise control over the size of the elements in the user interface, but also restrict that size such that it does not change with regard to the other elements of the page design. The size of pixels themselves may change. For example, a Retina display packs more pixels into the same physical space as a non-Retina display, so images which were designed for traditional displays get scaled up. Similarly, traditional desktop web browsers may adjust the size of pixel in response to the user zooming the size of a page. In these cases however, the pixels change sizes throughout the entire document, and retain the same proportions with regard to one another, so you can use px values and expect them to work sanely in most conditions.
EM units vary according to the size of the text. They're most commonly used for setting the size of text, and for line heights; but there have been some interesting things done with "elastic" layouts such as the elastic lawn zen garden (turn off page zoom for this site; switch to text-only zoom and change the size a few times).
Percentages vary according to the size of the containing element, expanding and contracting depending on how much room is available to them.
And, really, it's very common to see web designs that use all of these. For example, suppose you have a site with two columns. The main column must expand and contract with the browser width, but the secondary column needs to stay the same width. The main column might have a width of 100%, but also a margin set in pixels for the secondary column to float in. And the text and line height might be set in ems.
So, the real answer is: they all have their uses. Keep practicing, and pretty soon you'll figure out how it all fits together.
EDIT: In the example above, I should have said "a width of auto" -- meaning take up all available space after margins, padding, and borders are accounted for. Sorry, I tend to think of that as a percentage even though it's actually a keyword.
from accessability point of view need to use EM's. You need you layout to adapt to very different fonts sizes so if allmeasurements are in EM's everything will scale as accessability tools increase font size
When creating liquid layouts, it makes sense to use percentages for the widths of your blocks, so they shrink and grow with browser size changes.
For heights, pts have a specific spatial value, and em are related to your current point size. This is useful because things specified in those units will be roughly the same size on everyone's display (unless they have different zoom factors applied). em are also useful when working with a dimension driven by an amount of text.
Browsers will also scale values specified in pixels, so they are not any more a "trap", but they are rarely the "natural" choice for layouts, unless working with raster images.
As Will and Domenic say: use all three, when appropriate. As you get more experience, you'll get a better feel for when to use which.
If you want to design a fixed layout website then use px or em.
If you want to design a fluid layout website then use percentages.
Percentage is always relative so page content with dimensions in percentage will automatically resize on window resize and on different screen resolutions.
px and em are one and the same thing. Same in their nature. They define the absoluteness of the dimensions. Btw for the difference, 1em=current font size. So if your html or body has css font-size:19px; then 1em=19px.
When creating a web-site design, is the only real option to provide a fixed content width?
I notice most major websites (this one included) center all the content into a fixed width, which ensures all elements look correct on all screen sizes.
I think I already know the answer to this, but a colleague seems to think that there should never be a horizontal scrollbar and a website should resize to the users screen width. I make the argument that text can resize but other elements can’t (buttons, textboxes etc), so a fixed width is the only option.
I'd love your opinions each way.
Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?
You can get clever with floats/media queries to make layouts work well at narrower widths.
But it is indeed more common to go with a fixed width:
It’s easier to design
Not many people have narrow monitors these days — most websites seem to assume they’ve got 1000 pixels of horizontal space to work with, and I haven’t heard of them getting many complaints
Touch-based OSs (iOS, Android et. al) make zooming web pages feel very natural, so pixel dimensions aren't quite as important there.
When lines of content get too wide (I think more than around 60 words?), they get difficult to read, so there’s not much advantage to be gained from having elements expand to full width for users who have bigger browser windows.
I think the most likely group of users to have less horizontal space available is smartphone users, and you’re going to want a specific design for them if you care that much about their experience.
Oh, just one thing though: “Surely fixed width is the only way you can guarantee the correct layout on ALL browsers?” With the greatest possible respect, that’s a bit of a programmer’s way to think about it. You can’t guarantee anything about web page rendering. Browsers and operating systems can do whatever they want. That’s the web. Let it go.
Dynamic-width web-sites are generally composed of one or many percentage-width blocks which make 100% total. So blocks size change with resolution or browser resizing, but if total width is too short it can occure lisibility problems, so a minimal width is specified for <body>, in which case a horizontal scrollbar appears.
But you can think differently : http://www.smashingmagazine.com/2008/08/14/will-horizontal-layouts-return/.
I tend to make my websites have a minimum width for legibility, but otherwise the width is determined as a percentage of the window size (I normally pick 80%).
I find this gives me ample coverage of the viewport, whilst still looking good on larger monitors.
I find this approach fails on larger screens when there is little content, as the content tends to get stretched into a line at the top of the page, which can make things confusing. So for those pages it can be good to have a fixed width, centred style.
No. A thousand times no.
If your website presents any kind of body text, fixed width is an abomination from the depths of the mid-90s, forcing readers to scroll like crazy, while being mocked by vast expanses of unused screen space to either size. (Now, a variable number of columns I might buy.)
BTW: flag for CW.
Horizontal scrollbars are a big problem. A properly designed website should be able to scale down to be used on small resolution screens (640x480). Also, it's nice to have to have my browser window maximized just to browse a site. Also, there's no reason why a person with a high resolution monitor shouldn't be able to use the extra space their monitor gives them.
Google Labs Browser Size
I've always preferred fixed-width layouts over fluid-width layouts, one of the main reasons is that I'm able to better understand how the whole picture will be without having to worry about the screen resolution.
But now the "picture" has changed, there is a high discrepancy between the lowest and highest resolutions used by most users nowadays and they seem to be here to stay.
I've a netbook that only supports 800 pixels or 1024 pixels wide; I also have a 22" monitor that supports 1650 pixels and, 24" monitors that support 1920 pixels and more are becoming pretty common.
I've pretty much "ignored" the 800 pixels users for some time and I've been developing with fixed 950/960 pixels wide, I also notice that popular sites (SO for one) either use this approach or the fluid one.
For text (almost) only websites (like Wikipedia) I don't see a problem using the fluid system but what about all the other websites that depend on images / video to create interesting content? Social Networks, Classifieds, and so on... What is (will be) their approach to address this issue?
Seam Carving seems like a good option for the near future but it hasn't matured enough (neither browsers nor jQuery nativelly support it at this point in time), I also feel like users wouldn't understand it, get confused with it and as a consequence abandon the website.
The de facto standard on the web is still 1024 pixels wide, and leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong. So what are our options?
I would love to hear what you think about this and your experiences with both fluid and fixed systems.
PS: Popular websites using either one of these systems are also welcome, I'm specially interested in seeing non-text websites that use the fluid system.
EDIT: I just saw this answer and I got kinda confused about the difference between fluid and liquid layouts, aren't they supposed to be exactly the same?
I generally think that fluid layouts are a good idea. The problem starts when your fluid layout starts to get really wide with high resolution screens - there is a limit to how far the human eye can track horizontally without losing the vertical positioning. That is why newspaper columns, for example, are always rather narrow.
Try to look at wikipedia in a high resolution screen, and you'll see that they limit the maximum width to something around 800-900px - more then that (assuming a rather standard 12pt font) and people stop being able to read until the end of the line and then effortlessly find the start of the next line, and the whole thing breaks into a mess of eye and neck strain.
On web sites I build, I use max-width to limit the maximum width of the text content (and in that I also include images and other stuff) to about 720-800px, which with sidebars and such can possibly get to around 1000px. If the screen is wider then that, then either center the content of left align it (right align on RTL web sites) - both work well.
But you have to design your layout so that it flows when the available width is narrower - this is very useful for people with netbooks (which are rather popular now and I expect will become more popular in the future), smart phones and even small screen mobile devices. Such mobile devices more and more feature standard browsers and you should address this in your designs - even if a mobile browsers can reduce your website somehow, the "mobile mode" usually does this by messing up the page and killing your intended user-experience.
leaving 980 pixels unused in a 24" monitor just seems plain odd not to say wrong
I’d disagree here. If you’ve got a monitor with that high a resolution, you’re probably not running with a maximised browser window. And even if you are, are you really fussed that the content’s all in a fixed area in the middle? Really?
As long your site has a decent, useable layout, I don’t see the problem with space either side on high-res monitors.
There are ways to create different #media rules inside of a stylesheet—W3C has something on this—and although it's a big Schroedinger's Cat whether the handhelds' browsers will obey the rules, it's fairly safe to assume that, even if they don't, they have big enough and well-ratioed screens to just use a scale model of the site as it appears on desktops.
Seems to me that it was in the devices' manufacturers' best interests to make them compatible with web sites that predate the advent of such devices by 5-10 years.
And if not, it's their problem.
I approach the problem from a different angle. Have a fluid layout but give it a minimum width (rather than a maximum width). You can achieve this with CSS.
The problem with the images is not such big. What you do is the following:
Upload your image at the maximum size you expect to have.
Make the image fluid as follows:
<img src="http://example.png" style="width:32.5%">
As you resize the page the image will re-size itself at the percentage width. Just make sure that you don't have any width or height attributes in the image. I call it superlastic :)
Fluid layouts were the answer before Responsive Design support in browsers came out. No need to use fluid or elastic layouts anymore.
http://lessframework.com/
https://github.com/thatcoolguy/gridless-boilerplate
There is no right answer to this question as no two design goals are ever alike. Fluid layouts make any semblance of typographic control virtually impossible, but not all designs need or want it.
No collection of "best practices" will ever equate to an actual design education, and not all users feel compelled to blow their browser windows up to fill the entire screen, either.
Most informative discussion on layouts I have read so far is in Andy Budd's CSS Mastery book. If you get a chance, do read it. I think it's a must have book on CSS (intermediate level). It looks like the layouts chapter is available in article form here.
http://www.webreference.com/authoring/style/sheets/css_mastery2/
Another link :
http://www.smashingmagazine.com/2009/06/02/fixed-vs-fluid-vs-elastic-layout-whats-the-right-one-for-you/
Liquid and Fluid are two different names for the same technique.
HTH.
I think it's better to have a maximum width of the layout, you can change that with Javascript.
A good example of that is this layout, look what happens (in Firebug or something) with the layout if you change the width: http://tweakers.net/
They have chosen a width of 1208px and make it smaller with Javascript when the width of the browser changes. With Javascript disabled, the website is still 1208px wide, which seems not to be a problem anyway.
EDIT:
The first width of the website will be like 900px. With Javascript you will check the width of the browser and you give the a class with the closest resolution to your browser width. For example: the browser width seems to be 1100px, so you give a class 'res1024', or the browser width is 1080px, then you give a class 'res1100'.
This will be your CSS:
#wrapper {
width: 900px;
}
.res1024 #wrapper {
width: 1000px;
}
.res1100 #wrapper {
width: 1080px;
}
I hope it helps you :], you can ofcourse change a lot more with this body class, like:
.res900 #menu {
width: 100px;
}
EDIT 2:
You can handle images the same way:
.res900 img.fluid {
width: 200px;
}
.res1100 img.fluid {
width: 300px;
}