A Single Article
Read it, comment, and share it with your friendsDegradable Backgrounds for Liquid Layouts
There’s a lot of talk among designers lately about designing for viewports larger than 800 pixels wide. Every time a designer launches a site that is fixed for 1024 pixels, others say that it is a good move and proclaim, “finally, we can stop designing for 800 px!” This is not at all true, though. There are still enough users on 800 by 600 resolutions to justify designing for that resolution. Besides, even many users at 1024 px don’t always have their browser window maximized.
If a designer uses a liquid layout, however, this is not a concern. You can set up your container to max out at something close to 1024 px but shrink down to 800 px and lower. This is very flexible and ideal for anyone who wants to cater to as many users as possible, but unfortunately this is rarely done because designers want to control the exact appearance of their pages. Many designers want to specify the exact width of their site and make the backgrounds to fit that one size, essentially turning the web page into a digital canvas. While this may please the designer, it is not necessarily ideal for the user; but most designers complain that they can’t make complex designs that are liquid and therefore refuse to try.
There is a solution to this problem, and it requires a different perspective on web pages in general. One has to understand that the web is not print and that usability is more important than visual appeal. Once this is understood, we can start taking usable designs and make them more attractive (rather than starting with something purely visual and trying to work accessibility in).
So how do we make liquid layouts more attractive?
Simple. We design for the max width, but allow the design to degrade nicely for smaller widths. Case in point: foxymcloud.com (link to CSS). The container for this site has a width of 92% and a max-width of 900px.
#page { width:92%; max-width:900px; }
In designing this site, I decided to use a degradable liquid background that would look great at the preferred width (900 px) but still look good for smaller widths. What I did was make header and footer backgrounds that were 900 px wide and then position them at the center of the header and footer containers. If you look at the site in a 1024 px or larger viewport size, you wouldn’t even realize it was liquid without resizing the browser window. If the viewport gets shorter, the container gets shorter and the background image is clipped on both sides. You can try it for yourself to see the effect. The site looks great at 1024 px and up while still looking good at 800 px.
The only real problem for this method is Internet Explorer, which does not support max-width at all. For Internet Explorer I just set the width to the maximum width specified for good browsers. So Internet Explorer users see this:
#page { width:900px; }
Well, that is, Internet Explorer versions before IE 7 Beta. I’m hoping that IE 7 will support max-width. Really hoping. If it does then I am predicting a surge in creative flexible design on the web. Imagine the surprise of IE users when they find that a website can be optomized for a range of viewport widths without stretching to awful line lengths on huge viewports. But if the IE 7 team doesn’t implement max-width, well, I’ll be disappointed, and the fixed-width serving will just continue.
So that’s degradable backgrounds for liquid layouts for you. Imagine the possibilities: take your favorite fixed 800 px site and imagine how it would look stretched to 1000 px, using screen space more effectively, maybe even larger text, and still keeping its attractive appearance. Or imagine your favorite fixed 1024 px site, implemented as liquid instead of fixed, still usable at 800 px and even lower. It’s all possible when you think outside of the (fixed) box.
Get a Trackback link
1 Trackbacks/Pingbacks
Other blogs referencing this article29 Comments
Responses to my articleGood read. There’s also a simple JS patch for
min/max-widthfunctionality in IE here.Yeah, there’s actually quite a lot of JS fixes for IE, but I think I got tired of using them… I use them for clients but as for sites I run (like cssliquid.com) I don’t bother because the majority of my traffic is Firefox anyway.
i was thinking about this possibility, because i want to create “1024″ layouts without sacrifiying “800″ users, and a totally flexible design become quite awfull when resolution width > 1280.
Good article man
You’ ve a new reader.
Nice design, nice layout, mind you I hate IE 6 like the next man but I dont think we should be ignoring these users just yet, I feel the site at foxy m cloud with a bit of tweaking could be improved as it nearly works at 800px wide, perhaps some css that is IE 6 specific may be a better method and leave us firefox browsers to view the web as its meant to be.
IE7 Beta 2 does indeed support max-width and min-width. Hooray!
Thanks so much for letting me know! That’s very good news!
nice in concept, but i disagree. the layout suffering that much is not worth an extra hundred pixels. this will only work if your layout is loose/sloppy enough for it to work.
Sorry Bob, but I don’t see any suffering. What I see is a layout that is far more attractive and ten times more accessible than any fixed width layout out there, one that looks great on the majority of resolutions (1024 px and up) but also works at the common denominator (800 px). It’s not about having a layout that is “loose” or “sloppy,” it’s about having a layout that is well thought out and rocks harder than all the lame fixed layouts everyone else is serving.
It’s the difference between design and style. Style is making a simple layout and slapping a fancy image on it. Design is making a flexible, robust layout that is complex in its behavior and able to adapt to many users, and making it look great at the same time.
christian, while its kinda a cool trick and might be useful in some circumstances, I dont think its implemented very well. I guess that maybe the design (or style if you prefer) is throwing me off a bit. It looks exactly like your main site, which is not very good. I’m sure you will prolly rape or remove this post, but its just that you need to understand the market a little more before you get on your high horse claiming that it “rocks harder than lame fixed sites”.
Most real world clients will never want anything to touch anything that isnt tightly designed and looks great. i didnt say that your article is not a great trick, it is. its good to know, but will prolly not be used much in the real world where designers are paid very well by high-end clients who have expectations of quality.
one day, im sure you will be able to put it to good use, but do understand, it looks like a noob slapped it up. when you start designing sites like the ones below, you’ll be ready to call yourself a designer.
Admin edit: A bunch of spam links. All of the sites are lame, run-of-mill, table layout sites. I’m sure the clients loved them and they were worth lots of money, but I don’t like them, and I’m not about to accept spam around here.
Bob, some quick responses because I don’t have much time to waste:
And yes, I can put this technique to good use because I am a great CSS developer and I am creative. These are not popular skills but they are useful. If you put me on a team with a decent graphic designer we would do pretty well. Eric Meyer does not do design but no one goes around slamming him. He takes great mockups (for example, ma.gnolia.com) and builds the underlying layout in CSS, and he gets paid just fine for this. So clearly there is a market out there for guys like me.
And I still stand by “rocks harder than all the lame fixed layouts everyone else is serving.” This is my website and I’m going to say what I believe. You are welcome to disagree.
Now I’m going to go back to my ECE homework, which has nothing to do with web design.
lol. nice hacking of my post there. not only did you take out all relevant sites of mine, which btw, own. but you also took out about half of the information in my post. no worries though, you’ll graduate soon enough and see that people are more interested in results than subjective opinion. cheers.
ps do check out google analytics everyone, since christian revomed that from my post as well, you readers might not know about this cornerstone resource. liquid layouts are really a non-issue.
You are still piping about Google analytics? Do you even know how to stay on topic? Obviously you don’t since liquid layouts, according to you, are a non-issue. Yes, on an article about designing attractive liquid layouts, it’s clear that liquid layouts are a non-issue. How this even makes sense is beyond me. I guess christian montoya is also a non-issue, even though this is, after all, christianmontoya.com, and blog posts are also a non issue, even though this is, after all, a blog. The real issues here are politics, cheddar cheese, and Google analytics.
Congrats bob, you’ve successfully earned yourself the Moron of the DayTM award. Please send me your social security number and 3 digit credit card security code so I can award you your prize.
You’ve also taught me an important lesson: that I don’t have to graduate to realize that people are dumb. I just have you to look at you, Mr. Moron of the DayTM, setting the standard for morons everywhere.
And by the way, please get Google analytics, everyone. That’s what this entry is all about. Moron of the DayTM is really a non-issue.
To make a serious response, however, I don’t have to graduate to know that people are more interested in results than subjective opinion. Let’s take a few examples of how I have successfully acheived results in my work:
These are just a few examples of the work I do, mind you these were all done single-handedly by me. It isn’t easy to do this kind of work on a limited schedule, alone, but with the amount of success I’ve had, I’m doing allright.
“attractive” being the key word here bro. going back to what i originally said, your example is just not very well designed, thats all im saying. and its kinda a bummer that all your sites look exactly the same with grey and some highlight color. everyone i work with has 24″ screens with 1900 wide native resolution. are you gonna make a site that works for us as well as your granny? goggle analytics is useful because you can see what monitor resolution your each audience member is at among many other things. in my experience your blogging about a non-issue.
you could let the others see my clients’ websites, which btw are not spam, but links to hospitality sites ive created. its not important to me though. you should know that ultimately the liquid designs are really only useful when you have all text base content because you cant control your layouts your way. its not worth deserting design principles for the case of being able to expand your browser window a bit.
Bob, your arguments get more incoherent as the thread goes on. I’m going to try to wade my way through this one, but I can’t promise I’ll be able to make any sense of the next one.
You mention “attractive.” If “attractive” is all that design is about, then we really don’t need any of this “CSS” stuff at all. You don’t even use CSS, so I have no idea why you are reading an entry about a CSS technique in the first place. You and I come from very different schools of thought on what design really is. In your view, creating a good design is just a matter of whipping together a fancy mockup in Photoshop, slicing it, and exporting it to tables. The site does nothing more than “look good” on screen. This is what happens when designers who think in terms of print design get their hands on the web. Any of the sites in your portfolio reflect this. They are not compatible across multiple devices, they do not scale to a range of resolutions, they are not at all accessible, and they lack semantics entirely. Regardless of how “attractive” these sites are, they are only considered “good design” to someone who believes that design is all about appearance. This would include you, your colleagues, and your clients.
In my view, however, good design is about the whole package. Someone capable of making an attractive site is just a “stylist.” The designer considers all issues, including accessibility, semantics, machine-readability, and device-independence. These are the views held by the standards community, and it is these considerations about design that are paving the way for a much more inclusive and accessible web. My sites do work for you as well as my granny, because they are flexible. Your sites, however, are not, and I feel sorry for anyone with poor vision or assistive devices who stumbles across them.
Your clients pay a lot for these sites because they don’t care about being inclusive. They just need a fancy online presence that brings in money. For you that works and that’s fine. If they ever get any complaints in the future about the lack of accessibility, they’ll have to go to someone else for help, but that will probably never happen, and I’m okay with that.
In the standards community, however, your work just isn’t professional. You are abusing tables for layout and you don’t understand the web. The web is not about control, it is about making websites that are usable. Your sites dictate very specific requirements for viewing; mine do not. But as long as you and I see design from two very different sides, we will never agree, and this will just be an endless argument.
This isn’t to say that my work is any good. I don’t have to be a good designer to contribute a useful technique to the standards community, and I know that because I contribute useful techniques all the time.
And finally: I am not blogging about a non-issue. Get that through your thick skull. Here’s the synopsis of the issue:
It is not about deserting design principles to expand the browser window a bit, because what you consider design principles are very different from what I consider. It’s about not deserting accessibility principles while being able to expand the layout width a bit. If you can’t see the value of the technique, that’s fine, but you are not the only person reading this site, and you are definitely not my intended audience. Any more comments calling this entry a non-issue will be deleted.
And I’m going to say it again: view the site in a browser other than IE to see the technique in action, if you haven’t already.
p.s. Anyone who wants to see your work can just click the link in your name, their’s no need to spam the comments.
p.p.s. Please, use “bro” for people who like you.
I followed this link from WSG and must say this is a fine discussion
I hope Bob replies again as I want to hear his thoughts some more. In a weird kind of way, I like him, despite disagreeing with him.
If someone wants to make a presentation of ‘web design’ vs. ‘print designs on the web’, then I think Bob has provided plenty of cases for the latter. Guess that’s all we can get out of such “discussions” between ‘web designers’ and ‘table-locked screen-shot designers’.
Hey Christian, I just followed your post from the WSG list and read Bob’s comments. If he is so opposed to CSS liquid layouts what the hell is he doing reading your blogs. I don’t mean to talk against the guy — I don’t know him maybe he a nice guy with rigid views.
I think it is a worthwhile visit to go to his site but be warned there are 127 images on the index, flash and javascript. You will see that he knows everything because he includes everything. It is the exact opposite of the 37Signals idea of “Getting Real”.
The looking great comment is a bit wierd considering that the vast majority of websites are ugly. So most clients are prepared to accept something less than a presentational great.
The idea of quality on the web is changing, particularly with the advent of RSS and other XML-based technologies. This is one thing that really bugs me: web designers are part of the IT world and thus are required to continue updating their skills. The liquid layout design and web standards are part of that up-skilling.
I have no doubt that soon clients will start asking for benefits delivered by web-standards, they just won’t know the source.
CM: I like your website
Web Man Walking: You do have to admire his persistence.
Via WSG: Interesting comments. Standards Vs tag soup is an automatic lose for tables based layouts as soon as accessibility or semantics are mentioned. Tables for layout aren’t necessarily inaccessible but the practice that goes along with them inevitably make the sites so.
It’s interesting that fundamentally web sites deliver information. Web Standards based design delivers information better in every way. The presentation layer that one of your readers is so fixed on is just as aspect as you’ve rightly pointed out.
I’ve converted tables-based design to CSS for clients who understand visual and functional design like architects. I’ve yet to come across a layout that couldn’t be converted. Therefore the rationale for sticking with tables when the benefits of switching are so persuasive is gone. Unless of course that’s all you know and you don’t care about any other aspect of design like accessibilty which, in the case of some of your comments, would seem to be the case.
All the best, Jon
During the time that i contracted with that company, i didnt program those sites, their in-house programmer did. The hospitality sites that I created while I was there are under webdevelopment, as well as many of the other hospitality imails which are all very tight designs. Anyone in their right mind can see the difference between my Princeville at Hanalei site and your site design.
While I get along fine with programming sites (I programmed a 200 page department site for ASU), I realize that my skills need an update. Which is why I ended up at your site christian. I am looking into CSS standards while my business partner is utilizing ajax among all other sorts of other fancy tricks. But that doesn’t mean that we’re using ajax everywhere and one thing is for sure, we will rarely have a need for a “liquid layout”.
If this is the wave of the future then are we all throwing flash and all other design aesthetics out the window? Are we all gonna expect that grannies with 800 px monitors are gonna be reading the same sites that we in the biz are? The key is knowing your audience. No one will ever come across your site with a 800 px screen. Anyone that digs this deep is savvy enough to have a decent monitor.
If you looked at google analytics (yes im saying it again) (formerly urchin) you’d have a clue as to who was reading your site and you wouldn’t have to post a thread to ask for a roll call to see if anyone is reading your blog. You would also see what resolution they were looking at your site as well as their browser among many other things.
My first comment (and I stick by it) is that design aesthetics are too important to be trumped just because you learned a new trick. You are too inexperienced to be telling people what the new standards are. Fine if you wanna tout your new trick, but do not for one second say that your sites are well designed because they are not. The majority of sites out there look like ass and if we have such low standards then nothing will change.
My background is in art and I know much more about what looks like ass than you do. Your background is engineering or whatever, so fine if you wanna rip my code. I know it needs help. But while I’m trying to learn more about programming standards, you should be actively trying to brush up on your design skills.
You are the first one that first brought up “attractive” that’s what I’m getting at. These are not attractive in the least. You have a long way to go before you can really backup what your ego states about the look of your sites. Until then, you should change your tagline at the bottom of your page to “Christian Montoya dot com… now with MORE ugly!”
Bob, quick response here, 1 paragraph at a time.
im beginning to thing you simply are out of touch with reality. your sites are dumpy and you are still in college, how on earth can you tout your experience? you just dont know what you dont know. im out.
Good for you! (and good riddance)
Took a look at the site “bob” linked to, just for reference, and noted the (painfully) obvious.
1) Fonts in use on the page come mainly in two sizes - too small, and way too small. Assume the default font size in the browser is a comfortable size for the user. Anything smaller is really bad idea for the main text.
2) Unsizable fonts (in IE) which screws the user who finds the font too small.
3) Text rendered as bitmaps (mainly for menus) and thus resizable, and screwing the user.
4) A “menubar” that pops up a new window for no good reason (from the user’s point of view). Yanking the user out of context without apparent reason is simply bad user interface design.
5) Flickery special effects that are slightly entertaining for a few seconds, that then get very tedious.
A web page is first and foremost a user interface, not a work of art. The site “bob” offers is an excellent example of clueless user interface design. Unfortunately the flashy appearance is likely to impress clueless clients, but is a disservice to users.
Argh - in (3) make that “not resizable”.
(Need an “edit” button.
Hello all. Interesting discussions taking place here.
Firstly, and slightly off topic this (excuse me), but as I’m typing this post I notice that I can barely see the I-beam cursor - it is black against this dark background you’ve decided to put in the textarea, and therefore hardly visible (rather than white and clearly visible on Firefox/Mac). Perhaps only a small section of users add comments on Safari/Mac, right? Are they outside of the fold too, like the IE crowd? Aren’t we supposed to be providing the best user experience for the majority of users? The Mac may be a small segment, but the majority of Mac users use Safari.
Bob is the first person to have told you he doesn’t like your site. That doesn’t mean he’s the only one who doesn’t like it. He’s just the first one who’s TOLD you! Sorry to be a drag, but I agree with him - I’m not too keen on the design of this site either. But that’s a matter of personal taste. Not overwhelmingly important in the end - I’ve stayed and read your article and a fair few of the comments without turning away in disgust, so on balance it is doing what I believe you intended it to do. Even Bob managed to contain his dislike enough to engage in a conversation with you, so it can’t be THAT bad!
What I can say being a user is I’m not keen on the light text on dark background, or the fact that I can’t see the I-beam. This is where the aesthetic consideration has overridden the functional (IMHO), to its detriment. In this regard, Bob would have a point.
I do however agree that functionality is key, not just giving the client what they think they want/need, which seems to be Bob’s strategy. I totally agree with the viewpoint of starting with the content and making its presentation viable for users (take my point about the invisible cursor on Safari? - Maybe you could change the textarea colour to white on focus? Just a thought).
This all presupposes what your understanding of functionality is. The Bauhaus famously hit on the notion of ‘form follows function’. Check Wikipedia’s write up on it - food for thought. My problem with it is that it obviates the need for aesthetics. I disagree - I think a more useful phrase might be ‘form follows perceived function’.
Reading the comments it seems to be readily assumed you can’t have beauty and functionality in the same package. You can and you should. Ask any decent mid range luxury car manufacturer - Lexus, Audi, BMW - its bread and butter to them. Ours is a different field but we should be aiming to achieve the same thing.
A car has to adhere to extremely stringent standards of e.g. safety but that doesn’t stop the manufacturers being masters of engineering and design ingenuity, does it? All cars must do this; luxury cars have an additional, PERCEIVED function - to be aesthetically pleasing, or beautiful.
The difference? Car manufacturers spend millions if not billions in research and development to get it right. They have economic, legal and financial imperatives for doing so. Perhaps we should think the same way, and put a bit more effort into producing high spec, quality websites.
Its also not about print v web, or tables v CSS. Sorry folks, that’s just a bit small minded. After all, we can create Flash/PDF based websites if we want typographic fidelity, and a CSS layout can be just as rigid and convoluted as a table based one for the new-to-CSS developer. (Has no-one mentioned that table-based layouts can also be liquid?)
Currently I’m working for an agency developing a liquid layout for a Government website that has to function correctly for IE6, IE7, Firefox and Safari. It will have min and max widths (check out Stu Nicholls’ CSSPlay for a non JavaScript min-width for IE6 - http://www.cssplay.co.uk/boxes/minwidth.html - IE7 thankfully does both min and max width as stated in the comments - would still like to come up with a non JavaScript max-width though.) The site has to be AA compliant, min-width 800px, max-width 1280px. There are other elements of this design which are impossible to achieve with CSS - e.g. equal spacing (justification) of elements of unknown width. We cannot use tables, so we are spending lots of the client’s time (and money) finding a suitable hack that will make the design make look right.
Point being? Tables do have their merits so long as they are used lightly and unobtrusively. There are still things CSS cannot achieve that tables can achieve with ease. Tables were and are a necessary part of the evolution of web design. That’s why we used them. Doh! They aren’t completely redundant yet, and they were never a manifestation of evil, just a means to fulfilling the requirements of that era.
Don’t like the heresy? Christian quotes Eric Meyer - perhaps both Christian AND Bob should take a look at what he has to say about the merits of tables on this page: http://meyerweb.com/eric/thoughts/2004/09/06/to-be-tabled/. (You’ll see my site is table based - the content is arranged in a grid/tabular layout. Achievable with CSS I know, but you know what they say about the builder’s house… looking at a ul li or even a dl dt dd approach at the moment for the update.)
OK. Why not get back to work, rather than spending time trading insults. Bob, if you’ve got better ideas / techniques, share them with us. Christian and others, stop with the form OR function stuff - its both. Aesthetics are an integral part of good design - not a luxurious add on. Be careful not to misunderstand the context of aesthetics here - it DOESN’T imply beauty - sometimes ugly is more effective - it means making visual considerations when engaging in the design process.
If you want to develop against real data, why not check this survey out: http://www.websiteoptimization.com/speed/tweak/clickstream/ (found via http://www.guuui.com/ - one of my favourite sites for getting me thinking about interaction design - big up Henrik Olsen). People frequently work at resolutions BETWEEN 800px and 1024px. Why? Because they don’t religiously maximise their windows - see the ‘Average Screen Dimensions’ section.
Christian - last thing - if Bob’s set of links were really so lame, wouldn’t they have strengthened the points you’ve been making? Could you not at least leave the names of the sites in so we can Google them ourselves to see what NOT to do? Thanks very much Christian for provoking what is possibly my longest article post ever!
Stephen: Thanks very much for your comment, but wow, this entry was almost half a year ago, and I’ve come a long way since then in developing my skills.
I’ve found very many great examples of degradable backgrounds over the past few months, but unfortunately haven’t kept track of them. I’ve been meaning to revisit this point, but I’ve been super busy with more pressing issues on this blog.
As for Bob, well, he’s obviously long gone now. My issue with him was not his argument, but his attitude toward me; he saw me as a kid and tried to belittle me. I don’t appreciate that behavior from anyone, no matter how old they are.
But I’m glad I was able to inspire such a long comment; it might just be the longest one I’ve ever received!
Oh, and I forgot to mention: the Safari problem you are having is not my problem; Safari has a very poor level of support for form styling, and there is no way around it. I’ve decided, in my own work, that Safari users will just have to accept the fact that their browser sucks when it comes to forms, and live with it. It’s a classic example of browser makers trying to protect users, only to hurt them more.
Leave a comment
Share your thoughts with the worldYou can use Markdown, or you can use these tags:
<a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <code> <em> <i> <strike> <strong>Please keep comments respectful and on topic.
This form is guarded by Akismet, so don't waste your time trying to submit spam. It won't work. Ever.