posted
I liked that explanation better, fugu, and I actually agree with it.
I don't think tables is an egregious sin, however. In fact, there are a lot of benefits to it, especially for beginners. The kind of scorn being heaped upon them I prefer to reserve for the <blink> tag.
CSS should definitely be learned eventually, but it's like starting everyone out in optics in physics. We should know optics, but don't start there.
Besides, even with CSS, there will always be reasons to use tables, so it isn't wasted knowledge.
Posts: 26077 | Registered: Mar 2000
| IP: Logged |
posted
I can definitely see that position, but while CSS has a higher learning curve I find people who learn tables first have a really hard time breaking away from using them, and even then have a hard time breaking away from thinking in tables, which impedes utilizing CSS as it should be, so I advocate learning CSS from the get-go.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Heh. I started learning HTML in 1995 before CSS and I consider myself knowledgeable in HTML. But I haven't learned CSS for positioning things because tables have always been good enough. But I keep wanting to learn CSS because it can do things tables can't.
In other words, fugu is right. I would learn CSS first and avoid tables until you are comfortable with CSS.
And I've got to say this about Disgruntled WebDeziner's spelling comments: you have a computer with a spell checker. And if you are making so much money, you could pay some high school kid $20 to proofread your stuff. There is only one excuse for spelling errors and it is laziness and that is the impression a webpage with spelling errors conveys.
Posts: 1209 | Registered: Dec 2003
| IP: Logged |
posted
For some perspective, IBM, Microsoft, and Apple still use tables for their Web sites.
1. Flexibility. I can move the menu column to the right without touching the HTML. Why is this good? In dynamic pages, changing the HTML can introduce programming errors. Changing the CSS can't. Also, on static sites, it would allow global changes instead of changing each page.
Agreed. Of course, using the library and template features of Dreamweaver will do the same thing.
2. In developing dynamic pages, proper separation of elements will allow complete flexibility with layout (at whatever granularity you implement with your divs). Allows programmers to basically ignore layout considerations and designers to ignore programming considerations.
Which is great when there is so much content that separate programmers and designers are needed. For many sites, they are all the same person.
3. Easy creation of printable versions, handheld versions, etc.
Agreed. The best argument against tables.
4. Order that information is streamed to browser is not totally tied to order it appears on screen. Allows screen readers to work well.
It is better for accessibility.
5. Much, much, much easier to change the layout later. Much.
The library and template features of Dreamweaver eliminate this advantage. It is easy to change the layout then as well.
It's also easier only if the content stays the same. If a web site is undergoing a major redesign, I would sincerely hope that they examine the content as well as the look and feel.
Basically, you get a much steeper learning curve and more complex system in exchange for printable versions and better accessibility. There's definitely a tradeoff.
posted
Its not about refusal, its about how people think.
It is provably harder to think of problems in a domain in a new way rather than learning to think of them in a particular way from scratch (coincidentally, I was at an interesting talk on how this might operate on a neuron level just yesterday).
Also, while there is a learning curve, CSS designs are in many ways easier to implement when you know CSS.
And no, Dreamweaver's template capabilities do not eliminate the chance that a change in HTML which is required to change a table-based design will create a programming error in a dynamic page. Plus, many sites are grown too organically to fully implement the library and template features, but can still be globally changed with CSS by simply adding in appropriate class and id values to existing pages.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
quote:The library and template features of Dreamweaver eliminate this advantage. It is easy to change the layout then as well.
This is what I was using before I changed the design. Dreamweaver is definitely not easier once one knows CSS.
When I developed professionally, CSS was not implemented correctly on enough of the installed browser base to make it a realistic option for our clients.
quote:Which is great when there is so much content that separate programmers and designers are needed. For many sites, they are all the same person.
More and more single-person web sites are using content generated by applications: blogs, forums, CMSs, etc.
I question whether CSS is any harder for a beginner to learn. Certainly, a beginner will get a basic three column layout more quickly with a table. But most people I know run into the limitations of unnested tables pretty quickly. and multiple nested tables don't seem easier than divs and CSS to me, unless one already knows table layout.
Posts: 26071 | Registered: Oct 2003
| IP: Logged |
quote:And while tables certainly are easy, CSS-based designs have no issues adjusting to screen width,
quote:I have to wonder what thing you can list that tables can do in a design that a more CSS based approach cannot do
In pure CSS, not using JavaScript or IE's nifty calculated CSS values, I have not found a way to properly do the following:
1. Have a fixed-width column (or columns) and have another column take up the remaining space on the screen, depending on screen width.
2. Have different columns match their heights to the height of the column with the tallest content.
Both of those are easily done using tables. There are workarounds to simulate those effects in CSS (such as having the fixed-width columns overlay the variable-width column's margins), but they present other problems.
Frankly, I think that the people who designed CSS (and JavaScript, for that matter) did a really poor job of figuring out what website developers actually want to do and making that easy.
For example, if you create a DIV with some text in it, and use CSS to give it a width and put a nice border around it, you can use CSS to position it to the left or to the right, but you can't use CSS to put it in the center. Sure, you can put a DIV around it and set text-align to center, but that's adding an element layer.
Posts: 99 | Registered: Nov 2003
| IP: Logged |
posted
Corporate websites are far more based on an if its not broke don't fix it approach, plus a tendency remain with what their existing designers know than to try to retrain or replace designers (those designers have considerable value based on their knowledge of and place within the organization, so anything they're resistant to isn't likely to change).
In many cases corporate websites are produced by CMSs, often very old ones. This is why CNN's site is so slow to change significantly (I've gotten some of the back story on it a while back), even though the designers want to -- the cost of doing so is too high.
There are other organizational pressures likely at work as well, but those are some of the big ones.
I could produce examples of major websites which did use strong CSS design principles, but I think you understand how pointless that back and forth would be.
There's a similar entry on the page for heights which should elucidate how to accomplish the multi-column question.
And sure you can use CSS to put that element in the center, just set the margins to auto.
Now, qualifiers to the above: sometimes (minor, easy, well-documented) hacks are needed to make these work in IE because IE's CSS support sucks. Also, its typically easy to design around these issues.
Furthermore, there are even more useful CSS properties that nobody has implemented for various reasons, which make a lot of things even easier (particularly with columns; check out CSS 3). The people who designed CSS were very familiar with what people do in web design layout and chose accordingly. Failures in implementation can hardly be blamed on them.
Oh, and one would generally think adding a single div wrapping instead of an entire table with all its overhead would still be considered preferable Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
> And sure you can use CSS to put that element in > the center, just set the margins to auto.
Ah. Of course, since that's one of those CSS things IE doesn't support, it's not much use, but at least I can place the blame properly now.
Still, it doesn't work for centering vertically, even in Firefox.
The link about widths does not appear to contain a solution. And the heights one does not solve the height question I posed, either, as far as I can tell.
As an example of what I mean, imagine a page consisting of a header and footer that go all the way across the screen, and a section in between divided into three columns. The two side columns have backgrounds that need to join with both the header and footer. The amount of content in the middle column can vary from page to page, so you cannot set an absolute height on the columns. You cannot, however, use 100% as the CSS height on the outer two columns to merely fill out to the length that the middle column is forced to by its content. 100% height is 100% of the window height. As far as I can tell, this cannot be done with pure CSS. It would take a working example to convince me that it can.
Yet it is very simply done with tables.
> The people who designed CSS were very familiar > with what people do in web design layout and > chose accordingly. Failures in implementation > can hardly be blamed on them.
Well, maybe. But a spec that doesn't get implemented is fairly useless. The CSS reference materials I use are practical, not idealistic.
Don't get me wrong: I love CSS. But anyone who claims CSS can easily do whatever tables do is wrong.
Posts: 99 | Registered: Nov 2003
| IP: Logged |
posted
Both of the links tell you exactly how height and width are calculated. For certain sorts of elements, that calculation must add up to the height or width of the containing box. Therefore to affect a given height or width, merely set all values other than height or width on the LHS of the equation to appropriate fixed numbers and watch the height (or width) change magically to the right amount.
This works best with the height q, its somewhat tricker with the width one (watch those margins, specifically).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
(edit: he actually cheats a little; the background colors for the side columns are on the main one; this technique, however, is expandable to background images by combining it with the sliding doors CSS technique, resulting in a background image on each side that reaches the full height of the content column (presumably with repeat-y).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
I think the key word in EJS's point was "easily," fugu. The fact that the site designer crows about this as an accomplishment pretty much proves the point being made.
Posts: 37449 | Registered: May 1999
| IP: Logged |
posted
Oddly, it actually is quite easy, if you look at the source. Not as easily as tables, but nobody expects completely different approaches to have all the same strengths. That its easy didn't save it from being hard to discover, but then again, it took people quite some time to make tables dance like they do now.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
So in replacing a system that can, in your words, dance, CSS requires hobbled work arounds, has a steep learning curve, and is spottily supported by the world's most popular software?
Woah baby, sign me up!
Posts: 26077 | Registered: Mar 2000
| IP: Logged |
posted
Well, in fairness to CSS, it only requires hobbled workarounds because it's spottily supported by the world's most popular software. And I suspect the learning curve would actually be shallower if people didn't generally learn tables first.
One of the reasons I suspect Russell is all about the standards compliance is that if all the major browsers were compliant, the major downside of CSS would go away.
Posts: 37449 | Registered: May 1999
| IP: Logged |
posted
Maybe it's the difference between early adopters and late adopters? I prefer tools that are cheap and that work, and I don't get any thrills from being the guinea pig.
I'll go to CSS all the way as soon as I don't have to be a missionary for them. My design tools are supposed to serve me, not the other way around.
Posts: 26077 | Registered: Mar 2000
| IP: Logged |
CSS can also do many things that tables can't dream of doing, and no designer I know who's proficient in both thinks tables can "dance" to anywhere near the degree CSS can.
This is one thing which has become particularly popular because it is so easy to do with tables that is harder (and in only some senses of harder) to do with CSS. Most sites do not use this approach. In many cases, this approach is bad because it doesn't adapt well to changing screen sizes (the columns can become far too small-seeming on a large screen) or increased text size due to bad eyesight (far too constraining line length).
edit: particularly as the only way you manage to make tables even seem to have some of the capabilities CSS does it by relying on those capabilities in Dreamweaver, where many people would, y'know, prefer not to purchase expensive software, or learn complicated software capabilities, when there are nice, free, syntax-highlighting text editors.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
quote:As an example of what I mean, imagine a page consisting of a header and footer that go all the way across the screen, and a section in between divided into three columns. The two side columns have backgrounds that need to join with both the header and footer. The amount of content in the middle column can vary from page to page, so you cannot set an absolute height on the columns.
My site does this with two columns. Adding a third column adds nothing to the difficulty. I don't bleed the left column into the bottom, but I could if I wanted to. And I did this on my first design with CSS.
quote:And I suspect the learning curve would actually be shallower if people didn't generally learn tables first.
Exactly. I wouldn't necessarily reccomend someone with layout experience in tables move to CSS without an identifiable, immediate payoff. But when learning for the first time, I highly reccomend CSS over tables.
Posts: 26071 | Registered: Oct 2003
| IP: Logged |
posted
Fugu, try to limit yourself to polite interaction. CSS is not worth turning yourself into that over.
Posts: 26077 | Registered: Mar 2000
| IP: Logged |
quote:So in replacing a system that can, in your words, dance, CSS requires hobbled work arounds, has a steep learning curve, and is spottily supported by the world's most popular software?
posted
And I was using dance in the sense of requiring extensive adaptation to do something that's actually quite awkward Posts: 15770 | Registered: Dec 2001
| IP: Logged |
(to explicate, you make outrageous, exaggerated remarks, I roll my eyes at them -- pretty much what happens in the real world).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Eye rolling as a sign of ignoring helpfulness is commonly attributed to teenagers. Eye rolling about bad jokes, like groaning, is commonly attributed to all sorts of people in colloquial situations.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
I think I may over-use it, but I'm a big fan of emoticons and other ad-hoc markup. I use it for a number of sorts of situations. Some examples of other posters who use it on occasion in a variety of senses include TomDavidson, rivka, and jexx (hardly teenagers).
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
And I hate it every time they do it, too. It's so...dismissive - like the person you are talking isn't even worth framing a response too. Rather, that's what it is supposed to say, where what it really says to me is a sanitized version of flipping someone off.
Scott: Right.
If I may recommend something to read for design (not technique, but some basic principles) Don't Make Me Think is absolutely wonderful. It's comprehensive, funny, clear, and succinct. I've had it recommended at three different conferences. It will go a long way towards helping you make your design attractive and usable.
Posts: 26077 | Registered: Mar 2000
| IP: Logged |
There are two sorts of things you need to think about to start with: What will go on your site, and how will your site look.
A little bit of the first is needed before the second can be properly approached, but you're mostly there. Try to choose a list of stuff you want your site to do from the beginning, likely including a main page with a blog, a discussion forum, and possibly other stuff.
After you understand the first, think about a few things with regard to look -- some of this can be done without the first being too fleshed out.
How do you want the site structured? This will affect your menu, which will affect how you lay out your site.
Do you want a graphical logo? Many personal sites of this sort use a text name as a "logo" of sorts. This can be a good starting approach as you can always add a logo, while changing a logo messes with your personal branding.
If you want a graphical logo, make that or have it made early, as the rest of your site needs to integrate well with it.
Choose colors you like and that go together well (for the logo if you have one, but otherwise as well). These will be what you use in your site. Two, three, or four main colors should be chosen, though others may be used as accents.
Start to think about the basics of how you want your site to look. Sketch it -- the layout more than the graphics. If you want a graphic you're going to have to get from somewhere else or make, start thinking about that.
Ask for feedback from people you know, here and in person. Use programs like photoshop, illustrator, and indesign (or whatever you have access to for graphics; if you don't have any decent graphics/layout program, you can do some okay layout in powerpoint) to create mockups. Take digital pictures of your drawings and post those. Post iterations of your logo.
That should get you well on the path.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
(kat: that you think something is rude does not mean it is meant rudely. Jumping on someone for what is not ill-intentioned but is a personal hot-button can be rude as well).
I will try to use it less, though.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
posted
Wait, wait wait . . . before you decide how you want the site to look, there is another question to answer: Who is your site for? (Is it for people who have already heard of you and are looking for more info? People who google "fantasy authors"? Will most people who find it be linked to it from somewhere else?)
Who your audience is makes a big difference in how your site should look and function.
Posts: 9866 | Registered: Apr 2002
| IP: Logged |
posted
Dag's steps are exactly what I used to tell my clients:
1) Establish what kind of content you want. Do you want a blog? A photo gallery? A place to dump documents? A forum? A place to display articles? Will your front page be primarily a marketing tool for new readers, or will it be a jump directly into content for your hardcore fans? (If you answer "marketing," you get another question: who's your demographic? You need to know that before you can market effectively.)
2) Once you know this, decide how these things are going to fit together and flow into each other. If your front page is a marketing tool, do you want to provide a snippet of your latest piece of work, which links back to either a longer article or a direct opportunity to purchase it? How do people move from one spot to another on your site? Where do you believe casual visitors will primarily want to go? Where do you believe regulars will want to go?
3) Once you know that, you can decide how you're going to update this information, and how much work it'd be without automation (which will tell you what you have to automate). If you're going to be quoting snippets out of your newest article in five different places, you should probably arrange to automatically do that when a new article is uploaded. If you suspect your regulars are only interested in new articles, you should consider RSS or other push technologies. And so forth.
4) Now that you've established the content, the workflow, and the tools required, you can decide how the site is going to look. This is both one of the most trivial and most critical elements, and I strongly recommend that people reach that decision at first by looking at sites which they think do things right and figuring out what they like about them.
posted
Well, you can also throw together a bunch of half-assed things that seemed cool at the time, but that would be the wrong way.
For an example of the schizophrenia this produces, drop by my personal homepage some time. It's profoundly wretched, in a deeply pathetic way.
Posts: 37449 | Registered: May 1999
| IP: Logged |
Using the borders on the center div to set the background and provide the spacing is just a variation on the technique I mentioned of using wide margins and overlaying the side columns. But I guess you're right, it is possible to do it in CSS.
My larger point is that it is much easier and more intuitive to do some things with tables than it is to do them with divs in pure CSS.
Posts: 99 | Registered: Nov 2003
| IP: Logged |
posted
Yep, definitely some things which are easier to do in tables. Good web design is what the CSS people focused on making easiest, not table-based norms of web design. And they didn't succeed in every way, but its a darn good try.
Actually, I think I'd be able to do it even without using the borders to do backgrounds for the columns, though I haven't tried it yet.
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
All pages display site header (home, blog, writer's resources, Frivel & Schleck, contact);
Home-- extracts from latest published work + link to buy (mag or novel, or anthology or whatever)
Schmaltzy welcome
Possible logo/graphic?
THIN Sidebar right-- cover of latest works; WotF, etc, containing link to buy. THIN sidebar left-- extracts of professional critiques of works displayed on right sidebar
Blog-- standard blog; displays extract of latest entry, plus links to blog archives.
Writer's Resources-- contains various links (ralan.com, Black hole) to writerly websites, plus breif explanation on each. Also, Writer's of the Future section; KD Wentworth's do's and don'ts for the contest; Link to Jay Lake's, "Write a Short Story a Week program.
Frivel & Schleck-- devoted to the art of light verse. Maybe publish a verse or two here. . .
Contact-- gives email information.
******
Is this a good beginning? I want my website to be a tool for readers who want to read more of me to find more of me...
I'm skipping on the forum right now-- who needs that much stress? Which is what I'd do . . .
Posts: 14554 | Registered: Dec 1999
| IP: Logged |
How long is it going to be between work publishings, typically? Are you comfortable with the main page of your site having no new content in that period?
A good rule is that informational elements about the same thing should be grouped together -- is your separation of the work info from the critiques of it based on a good reason to depart from this?
Also, don't feel constrained to think in columns. You can do all sorts of other layouts; you might look at several of the designs in the CSS Zen Garden to see what's possible: http://www.csszengarden.com/ (edit: this doesn't mean your layout's not likely to be columnesque, but you can do some very creative things with how things appear in those columns)
Posts: 15770 | Registered: Dec 2001
| IP: Logged |
quote:Originally posted by katharina: If you have a yen to go crazy with the features, I'd suggest making a family web page that incorporates every frame, blinking text, and rollover out there, just to get it out of your system. It's not classic design, but they are really fun. That way you get practice, your family gets a site, and it's immune to criticism because personal sites don't have to unassailable.
I just had to comment on this - I once got a nasty e-mail from someone commenting on my site. He used to live in my area and had family living in my area. He dissed my little personal site as if it were a personal insult to him and his family that I had a vanity personal site that was just about me. He basically told me it was a waste of space.
I e-mailed him back and said I was sure his family would be proud of him for being so critical of his site. Now everytime I see that last name I think about him.
[/derail]
(and ... when I said before that I was going to update my site, I really meant that I was going to play Sims2 for an hour or so ... )
Posts: 2034 | Registered: Apr 2004
| IP: Logged |
Printer-friendly view of this topic
![[Smile]](smile.gif)
![[Group Hug]](graemlins/grouphug.gif)
![[Roll Eyes]](rolleyes.gif)
![[Mad]](mad.gif)
