A few days ago, I was given the task of developing a very quick-n-easy website for a company. They probably wouldn't even have thought they needed one at all, had my employer not convinced them that this internet thing is the way to go forward. So, we're talking about a very basic company presentation, a two-day project, from graphic design, through HTML/CSS-implementation, to final touches and finish.
A dirty job, but someone had to do it. I figured I probably don't have time to develop it using XHTML and CSS, I imagined the client would probably draw a blank stare if I would have mentioned "accessibility", "standards", or "other browsers", writing me off as some kind of perfectionist fool from another dimension (and boy, would he have been wrong or what?).
So back to the old school of table based design it was, this one time, at least. Unfortunately, I was pretty certain that there would be more of these super basic company presentations in the future, requiring me to work perhaps as much with standards-based design as with the slightly more painful table-based variant.
Having done a rather simple, straight forward design, not particularly striking but nothing to be ashamed of either, I started implementing it using tables for layout, and CSS for everything else. I developed it for Internet Explorer only, but since the behaviour of table-based design is more predictable in different browsers than the CSS-based dito is, I figured it would probably mostly look ok in other browsers as well. I'll have a look after I'm done and do some final final touches and make sure it looks representable in Mozilla as well, I thought.
The rest of the day was spent reacquainting myself with quirks-mode. I had the website done just about on time, with perhaps an hour or so left before it was to be presented to the customer. They liked it, I was happy that the pain I had to endure developing it using table-based principles wasn't wasted.
Just a few days later, I got another one of those really basic online company presentations to do, only this was to be even more basic, a one-day project. Just one page or so, maybe two. It ended up being three, or four, then six, maybe eight. But it was still a one-day project.
This time, I had the memory of developing the two-day project fresh in memory, and thought that table-based design didn't actually feel like it took a whole lot less time than CSS-based design does, so I figured I'd try using CSS based layout this time around instead, in spite of the very tight deadline.
Since I began using CSS for layout, instead of tables, I've always thought to myself that developing a website using CSS probably does take a little while longer than using tables, but the extra time spent is worth it many times over due to the manageability of CSS-based layouts.
Today I know better. My recollection of table-based design must have been foggy, because I didn't remember the quirks involved using it, or the many CSS-powered tools and tricks that the table-based counterpart lacks. I re-realized, in particular, that the image-slicing, table-gluing approach common in table-based design (memories of which I had buried in the deepest darkest corners of my mind) is a shitload of more work than doing the same thing using the CSS-based approach.
Table-based layouts do not take shorter time to develop than the CSS-counterpart, it just feels that way because you spend less time on creating the actual layout structure, and more time doing other things that the CSS-based approach gives you more or less for free.
It took me less time to develop the second website using CSS-based layout, for both IE and Firefox, than it took me to develop the first site using the table-based approach for IE only.
Needless to say, it was with a very big smile that I said good-bye to table-based design this week, this time for forever and ever, under any circumstances, regardless of how tight deadlines I may face in the future.
Comments
I just went through this myself, only the client was well aware of XHTML/CSS and asked that I just use HTML with tables - specifically. I found it hard to work around all that damn extra code that is required for tables and God forbid nested tables.
So what happened to Safari? Now that you're a happy Mac user where is the love?
Comment by Greg at 23:11, 09 Jun, 2004 #
Yes, I find working with tables more time consuming than in css. Maybe its because I learned web design with css for layouts rather than tables and therefore I am for familiar. Regularly I find myself prototyping with css rather than photoshop!
Comment by Sunny at 02:25, 10 Jun, 2004 #
Greg: Compared to Firefox, what is Safari?
Comment by T. Jogin at 07:18, 10 Jun, 2004 #
Sounds great. I've always wanted to get into this whole CSS and webstandards thing, but never known where to start. Anyone got a few tips or point me in the right direction?
Comment by swimp at 12:33, 10 Jun, 2004 #
Swimp: Absolutely.
Try either Developing with Web Standards or, the same document in Swedish, Webbutveckling med standarder, both from 456BereaStreet.com.
Comment by Tomas at 13:58, 10 Jun, 2004 #
As long as we're on the subject of web page layout, there's a particular layout issue that really bugs me, and yet seems to be present on more and more websites these days, including jogin.com. That is, if you resize your browser window to be narrower than some minimum width (arbitrarily chosen by the site designer), not only do you get a horizontal scrollbar (which is fine), but the content gets pushed off the *left* side of the window as well, and *can't* be scrolled into view. The left edge of the page is cut off even when the horizontal scrollbar is all the way to the left.
No, it's not that I have a tiny screen, it's just that I don't want my browser taking up the entire width of the screen. I like to keep it a little more than half the screen width, say 700-750 pixels. For many sites (again, it seems like more and more sites lately), this results in the left side of the page being cut off.
If I wanted to be a real pain, I would complain about even getting a horizontal scrollbar at all, rather than having the text wrap to the browser width (as it does on my web site). :-)
Comment by Karl at 15:12, 10 Jun, 2004 #
Karl: Well, either the designer chooses a fixed with or a dynamic width. The good thing about dynamic widths is that it adapts to the screen space, avoiding the problem you mention. The bad thing about it is that you never know how wide columns of text the visitors will see. For instance, text is easier to read in about 12-15 words per line, as opposed to 30 or 40 words per line. But with a dynamic width you don't have that control, and that's one reason why some people choose a fixed width.
I've used both fixed and dynamic widths, and as you can see I'm currently using a fixed width, exactly because I don't want my text to be presented at 30 words per line. I know I don't want to resize my browser window every time I visit a homepage to adjust the text column widths...
So, then there's fixed widths, which have the advantage of giving the designer more control over how the content is presented. On the other hand, if there is too little screen space, various side-effects occur, such as the one you mentioned, neither of which are things the designer wants. But, this is the web, and a web designer, unlike a print designer, does not have absolute control over how their creations are presented, that's just the way it is with the web.
Most websites, which uses fixed widths, require 750-770 pixels of horizontal screen space, to fit in 800*600 screen resolutions.
If you don't want your browser to use more than half the screen width, I suggest you get a more capable monitor and/or graphics card, because I doubt web designers in general will reduce their page widths to less than what has been commonly accepted for years. If anything, websites are more likely to be designed for wider space, rather than narrower, as the smaller screen resolutions become less and less common.
Comment by Tomas at 16:13, 10 Jun, 2004 #
I, like Jon Hicks, have a hard time choosing a prefered browser on MacOS X. For PC, it's no competition, Firefox is the only browser worth using, but on Mac I like using both.
Comment by Greg at 16:42, 10 Jun, 2004 #
Tomas: Thanks for your reply. So you're saying that the fact that the content gets pushed off of the left side of the window, and can't be scrolled to, can't be fixed when using fixed layout? That seems like a serious deficiency in CSS, or a bug in web browsers.
Also, check out the very link you provided: http://456bereastreet.com/lab/developing_with_web_standards/
Notice the layout on this page as you resize the browser window; if you make the browser really wide, the text column width does not increase. But if you make the browser window narrow, the text wraps to the window width (except for the preformtted lines). So it seems to have the best of both worlds. Can't sites like yours duplicate this effect? Or does the fact that you have a sidebar cause the problem?
I'm actually curious to know; I'm quite the newbie when it comes CSS. If you looked at my web page, you might have seen where I mentioned that I just switched to CSS from tables this past weekend. :-)
Comment by Karl at 17:01, 10 Jun, 2004 #
So you're saying that the fact that the content gets pushed off of the left side of the window, and can't be scrolled to, can't be fixed when using fixed layout? That seems like a serious deficiency in CSS, or a bug in web browsers.
I'm guessing there is nothing in the CSS specification that suggests that content should be irretrievably positioned outside of the application window under any circumstances what so ever.
But if you make the browser window narrow, the text wraps to the window width (except for the preformtted lines). So it seems to have the best of both worlds. Can't sites like yours duplicate this effect? Or does the fact that you have a sidebar cause the problem?
I haven't looked at his CSS code, but I'm guessing that only the width is fixed, everything else is using relative values. Whereas my overall width is fixed, and so is the width of the side bar column.
I'm not sure, but it's possible that the behavior of my design can be improved upon to degrade more gracefully in narrower browser windows, but it's not really something I've prioritized, since 750-770 pixel widths have been standard for several years now. I will keep it in mind for future designs though.
You might want to get used to the idea of websites not being optimized for as narrow widths as you would like though, it's rather likely that websites will be optimized for even wider screen space in the future. Your best bet to improve your situation is either to increase your screen resolution (buy a better graphics card or screen if you're already maxed out), or increase the width of your browser. You're not bloody likely to be able to persuade web designers in general to go back to optimizing for 640*480 screen resolutions.
Developing websites is a bit of a puzzle game, because different browsers have different bugs, and a website can and will be viewed with browsers and screens of different sizes, and monitors of different contrast settings, etc, and so forth. It's more or less impossible to get it all right under all circumstances, because the circumstances are infinite.
By the way, when I reduce the size of my browser, my content does not go off screen to the left like you describe. Are you, by any chance, using the absolut worst piece of shite browser available, Internet Explorer?
Do yourself a favor and download Mozilla Firefox now, it is superior in every single aspect. Every single one.
Comment by T. Jogin at 20:18, 10 Jun, 2004 #
Actually, I *am* using Firefox 0.8 (the last released version, not the nightly builds) on both Windows and Mac, and I see the problem in both places.
I just tried it on IE and it's *not* doing it there. Weird.
Comment by Karl at 22:54, 10 Jun, 2004 #
Karl: Well, I'm running a later version of Firefox, but it doesn't really matter where the bug is, does it? You do realize that it certainly is not a "feature" in CSS, right?
It all comes down to that it's an unwanted and inconsistent behaviour, most likely due to a bug in the application, that only happens when the website is being viewed in a browser window smaller than one that it was designed for.
IMHO, it's no big deal, really. Actually, it's a total non-issue. It's not a problem with the design because it wasn't designed for the conditions under which the odd behaviour presents itself. Just like it's not an issue that a car takes in water when you drive it into the ocean; the car was designed for above-water use; just as my website was designed for use above 750 pixels of screen space, which, again, is a totally acceptable and commonplace minimum width.
Comment by T. Jogin at 23:30, 10 Jun, 2004 #
Regarding the problem with content being pushed off the left side of the browser window: if a fixed width layout is centered using auto margins (margin:10px auto, for example), and the browser window is narrower than the content, some browsers consider the margins to be negative, and pull the content out of the window.
Fortunately there's an easy workaround: set the body element's min-width to the same width as the main layout.
Comment by Roger at 19:25, 12 Jun, 2004 #
Roger: Thanks for the tip!
Comment by T. Jogin at 19:34, 12 Jun, 2004 #
The discussion has been closed on this entry. Thanks to everybody who participated.