Jump to main navigation, main content

Archived entry | Matt Wilcox .net

Old School Web Design

Quite often I forget about old-school web design. I just don’t remember there being anything prior to XHTML, CSS and semantic design principals. These things are now synonymous with ‘web design’ in my mind, the concepts and terms are interchangeable. It was therefore with some considerable shock and a very large helping of disgust that earlier in the week I made a re-acquaintance with Old School Web Design.

My boss was unhappy with how a project was progressing and asked me to have a look at it. The project was something we had been working on a month or so ago, my role being to modify the existing visual design and then create static XHTML and CSS documents from the artwork. This resulting webpages were then handed over to an external studio who were to implement dynamic features and a shopping cart system, basically bestowing interactivity on the project.

What my boss showed me as the result of their work was absolutely appalling. I had handed this external agency valid XHTML 1.0 Strict documents and valid CSS. They simply had to make each page generate the appropriate bit of code I had already included, in combination with ‘real content’. What greeted my eyes was at first alarming: broken images and broken lists. I then took a look at the code and my alarm moved closer to shock. Javascript now infested the header area, dreamweaver generated javascript. Bad enough that it was human-unreadable, the worst part was what the javascript was actually doing. A large chunk was being used purely to preload images: which was not in fact needed because no-where on the page was there anything to pre-load, most of the image handling was via CSS, which is cached by nature of what it is. Secondly, it was being used to submit forms. smiley icon: angry

Submitting forms with Javascript is something Satan likes to do. What happens when a user has Javascript disabled? What happens when a user isn’t using Internet Explorer’s proprietary version of Javascript? What happens when a user is disabled and can’t click with a mouse, but instead has to use a keyboard? The answer: nothing. This external agency has at one fell swoop robbed the site of accessibility and narrowed the audience, as well as quite possibly leaving a hole for a law-suit against the site owner at a later date. (Read up on Web Accessibility and the law).
Why were they using javascript submit forms? Because they were doing some very very poor input validation. A tip: don’t trust client side validation. Javascript is viewable by the user, and it is very easy to spoof a page and send none-valid data. Essentially you’re leaving yourself open to serious abuse if all you’re relying on is javascript to check user input. One example would be the possibility of inserting code into the form which could be executed on the server (a code injection attack).
Validate client side by all means, sometimes it saves the user hassle, but make sure you validate again Server side, and try to ensure you’re unreliable Javascript validation doesn’t cause accessibility issues. Javascript forms and javascript links are bad.

It got even worse when we moved onto the shopping cart system itself. Inside my XHTML strict they had inserted three nested tables, each one using old-school presentation tags and thus completely breaking the page validation. The code was an absolute mess and would be very hard to edit and make presentable. Worse still the actual output of the code was ugly as sin. ASCII art decoration around invalid font tags, no attempt to blend the visual style with the rest of the site, and completely ignoring and over-riding established styles already provided by my CSS. Broken layouts due to their forced width tables.
I almost felt sick. I certainly felt angry. My boss was less than impressed too.

The result of all this? I have a renewed appreciation for modern design technique, a renewed hatred of Old School design, and a compelling urge to read up on-line credit card transactions, so we never have to farm out again.

Comments

skip to comment form
  1. Sabrina (from 4UM - was Alvahund) posted 7 days, 23hrs, 32mins after the entry and said:

    Aww, that’s horrible smiley icon: sad
    Will you have to use it like this then? That would just be awful, but you probably don’t have much of a choice, I guess? Man!

    It’s really incredible how much bad coding is out there - even from the people who _should_ know better.

    I’ve been looking for work recently and being the geek I am, my first step when researching possible companies is checking their web-site (and, of course, source - I did say geek, right? smiley icon: wink)

    Anyway, all but _one_ used table-based layout filled with deprecated tags. None of the ones I checked validated. No separation of content, presentation and functionality there. And these are all big software-companies. Pretty embarassing, I think.

    Now, if you’ll excuse me, I have to read the rest of your entries smiley icon: smile (It’s always great to find a kindred spirit!)

  2. MWF posted 8 days, 22hrs, 38mins after the entry and said:

    I’m afraid there will always be the battle against the established design agencies and the savy Web designer.

    The fact of the matter is that Web design is a product and when you look from a company level downwards the integrity of code can easily start to take second president to other aspects, in fact code quality can easily become the last consideration and the reason is simple. All businesses work on a simple equation, if your product costs more to develop then the costs go up to the point where you become uncompetitive.

    So the result is simple, the Web designer can either cut their hours down by increasing their coding speed i.e using an editor such as DreamWeaver or insist on coding to their best ability and ramp up that development time. Now I appreciate that some Web designers can code fast but I point blank refuse many people can throw a Web site together much faster than myself, and yes I did use the term ‘throw together’. On a client level they will only over see two things, Option 1 which does 99% of what it should or Option 2 which does the extra 1% for twice the price. This is your problem, convincing clients they need to spend the extra on good code, you’ll find most go deaf, or worse elsewhere, if you try.

    The same principle goes hand in hand with things such as functionality, design, photography the list is endless. It will always boil down to the value of quality who will pay for it.

  3. Matt Wilcox posted 11 days, 1hrs, 27mins after the entry and said:

    Hey Sabrina smiley icon: smile
    It’s true, very few web design agencies websites are actually any good, let alone validate (neither does my employers site, but thats because we haven’t got the new version live yet). At least major corporations are getting it right. Disney UK, Nike, and Microsoft(ish) are leaning strongly toward standards now. I’m lucky in that my boss agrees with my view, and any web project we output will be as valid and accessible as we can make it.

    MWF - The buisness model is true enough, but I think the problem is the misconception of the cost of using ’standards’ design. In actual fact it doesn’t take much longer to impliment, and depending on the project it can sometimes take less time.

  4. MWF posted 18 days, 22hrs, 45mins after the entry and said:

    Jimi you are far too modest about yourself! While you have a brain capable of good design and good coding just think of all those designers out there bound to html and Dreamweaver who simply find it too hard or intimidating. This guys blog entry sums my thoughts up well, and probably yours too.

    http://www.orderedlist.com/articles/a_practical_start

  5. Matt Wilcox posted 27 days, 2hrs, 51mins after the entry and said:

    That article is pretty spot on I think. I do forget that my own conversion to standards was essentially due to my enthusiasm with a hobby. I found it easy to switch because I had no time pressures and wasn’t already attatched to a certain way of doing things. I had plenty of time and motivation to read up and play about until I could wrap my head around what was being done and (more importantly) why it’s done that way.

    Now I do web design/coding for a living I can see the other side of the coin.
    It doesn’t help when you’re trying to learn via the web either, you just run into a stumbling point all the time. That CSS rule won’t work in IE, neither will this other one; you can’t use that HTML tag with that Doctype; what the hell is a doctype decleration anyway; tables are evil; tables are not evil; my site finally validates but it breaks in IE!? etc.

    Reading a couple of good books put me straight on the why and the how in short order though. Which reminds me, i can lend you Zeldmans ‘Designing with Web Standards’ if you like. It’s a bit dated now, but the ‘why design with standards and accessibility in mind’ issue is still very relevent, even if the code solutions are not.
    http://www.zeldman.com/dwws/

From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.