-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathdear-web-designers.xhtml
30 lines (30 loc) · 4.89 KB
/
dear-web-designers.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
<?xml version="1.0" encoding="utf-8" ?>
<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en">
<head>
<title>Dear Web "Designers"</title>
<meta name="author" content="Magnus Achim Deininger" />
<meta name="description" content="Yeah I was eerily reminded of my This-Is-Why-We-Can't-Have-Nice-Things series from last year, too. This kind of sums it up pretty well." />
<meta name="date" content="2013-03-26T10:54:00Z" />
<meta name="mtime" content="2013-03-26T10:54:00Z" />
<meta name="category" content="Rants & Ramblings" />
<meta name="unix:name" content="dear-web-designers" />
</head>
<body>
<h1>This Shit's Gotta Stop</h1>
<p>It's one of <em>those</em> mornings today. I'm all snowed in because just yesterday the weather changed from motorcycling-compatible to ZOMGTHERESSNOW-LETSALLFORGETHOWTODRIVE and so I find myself telecommuting because there's no meetings today and the office isn't exactly teeming with life to start with. It's a great arrangement, really, but with our internet at home being ridiculously slow it sure as hell could be better.</p>
<p>So I'm sitting in a comfortable chair, waiting for a compile on the servers back in the office, when I find myself reading today's news on Twitter. And that's when I stumbled upon <a href="http://www.n24.de/news/newsitem_8697608.html">this little gem of shitty web "design."</a> At the time of me reading this article for the first time, the page looked like the screenshot under <em>Exhibit A</em> - I've highlighted the <em>actual content</em> in something red/pink-ish and the content you'd see in a full screen browser at their (presumable) target resolution of 1024x768 on the first page load in piss-yellow.</p>
<p>The honest to Odin truly sad part: <em>all of those news pages look just like that!</em></p>
<h2>Exhibit A</h2>
<p>OK just to be on the safe side: the following is not an advertisement. It's the screenshot. Sure as hell looks like an ad given that it is a screenshot of a page with tons of those, but yeah:</p>
<img src="/png/n24-de-before" alt="N24.de: http://www.n24.de/news/newsitem_8697608.html: What not to do as a web designer."/>
<p>Uh, right, is anyone still with me?</p>
<h1>So What's Wrong With That?</h1>
<p>Hoh boy. Okay here's the main problem: The content-to-clutter ratio is completely messed up. I know a lot of my readers can't read German - probably a good thing - but the highlights alone should give you an idea of how useless this layout is. Basically the whole article is just a quote from that bloke there in the picture. They managed to stretch that to <em>four</em> paragraphs, somehow. Layout-wise, it's hard to tell that the fourth paragraph is actually part of the content, if you're kind enough to call it that, although admittedly it does give information other than said quote.</p>
<p>Then there's the fixed width - and possibly the small font size, depending on how good your eyes are. I'm <em>guessing</em> by the bounding box of that advertisement to the right that the so-called "designer" tried to go for something that would work on 1024x768 resolutions - a surefire way to get web design wrong in and of itself. The big whoppin picture of Mr. Schäuble isn't exactly relevant to the content either - he's the one being quoted, but his face still shouldn't drown out the text.</p>
<p>Now, thinking back to the presumed target screen size, the "designers" felt it necessary to add insult to injury with their advertisement placement. OK, let's assume for a moment that you actually did use a 1024x768 resolution with your browser in full-screen mode. Notice something with the yellow and pinkish markings? Yes, that's right: The bloody title of the article and the first paragraph are just barely visible at the very bottom of the page. Hidden by that monstrous flash ad at the top. Seriously? C'mon, at least <em>try</em> to tease people into reading the content.</p>
<h1>Here's What It Should Look Like</h1>
<p>You may have noticed that most recent browsers include a nifty little feature: right-click on a page and choose "inspect element" and you'll be presented with the page's DOM tree. What few people seem to realise is that you can actually manipulate that DOM tree - remove nodes, change attributes, etc. So because my compile still hadn't completed, I figured it'd be fun to strip down anything utterly unrelated to the article for comparison. The result is this:</p>
<img src="/png/n24-de-after" alt="N24.de: http://www.n24.de/news/newsitem_8697608.html: What that page should've looked like."/>
<p>Notice that blank area to the lower right. Now there's a perfect spot for ads - If you'd have put 'em there, they wouldn't even have distracted from your content! But I guess not. Oh and before any of you anti-adblock people start complaining about needing ads to fund the website and all that merry horseshit: n24 is an actual private news channel on the telli. It's really not like they wouldn't be able to raise money on there, so cut the crap.</p>
</body>
</html>