home

Create a Comfortable Reading Experience

"Don’t tell us to get glasses."

As usual, most laypeople (and even designers) aren’t very specific in evaluating visual design. If I were to give you quick bullet-points from my free design course, I’d say:

  • Just use one (quality, appropriate) font
  • Use just a few font sizes
  • Use one dominant color, while keeping the rest black, white, and gray
  • Spend more thought on your white space than anything else

The way users read on the web is different from the way they read printed pages. For most people, reading onscreen is tiring for the eyes, and 25 per cent slower, so users scan the page until they find information relevant to their search and then they read.

The web is a user-driven medium. People want to complete a task, and do it quickly. If a website is difficult to navigate or read, they'll leave.

Thankfully, we’re starting to see something of a Renaissance. Comment-forms are dropping off blogs like vestigial tails. Text sizes are increasing yearly, and sites are being stripped and whitewashed, with most of their old cruft gone without a trace.

In my first few years of blogging, I tended to use every possible widget and feature. I had sidebars packed with clutter. I realised that I’d been focusing on my own obsession with what was possible, rather than what’s actually useful for the reader.

There’s no higher priority than readable text, and yet bizarrely I still regularly find blogs with tiny fonts, long lines, tight spacing, background textures, or inverted colour schemes. Don’t do that. Your words are worth reading, so present them with due care.

Make text sufficiently large. Default blog themes are getting a little better at this, but I still think that most have text that’s much too small for the layout.

Never break text- or content-zooming.

Links should be obvious. Personally, I still firmly believe in underlined hyperlinks (in body copy; I make an exception for headings), in a distinct colour. Blue is a great choice. Make the underlines solid. Don’t use underlines for anything else, either (never for emphasis).

Use an appropriate line-spacing.

Make a clear distinction between visited and unvisited links. Visited links should still be as distinct from the surrounding text as unvisited ones too.

Don’t make links that open new windows or tabs; it’s grossly hostile to the reader.

Don’t ever break the back-button. Don’t even touch the functionality. It’s not yours to play with.

Focus on the content. Ruthlessly minimise any meta-elements at the top of an article. People don’t want to interact with those; they want to read what you’ve written.

Your site should reflow and restyle itself gracefully to suit the screen’s dimensions. These days, you can do it all in pure CSS using media queries.

I’ve found that there are very few essential features for a blog, except displaying its content effectively.

When I visit a new blog, as I do several times each day, my first assessment is whether the content is obscured by the design. I’ll rarely consider whether the design enhances the content. I’m visiting for a purpose, and the purpose is to read.

I’m sick and tired of cramped websites that have tiny type and don’t use the whole screen well. I’ve come to believe that the problem with reading on a screen isn’t the backlight—it’s that the type is too freaking small. Most designers don’t even know that there is an optimal number of characters per line.

To set up a correct size for you font remember that you won’t probably have readers with super-sight so try to avoid small texts: don’t write your content is 10px or 12px, if it’s possible make it bigger. Have you noticed how well-readable are the posts here on Medium? Well, the font size is 22px.

Colors and contrast combined together are the third element of my personal typography formula: text exist to be read, allow the reader to do it in the more comfortable way.

Line-height and blank spaces are also important in typography so don’t be afraid of them: your text need to breathe. As regards the line-height the standard rule for web typography is to set it at least at 140% of your text size.

I’ve noticed how seemingly small things like font and the spacing between letters can impact how I feel when reading online. The right font choice along with the absence of sidebars and popups makes everything feel easier and better to read.

When we read, our eyes follow a natural pattern called a Scan Path. Your eyes typically move across a page for between 7-9 letters before needing to pause to process what you’re reading.

The researchers found that readers felt bad while reading the poorly designed layout. Sometimes, this feeling would be expressed physically with a frown.

Meanwhile, the participants who read content from the good reading layout, felt like it took less time to read and felt better.

People exposed to the well-designed layout were found to have higher cognitive focus, more efficient mental processes, and a stronger sense of clarity.

The quality of your content is the most important thing but how you present that content by choosing the right font and layout still has its place.

The most important thing with choosing a font is to make sure the letters are easily decipherable from one another so your readers don’t have to spend precious mental energy identifying letters.

Medium has one of my favorite reading environments online and they use a 22px font size. Several of my other favorite websites have adopted a font size over 20px for their content.

The line length is how far your sentences stretch across the page. The ideal line length should be between about 50-75 characters.

This line length has been shown to be most effective in helping readers move through their Scan Path.

If the line length is too short, your reader’s rhythm will break because their eyes must travel back to the left of the page too often.

