The first writing for this week re-summarizes the most important concept we’ve covered so far in class: making sure your design is based on your content. In an expansion of this idea, it reminds the reader that search crawlers review a site’s content from top-to-bottom, so it’s important to organize all of your pages with this in mind. The author goes on to give several examples of the most common float layouts on the web. Overall the writing is a nice beginner’s review of basic float designs, as well as a nice reminder of how it relates to structuring content semantically.
The week’s second reading is a real gem. The author gives a long list of resources on floats, grouped together in subjects like “clearing floats”, “float bugs”, “float layouts”, and more. In particular, I think anyone who is practicing heavily with floats should bookmark the page for the “float bugs” section. I ran across several bugs I have encountered previously, and without this kind of resource they always take much longer to search out and discover on a case-by-case basis. Being able to quickly refer to this webpage in the future will be a real time saver.
The final reading for this week doesn’t really deal with CSS floats primarily, but it came up in during my search and wanted to discuss it regardless. This article talks about the old arguments for using tables (instead of CSS magic) as a means to layout a website. The author’s arguments really resonate with me; when I began to learn HTML at work, I was taught using the table-layout method for building everything, and I found it to be a pretty intuitive way to learn layouts. Envisioning page layout in the standard columns and rows format made it simple to structure content, and it was very easy to learn how table, tr, and td tags worked. As the author mentions, this seems like a much simpler way to initially learn web design than the CSS driven way of doing things; floats, clears, margins, and the like take a deeper level of understanding, and implementing them can be much more confusing for a beginner.
The more I used tables and tried using more complex layouts, the more I discovered their weaknesses when compared to the CSS div driven approach. Now that I have grown more comfortable with floats, I won’t be returning to the table-driven way of doing things; however, the author makes some very valid points in this article. Furthermore, I was not aware of this CSS display: table option. A CSS-based model that emulates the simplicity of table layout? Is this a good way for beginners to learn web-design, or does it merely delay whole-hearted acceptance of CSS layout methods? I can’t fully go with either side until I tinker more with the display option. Anyone have more experience with this?
P.S. – If anyone can name what I’m referencing in the title for this post, I will buy you a cookie.
February 3, 2009 at 4:19 pm |
Stephen King’s: It?
Which would fit with the “evilness” of youth (even in design) that could be recognized later in life.. I know I keep opening old projects and get a shiver or two from where I used to be. Anyway, I didn’t know about the display: table option, I can’t see why there would be a problem with using it since display: table is purely a rendering option and not part of semantic markup… it seems like it’d be no different than choosing a red background or a yellow border. Of course, if the majority of your users or customers use IE7, then you’ll have to have some sort of contingency layout for them, since it’s only supported in IE8+
February 3, 2009 at 4:36 pm |
I really like how you posted some arguments to the other side of the story. I went through the same deal as you did at work. Lucky for me I was in my intro to scripting class about the same time I started my internship. I was the only one who stuck to table-less layouts and everyone always joked around about how much longer it took me to slice down a site and build it in html / css. The learning curve on table design is much shorter but in the long run CSS driven layout is so much stronger. Now, Shane and I have gotten the rest of the office to ditch tables (for the most part) and stick with the right way of doing things.