Web Design Wonderful: Make It Legible, Please!
Last week it was my absolute pleasure to share my smarts (and some of my snarks) with the savvy band of social smarties that make up the #BizHeroes crew. I had a BLAST taking part in the Twitter chat, which takes place once a week (you should TOTALLY check it out).
While many find keeping up with the fast and furious sharing of ideas during a these chats on Twitter a little daunting, I find them fabulous. The fast, dare I say frantic, nature means people have to put their thoughts out there, and they do. I get so many article ideas from these chats, even when I’m not the “special guest.”
Web Design Wonderful: My New Wednesday Article Series
My Twitter chat topic was to be:
Website Wonderful? Starts With Well-Planned!
Of course, before we even launched the chat the topic was tweaked a bit and we focused on both planning and what makes a website “good.” Of course “good design” is a subjective term and what’s beautiful to one set of eyes might be a visual marketing monstrosity in the eyes of another.
While I’m not a fan of blanket statements, and I do not believe in one-size-fits-all solutions when it comes to web design, I think there are some almost universally appreciated (note I didn’t say accepted, there’s a difference) design DOs that can and should be applied in almost any web design project.
Let’s Laud Legible!
You know I love to visit dictionary.com when I get feisty!
1. capable of being read or deciphered, especially with ease, as writing or printing; easily readable.
2. capable of being discerned or distinguished.
Stop Making Me Squint!
My eyesight is still good enough that I don’t require reading glasses, until … I come to a website that’s got tons of copy, possibly even GREAT copy, but it’s so ding-danged small I’m forced to squint.
Don’t force your site visitors to grab a set of binoculars or a magnifying glass in order to see what your site says!
Bump up that type size. 10 and 12 pixels won’t cut it anymore. I’m considering bumping mine up another notch, honestly, and I’m already embracing 17 px!
[clickToTweet tweet=”Stop making me squint! #webdesign that’s wonderful? It’s legible!” quote=”Stop making me squint! Web design that’s wonderful? It’s legible!” theme=”style4″]
Get In Line!
Go ahead and add some space between the lines, too, party peeps. Give your content a little room to breathe. It’s one of the first things I check when I’m asked to audit a site, and it’s often the most overlooked little bit of customization that can really rock your visitor experience.
My line spacing is pretty aggressive, at 1.8. Most of the time it’s left at the default, which is anything from 1.1 to 1.3, depending on the theme used or the custom CSS set up by the developer.
I say bump it up a notch. Crowded content can make your site appear cluttered and hard to scan.
Use Your Headers!
Speaking of scanning, a lot of your site visitors will skim quickly, dipping their toe into the pool of your site experience, before settling in for a good swim.
If you’ve been reading this article, and not scanning or skimming, you’ll note that I shared two definitions for legible. The second definition had to do with being able to discern.
When a site visitor is scanning your copy or one of your article, you want to help them discern that the topic is valuable and meets their needs. One great way to do so is to make use of your headers. Sized properly, and with a little color for pop, a carefully crafted set of headers within your longer body copy allow those with less time to decide if your full read is worthy of a few extra minutes.
The longer you can keep them on your site, the more likely that visitor is to take some sort of action, be it adding your site to their RSS feed, signing on for regular updates, or possibly taking you up on your latest offer.
Of course, there’s another side to legibility, and that has to do with typeface (font) selection. But we’ll leave that for a future Wednesday!
It seems such a small thing, but a couple quick fixes to enhance legibility can really enhance the experience of your site visitors. Bumping up the font size and line spacing, and carefully crafting a few headers doesn’t require mad coding and development skills either. It’s web design DIY that could add to ROI.
It’s all about the experience. Can you afford not to make the small changes that make or break the experience of your site visitors?
I agree with all of your points.
Not all of us may have naturally beautiful handwriting, but there’s no excuse these days with the formatting of our digital work. Even the most basic online applications have standard formatting options by default.
However, I have noticed that many web themes have minimal font sizes as the default, such as 10 or 12 pixels. Some make it easy to adjust these, but others require a little custom CSS to achieve those results.
For your readers who do not have the ability to adjust fonts via the theme or CSS, I would like to advise that Google Fonts plugins are available to help with this. Several formatting options are instantly available to achieve the desired results, including making the website legible.
Hopefully, this may help some readers before they complain that nothing can be done.
Thanks for sharing this.
It’s true Nathan. Most themes and site templates have a default type size, and it’s often very small. That being said, I don’t think plug-ins are always the right solution when you need a fix.
I’d say first that when you look for a theme, you need to look for one that allows some easy modifications to the CSS. Any themes we purchase for design and implementation, when we’re not going the custom route, must make CSS editing feasible.
Secondly, if you want to go the DIY route, I think it’s your duty to learn a few simple CSS tricks to make your user experience better. If you just can’t, then you need to have a web design/dev pro on hand to handle these small fixes for you.
Yes, I agree that custom CSS is best for proper control.
Most, if not all of the themes that I’ve used allow som custom CSS modification. I have also noticed a growing trend for themes that include Google fonts within the customisation.