Over a million developers have joined DZone.
Platinum Partner

Design Theory vs Reality – A Plea

· Web Dev Zone

The Web Dev Zone is brought to you in partnership with Mendix.  Discover how IT departments looking for ways to keep up with demand for business apps has caused a new breed of developers to surface - the Rapid Application Developer.

Should you still doubt it, I'm not the graphical designer type. I can manage html and css, some basic javascript if needed, but don't present me with a blank canvas because I'll choke. Still, as an everyday (an avid) user of the web I can comment on design choices and even challenge design theories, so that's what I'm going to do here. At the same time, this article will be a plea to my designer colleagues to get their act together.

In my opinion, 2013 has not been a very good year, design-wise. More than ever I've been bothered by design decisions that actively hinder the speed and comfort at which I can consume a website. And when design becomes a hurdle, I think it's fair to call it bad design. While I read up on the theory behind such choices (and can understand why they are applied), it's clear that there exists a large gap between theory and reality that's being ignored by some of these designers.

1. Custom Fonts

Custom fonts are probably the worst thing that could happen to the current web. At least, in their current state and implementation. Not only do they present extra page weight that I personally don't care about, most of the custom fonts I've encountered actually hinder legibility.

As a Windows user, it's actually quite easy to see which designers work on Macs and which use Windows. Font rendering between the two OSes is wildly different and most fonts are ill-equipped to deal with those differences. You know all those thin fonts that look so damn sexy on Macs? They look like famished stick figures on Windows. They are blocky and ugly, some characters looking more like torn-up war victims than actual readable characters.

Font theory sure is interesting to read, but it is based on an assumption that a font renders a certain (exact) way. I've often compared font rendering between Windows and Mac and the differences can be staggering. Even browsers have a different way to render fonts. I know everyone is tired of Arial and Helvetica, but picking fonts that look cool on a Mac and leaving 90% of the desktop market looking at massacred text is definitely not a good alternative. If you're opting to use custom fonts, make sure to test them cross-OS and cross-browser first.

2. Huge Type

Mike Anderson (sorry for singling you out) wrote a pretty in-depth article outlining the reasons why he prefers huge type. It has almost become a de facto standard for blogs these days to use 16-18px as base font size. While his reasons make sense (and contain some long-standing design principles), I feel many of his arguments are based on wrong analogies and optimal situations.

Mike starts off by stating that he wants his site to be read like a book. While that's a fair goal, the web is so vastly different from print that it's a pretty impossible analogy to make. With a book your eyes move from top to bottom, from page to page. On a website your eyes go from left to right, but the upwards/downwards motion is often handled by mouse/touch input. Maybe it's just me, but I never read to the bottom of my screen before I scroll to the next part of an article, instead I scroll almost continuously, keeping my eyes centred on the screen.

Now, this isn't too big a problem if you somehow have smooth scrolling enabled. But I don't. I use a scroll wheel to scroll. When I scroll text jump X amounts of pixels, which is far from easy on the eyes. So even though line lengths, line heights and huge fonts may all contribute to easy reading in books, it doesn't necessarily amount to the same results on the web. The bigger the fonts and the more they breathe, the more I have to scroll. Hence the small type on my blog as it doesn't take more than one or two scrolls to read the entire article on a desktop.

It's not only that though, once you scroll a few times you end up looking at a sea of white, showing hardly two full paragraphs at once on a screen. I often feel dwarfed and lost reading blog posts like that, as if I'm sitting too close to a TV screen to see the full picture. I also miss the context of where I am in the article. Books have pages and physical attributes to help you with that, but online, there's only a scrollbar and that's only if your browser still displays those.


My conclusion is pretty simple: design for your audience. Designing in a browser solves a few issues, but people use many different devices, browsers and OSes. Design theories are good (and necessary), but when they don't match other people's situation they are actually quite worthless, sometimes even counter-productive.

If you design on Mac, please check how your designs look and behave on a Windows machine. Check out how they work on Android and WP. You may look down upon these OSes, but they still present the majority of the users out there, and if you're not careful you're giving them a horrible experience. Which, in return, reflects directly upon your skills as a graphical web designer.

The Web Dev Zone is brought to you in partnership with Mendix.  Learn more about The Essentials of Digital Innovation and how it needs to be at the heart of every organization.


Published at DZone with permission of Niels Matthijs , DZone MVB .

Opinions expressed by DZone contributors are their own.

{{ parent.title || parent.header.title}}

{{ parent.tldr }}

{{ parent.urlSource.name }}