Web Reading UX Etcetera Part 3

More links to excerpt and discuss:

From Zeldman's post:

This site has always been about content first.

I cranked up the type size. With glorious web fonts and today’s displays, why not?

Then I ditched the sidebar. Multiple columns are so 1990s.

From Holovaty's post:

PPK’s talk was about the problems he sees in with modern front-end web development. Problems for developers, problems for users, and problems for the web in general. It was more than an hour long and covered many topics, weaving in his rich knowledge of web-development history. Some opinions he articulated:

Web developers have become overly focused on emulating native mobile apps, when in fact they should focus on the strengths of the web. Sort of by definition, a website will never be as performant as a native app, given native apps speak directly to an OS while websites always have the browser as middleman — barring some significant technical shifts. So it’s an unattainable goal.

That's true, especially in regards to text-heavy, media sites. In my opinion.

Here's the text from PPK's allegedly controversial slide, that knee-jerk reactionaries misunderstood.

"If you can't do without tools you're not a web developer"

The full presentation listed above provides context.

Holovaty adds context:

My interpretation of PPK’s slide, having seen the entire presentation, was simply this: web developers should have knowledge of what’s happening behind the scenes, so that they can use their tools more effectively. This, I agree with. If you blindly use a 20K library that traverses the entire DOM on every page load, in a situation where five lines of vanilla JavaScript would have done the same thing, you’re adding unnecessary strain on your users and possibly unnecessary strain on your development team. (That assumes “unnecessary strain” is a bad thing for your particular project/work.)

Many people saw that slide, interpreted it at face value, and tweeted sarcastic responses such as “If you can’t put in a nail without a hammer, you’re not a carpenter.” They took it way too literally, suggesting PPK was telling us to cease using all tools, code in assembly, or otherwise be luddites. Obviously this is nonsense.

Top hn comment:

Just a couple days I got into a conversation with my coworker about UI stuff. I had to test something against our dev UI. Last time I did UI work was back when having index.html, img/, css/ and js/ directories with maybe a script or two was the norm. I had to fucking run make and I still have no fucking idea what was going on when I ran make which compiled a bunch of shit. There was all this NPM shit going on (isn't NPM part of Node.js which is a server-side framework? WTF?). I got it working and promptly noped the fuck out that horror show. The web is a giant fucking pile of dog shit in 2016.

excerpts from the second hn comment:

I'm a content guy who knows enough web dev to be dangerous. I made 3 manual edits to a css file to fix a couple of incorrect background colours in our web content the other day. I was a good boy and made a pull request for those same changes in the git repo. Our developer explained that he doesn't actually edit the css file. He would have to work out the change in the hue (as a percent of the base colour) and update that in the sass file, then use gulp to compile a fresh version of the output css. He said that this was a simple build process to get set up on my machine so I could do it myself in the future. He uses a mac. I use windows. 4 hours later after hitting so many hurdles I finally got it working.

It’s all about the article page

Indeed. At least, that's how I think about it.

Also at garciamedia.com

1. It’s all about the article page -- Many of the presentations placed great emphasis on the importance of article pages that are easy to navigate and that invite us to engage with other articles beyond the one we came to read. What makes for a good article page? How can local media conversation be invigorated?

7. Simple does it. Simplicity has never been more essential. Think ease of user experience. “We need to create design systems that are first and foremost readable, and brandeable”. (Zeldman)

Jeffrey Zeldman quote:

"Design must make content readable, or it's useless."

During the past decade and a half, as both a publication designer and a publisher, I watched in horror as our publications became reader-hostile minefields of intrusive ads, overlays, and popups.

... about seven years ago, my friend Rich Ziade and his engineers created Readability, an app that sat between you and the ugly site you were trying to read, the way screen readers sit between visual websites and blind web users. Readability grabbed an article page’s primary content, removed the junk, and replaced the cluttered and illegible layout with a clean, readable page inspired by the clarity of iBooks and Kindle, which were just taking off at the time.

Rich released Readability 1.0 as open source; Apple immediately absorbed it into the Safari browser, where it continues to provide Safari’s built-in “reader” mode. (Safari’s “reader” mode was Apple’s first step in decluttering the web and returning it to the people who use it; “content blocking” would be the second step.)

I used to go around the world on lecture tours, warning my fellow designers that if we didn’t figure out how to declutter and compellingly brand sites, apps like Readability would do it for us.

I guess that's one reason for features, such as Facebook's Instant Articles and Google's Accelerated Mobile Pages. Those services do the work that publishers fail to do on their own websites.

Or Facebook and Google are exploiting an issue (bloated websites), and those companies act like they are doing publishers and readers a favor when in reality, those companies have figured out one more way to keep users within Facebook's and Google's services.

In 2012, inspired by Readability and frustrated by the industry’s determination to make ever less legible, ever more cluttered sites full of tracking and popups and everything except what readers need, I bet big on large type

I’m fairly sure I wasn’t the only designer at the time who reacted against tiny type and cluttered anti-user layouts by stripping pages down to only their most necessary elements, and boosting the type size to enforce a more relaxed reading posture.

In any case, soon enough, readable (big type and plenty of whitespace) layouts starting popping up everywhere. At medium.com. In Mike Pick’s redesign of A List Apart. In article pages for The New York Times, Washington Post, Vox, Newsweek, The New Yorker, and, eventually, many other publications.

An uncluttered page focused on the reading experience (reminder: big type and plenty of whitespace) is now the default at several leading news publications. But many smaller publications, struggling just to survive, have not kept up. And so we have a perfect crisis:

Publications that do not encourage reading, loyalty, or repeat visits are struggling to survive at the very moment real news is under attack from an authoritarian president. What to do?

There are many ways to respond to an existential crisis like the one facing most news publications. I went for the low-hanging fruit. The thing any publisher, no matter how cash-strapped, could do. The thing I had seen working since I started yelling about big type in 2012. I went for a clean, uncluttered, authoritative, branded page.

Any newspaper, however poor, can afford better typography. Any newspaper with a designer on staff can attain it, if the paper stops treating design as a lackey of marketing or editorial or advertising, and sets designers free to create great reading experiences.

... a popular trend in web design is to use low-contrast text. Maybe that looks really cool, but it is also really hard to read.

I've noticed this trend too, and I do find it hard to read certain websites. Even this blog used to use a #333 dark grey text on white, just because I thought it looked better that way. And to be honest, others were doing it, so I did it too. But when I changed the text to black on white, I find my blog easier to read. I hope you do too.

The colors you choose for your text can affect the readability of your site. This is directly connected to usability.

It's a personal pref, I guess, but a small font size that is black and displayed on a white background might work fine. But a larger font size, especially a font with thicker lines, might be harder to read when it's displayed on a white background. Maybe the larger font size would be more comfortable as #222 instead of #000.

Mobile is today’s first screen. So design responsively, focusing on content and structure first.

Websites and apps alike should remove distractions and let people interact as directly as possible with content.

90 percent of design is typography. And the other 90 percent is whitespace.

Boost usability and pleasure with progressive disclosure: menus and functions that appear only when needed.

Or how about no menus, except on the home page? Provide a home link only on article pages.

One illustration or original photo beats 100 stock images.

If the only option is a single stock photo, then I would say that it's better to use no images.

Design your system to serve your content, not the other way around.

Remove each detail from your design until it breaks.

I like that suggestion a lot.

Style is the servant of brand and content. Style without purpose is noise.

Nobody waits. Speed is to today’s design what ornament was to yesterday’s.

Don’t design to prove you’re clever. Design to make the user think she is.



2015 - qz.com Learn to code like it’s the ’90s with Berkshire Hathaway’s normcore website