-
Notifications
You must be signed in to change notification settings - Fork 0
/
form-over-function.xhtml
38 lines (38 loc) · 9.79 KB
/
form-over-function.xhtml
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>TIWWCHNT II: Form Over Function</title>
<meta name="author" content="Magnus Achim Deininger" />
<meta name="description" content="Moving on from Volume I, we continue by examining a lot of the misguided attempts at layouting commonly found on the web." />
<meta name="date" content="2012-08-05T13:57:00Z" />
<meta name="mtime" content="2012-08-05T13:57:00Z" />
<meta name="category" content="Rants & Ramblings" />
<meta name="unix:name" content="form-over-function" />
</head>
<body>
<p>On the web, people just want to find information. And if at all possible, they certainly don't want to download megabytes of metacontent and images and scripts and several metric shittons of advertisements that may not even be used on the page just to find out that, say, today's weather will be sunny and tomorrow it might rain. They definitely don't want to wait around for that tiny bit of information to load.</p>
<p>An utterly bewildering amount of <q>Professional</q> websites seem to think otherwise. Often they're content-deprived company websites that really don't have more information than <q>Oh Hai, we make X and Y and sometimes Z, here's our address and phone number</q>. In lieu of actual content, someone always seems to find the need to hire a so-called <q>designer</q>. But they never seem to hire any actual <em>web</em> designers. Or maybe the lot they hire just switched careers from designing magazines and flyers. Who knows.</p>
<p>Oh and before we start: yes I do realise that there are actually a lot of books on the subject that contradict me on these points. But let me ask you this: do you really think it's a good idea to follow the advice in a <em>book</em> - the prime example of a <em>print medium</em> - on how to design <em>websites</em> - the prime example of a <em>hypertext medium</em>? Didn't think so. That would be like asking some random Asian guy to teach you how to cook Italian food: it might work, but chances aren't so good.</p>
<h1>Tabloid Layouts</h1>
<p>Putting your content in lots and lots of small boxes and columns all over the place may be a popular layout technique on tabloids and newspapers - really the same thing when you get down to it - but it's definitely not a good idea on the web. This particular problem seems to affect <q>portal sites</q> more than any other. High profile ones, too. You know, like MSN, Lycos, Yahoo and T-Whatever. The former two seem to have gotten better there, the latter... not so much...</p>
<p>The idea in tabloids, arguably poor conceived as it were, seems to be that you try to give an overview over whatever happened in all sorts of different areas. Often the different areas are colour coded, which is even an acceptable use of colours if you don't go smorgasbord over it. But here's the thing: this just doesn't work on websites. It looks like you're trying way too hard to have too much information in one place that doesn't fit together. And it makes it really hard to find what you're looking for at the same time. Just pick one item for the front page and add links to the different areas and a search function. Your users will thank you.</p>
<h1>Fixed-Width Layouts</h1>
<p>This seems to go hand in hand with the previous problem. For some reason, some designers insist on making layouts that are supposed to be exactly, say, 900 pixels wide. The remainder on either side is filled with a background pattern. The idea is often to make certain that the line width for text does not exceed that of contemporary print media. It has been established, through all sorts of trials, that some line widths are easier to read and process <em>on average</em>. That last part is pretty important, so remember it.</p>
<p>In print media, this is easy to force by simply making your book or magazine as wide as you want it to be. On the web, designers seem to be shitting their pants at users using whatever width they feel comfortable with for their browser window. So they figure that most users will use a full screen browser at 1024x768 or some other popular resolution, design for precisely that and force users with larger screens to see a lot of their useless background image. This gets exceedingly irritating as devices gain larger screen resolution. Like, for example a stock 27" iMac at 2560x1440?</p>
<p>I've got news for you: your users quite probably have picked their browser's window size to be comfortable for them. If they prefer to read pages at sixty words per line, let them. It's their choice to make. So don't go telling them what size their window should have been by forcing your page to be some arbitrary width. Actually, the instant you think <q>Hey, what's the average user's screen width going to be?</q> please do us all a favour and sleep in, do not call your boss and wait for a letter with your two weeks' notice.</p>
<h1>Multi-Column Layouts</h1>
<p>And by multi-column layout layouts I mean the technique you see in newspapers, where you have a small column with text that carries over to the next column and you then arrange it all in four to five columns per page. I'm not talking about the web technique where you use a third or so of the side of the screen for out of band information. Now I'll admit that these multi-column layouts usually look really good in print media. So, web designers often seem to try and do this when they realise how ridiculous their fixed-width layout looks on a large screen with 60% whitespace. While it does help with the whitespace, it's still a ridiculously bad idea for web sites.</p>
<p>First of all, you're forgetting why your user wanted to use a larger resolution in the first place: quite likely they don't mind the line width. Ignoring that argument, chances are you'll make it even harder to read your website. For one thing, your columns are probably going to be too long for one screen page, meaning that users will have to scroll down while reading a column. That's OK in and of itself, but then oftentimes the columns are arranged in such a way that you have to scroll back up to read the next one. It's like trying to read a multicolumn PDF with one page fitted to the screen width. It's really annoying.</p>
<p>Then apart from all that, multicolumn layouts have a nasty habit of obscuring the actual text flow. Sometimes only paragraphs flow downwards in one column, sometimes they carry over to the next column, sometimes headings will break the columns and start new ones, sometimes subheadings will not and flow with the rest, sometimes there's bloody pictures and catchy quotes in the middle, etc, etc. Honestly, don't confuse people like that and simply don't do it at all.</p>
<h1>Tag Abuse and White Noise</h1>
<p>This isn't limited to poor design alone, but will creep in in all sorts of websites. There's basically three related <q>invisible</q> problems: adding superfluous <em>div</em> and <em>span</em> elements, using those same elements for content where there exist dedicated markup elements and finally, leaving tons of whitespace in the generated XHTML.</p>
<p>For the tag abuse issue, here's a nice rule of thumb to follow: if you need to add an extra <em>div</em> to your markup that you can't tag with a generic, semantically useful class, you're trying to do something that you shouldn't do in the first place. So don't do it. Also remember that the <em>body</em> and <em>html</em> elements are actually stylable with CSS. You do not need to introduce a div with "all the content" just to style it. I always figured this was obvious, but seeing sites where the only child node of the <em>body</em> element is a <em>div</em> that contains everything else is so common, I figure this bears special notice.</p>
<p>As for the whitespace, please just run the output through XSLT or HTML Tidy or whatever. Except for <em>pre</em> elements, all whitespace sequences are converted to a single space by browsers, so they serve absolutely no purpose whatsoever. They just make your files bigger. The same goes for SGML comments. Bigger files are always worse than smaller files if both of them have the exact same meaning to the browser, wouldn't you agree?</p>
<h1>Custom Fonts</h1>
<p>The first time I saw this I just had to facepalm. There's actually people out there that use JavaScript to render images of text blocks in their own fonts, just so the designers can have it their way. They often work like this: you write your markup rather normally, and then include some scripts that will replace these blocks with inline images upon loading the page. And all this because, you know, there's bound to be huge differences between typical sans serif font and, say, Myriad Pro. Except... not really. I guarantee you that your average reader will not notice the difference, unless they try to mark the bit of text in question. Because, you know, doing something nasty like that breaks simple things like text selection.</p>
<p>But honestly, if you go that far you completely missed the point already. It's over there. Way over there. Go fetch it and let someone fix your site for you.</p>
<h1>Locking out Specific Browsers</h1>
<p>This is just wrong on so many levels. There's two common reasons for this: <q>We can't guarantee that it will be safe for us if users try a different browser</q> and <q>the design might not look so well on other browsers</q>. In the former case, here's what you should do instead: just write your precious web application sensibly. Then you don't have to worry about evil browsers. There, that was easy.</p>
<p>Now, if you're blocking people because you're not sure if your layout would work with their browser, let me reiterate something you probably forgot: <em>Nobody gives a rat's arse about what your site looks like.</em> Honestly. Besides, if you had done a decent job in the design phase, you wouldn't even be having this problem. So just suck it up and stop being a bitch.</p>
</body>
</html>