A line length that is too long makes it hard to find where lines of text start and end. It can make it difficult for your reader to get to the next line without accidentally jumping to the wrong place.

Adequate spacing between letters is important for your readers to be able to move through sentences fluidly. The tighter your letters are together, the harder it is for people to identify the shapes that make up different letterforms.

People don’t like being distracted when they’re trying to learn something. Ads, popups, sidebars, share buttons, etc are distracting (and annoying). They are serving your goals, not theirs.

So if your site is truly reader-focused, what are the most important pieces?

The content/text of the article in a well-sized, well-spaced typeface. Set in a column with optimal number of characters per line (a CPL of 50-70 is considered ideal) with a line-height of around 130%. And obviously, the content is epic, valuable, and insightful.

When it comes to reading, the Web has become less than ideal. Hard to read type, bad layouts and increasingly larger format ads distract you from the content. It’s too common a feeling that sites try to get us to focus on everything on the page except what we came to the site to do… read the content.

Imagine - Your vision isn't 20/20 anymore, just like 65% of the population, it’s worse than that. Like 4.25% of people on the planet you are color blind. You are now 1 in 10. You are dyslexic. Your phone is 3 years old. You can't afford a new one. Your data plan caps out at 3g and 1 gigabyte a month. The internet connection where you spend most of your time is not what you'd like it to be.

Imagine - You can't see at all. You use a computer with a screen reader. A mouse is mostly useless to you. You use your keyboard to navigate around interfaces and sites.

If you woke up tomorrow without knowing what your life would be like - and you needed to build a new internet for everyone. What would you think about? What would your priorities be? What problems would you try to solve?

Imagine the frustration of people who use things designed by people who don't take their basic needs into consideration. I think it is dehumanizing.

Think about the current state of the website/application/digital product you were working on. Can everyone use it with the same opportunity to participate in 'mainstream American life?' Statistically speaking, probably not. But you are providing a service.

Facts

  • At 20 years old, your retina receives 100% of the light that hits the eye.
  • At 40 years old, only 50% of the available light enters the retina.
  • For an 80 year old, 25% of the available light passes through the retina.

When people say "My old tired eyes can't read this" It is because they can't.

Typography, like color, and music is all about how values relate to each other. If large type looks clumsy it is most likely due to an ineffective type scale that doesn't relate to the proportions within your design system. Type scales are all about relativity.

The thing about large type, is that everyone can read it. Not everyone can read small type. This is a fact. No one complains that typefaces set at 20px are too big to read. In all of the user testing I have ever done that has never been said. But people have complained about the readability of type set to the equivalent of 10 and 12px.

I’m a designer. I am not here to focus on making things pretty. I’m here to make things work.

I am a designer because I want to solve problems. I want people to be less frustrated when they use technology. I want to make their lives easier.

"Information presented with clear and logically set out titles, subtitles, texts, illustrations and captions will not only be read more quickly and easily but the information will also be better understood and retained in the memory. This is a scientifically proven fact and the designer should bear it constantly in mind."

Most websites are crammed with small text that’s a pain to read. Why? There is no reason for squeezing so much information onto the screen. It’s just a stupid collective mistake that dates back to a time when screens were really, really small.

Don’t tell us to adjust the font size. We don’t want to change our browser settings every time we visit a website!

Don’t tell us busy pages look better. Crowded websites don’t look good: they look nasty. Filling pages with stuff has never helped usability. It’s laziness that makes you throw all kinds of information at us. We want you to think and pre-select what’s important. We don’t want to do your work.

Don’t tell us scrolling is bad. Because then all websites are bad. There is nothing wrong with scrolling. Nothing at all. Just as there is nothing wrong with flipping pages in books.

Don’t tell us to get glasses. Rather, stop licking your screen, lean back (!) and continue reading in a relaxed position.

