What is Digg?Sponsored by Travelzoo
Take Advantage of Ridiculously Low Holiday Airfares view!
travelzoo.com - Flights $52 and up for Thanksgiving, Christmas & New Year. But move on it now.
52 Comments
- FoolsRun, on 10/12/2007, -4/+25Whereas the problem with fixed width design is that if your browser window is really small, or really large, you have the same illegibility problem. What we need is universal support for the maxwidth and minwidth properties. Until that happens, I'm sticking with liquid designs.
- Antialias, on 10/12/2007, -8/+27Scaling width text columns are a terrible idea from a design standpoint. Text reads best at a certain # of characters per line. If your line length is variable, you can't control the legibility of your text.
- armbar, on 10/12/2007, -1/+17Min and max work in everything except for IE6-, so if you add an IE-specific stylesheet with an expression for width, you can do it.
I use the following ridiculously ugly expression:
width: expression(
(FontSize = 12)
&& (Padding = 2 * FontSize)
&& (Border = 3)
&& (Minimum = 760)
&& (Maximum = 1050)
&& (CurrentWidth = document.body.clientWidth)
&& (CurrentWidth - Padding [lt or equal] Maximum + Border ? Maximum + "px" :
CurrentWidth - Padding [lt or equal] Minimum + Border ? Minimum + "px" : "auto")
);
Replace the [lt or equal] with the correct operator. Digg commenting won't allow me to do it. - bonked, on 10/12/2007, -0/+15You hit the nail on the head FoolsRun, max and min rules will fix almost every single layout problem presented by designers. This would allow for some middle ground in the design choices. maxheight and minheight are also must haves. But hey, look how far we've come in a few short years, the light is at the end of the tunnel.
- broodlinger, on 10/12/2007, -4/+14"With liquid layouts, dimensions are set using percentages instead of pixels. This allows liquid layouts to scale in relation to the browser window."
Hey Congratulations, you've heard of "HTML"! HTML has been auto-scaling since, well, the beginning. - Leviathan777, on 10/12/2007, -0/+9Look up "Holy Grail layout CSS". And even in Digg history someone linked to an update of it that even puts the middle column first, for the benefit of text and mobile browsers.
I've been using these techniques since and have tested on every browser I can think of. They degrade nicely. They work. They beat the ***** out of tons of nested tables. - isayx3, on 10/12/2007, -0/+6Notice that the nicer designs on csszengarden.com are fixed width.
- hi_im_timbo, on 10/12/2007, -1/+7Webreference.com could us a little CSS mastery of its own. The site looks like *****.
- Leviathan777, on 10/12/2007, -3/+9Sad so many on-target comments here get dugg down.
I guess we can expect a few more generations of ***** web design by web-ignorant graphic artists and dreamweaver fakers. - Subcide, on 10/12/2007, -0/+58 - 12 words per line is supposed to be the best for readability. On my screen the author's site has 47 words per line! and thats with the left hand float there.
Using a mac I virtually never browse in anything close to full screen res, and its not a problem. If your website looks lost in your massive res, use Opera's page zoom capabilities. - porkstacker, on 10/12/2007, -1/+6I purchased Andy Budd's (with Cameron Moll and Simon Collison) excellent book, CSS Mastery ( http://www.cssmastery.com/ ). If anyone here is serious about CSS and the pursuit of excellence in web design, then this book is for you. With this book you will learn everything you need to know (short of IE7 and the god damn hacks it will require when it finally comes out) to get predictable results, whether it's graceful degradability or 508s you lust after. BUY IT NOW!
(This book sits in my bookshelf right next to Molly Holzschag's excellent book, The Zen of CSS Design - http://www.csszengarden.com shows some examples of the "Zen" of great CSS based web design) - Midnightbrewer, on 10/12/2007, -1/+5"If you use hacks to get your designs to work, then you're not a very good designer are you?"
That doesn't follow at all. We're talking about designing using CSS standards here. A designer who can make the design he wants using CSS would be a very compentent designer indeed. However, you can be the world's best designer, and still fall prey to a bad browser (IE6.)
"IE7 is actually rather good with CSS support, and won't require hacks. If it does, take the suggested route and use a bloody conditional comment. Even Firefox has it's bugs, so the hate (moreso in child replies) is a little unreasonable at this point."
You're using a browser that hasn't been officially released yet to defend what is arguably one of the world's most reviled pieces of software. The comparison is between IE6 and Firefox, both which are actually in service, and that's what people are having to design for. You can hardly code for a piece of software that isn't even finished yet.
"The IE team is doing what everyone has been wanting them to do for quite some time, so please, try being thankful - and patient."
Finally. While your standard modicum of politeness might be necessary, Microsoft as a company has long since used up its supply of knee-jerk thankfulness and patience from its users. Make no mistake: Microsoft's purpose for updating IE is in order to gain back lost market share, not to improve everybody's web experience. As a matter-of-fact, their original promises about IE7 were, "We're adding tabs." Originally, they were pretty much holding CSS support at arm's length and saying, "We'll think about it." I'll be thankful for IE7 when it's out, when it's proven it works, and when the large majority of IE6 users have switched over. Until then, I don't offer thanks in advance. - Hoov, on 10/12/2007, -1/+5Agreed. What's the fuss? I remember doing this way back with tables.
- ScoTTeh, on 10/12/2007, -3/+7People mod you down, but in some cases using tables (while i know they shouldnt be used for layout) is the sanest thing to do. Id rather spend minimal time trying to get the site working and have it work much better cross browser than screwing around with div's.
- oGMo, on 10/12/2007, -2/+6Why are people digging this down? It's entirely true. This is nothing new; in fact, welcome to almost 30 years ago, with TeX's boxes and glue.
http://en.wikipedia.org/wiki/TeX - drfloyd5, on 10/12/2007, -0/+4The HTML author can't. But the viewer (user) can. I often times re-size my window to make the text in the window a nice size FOR ME. I like liquid layouts for that.
- digi7al64, on 10/12/2007, -0/+4http://digi.whiteacid.org/lab/hts/v2/index.html
3 column, multiple row layout controlled entirely from css with no hacks! [so far no bad reports on the layout, tested in IE, Firefox, Opera etc). Validates as valid xhtml 1.0 strict.
Thus my point being, rather then blame css/browsers etc designers and developers should learn to use the language properly rather then jump on the "too hard, can't be done" bandwagon.
CSS can almost do anything you want. you just got to know how to use it.
NOTE: Please don't validate from the link on the page, the referrer is wrong. Just go to the validator and enter the URL. - humanpowered, on 10/12/2007, -1/+5www.positioniseverything.net
- trakais, on 10/12/2007, -0/+3never believe an article about css in a site which looks like this one. how can they write about something they can't use themselves.
- sublimethinker, on 10/12/2007, -0/+3Everybody (I think) knows this (I use it on my site), but dugg anyway.
- clord, on 10/12/2007, -0/+3Safari does bicubic scaling of images, so there are no problems with aliasing (on downscaled images, at least.)
- tvashtar, on 10/12/2007, -0/+3@an0n1m0us
Does it occur to you that his point is that it's less natural to make windows fullscreen on a Mac, it can be done - but generally isn't. Now this isn't exclusive to the Mac, in fact it's universal to basically every modern windows manager/interface - we all have the capacity to run a window smaller than its maximum size and I think nowadays with display resolutions spiralling ever upward the majority of people probably don't maximise their browsers and this must be accounted for when designing a site's layout.
Sometimes I wonder why people can't just think logically for ten seconds before spouting a trolling ad hominem argument like yours. - rally25rs, on 10/12/2007, -1/+4Your totally right. CSS is terrible for some layouts. Example: I want a 24pixel button bar at the top of a window (using a div element) and a second div to take up the remaining vertical space (100% - 24px). I alsays end up having to do some javascript onresize magic to make it work :(
And when will the IE developers start implementing the same box sizing model as every other browser on the planet? - da404lewzer, on 10/12/2007, -1/+4great, so now people are going to code for IE7 which does support better css, however they will forget to make it IE6 compliant, and everyone else in the world is going to be getting broken sites. Remember, there are still alot of win98 users out there....
- masamunecyrus, on 10/12/2007, -0/+3That's why I prefer to use 'em' units. You can have a whole page scale to ratio, not to a percent.
- bkemper, on 10/12/2007, -2/+5Geeze, what kind of fantasy world does humanpowered live in?
- da404lewzer, on 10/12/2007, -1/+4Why do people always post these articles on how to create awesome sites that wont work on half of the peoples screens? They almost always have some massive css hack that make it work, but ruins everything else that did work.
IF IT DOESN'T WORK 99.9% CORRECTLY IN EVERYTHING WHY TELL PEOPLE TO USE IT?? (with a few exceptions like the underscore hack)
basic html can scale with %'s, they should go back to geocities or whatever they use to make 'homepages'... - gmillerd, on 10/12/2007, -3/+5Ouch, percentage scaling images width/height ... who is seriously doing this?
- Coolwave, on 10/12/2007, -0/+2As the article states, this is from "CSS Mastery: Advanced Web Standards Solutions." Great book.
- Midnightbrewer, on 10/12/2007, -0/+2"Scaling width text columns are a terrible idea from a design standpoint. Text reads best at a certain # of characters per line. If your line length is variable, you can't control the legibility of your text."
The whole point of the web is that it's very hard to control the final result that your target audience sees. Fluid design isn't a terrible idea, just as static design isn't the end-all-and-be-all of all design. The problem is that most designers approach web page design with the "page" metaphor fixed firmly in their minds.
It's important to realize that web pages are pages only in name, and that we have an entirely new medium to explore that isn't limited to the rules and strictures of traditional print. Indeed, the idea of multiple columns itself is a dubious design idea when dealing with web pages, as you may end up requiring your viewers to scroll up and down the page several times while reading, rather than reading down one, single column in a steady flow. Rather than viewing it as an exercise in page layout, it's also helpful to think of it as designing an entire interface; at this point, your columns become part of an overall design, and it is the preservation of the proportions of that design, regardless of the window size, that is important.
The designer can only try to design for a certain target range and hope that their users don't break things by stretching the limits. However, if a user shrinks a window past a certain point, there's not much I can do for them. In the end, it's more important to keep the information visible on the screen than to let it be shoved off to the side where it becomes completely hidden. There are always compromises in design, and this is one of them. - TinyClanger, on 10/12/2007, -0/+2@rally25rs: set a DOCTYPE at the start of your HTML. That'll put IE6 into strict mode, and it will use the same box model as everyone else. No DOCTYPE == quirks mode, where the different box model lives.
Doesn't fix all of the incompatibilities, but it certainly helps :) - SakuyasLove, on 10/12/2007, -0/+2@trakais.... I can see you are one of the people who will be doing exactly what da404lewzer said, seeing as you cant even read and all. He said 99.9% not 100% because you can get damn close if you stop and think. Do you have a sticker on your car?
- Scruffydan, on 10/12/2007, -1/+3Hopefully they will update it for IE7. when they do that then maybe i will get it
- gmillerd, on 10/12/2007, -1/+2Yesterdays parent to this basic dupe had a nice hack that did just that: hack a cross-browser min-max/width-height.
- Hoov, on 10/12/2007, -1/+2It's not that hard to get the 3-column layout working. There's a bunch of tutorials, and once you get the basics it's easy to tweak. Had to use hacks to get it to work on IE/Mozilla, but with IE7 I'm hoping I won't have to use the hacks anymore.
I designed a webpage for my job over the summer using 3 columns with expandable/hideable content boxes. I'd show you but it sits on their intranet and I haven't gotten around to fixing it to work locally on my server. - Haplo, on 10/12/2007, -0/+1It's not all that easy. Most liquid design advocates project *their* ideas on users, but do users really want liquid design?
*What* is really readable, and what do users prefer? I recently looked up some info on optimal line lengths and stuff, see: http://johnbokma.com/mexit/2006/09/04/optimal-line-length.html
In short, it's not that easy :-) - broodlinger, on 10/12/2007, -2/+2Are you kidding? HTML is completely auto-scaled except for the images. It's the one missing piece from the system.
- broodlinger, on 10/12/2007, -3/+3>Scaling width text columns are a terrible idea from a design standpoint.
You're clearly not a web programmer. Graphic designer perhaps, who uses 10pt text on a 1600 display? - SenyWD, on 02/24/2009, -0/+0Download free standards compliant CSS layouts: http://www.free-css-layouts.com
- CreativeBush, on 10/12/2007, -1/+1Liquid layouts are so 90's... When typography and readability is important, fixed width is where it's at!
- melanko, on 10/12/2007, -1/+1Good things to know. I always try to make my designs liquid whenever I can. Otherwise I build within a 800 x 600 space or 1024 x 768 space depending on the site material.
- Vindstille, on 10/12/2007, -0/+0IE7 will only be avable for Windows XP users. So many people will continue to use IE6. Therefor you can't take advantage of the "new" CSS functionality that IE7 supports.
- Jumbli, on 08/11/2008, -0/+0I say mix and match, and find out what works best for each case. Check out this website: http://www.EquiPortal.co.uk. It uses fixed width floats that make full use of the screen at any resolution. The floats can be dragged and dropped, opened and closed. They have an elastic height to cater for increased text sizes. I think it's a great way of making the best use of the available window size.
- justncase80, on 10/12/2007, -3/+2If a language or even just style specifications are so complex and convoluted that its harder to get it right then get it wrong its probably the language that has it wrong. The fact is that HTML and CSS are piles of trash and should be completely replaced with something new and better. Such as XAML or something equivalent for gods sake!
http://en.wikipedia.org/wiki/XAML
CSS is so horrible its hard to describe it. - porkstacker, on 10/12/2007, -3/+2"Hopefully they will update it for IE7. when they do that then maybe i will get it"
yeah, sucks that we all have to hold our breath until MS gets off the ***** and completes IE7.
:( - vari007, on 10/12/2007, -1/+0Its a good book complying with the web standards.
- trakais, on 10/12/2007, -2/+1da404lewzer, there is no such thing that works 100% in all browsers
- b_timmins, on 10/12/2007, -4/+2Yes, I was amused at this heading which says, "We can now use even more complicated CSS to make HTML behave the way it used to before we had to bother with all this complicated CSS stuff" :-) :-)
- maxemim, on 10/12/2007, -6/+1how many more css layout sites do we need posted on digg.
- iluvhatemail, on 10/12/2007, -8/+3wow, anything can be digged now-a-days
-
Show 51 - 52 of 52 discussions
© Digg Inc. 2009
— Content created and posted by Digg users is