Web Design Sans Style Sheets
May 22, 2008 1:43 PM Subscribe
Any tips on web design WITHOUT style sheets? Yes, I know that's crazy talk.
I work for a state government agency, and I'm in charge of trying to make our website usable and worth using, neither of which it is now. I'll be working under strict bureaucratic requirements. Essentially, I have nothing to work with but HTML. There is a style sheet, but it does nothing but set a few text properties, and I don't have the ability to change it or add on to it. It's guarded like a Grail.
I know people built pages with nothing more than HTML in the Dark Ages, but that was before I got into web design. I don't know the tricks and techniques of the era.
Does anyone remember their old tricks?
I work for a state government agency, and I'm in charge of trying to make our website usable and worth using, neither of which it is now. I'll be working under strict bureaucratic requirements. Essentially, I have nothing to work with but HTML. There is a style sheet, but it does nothing but set a few text properties, and I don't have the ability to change it or add on to it. It's guarded like a Grail.
I know people built pages with nothing more than HTML in the Dark Ages, but that was before I got into web design. I don't know the tricks and techniques of the era.
Does anyone remember their old tricks?
You can always embed a style sheet in the HTML document.
posted by dagnyscott at 1:49 PM on May 22, 2008 [4 favorites]
posted by dagnyscott at 1:49 PM on May 22, 2008 [4 favorites]
It's ugly, but could you just put your CSS styling in the HEAD of the page, rather than in-line? That would allow you to preserve some of the sanity-saving aspect of external stylesheets and write your selectors carefully.
posted by Inspector.Gadget at 1:49 PM on May 22, 2008
posted by Inspector.Gadget at 1:49 PM on May 22, 2008
Well shoot, that's just ludicrous. Why do they not want you to touch the style sheet? It's a little ridiculous to ask you to make their site function, then guard you from one of the most important aspects of design.
My suggestion, get them to drop some dough on Dreamweaver. WYSIWYGs will give you instant HTML super powers, and though buggy, are a much better launching pad than, say, text edit and a list of HTML tags.
posted by self at 1:50 PM on May 22, 2008
My suggestion, get them to drop some dough on Dreamweaver. WYSIWYGs will give you instant HTML super powers, and though buggy, are a much better launching pad than, say, text edit and a list of HTML tags.
posted by self at 1:50 PM on May 22, 2008
I can't imagine working without styles.
Two thoughts:
1. Can you insert local style blocks? Unfortunately it would for some redundant code that you would have to edit all over if you wanted to change it.
2. Could you get around the barrier by storing a stylesheet somewhere you can get to, and calling it in on each page you want to edit?
posted by o2b at 1:51 PM on May 22, 2008
Two thoughts:
1. Can you insert local style blocks? Unfortunately it would for some redundant code that you would have to edit all over if you wanted to change it.
2. Could you get around the barrier by storing a stylesheet somewhere you can get to, and calling it in on each page you want to edit?
posted by o2b at 1:51 PM on May 22, 2008
Not to be crass, but doesn't neglecting current web standards run contrary to the final intention of your task? It seems to me that if they were actually concerned about usability they would be more open to adopting new standards. In terms of layout and style, you can just use HTML, but like I said, it seems a bit like an exercise in futility.
posted by ISeemToBeAVerb at 1:52 PM on May 22, 2008
posted by ISeemToBeAVerb at 1:52 PM on May 22, 2008
Best answer: If pre-CSS is the Dark Age of web development, then tables and transparent spacer gifs were our illuminated manuscripts.
I would advise you not to get overly reliant on spacer.gifs as they tended to be a pain to maintain; though table tags are not much better.
Instead, what I would say is -- learn to love simplicity and elegance. Most web users, and especially the users who visit government website, really care little for fancy, snazzy page design. They're going to the site to find information, and they want to find that stuff quickly and easily and move on with their lives. Think about how you're going to make it easy for them to do what they want and find what they're looking for, and build your design to that purpose.
posted by bl1nk at 1:53 PM on May 22, 2008
I would advise you not to get overly reliant on spacer.gifs as they tended to be a pain to maintain; though table tags are not much better.
Instead, what I would say is -- learn to love simplicity and elegance. Most web users, and especially the users who visit government website, really care little for fancy, snazzy page design. They're going to the site to find information, and they want to find that stuff quickly and easily and move on with their lives. Think about how you're going to make it easy for them to do what they want and find what they're looking for, and build your design to that purpose.
posted by bl1nk at 1:53 PM on May 22, 2008
Best answer: If all you have, really, truly, is HTML then how does content flow into place? I mean, if you have any server-side delivery of anything you can inject styles into the HTML pages even if you can't simply reference a .css file.
But, in short, you add a <style> section in the <head> element as outlined here.
Alternatively, you can point a style link to a .html file that happens to contain css instead of HTML as long as you set its type correctly. Like this:
<head>
<LINK rel="stylesheet" href="testcss.htm" type="text/css">
</head>
Now your testcss.htm can contain normal css styles, like
body{background-color:blue;}
posted by abulafa at 1:55 PM on May 22, 2008 [1 favorite]
But, in short, you add a <style> section in the <head> element as outlined here.
Alternatively, you can point a style link to a .html file that happens to contain css instead of HTML as long as you set its type correctly. Like this:
<head>
<LINK rel="stylesheet" href="testcss.htm" type="text/css">
</head>
Now your testcss.htm can contain normal css styles, like
body{background-color:blue;}
posted by abulafa at 1:55 PM on May 22, 2008 [1 favorite]
Response by poster: I would love me some Dreamweaver. I'm trying to get them to get it, and I have a few people convinced, but no one's pulled out the wallet yet. Guess what we're using? MS Frontpage 2000! [vomits]
If I put the stylesheets in the HEAD, will I have to copy & paste the styles onto every HTML page? Perhaps I can use an include...
posted by echo target at 1:57 PM on May 22, 2008
If I put the stylesheets in the HEAD, will I have to copy & paste the styles onto every HTML page? Perhaps I can use an include...
posted by echo target at 1:57 PM on May 22, 2008
But yes, as others have said, try and convince your requirement-givers that they are barking up a very, stupidly wrong tree.
posted by abulafa at 1:58 PM on May 22, 2008
posted by abulafa at 1:58 PM on May 22, 2008
Ah yes, if you have an include, you can actually just place it between the <style> elements and point it at your own css files. Not the greatest, but still essentially the same as linked styles (except for caching and alternate media such as printers, even that can be specificed in a style element, iirc).
And, um, if you're using FP2000... just stop. Go open up Notepad, you will hand-write more reliable and maintainable HTML than that pile of dung ever has.
posted by abulafa at 2:01 PM on May 22, 2008
And, um, if you're using FP2000... just stop. Go open up Notepad, you will hand-write more reliable and maintainable HTML than that pile of dung ever has.
posted by abulafa at 2:01 PM on May 22, 2008
It's not that hard to make nice pages without style sheets. It's just that it takes longer to make site-wide style changes, and they may be slower loading and have some accessibility issues for the disabled.
You can always make a master layout using inline CSS or (gasp!) tables. Put plenty of time into making the design as flexible and scalable as you can. Then make copies of that page for each new page of the site. Use a vertical link layout, so you can always add links to new pages as they are developed, without running out of room for them.
bl1nk has it acactly right, though: learn to love simplicity and elegance.
There's no need for razzle-dazzle. Especially in a government related website, people visit for the information. Make the info easy to find, lay things out in a logical manner, and use graphics that aid in communication. Anything else is extraneous. That's the definition of "usable and worth using."
People made beautiful and elegant web pages in the Dark Ages, and you'll be able to do the same.
Also, check out Dynamic Drive for scripts that might be useful.
posted by Fuzzy Skinner at 2:09 PM on May 22, 2008
You can always make a master layout using inline CSS or (gasp!) tables. Put plenty of time into making the design as flexible and scalable as you can. Then make copies of that page for each new page of the site. Use a vertical link layout, so you can always add links to new pages as they are developed, without running out of room for them.
bl1nk has it acactly right, though: learn to love simplicity and elegance.
There's no need for razzle-dazzle. Especially in a government related website, people visit for the information. Make the info easy to find, lay things out in a logical manner, and use graphics that aid in communication. Anything else is extraneous. That's the definition of "usable and worth using."
People made beautiful and elegant web pages in the Dark Ages, and you'll be able to do the same.
Also, check out Dynamic Drive for scripts that might be useful.
posted by Fuzzy Skinner at 2:09 PM on May 22, 2008
Back in the old days it was all tables, invisible one pixel gifs, and giving up by posting a GIF of what you wanted. You can get a feel for this via the old internet way back machine at a archive.org. I always thought the nytimes did a good job for what was possible back then.
posted by chairface at 2:19 PM on May 22, 2008
posted by chairface at 2:19 PM on May 22, 2008
What's to prevent you from doing this:
<head>
<LINK rel="stylesheet" href="theirs.css" type="text/css">
<LINK rel="stylesheet" href="yours.css" type="text/css">
</head>
I.e., using the cascade to override the existing stylesheet with your own...
posted by bricoleur at 2:27 PM on May 22, 2008 [4 favorites]
<head>
<LINK rel="stylesheet" href="theirs.css" type="text/css">
<LINK rel="stylesheet" href="yours.css" type="text/css">
</head>
I.e., using the cascade to override the existing stylesheet with your own...
posted by bricoleur at 2:27 PM on May 22, 2008 [4 favorites]
You can have more than one stylesheet. Will they notice if you reference both immutablegrail.css and furtiveadditionalstyling.css?
posted by gum at 2:36 PM on May 22, 2008
posted by gum at 2:36 PM on May 22, 2008
Tables are more effective anyway. The whole "tableless" thing is kind of a farce for trying to make a truly cross-browser, robust site.
Do use a stylesheet, as mentioned above, but there's never anything wrong with using tables.
Also, if you can get your server to accept server-side includes of html files, you can get away without having to constantly copy/paste too much.
for example, if you have a header and footer, make the page one big table.
put the [table] tag and first row or whatever you want in the header.html, but dont close it til the footer html.
Include the header and footer in every page, and then all that page has to contain is the middle of the table. Then when you decide to change your header or footer later you dont have to do it 300 times.
posted by drjimmy11 at 4:22 PM on May 22, 2008
Do use a stylesheet, as mentioned above, but there's never anything wrong with using tables.
Also, if you can get your server to accept server-side includes of html files, you can get away without having to constantly copy/paste too much.
for example, if you have a header and footer, make the page one big table.
put the [table] tag and first row or whatever you want in the header.html, but dont close it til the footer html.
Include the header and footer in every page, and then all that page has to contain is the middle of the table. Then when you decide to change your header or footer later you dont have to do it 300 times.
posted by drjimmy11 at 4:22 PM on May 22, 2008
(same would go for any side menu or other shared elements of course)
posted by drjimmy11 at 4:23 PM on May 22, 2008
posted by drjimmy11 at 4:23 PM on May 22, 2008
The whole "tableless" thing is kind of a farce for trying to make a truly cross-browser, robust site.
... written on a cross-browser, robust site that doesn't use tables for non-tabular content. Other such sites include Facebook and YouTube. Do whatever you have to do in your context, but be aware that there's widespread consensus among web professionals that tables are used for tabular content, not layout.
posted by scottreynen at 5:18 PM on May 22, 2008 [1 favorite]
... written on a cross-browser, robust site that doesn't use tables for non-tabular content. Other such sites include Facebook and YouTube. Do whatever you have to do in your context, but be aware that there's widespread consensus among web professionals that tables are used for tabular content, not layout.
posted by scottreynen at 5:18 PM on May 22, 2008 [1 favorite]
I agree with bricoleur and gum. Use your own style sheet. Should they discover what you done, you don't have to go back and edit that one line a hundred times- just copy their style sheet into yours.
posted by Monday at 5:50 PM on May 22, 2008
posted by Monday at 5:50 PM on May 22, 2008
Tables are more effective anyway. The whole 'tableless' thing is kind of a farce for trying to make a truly cross-browser, robust site.
Behind the Wired News Design, October 2002 (so old I had to go to the Wayback Machine).
Throwing Tables Out the Window, July 2004
posted by kirkaracha at 6:24 PM on May 22, 2008 [1 favorite]
Why dont you write the style inline?
Like:
I feel your pain on the FrontPage, I was in the exact same position.
posted by Blandanomics at 10:06 PM on May 22, 2008
Like:
<>Blah<> (odd spaces added)I feel your pain on the FrontPage, I was in the exact same position.
posted by Blandanomics at 10:06 PM on May 22, 2008
that didnt work...
[p style="color:blue;"]blah[/p]
posted by Blandanomics at 10:08 PM on May 22, 2008
[p style="color:blue;"]blah[/p]
posted by Blandanomics at 10:08 PM on May 22, 2008
NVU is free, and creates far cleaner HTML than FrontPage.
posted by flabdablet at 1:45 AM on May 23, 2008 [2 favorites]
posted by flabdablet at 1:45 AM on May 23, 2008 [2 favorites]
This thread is closed to new comments.
posted by echo target at 1:44 PM on May 22, 2008