I’m on a mailing list with a group of professional women designers and developers. There’s lots of conversation flowing and it occasionally turns very lively - as it did recently when a member posted about her frustration with CSS and continuing attachment to tables. It ignited a veritable firestorm of commentary! It was fun to read, but it did help me clarify a few reasons that I love CSS and think it’s worth the time of any web professional to learn it. Note I didn’t say ‘master’ it, because I don’t think there are a whole lot of people that can do that, but learning? That’s one of the reasons I’m in this profession, because I like to be challenged.
Anyway here are five things that I think are major advantages of CSS over tables:
- You can put things where you want them. When I was using tables I used to get so frustrated with having to line things up under the cells above them and split cells into more tables and more cells just to get the layout to work the way I wanted it too. With CSS and absolute positioning, relative positioning and floats, I don’t have to think in advance how I’m going to slice up my design to fit - I can put elements where I want them to go. As a designer this was the key reason I switched to CSS in the first place.
- Shorter code. Now for a small page it doesn’t make a lot of difference as far as the length of code. But I worked on one client’s site (70+ pages) where every page was full of nested table after nested table after nested table. Cleaning up one of those pages - converting it from tables to CSS - often meant a reduction from 1,000 or more lines of code to 400 or less. Over the entire site, that’s a huge difference. The pages load faster, they take up less room on the server. Not a benefit for SEO, but certainly a big one for users with slower connections.
- Content first may be better for SEO. With tables, the page is read by the search engine in the order it appears in the code and presented that way on the page. But with CSS and positioning, I can put my big headline and block of content up near the top of the page and drop the navigation, header, sidebar and footer to the bottom. That means that Google gets to the meat of the page right away instead of wading through a lot of code.
- Easier maintenance. Having rewritten the aforementioned table-based site, I can tell you it can be a nightmare trying to keep track of multiple nested divs on a 1,000-line page. Once the site is converted to CSS, maintaining it (either yourself, your client or another web developer) is so much easier, faster, and cost-efficient.
- Better for your clients. I firmly believe that not providing a client with clean, well-written code is a big disservice. They’re paying you to be a professional and CSS is a professional’s tool (just one of them, but a key one). When you provide a client with a well-built site that allows them to change the entire look and feel of their website experience with just a little work, rather than a redesign, that’s huge.
I will now step off my little soapbox and slide it back under the table.
I know that learning CSS can be tough; I liked the challenge (one of the reasons I’m in this profession) but I certainly wouldn’t call it intuitive. However, taking the stand that one is not going to learn it because it’s just not that important, that I can’t understand at all.
Tables have their place, for display of tabular data, but they were not intended to be a layout device.
Comments
Using shorthand CSS can save some 1’s and 0’s in your stylesheets which add up if you have a busy web site. Just think, all those extra lines of codes taking up valuable bytes are adding up on that server. It may seem minimal at first but it does take up some space once you have enough sites on your server. Even if you don’t care that much about bandwidth or server stress- you are wasting valuable keystrokes by typing extra attributes and properties in your CSS.
…read full article…
I read a good post in Robert Middleton’s More Clients blog about avoiding bad clients and the huge amounts of time and energy they consume as you try to pursue their business.
This has become more of an issue lately - after I relaunched my website, I see I’m getting more quote requests and consultation requests but most of those people turn out to be tirekickers.
…read full article…
It is an interesting topic, most of us consider ourselves the masters of our field or talented enough to be able to figure everything out on our own. this just isn’t the case for any of us. We have to be sure to infuse our lives with a little modesty otherwise we risk becoming pompous and stuck in creative ruts.
It is important to understand how other people are doing things, if you can take some time out of your day to possibly even watch someone else work in Photoshop or in CSS you may find that you learn something completely new by just watching someone else work.
…read full article…
About six weeks ago, at the time my new website launched (with its new name), I presented business cards to a group of colleagues - they wanted to see the new identity.
It was an unveiling of the next step in my business development process, and the changes really have moved things to the next level. It’s quite different now than it was in August and I think part of it has to do with a stronger identity.
…read full article…
You ever had that frustrating div that would stop just short of wrapping your content like it is supposed to?
…read full article…
I have used Dreamweaver for a long time now, before that just like most in the field it was notepad.
I used to not need anything fancy but the more I learned about Dreamweaver the more I liked. For instance, the ability to create keyboard shortcuts for custom snippets was endlessly handy. It is the one feature I have yet to find done decently in any other software. I also like auto-complete because when it is done right it saves you tons of keystrokes.
However, Dreamweaver has it’s own HTML viewer that doesn’t render like anything else. The closest product that it resembles is IE6, which we all know doesn’t understand CSS. So the bulk of Dreamweaver has always bothered me for the little uses I get out of it.
So I went on a search to find the best solution with the best case scenario being an open source product that has either cross-operating system functionality or versions of the software available for the major operating systems (Linux, OSX and Windows). I was also looking for the editor to be able to have auto-complete, custom snippets, custom keyboard shortcuts, compatibility with HTML, CSS, PHP, Ruby and JavaScript as well as any other languages that I may want to pick up or use in a pinch.
…read full article…
At Agency Fusion we frequently get to work with designers who are experienced in print but are cautiously venturing into the world of Web design.
Because the Web is an entirely different medium from print, it can cause some anxiety and frustration at first.
One of the main sources of frustration for designers new to the Web seems to be based upon expectation. Designers who expect the Web to yield the same results as print are typically disappointed. Once a designer embraces the differences between Web and print, though, the anxiety and frustration seem to melt away.
…read full article…
Safari is one of those tricky browsers that aren’t the most cooperative but there aren’t many hacks for it that will work.
…read full article…
When visitors land on a website, the first thing they do is mentally evaluate in an instant whether they can trust the information on the site enough to continue.
Like all information, this is a matter of whether or not the source of the information can be trusted to overcome perceptions of risk and uncertainty. Trust or no trust happens during the visitor’s initial impressions or “first glance” at a website when visitor is still unfamiliar with the vendor.
…read full article…
