News Websites: Make Your News Readable!
For anyone involved in web development for news publications, one of the most important aspects of the website is its textual layout. Your site must be readable on a variety of devices, and, failing that, you should try to make it look great on at least one platform (usually the desktop browser)—typically other platforms will follow.
There are a few things to watch out for:
- You can have lines too close together—use line-height to give proper spacing/breathing room between consecutive lines of text.
- You can have paragraphs too close together—add some margins between paragraphs so they are divided visually.
- You can have too narrow a viewport for your content, meaning users spend more time scrolling than reading. (However, you don't want to have it too wide either—sometimes a semi-fluid layout can be useful).
Let's take an example:
The Catholic News Service website has been around for a very long time, and they distribute tons of articles to the Catholic community. Their website, as it currently stands, is a bit difficult to read for those with larger screen sizes.
Opening up the site with Safari, I can enable Reader use Instapaper to read the story in a wider format, but that is a barrier to getting to read the content quickly.
In order to make their layout more presentable, I would suggest the following:
- Make the body text black (right now it's blue), for added contrast.
- Make the layout about 200px (or more) wider, for longer lines of text.
- Possibly diversify the color scheme a bit—an orange color would be great for highlighting certain elements; alternatively, some more greys could help hide certain distracting elements (like meta information).
I think most Catholic news organizations could take a second look at their website and begin the groundwork towards making their sites easier to read for any visitors—especially those reading the site on the desktop. I realize that some of these sites have a lot of legacy content that would need to be updated to make it conform to a new design, but nowadays tools are more abundant than ever to get this to happen, and I'm sure there are some on this site who would be willing to help :-)
(As an aside: RSS feeds are also helpful for readability, as many people are used to reading news through their favorite news readers—if your site doesn't have an RSS feed (or many), then you should consider adding one at some point. It has other benefits as well, such as increased exposure to the Google News site and other aggregators).
Comments
Most of the inspiration for this post: http://whispersintheloggia.blogspot.com/2010/06/on-media.html
Advancing the faith.
All of the previously mentioned sources have about 10-13 word long lines and use serif fonts. The human eye gets too fatigued having to scan across a longer sentence, and a shorter sentence stops the flow of reading too readily. Additionally a serif font is associated with professionalism and seriousness while sans-serif has always been considered unprofessional or artistic.
Take a look at your morning news paper (do you still get one?), a paper back novel, the Catechism, etc.. They all follow that rule. Your Bible will mostly follow that rule. Notice how Bibles, in an effort to fit more content between the covers, use a small font with a two column layout where each column has roughly the previously mentioned features?
A quick survey of various on-line media, from all of the major secular news sources, to Gmail and Wikipedia, shows that these two rules are widely broken. Not always, mind you, many of the news outlets still use columns that hold 10-13 words, but the serif fonts are definitely gone.
I would guess that the increasing ubiquity of LCD screens impose a harsh penalty of some sort on serif fonts that makes them less than desirable for delivering web content as nearly nobody uses them.
I've found that I prefer the sites that maintain a 10-13 word paragraph width over sites that don't. In my opinion, even Wikipedia is better if I squeeze the page a bit using the browser window.
Serif font versus non-serif font aside, I think that the Catholic News Service's site could do with at least an increase in font size with a commensurate increase of column width for sure. However, I wouldn't destroy the 10-13 word layout that they already have.
Regarding the more visual aspects of their site, I also agree that something needs to be done to break up the white space.
So here's a couple of questions. What happened to the serif fonts? If they're bad for modern displays, are there ever times where they're good?
Very nice reply! Regarding serif fonts... I think we will start seeing their return as displays' pixel densities get more dense.
With the iPhone 4, the pixel density is such that I don't think it would break up 10 or 12 point serif fonts too badly. The major problem on most modern displays is that there are ~100 pixels per inch, and if you're trying to read text that's 10-14 px high, serifs do nothing but confuse the eye, since they're so blocky...
There is something to be said for having narrow columns; many newspapers use about a 2" column—I find that distracting, especially with justified text—and many websites have too wide of layouts, especially if they're flexible. But wider adoption of CSS3 will allow us to start using columns again...
See:
Advancing the faith.
OK...I seem to remember reading something - somewhere, that the use of serif fonts was brought about due to issues with ink on paper (among other things). Also, conventional wisdom (which could be wrong of course) is that the 'serif' part of the letter is supposed to 'lead' your eye to the next letter (presumably to increase readability).
Jeff is right, pixelation issues tend to cause 'aliasing' of sans-serif fonts and making it more difficult to read...again, ink just soaks into the paper and the human eye just perceives a sort of 'feathering' effect. This is why sans-serif fonts are thought to be easier to read on monitors.
For me personally, I don't necessarily care too much between serif and sans-serif as much as...
- font size. I despise (overly) tiny type...cmon man...monitors are huge and cheap now!
- line height needs a little room to breath
- (overly) light text. I don't mind it a bit lighter for contrast purposes, but for long chunks of content I do like it a darker (preferably darker than #555).
Just came across this article on typefaces that I thought was apropos:
http://www.bbc.co.uk/news/magazine-10689931
Post new comment