Real hackers don’t use CSS

Back in the old days of 1996 there were two kinds of people. Those who understood the web, often referred to as “hackers”, and those that didn’t. A hacker could throw together a website in a few minutes, filled with the latest possibilities that the web offered: animated gifs, scrolling marquee text and blinking red text for the really important stuff. It was a glorious time and the hackers really ruled the web. It started growing.

Hackers and designers

With growth came the designers. They wanted to use the web just like the unlimited piece of paper it was. So they sent their designs, the same designs they had previously printed, to the hackers and said: “I want this on the web”. The hackers looked at the designs and didn’t like them at all. But the designers were the ones paying their salaries so they had no chance but to do what the designers wanted.

When the hackers started working they quickly came to the conclusion that this was harder than they had predicted. Then a smart guy that really knew his way around the web found a tutorial describing how to do something called “image maps”. The hackers cheered! They could take the dreaded designs and put them up on the web as images. Then add transparent clickable areas on top of the images that linked to other images. The hackers’ status had been reinstated and the designers looked at the results and were happy, “It looks just like we want” they said.

How to make a website, a hacker’s guide:

  1. Convert the designers images to JPG
  2. Add an image-map to each one of them
  3. Make sure all links work
  4. Show the designers

Hackers and customers

Here entered the customers. The company website, that looked just like the designers wanted and was coded just like the hackers wanted, was very slow. Sometimes it took over 15 minutes for the customers to get the info they wanted from the site. Phones started ringing in the hackers’ offices and they all gathered to try to solve the problem. This was when the major breakthrough in the web history came.

One clever hacker suggested that they split the images in many parts and used tables to put them back together. The older hackers scratched their heads, “Tables? Where did they hear of them before?”. After some research they found that tables were sometimes used in research reports to show a grid of values. “Just put some images in those cells instead and it will look just like before”, explained the clever hacker. He continued, “… but that doesn’t make anything faster. To make the page faster we split it so that we can remove some parts. If there is a large block of blue somewhere we can remove that image and set a background-color on the cell instead!”. There was much rejoice and the hackers got to work. Many had problems dealing with splitting the images in the image programs, but after a couple of weeks of training they mastered it.

The years passed by and the hackers got better and better at taming tables to do just want they wanted. Someone came with the idea of putting another table inside the first one. That made the code a little easier to maintain since they didn’t require the use of row- and colspan. Additionally that made it possible to add margins to your text, something that made the designers happy. Someone came with the clever suggestion that sometimes text can be removed from the image and written in the cell instead. This made the designers a bit annoyed since sometimes the customers got the wrong font but it wasn’t an issue big enough to start a fight over.

How to make a website, a hacker’s guide (version 2):

  1. Convert the designers images to JPG
  2. Slice the images so that the big one-colored areas can be replaced with a table cell
  3. See if any of the text can be removed from the image and set in a cell
  4. Link each individual image correctly or use an image-map.
  5. Make sure all links work
  6. Show the designers
  7. Show the customers

Hackers and standardists

The earth shook and the web standardists entered the scene. The standardists said to the hackers, “You are doing things all wrong, you need to redo your sites and learn everything from scratch again”. The hackers laughed. Their customers were happy, the designers were happy, they were happy, why should they change? The standardists spoke again, “but your page will load faster with standards”. The hackers looked back and remembered how slow their sites once were, they looked at the adoption of high speed internet connections and they reckoned that speed wasn’t a problem.

The standardists were now annoyed, why couldn’t the hackers understand why standards were better? They gave it one last chance and said “But if you use CSS for layout your sites will be much easier to maintain!”. In reply the hackers showed all their table skills they had acquired over the years. One guy had 16 nested tables to show. Another guy used frames to layout his site and had a whopping 25 frames in a spectacular pattern which all the other hackers envied. The hackers really knew what they were doing. They said, “There’s no need learning this new stuff, it will just take a lot of my time and it isn’t any better”.

How to make a website, a standardist’s guide:

  1. Look at the design the designer gave you, figure out what parts the design consists of.
  2. Start writing the HTML corresponding to those parts. Try to avoid adding elements to the HTML just for the sake of design. Make sure all content in the design is represented in the HTML (text preferable).
  3. Link a CSS file to your HTML and start adding style to the document. Test in the modern browsers and read guides with common bugs to fix problems you encounter.
  4. Show the designers and explain why they can’t have it look just like it would on paper.
  5. Do user testing to determine things work or not.
  6. Release it to the customers and be open to feedback.

