Web Design: the Good, the Bad, and the Wha?
WFMU is my favorite radio station. Period. It’s completely nonprofit, run by volunteers, from the DJs, to I assume the web designers. And though the content is top notch (mostly) it’s not all that surprising that a not-for-profit radio station, built on the sweat of its volunteers, doesn’t have high marks for web design and usability.
I would love to spend hours on hours surfing through the past on WFMU’s blog. This is a cultural treasure trove. But I can’t. My eyes . . . hurt. It is simply . . . hard to read the text. Aside from it being a very noisy page, the reading distances aren’t accounted for.
I’m reading on a laptop and I’ll be damned if I can go through one blog post without the text blurring or starting to float before me. And I’m barely out of my twenties! It can’t just be me. Even though I’ll note that the Blogger element is cool for these kinda early internet vibes. Vintage, man. So rad.
All it would take to fix the readability issues would be to adjust the font size of the body text from 13 px to, at the bare minimum, 16 px. I would add a grid in the middle section so that text lines do not extend beyond 70–80 characters. I get that it’s meant to be a responsive design, and it works well for a smartphone or a tablet, or if you adjust your window size to half the screen — but not on a full screen. The lines extend too far. They need to be constrained. And if a black background is important to maintain the edgy aesthetic that WFMU is going for, then, for goodness sake — for my sake — for the sake of people that you’re trying to reach — change the font color!
Orange, as the annotation above shows, is far more readable against a black background. But it’s just a suggestion. I’m sure my eyes would really hurt if orange type was actually used. A sans-serif Ariel font…does not, by the way, make the readability issues any better, and it is definitely not a good design choice for a site that wants to portray itself as edgy, cool, hip, whatever. Given the readability issues, I would go with a serif font for the body text even though that would be a tradeoff against a more modern typeface.
You would think that a website’s blog would have a way for a user to navigate back to the original website (WFMU.org). Yes, you would think. But not the designers of WFMU’s Beware of the Blog guys and gals. Nope. Oh, wait. I found it. Below the fold on the right sidebar. Really?
Plenty of other design issues with the main site, but out of respect for a station that I love, I’ll stop short with only the typographical mess.
A Better Radio Site Design
…is hard to find
What is it with radio websites? I get it. Radio is an auditory medium. But the web’s a visual space. When a monstrosity like, ngradio, wins a web award for good web design, and WFMU gets to be a 2015 webby award honoree, you know you have an industry-wide problem. I’ve looked through at least fifty websites to find a records to records comparison and the best design I found, a subsidiary of NPR, WNYC.org.
Alright, here we have a clear, well-organized, clean and elegant design. That’s not the kind of vibe a site like WFMU is going for — and I’m not saying they should be — but it is precisely the kind of design that you would expect a highbrow public radio station to produce. And produce it it does.
The design is mobile responsive. It’s easy to scan the page, and easy to read the text. The information is well organized. The logo, prominently displayed in the banner — a banner, that is completely uncluttered. The articles have about a 90 character margin limit when viewed in full screen mode.
Just look over on the left, how beautiful the loading animation is when transitioning from one page to another.
The viewer’s eyes are already adjusting to the layout that they’re about to encounter, helping them to put together a mental map. Look at all that negative space!
It’s not arbitrary. It clearly establishes and helps delineate all of the distinct sections. The headings and subheadings, pop out, largely in part to the negative space. That’s one of the main differences between WNYC and what we saw from WFMU.
