Reading the Web

Reading on the web can be annoying. Websites are often crowded with additional features, graphics, ads, navigation, alternative content, links, and who knows what all else. Every little thing pulls at your attention, drawing your eyes away from the text you are trying to read.

This is the polar opposite of reading a book. In a book, you get the text, perhaps a page number and chapter title in the corner, and that’s it. Even reading modern ebooks, for example on the kindle, you usually still just get text and some information tucked in at the bottom about how far through the book you are.

So what’s up with the web? Why can’t web designers control their impulse to put anything and everything on the page next to the text? The answer is, they’re starting to, and we can see this in both the NYTimes redesign and Medium, the latest venture of Twitter cofounder Evan Williams. Redesign

The previous site design was just as bad as anyone in terms of loading up the page with distracting extras. Below is a screenshot, where I’ve highlighted which part of the screen is actually taken up by the article (including the article’s picture):

Old NYTimes Design

Compare that to the new design, where they’ve recognized how much better of an experience it is when the screen isn’t completely cluttered:

NYTimes Redesign6Because they still need to make money from ad revenue, there is an ad at the top. But notice how I could say “an ad”—there’s just one. And there are still links to share the content online and go to other sections, but they’re kept to strictly defined areas that don’t compete visually with the article. Typographically, the article title now grabs your attention as the most important text on the page, and the social media icons are now all the same color so they’re less visually distracting. And now look at what happens when you start reading the article:

NYTimes Redesign 7It’s text, just text, and a clean, delightful reading experience. The text is punctuated by article photographs, and an occasional ad appear on the sides of the text. But the overall experience is worlds better than their old design and really allows readers to get immersed in what they’re reading, just like in a book.

Medium is a website that I fell in love with the moment I clicked on one of their stories. The latest project of twitter co-founder Evan Williams, Medium is designed for longer-form articles and stories, where the text rules and a collaborative community can read and comment on each others writing. Started in mid-2012 with the idea that the “medium” is essential, their focus on an excellent reading experience has been clear from the beginning.

One of their key ideas is that the design options are as minimal as possible, to keep focus on the words themselves and not how to format them. Medium has chosen a simple layout and a few beautiful typography styles for everyone to use. The navigation is simple, clean, and as hidden as possible—it only shows up when you click the M in the top left corner. Photos can be added and formatted in a couple of different ways, but that’s about all the customization available. And it makes for a damn nice website and a damn nice reading experience.

The only additional features that show up on the side of the text are reader comments. They initially only appear as small icons with numbers indicating how many comments, and clicking on the icon makes the comments themselves appear. They have to be by the text rather than their traditional place at the end of the article, because on Medium readers can comment on specific paragraphs.

Medium DesignMedium also cares about beautiful responsive design for their reading experience:

Medium-design2And Medium proves over and over again that they care about typography:

Medium TypographyHow can you not love them?!

Medium and NYTimes are not the only beautiful reading experiences on the web today, as thankfully more and more websites are moving towards this kind of design. Hopefully the trend will continue!

One thought on “Reading the Web”

Post a Comment

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s