April 12th, 2004
It seems like the box model shouldn’t be difficult to learn, but it is. I’m not sure why, but I think it may have to do with complexity that arises when you have boxes within boxes. At that point, it becomes an exercise of adding margin here, taking away padding there, and setting margins and paddings to 0 over there. Combine that with floating and positioning: relative, absolute, fixed, and it gets hard to know where the spacing between objects comes from, even when you’re working in standards-supporting browser like Mozilla. On top of this you have the box model hack…which only complicates things further. Even browsers get the box model wrong.
Back when I was a computer science undergrad, separating parts of a project into conceptual pieces was pretty much the hardest thing I had to do. The best programmers could write code 10 times (literally) faster than I could, and it was because they used the highly-efficient object oriented methodology as easily as they ate with a spoon. I hadn’t learned the object-oriented paradigm in high school like they had. CSS and XHTML is a very crude (though good) attempt at this sort of efficiency, and it will only improve with time. XHTML 2 will also add more features in this spirit, further separating markup language into separate, logical pieces. But, as I learned a few years ago, it takes a lot of work to get used to when you’re new to it.
Until designers can code things once and not have to check renderings in multiple browsers this will be an issue. I guess that over 50% of my time designing is spent checking the design in multiple browsers. In other words I could work twice as fast if browser support was equal. One thing I can say is this: lack of browser support has made me learn more about XHTML than I otherwise would have had to. Perhaps that’s a silver lining.
With XHTML 1 we’ve moved completely to a straightforward XML syntax: <tag>content</tag>. With CSS we’ve introduced a seemingly unrelated syntax. Why? I don’t know, but it sure complicates things. There may be an excellent reason why the two look so different, but wouldn’t it be great to have one syntax instead of two, with a doctype to declare the difference?
The turning point in Luke’s Jedi training with Yoda. “You must unlearn what you have learned”. For anybody who created web pages using table-based layouts, this is definitely an issue. Countless hours unlearning spacer gif techniques, valign, align, and padding for layout. Perhaps this is why the box model seems so hard…I’m a stubborn unlearner.
ABOUT
Bokardo is a blog about interface design for social web sites and applications. I write about recommendation systems, identity, ratings, privacy, comments, profiles, tags, reputation, sharing, as well as the social psychology underlying our motivation to use (or not use) these things. If this sounds interesting to you, grab my RSS Feed. If you want to know more about me, check out my about page.
Designing for the Social Web
Building a social web site or application? I wrote a book just for you!
Find out more or order from Peachpit or Amazon
Greatest Hits
Upcoming Speaking Events
LATEST POSTS
Written by Joshua Porter
Find me:
Comments ( 6 Responses so far )
Pingback: Sillybean
1. Kris 10:59am, Tue 13th, 2004
Everything is hard before it is easy.
2. Mark 11:31pm, Tue 13th, 2004
Some reasons why table layouts are difficult to learn:
- Nested tables are difficult. It seems like nested tables shouldn’t be difficult to learn, but they are. I’m not sure why, but I think it may have to do with complexity that arises when you have tables within tables. At that point, it becomes an exercise of adding hspace here, take away vspace there, and setting valign and halign over there. Combine that with image shims, spacer gifs, “empty” cells with just an nbsp in them, and it gets hard to know where the spacing between objects comes from, even when you’re working in state-of-the-art browsers like Netscape 4. On top of this, now you have IE 4, which only complicates things further.
- Using tables to lay out pages is a programmer’s trick. Back when I was a design major in undergrad, separating parts of a page into conceptual pieces was pretty much the hardest thing to do. The best designers could lay out pages 10 times (literally) faster than I could, and it was because they used highly-efficient page layout methodologies as easily as they ate with a spoon. Using tables for layout is a very crude (though good) attempt at this sort of efficiency, and it will only improve with time. I hear the upcoming Netscape 5 will also add more features in this spirit, further debasing the HTML page layout language with bastardized extensions. But, as I learned a few years ago, it takes a lot of work to get used to when you’re new to it.
- Browser support is still spotty. Until designers can code things once and not have to check renderings of their tables and invalid markup in mulitple browsers, this will be an issue. I guess that over 50% of my time designing with tables is spent checking the design in multiple browsers. in other words I could work twice as fast if browser support was equal. One thing I can say is this: lack of browser support has made me learn more about Netscape’s bastard HTML extensions than I otherwise would have had to. Perhaps that’s a silver lining.
- Two Goals, One Syntax. With HTML 4 we’ve moved away from tables as a purely presentational device and now they’ve gone and added all sorts of weird things for data types, like TH, ABBR, CAPTION, and COLGROUP. Why? I don’t know, but it sure complicates things. There may be an excellent reason why people are insisting on using TABLEs for data as well as layout, but wouldn’t it be great to have two syntaxes instead of one, with different tag names to declare the difference?
- So much to learn. For anybody trying to who create even moderately complex web pages without using web standards, this is definitely an issue. Countless hours learning spacer gif techniques, valign, halign, and padding for layout. Perhaps this is why the box model seems like it’s not such a big deal to me… I have little sympathy for people who insist on clinging to their horseless carriages when there are Ferraris waiting to be driven.
3. Joshua Porter 8:50am, Wed 14th, 2004
Thanks, Mark, for pointing out that most of the arguments I used for describing my tribulations with web standards could be used for describing similar tribulations with tables.
Your sarcasm at the end of the post caught me by surprise, however. It sounds like you’re assuming that I’m clinging to the “horseless carriage” of tables.
On the contrary, I’m absolutely ecstatic that I can create layouts without tables now. In my opinion, tables took way longer to create and were much harder to make changes to. Your post makes obvious that I should have been more clear about that. I certainly didn’t mean to imply that I don’t think standards are the way to go!
The point of my piece was to simply get down on “screen?” the difficulties that I’ve been having with web standards.
Many posts like this one: have got me thinking about why there is so much focus on implementation instead of on users (I’m a usability consultant). I didn’t want to reiterate that same argument here: I was looking for answers as to why standards are such an ongoing topic of discussion. Part of this reason, I think, is that they can be rather difficult to learn. It can take years to learn them, even for people with experience creating web pages using amazingly complex techniques. For technologists like yourself, learning the new stuff won’t be a problem. But for many of us, something as “simple” as the object-oriented methodology can be a tough challenge.
4. Joshua Porter 9:38am, Wed 14th, 2004
Further reading: The Learning Curve of Web Standards by Bobby Vandersluis.
Pingback: Brian