Conclusion

When you, as a standardist, talk to hackers about standards, keep in mind that they are good at what they do. There’s a reason they are doing it a certain way and it works. Just throwing out a “Tables are so -96” won’t bite; you need to be smarter than that. Don’t forget that you were once in the same seat, and use the same arguments that made you switch.

And yes, that guy using frames for layout in the text above, was me.

58 responses to “Real hackers don’t use CSS

  1. Hej Emil!

    Det var en av de roligaste artiklarna jag har läst på länge! Underbar referens till Ferdinand.

    I’ve actually never used tables for layout. They’re complicated. I’ve used frames, which was OK, but I get really annoyed when Aftonbladet’s ungtval06 site uses them. I mean, 2006 and frames??!

    Time to start arguing about xhtml 1.1 sometimes soon? Using it for all my new sites. It’s really good because if you can’t make mistakes, or it won’t work ;). Also, it’s nice to be able to use MathML and SVG when they come widely accepted.

  2. Nice article, and I know you meant this as a satire, and I myself work on the programming end of web for a living … but… real hackers don’t do websites. (For the rest of the world, check out the entry for “hacker” in the Jargon File).

  3. @Ho-Sheng Hsiao: I know a lot of companies where the ones making websites are the same people that are writing algorithms. While this might not be the case for all companies, most I have seen mixes assignments like that.

  4. @Mihai Campean: Full of what? I use only CSS for layout nowadays, anything else wouldn’t work for a site about web standards. What do you refer to?

  5. ummm…interesting story…too bad the little history lesson is oh-so-slightly narrow in perspective. i mean, who wouldn’t want blinking red text…NOT!

  6. Nice post, Emil. A brief and nearly violent history of the web. Very well put.

    I wonder what you think about truly allowing designers to have what they want. If you look at the CSS Zen Garden, you can see how flexible and creative any designer can be using CSS, positioning, DIVs, and background images (just like your site has so well taught us). Slices are still important, so to speak, but in a completely different way. Am I right?

  7. Advice for standardists: before you try to convince the set-in-their-ways old farts to upgrade their skills to the noughties, get your facts straight: CSS is no better than tables if you’re just replacing tr/td with div/span. The point of CSS is that your site should WORK (ie serve up all the required content) with NO STYLES AT ALL. No graphics, no colours, no pretties at all. Get that right; that’s step one. Step two is using CSS to make it pretty. If you start with the pretty and ignore the functionality, well… you’re just as bad as the gif-splitting, red-blinking, font-abusing net.morons you’re fighting against.

  8. @Emil: Yes, CSS is what I was refering to. Although your story is an intresting one, you should preach what you practice and viceversa :).

  9. @Soup: You are very right. Slices are still important but I seldom just slice things up in a grid. I’d go as far as call it a different technique altogether. Good comment, thanks :)

    @Eric TF Bat: Good advice. I would use a bit softer and friendlier language than that but I get your drift ;)

    @Mihai Campean: Indeed. Let me know if you have any suggestions of improving the code of this site.

  10. @Eric TF Bat: A little bit over the top if you ask me. We both know that replacing tr/td with div/span is actually a huge step in the right direction, and validation proves it, not to mention semantics, structural markup, and page code size. While I cannot disagree with your zealous approach to using standards correctly, tossing out tables for divs usually leads to properly separating style from content, and even that idea is imperfect at best. There’s a swell A List Apart article that details the difficulties with even that approach, for doesn’t the structural markup require ids and classes to utilize the style effectively?

  11. One thing I still like doing is making a grid into the design without it looks like blocks, preserving a natural flow. I think grid design is really fascinating. You move things around and you get a total different story. With tables it is hard, the easier with CSS. Use your imagination. Though messing with hierarchy in a page can be fascinating as well.

    CSS when knowing it well can make astounding designs.
    proof: my fav

    http://www.cssplay.co.uk/index.html
    http://csszengarden.com/?cssfile=http://www.css-praxis.de/cssocean/zenocean.css

  12. @Emil:
    No suggestions, the stie looks good, and the code I think is nice and maintainable so I don’t see any reason to entangle it witth nested tables and slices… :)

  13. “4. Show the designers and explain why they can’t have it look just like it would on paper.”

    This is very important, but how do I show a designer that it’s ok their design down’t look like they want?

  14. @Joaquín: Explain how the web works. We don’t know how the site will be shown, at what resolution, with which font-size and in what browser. There’s no way to fix that like a designer can with paper.

  15. That was a great read!

    I recalled my first blog (long ago) using tables for the layout (and updating it manually with each post).

    The term “webmaster” is seldom heard now. It used to point to an individual who was both the designer and the content provider.

    Nowadays, the replacement is “blogger”. Well, I am also a blogger, so no offense there. But the milestones as described in your post explain how the webmaster became void and the blogger became the trend.

    And on standardization: how about the frustration when you realize your CSS looks different in every browser..!

  16. @Craig: Thanks for your kind words. I belive there are a lot of bloggers out there yes, but in the company world the webmaster still exist.

    The big frustration when it comes to CSS is surely all the bugs.

  17. I enjoyed the article and see myself reflected in it. One small critique, though. Where: Enquiring into the location of an object or person. Were: past tense of “be.”

  18. Eric TF Bat said in post #11:
    Advice for standardists: before you try to convince the set-in-their-ways old farts to upgrade their skills to the noughties, get your facts straight: CSS is no better than tables if you’re just replacing tr/td with div/span. The point of CSS is that your site should WORK (ie serve up all the required content) with NO STYLES AT ALL. No graphics, no colours, no pretties at all.

    I agree! If you merely replace TR/TD with DIV/SPAN, then you haven’t completed converting a site to be any better. Once you have removed all of the formatting and placed it into a single CSS area (whether using external CSS, or CSS contained within the file), you have completed the switch to both standards, and allow the folks to not waste their time downloading all the images if they so choose not to.

  19. Standards have their purpose: accessability. Sure, some websites don’t need to be seen by blind people (art portfolios) and even though I belive CSS is far too difficult to do seemingly simple layouts, I do agree with separating content from design.

  20. Pingback: Siyaxoxa.com » Blog Archive » Brief History of Web Developers
  21. There, now I’ve read it. It was really good and told like a story is supposed to be told. Oh my god, 25 frames!

  22. I agree – table design is ugly, and CSS is the way to go.

    Every time a see a tableless page like this one I take off my hat.

    Tables, transparent pixels and colspans should become history for most of the cases.

    Especially now that there are sites with ‘open-source’ CSS templates like http://www.openwebdesign.org (found it via digg.com)

    thanks

  23. I am currently completing research on the use of CSS. In viewing many CSS sites, using adaptive technologies I have found that many of the sites are not reading correctly. Using JAWS the sites are read top to bottom left to right, and in many cases this means that JAWS is reading in side navigation with the content.

    The same issue was occuring with ZoomText, when it was chosen to read the page, it reads top to bottom and left to right, and includes side navigation in the readings.

    This is a huge issue, and one that does not seem to be mentioned a lot.

    I think it may be a placement issue, and more than likely incorrect coding, however there seems to be an assumption that CSS is the panacea to all accesibiity issues, and this thinking concerns me.

    If there are any usability testing that has occured in regards to CSS, I would be interested in reading the reports.

    Regards

    Jennifer

  24. @oracle: it is a bit harder than using tables yes. But it gives so much more than accessibility: faster site, easier to maintain, usability and so on. That’s why I use CSS.

    @Thomas Watson Steen: Good article, thanks for sharing. I believe those testcases are very important for convincing some people of the value of using web standards.

    @Jennifer: Good addition. CSS does not automatically solve _all_ accessibility issues. The separation of content and design does a lot of good though. For your research you might want to check out Accessibilty features of CSS on w3, it’s a good read.

  25. You have a peculiar notion of what a hacker is.

    Quick hint: it is not synonymous with “hack”. More heavily connected with “code bums”.

    A preferred term for the individuals you’re describing is script kiddies.

  26. @Bill Rehm: If you take the term as it is interpreted right now I agree with you. But 1996 anyone that knew anything about computers were hackers.

  27. Hi

    I really enjoyed your “story” about ‘real hackers dont use css’. And I laughed at the end of the story you mebtioned that it was you who used frames.
    The article is good, and you will learn something. I am still a lil bit of the ‘hacker’ a novice with css. :)

  28. That was one hell of a funny write-up. Yeah, I can remember some dudes back then who felt really cool using Image Ready and Fireworks to slice tons of images! But truth be told, standards could make your website faster just that it could be difficult (most times!)

  29. very nice article, I am no where near a professional and have never perfected any of the era’s in webdesign, but I have been involved in each. it’s almost 2007 and I am just making the transition to css.

  30. Nice history. But…. we didn’t get tables until about 1995. *Real* hackers just use <BR> for formatting :-)

  31. Pingback: mindgraffiti » Blog Archive » Evolution of Design
  32. nice site, very informative, well designed, easy to use … what can i say ? i love it…

  33. Two words:

    VIEW SOURCE

    CSS cleans the presentational cruft out of the markup. This makes pages so much easier to maintain.

    Especially when dealing with server-side code like php, asp, cfml, etc.

    Can you imagine trying to maintain application code with all of that font, bgcolor, spacer gif garbage mixed in with it? I’ve lived it, and it was horrifying.

  34. Pingback: OPC Toolbox » Blog Archive » Some Funny and Informative CSS Articles
  35. There’s one very wrong point in how those “Designers” think. As you already wrote, they took their pretty print design and wanted to make the web page look like that. So in fact they where print designers, not web designers. But web pages are not limited to one media. Sure, you could print a web page and then get the exact look of the former printed flyer. But obviously navigational elements are pointless on printed paper. So simply from that point it should be obviously a difference between a web page and a printed paper. This difference is the main point in all those misunderstanding between the “hackers” and the “designers”. Although i think both names are used wrong here. Hackers are designers, too. They do design functionality. This is a very important part of design as well. Design is not only about painting pretty images.

  36. @Siegfried: Well articulated. In the article I mean design as in graphical design, but I’m sure you get the point as much as I do. Thanks for commenting!

  37. I think we both get the point, but out in the wild the term “Designer” is closely related to graphical design. So the term “Web Designer” today just simply is a “Screen painter”. This assiciation is not good for the whole profession.

  38. Pingback: mindgraffiti » Blog Archive » Essential Reading for Future Web Designers & Developers
  39. Oh you nitpicking semantics people. Don’t you know that all this messing around with new fangled ideas can be solved with a little line that says “Optimised for / Best viewed in” with a list of what specific browser, screen resolution, operating system and a big list of all the client-side stuff the user should spend hours obtaining and installing, then come back to view your site how you wanted them to see it.

    And if you’re worried about people getting bored while they are doing all that, stick a big flash animated loading screen for them to look at. Don’t forget to give a link for those who haven’t got flash player installed yet though!!

    Seriously, happened upon this page at work whilst I was browsing sites to improve my CSS skills and it brightened up my afternoon. So much rings true.

  40. Hey, i was one these guys which used frames and tables, too. :-)
    I can remember very well, how it was when I started using CSS and XHTML for tableless, semantic Webdesign. Some colleagues were annoyed, cause they didn’t want to change their ways of working.
    Nice article!

  41. Never in my career as a web developer have I been called a hacker or called a fellow web dever a hacker….we aren’t hackers…

    Hackers hack things. They gain access. We are developers.

  42. A good site is built using mix of all the technologies and content required for balanced look. With today’s high speed internet, an all-text site isn’t really of the same value as it was a decade ago. Just today while searching for some web development needs, I came across a site having blend of flash, images, css, tables and simple html – it was superb. In case someone needs to verify my comments u can see for yrself at http://www.cursivebits.com

  43. @Arshad: CSS for layout is an alternative to tables, you don’t need to use tables anymore…That exact layout could be done without old technologies…

  44. Lots of discussion, but no one really got to the point: where’s the source of the 25-frame layout?

    ;)

  45. Your narration captivated me. Thanks for the reading. You should write a romantic novel =P

  46. I can’t help but notice that your entire site is divs and css, not a table in sight…

  47. Inspiring Story :)

    can you give me some links of 96 sites which are still the same as they were before (in 96)?

Comments are closed.