(In June 2016, the Toledo Blade released a new version of its website that was responsively-designed and replaced the two-site setup that existed before. Prior to the new design, the Blade's mobile site used a different system than the site used for larger screens.)

I'd pay nice money for a Blade subscription if the article pages looked something like this:

http://toledotalk.com/last-alarm.html -

... instead of this:

http://www.toledoblade.com/Police-Fire/2014/01/31/Last-Alarm-rings-for-fallen-heroes.html

I don't need a printed paper version. I don't need an app. I prefer one website that responds comfortably on all devices and loads fast with no mountains of JavaScript bilge, no huge irrelevant images, no ads, and no trackers and other gobbledygook that bog down page load speed.

It would be nice if the article page contained a large-ish font size and a lot of negative space. I don't understand why some responsively-designed websites use a tiny, uncomfortable font size on mobile.

I see no need for a bunch of navigation links in the header and footer areas of an article page. No fixed areas. No hamburger or similar menu icons, like I use here. The only link needed is a link to the home page. The reader can find all the site's link cruft on the home page.

Outside of links contained within the article, the only other acceptable link would be to a separate page that contains the Facebook comments, pertaining to the article. If I'm a buying a subscription, I do not want to see Facebook comments loaded on the same page as the article because that slows down the page load and fouls the overall look of the page.

On an article page, I want at least 99% of the page to focus on the article: Title, secondary title, author, contact info, publish date, and content.

Give non-paying customers the hideous views, and give subscribers something worth buying. Until this utopia exists, I'll continue reading with JavaScript disabled, which improves the web-viewing experience a lot.

http://www.webpagetest.org/result/160611_AP_SMV/

http://www.webpagetest.org/result/160611_DA_SP3/

While not perfect, some good design concepts for an article page can be gleaned from this site.

http://motherfuckingwebsite.com

The humorous content is directed at web designers/developers. Excerpts:

Let me describe your perfect-ass website:

  • Shit's lightweight and loads fast
  • Fits on all your shitty screens
  • Looks the same in all your shitty browsers
  • The motherfucker's accessible to every asshole that visits your site
  • Shit's legible and gets your fucking point across (if you had one instead of just 5mb pics of hipsters drinking coffee)

This is a real, naked website. Look at it. It's fucking beautiful.

What I'm saying is that all the problems we have with websites are ones we create ourselves.

Websites aren't broken by default, they are functional, high-performing, and accessible. You break them. You son-of-a-bitch.

Let it breathe

Look at lines 1 and 2 of some shitty website you're building. Assuming they're not married they probably shouldn't be humping. The defaults are trash -- pick a minimum line-height: 1.4 for body copy. Headings should be tighter. If you can't see that...piss off.

If your text hits the side of the browser, fuck off forever. You ever see a book like that? Yes? What a shitty book.

A little less contrast

Black on white? How often do you see that kind of contrast in real life? Tone it down a bit, asshole. I would've even made this site's background a nice #EEEEEE if I wasn't so focused on keeping declarations to a lean 7 fucking lines.

Size Matters

I know your partner says otherwise, but it's true. Bump that body copy to render close to 16px or more. Smaller type works well for print, not the screen.

Line-width, motherfucker

Looking at an LCD screen is strainful enough. Don't make me read a line of text that's 200 fucking characters long. Keep it to a nice 60-80 and users might actually read more than one sentence of your worthless dribble.

I love what the creator of this site's inspiration did. What I'm saying is that it's so, so simple to make sites easier to read. Websites are functional, high-performing, and accessible, but they're also fucking ugly. You and all the other web designers out there need to make them not total shit.

In March 2014, I began trying to create my perfect or preferred article page. I've added new options since. And in January 2016, I added a few more versions.

Starting in 2015, I moved away from using any JavaScript on an article page for a user who is not logged into the site, and that includes no JavaScript-based hamburger icon menus.

I simplify the navigation options. Now I prefer to restrict the links to the home page that contains the stream of posts, and keep the article page as simple as possible with nothing extra except a link to the home page.

I don't see the point of cluttering the top nor the bottom of an article page with header and footer links for navigation or additional info. I say leave that to the home page stream.

The number of responsively-designed websites built by big publishers that use a tiny font size for the phone display is alarming. This bad design produces a miserable reading experience. It makes no sense, unless it's intentional to encourage people to download yet another app.

I don't know why it's a trend to reduce the font size as the screen size gets smaller. Why not keep the font size the same all the way through? Vox.com provides a comfortably-large font size when reading the site in portrait mode on the phone. I wish more sites did the same.

It's also irritating when web designers prohibit zooming in and out of the page and prohibit the ability to read the site in landscape mode.

Some of these uncomfortable, responsively-designed sites would provide a better user experience if they were built like it was 1995. At least I could view the site in landscape mode on the phone and zoom into the page for easier reading.

No CSS and no JavaScript is actually an improvement for some overly-engineered sites. In my opinion, the problem is that too many website publishers/designers/developers focus on extravagance instead of elegance.

I prefer the article page not contain a menu navigation area nor a hamburger icon menu selection. And I now prefer that the header area not be fixed. I want the article page to focus on the content. The article page can contain a home link at the top and maybe a search link. The site's menu options can be listed on the home page. I'd like to see the article page kept clean.

#manifesto

home - info - search