Safari 5′s seemingly innocuous new Reader feature, which isolates the text on a webpage making it easier to read, has sparked a surprising amount of outrage from web publishers who think Apple is trying to squash online advertisements and attack their livelihood.

But there’s been an equally distinctive and vocal reaction from readers, one that can be summed up quite simply: “Thank you.”

Similar tools have been around for eons, starting with the “Print this page” link of the last century, all the way up to tools like Readability, whose code Apple borrowed for its browser. But the advent of Safari Reader seems to have galvanized a point of view that’s been brewing for a while: Webpages are too cluttered and difficult to read.

So publishers, listen up. Your readers, the people you depend on to reach your bottom line, have something to say. It’s a pretty simple message: Your webpages are hostile to reading. It’s time to start paying much closer attention to the design of your pages — not just to reduce clutter and make everything easier to read, but to make sure your text maintains that readability across the broad range of screen sizes, devices and browser configurations people are using today.

It’s telling that Apple, a company with a history of only adding the most-needed features to its products, decided its browser would benefit from a tool that strips away the clutter on a page. Of course, one could make the argument that Reader is simply a subtle attempt to drive publishers toward Apple’s iOS platform, where you can create apps filled with iAds that can’t be removed. However, it would be a shame if that’s the only message publishers took from Safari’s Reader. After all, Reader is not an ad blocker, and given that there are ad blockers available for every browser, Reader is hardly a new threat. Reader is only presented as an option after the page has loaded, the ads have been displayed and impressions (i.e., the money part) have been registered.

The message of Reader (and tools of its ilk) isn’t that the online publishing model is doomed, but that it desperately needs a reboot to get rid of all the junk that’s clogging up the whole point of the system: connecting readers with the information they want.

Savvy publishers have an inkling that something is wrong. The popular British news site The Guardian, for one. The Guardian notes in its review of Safari 5′s Reader feature, “technologies like Safari Reader sound a salutary warning to media companies and advertisers…. From now on, we must love our readers or die.”

But The Guardian is putting its money where it’s mouth is. The site recently launched its Open Content Platform, complete with a Content API which allows anyone to grab an article from The Guardian and use it how they see fit — within the guidelines of The Guardian‘s terms of service.

One of the best creations to come out of The Guardian‘s new API is Phil Gyford’s Today’s Guardian.

The primary purpose of Today’s Guardian is to make reading news articles easier. For Gyford, that means eliminating distractions — sidebars are gone, comments zapped, menus pared down and page navigation radically simplified. We take issue with the removal of comments, but in short, it’s The Guardian redesigned with ease of reading as the primary goal.

As Gyford notes in his overview, it’s “a shame that such tools are even necessary … if you were creating a site whose purpose is to provide articles to read, wouldn’t you want to make it perform that task really well?”

If you’re wondering what makes a more readable design, read through Gyford’s post first. Also check out Mandy Brown’s In Defense of Readers on A List Apart. It’s filled with excellent advice on what to think about when designing a reader-friendly layout. (She’s the creative director at Etsy.)

“Limit distractions to the full extent possible,” Brown writes. Pull quotes are great, she says, as long as they’re near the top of an article where they can draw a reader in. But they become distracting farther down. She also advises on white space, typographic treatments, and where best to place your visual distractions so you don’t foul up the reading experience (the top and the bottom).

Brown’s own site, A Working Library is an exemplar of usability. Load it in Safari Reader and the only things that are removed are the header and footer.

A clean page layout falls apart when the proper attention isn’t paid to typography, and in that department, Blaine Cook has some homework for you. He gives you a way to calculate the proper text size mathematically by sizing all of your text in ems. This makes it much easier to find the proper pairing of column width and text size, giving your readers an easier time no matter what resolution, browser, or device they’re using.

He points to two useful tools: his own RePublish, which helps solve font-size issues across multiple screen resolutions, and Mathias Nater’s Hyphenator.js, a JavaScript library that intelligently reflows your text with clean hyphenation so you can run justified columns.

Cook’s methods will “make your site look amazing on the shiny new devices,” he says, but they will also improve readability in a good old-fashioned desktop web browser. On that note, he warns against the common practice of designing different layouts and serving different stylesheets for different-size screens.

“You shouldn’t be optimizing for iPads,” Cook writes. “Or iPhones. Or iPhone 4Gs. Or Nexus Ones. Or 30-inch 90ppi screens, or 30-inch 300ppi screens. You should be optimizing for reading experience, and you should be using the best techniques available to do so.”

Advice? Links we should see? Put them in the comments below.

See Also:

• Safari 5’s ‘Reader’ Simplifies the Web
• Review: New Features Bring Safari 5 Up to Speed
• Designers, Step Away From the Photoshop
• Where on the Web Is HTML5?

Photo: Vlasta2/Flickr/CC

Apple released an update to its Safari web browser Monday afternoon. We’ve been testing it for close to a full day, and we’ve found that Safari 5 performs as advertised: It’s faster, more capable and well worth the upgrade.

Safari 5 was launched rather quietly at the end of the first day of the 2010 Worldwide Developer Conference, an event that was dominated by Steve Jobs’ debut of the next iPhone and the new iOS. Safari wasn’t discussed during the morning keynote, but an announcement was made later that afternoon at a web-developer session.

You can download Safari 5 on Apple’s site. Both Mac OS X (Leopard or better) and Windows (XP and up) versions are available.

First up is the speed boost, which is definitely noticeable in GMail, Facebook, our WordPress admin and other sites with lots of “stuff” going on, like Huffington Post. This is thanks to Safari 5′s new Nitro JavaScript engine. This is the same piece of engineering previously named SquirrelFish (we kind of wish they’d kept that name), that powers JavaScript rendering on top of Safari’s WebKit engine. It gives a small bump to page-load times, but the real improvements are seen in page performance. The complex web apps we tested perform with close to zero latency, about as fast as Google Chrome, the most nimble of the major browsers.

For faster page loads, Safari 5 is implementing DNS pre-fetching. Basically, the browser looks at all the links on the page you’re currently on and fetches the IP addresses of all the linked sites and page assets, preparing itself to make the jump more quickly as soon as you click on a link and begin loading another page. All of this happens in the background. Google Chrome and Firefox do this, too.

There’s added support for various pieces of the HTML5 stack in Safari 5, as well as more support for CSS 3 and other technologies powering modern web apps. According to Apple’s overview page, Safari 5 supports geolocation, sectioning elements, drag and drop, HTML5 form validation, Ruby, AJAX History, EventSource and WebSocket. We can’t tell which version of WebSocket is being supported — typing javascript:alert('WebSocket' in window) into the URL bar just tells us “True,” but nothing else.

At any rate, all of these new features are great to see, as Firefox, Chrome and Opera have supported most or all of these APIs and technologies for a while, and IE9 will support most of them. It also washes away some of the bitter aftertaste left by last week’s PR mess around HTML5 support.

There’s also support for full-screen playback of H.264 videos, and for subtitles — the screenshot at the top shows YouTube’s H.264 player. Apple is touting this as HTML5 video support, but we’d like to point out that while H.264 does make up the bulk of online video, HTML5 doesn’t require videos be H.264. All the other major browsers are backing the new, open source WebM format for video, which we’ve urged Apple to support as well.

One of the most talked-about new features is Safari Reader. A small gray “Reader” button now appears in the URL bar when you land on a news website or blog. Click it, and Safari strips out all of the clutter on the page (ads, widgets, sidebars, headers and footers) and presents just the text in a large typeface, cleanly formatted in a white window that floats, lightbox-style, over a darkened page. It also strings multipage articles together in the same window automatically. It’s intriguing to speculate about how Reader, if widely adopted, will change website-design principles by encouraging cleaner, more readable layouts. Scott Gilbertson explores this idea in detail in his in-depth look at Safari Reader here on Webmonkey.

There’s also an extensions manager in Safari 5. Here, Apple is taking a page from the books of Chrome Extensions and Mozilla Jetpack by offering developers a lightweight browser-extension framework that runs add-ons written in HTML, JavaScript and CSS. This makes it much easier for developers to get started writing extensions, and it makes it easier for authors to port an extension from one browser to another. It limits what the extension can do to mostly manipulating DOM events or the browser UI, but that should be enough for almost any goal. Safari 5 extensions are sandboxed, too. You know, to protect the kids.

There’s an application form you have to fill out if you want to make and distribute Safari extensions. Go to the Safari Developer Program site and enroll for free. Apple will give you a certificate that must be used to sign your extensions.

You can distribute your extensions however you want, but they must be signed. This is to assure users that when they download an extension or receive an update notification, they’re downloading a package from a certified Apple developer and not some nefarious prankster.

A couple of sticking points.

First, the URL bar in Safari 5 is smarter — it does full-text searches of page titles and URLs in your history and bookmarks now — but it’s not smart enough. Other browsers have moved to a unified URL bar that serves as a location bar and a web search input field, and anything else just feels confusing at this point. Hopefully, somebody will write an extension to fix this. Until then, we have to do our web searches in the dedicated search field off to the right, which now includes Bing as a preset choice along with Google and Yahoo.

Second, the status bar (as always with Safari) is invisible by default. You have to manually turn it on under the View menu. I’ve always argued against this practice. A browser that doesn’t supply a visual link destination for each and every click is an insecure browser. I just don’t trust those bullies out there on the web, and neither should you.

See Also:

• Safari 5′s ‘Reader’ Simplifies the Web
• Apple (Almost) Releases Safari 5
• Apple’s HTML5 Showcase Less About Web Standards, More About Apple
• On Web Video Support, Safari Now Stands Alone
• Apple Taunts Flash With List of ‘iPad Ready’ Websites

Steve Jobs hates your website’s design.

That’s the impression we’re left with after playing with Safari 5′s new feature, Reader. It takes a web page and, in Apple’s words, “removes annoying ads and other visual distractions from online articles,” presenting a clean, uncluttered version of the page content.

To try it out — head the Safari download page and grab a copy of Safari 5, which was made available Monday for Mac OS X and Windows. Click the Reader button (located in the URL bar once a page loads) and Safari 5 will overlay the current page with a black shade. You can also launch it with a keyboard shortcut (Command-Shift-R on a Mac, Esc to exit). The main article on the page is shown against a plain white background, stripping away ads, sidebars, headers and footers. Also, Reader pulls multiple-page articles into the window, so once you hit the first page, you don’t have to click anything to read more. Just scroll down, and the extra pages are tacked on at the end automatically.

The result is a clear message to web designers: Your designs are failing your readers. In contrast to what we all see everyday, Reader’s vision of the web is a very clean and more readable place — there are no distractions, nothing competes for your attention, the web page is suddenly simple and elegant.

It’s no secret that most people spend very little time on a web page; sites have mere seconds to capture a reader’s attention. With so many sidebars, gadgets, animated ads and other confusion, is it any wonder that most people just move on?

Reader’s vision of the web doesn’t make sense on every site, but for long articles in particular, it’s a godsend.

Read our full walk-through of Safari 5 here on Webmonkey.

Of course, Reader isn’t an entirely new idea. Browser add-ons and bookmark scripts like Readability have long offered the same feature (with customization options even), but this is the first time we’ve seen a browser ship with the feature. In that sense, Reader could be a signal of the tides changing.

On one level, Reader seems like it could hurt publishers by subtracting ad revenue, and it could hurt ad networks like Google’s. But Safari loads the entire page — ads and all — before it presents the Reader button in the URL bar. So, by the time the person clicks on the button and launches the Reader view, the ad impressions have already been counted. Reader also has the ability to string multiple pages together, and it appears as though Safari is loading all of the information (including the ads) from the next pages, but only displaying the text. Ad impression numbers should be unaffected by Safari Reader, but click-through numbers will no doubt go down. Also, we noticed some ads served within the text body made it through into the Reader view, so it’s not perfect at stripping out ads.

The message that ads are distracting is nothing new — ad blockers are as old as sin — but the the more interesting implicit message is that the web is currently a cluttered confusing mess. Or at least Apple thinks it is and, having used Reader all morning, we’re inclined to agree.

Apple’s vision of the web does not include Twitter sidebars, recently popular article links, fancy headers or sharing widgets. In short, Reader cuts through the distractions to the actual content. Of course, that’s exactly what good design should do in the first place — focus your attention on what’s important. If every web page were well-designed, there would be no need for Reader. Clearly, that’s not the case.

As web developers ourselves, we appreciate experimental page layout designs. But when it comes to actually reading things on the web, less is far more. In short, we’re hooked. Well, technically, we installed Readability in Chrome and Firefox, but conceptually, the idea of a cleaner, simpler, more readable web is a step forward.

What remains to be seen is how designer’s react to Reader. Some backlash seems inevitable; some sites may even go so far as to block Safari — though that would an extreme move given that just because you’re using Safari does not mean you’re using Reader. In fact, most users may not even notice or use the feature.

However, we’re hoping that not only will something similar appear in other browsers, but that web designers will focus on simplifying their designs. Reader takes things to an extreme. There are ways to give content focus without eliminating nearly everything, and we look forward to seeing that idea gain more currency.

We’re also looking forward to an iPhone version of Reader that eliminates iAds.

See Also:

• Apple (Almost) Releases Safari 5
• Designers, Step Away From the Photoshop
• Where on the Web Is HTML5?

A press release with details about Safari 5 was leaked on the web Monday afternoon, then promptly removed.

Many were expecting Apple to release a new version of its Safari web browser during the Worldwide Developer’s Conference (WWDC) taking place this week. But the Monday morning keynote was all about the new iPhone. Safari wasn’t discussed.

Then, at about 3:30pm Pacific time, a press release went out over the PRNewsWire service. It was live for a short time — under 10 minutes — before it vanished. The link now returns an error. Apple has yet to update the Safari pages of its website or make any additional announcements. We’re guessing the news item was released mistakenly or prematurely.

Update @ 4:30pm: The release is now available on the Apple website, though the Safari pages still haven’t been updated.

It was live long enough for us to grab a copy, and you can read the full release below. Here are some details.

There’s an extensions framework now. By description alone, Safari Extensions appears to be similar to the lightweight extensions frameworks used by Google Chrome and Mozilla’s Jetpack for Firefox — extensions are written in HTML/JavaScript, installed on the fly, and sandboxed.

There’s also Reader, a built-in app that strips ads, images and other clutter out of the way, presenting news articles and longer reads in a simplified, scrolling, text-only window “without distraction.” Instapaper and Readability, it appears as though Apple is drinking your milkshake.

According to the release, the updated browser will include expanded support for the HTML5 stack, including geolocation, sectioning elements, drag and drop, form validation, Ajax history and WebSocket. There’s also “full screen playback and closed captions for HTML5 video” — though we should note that Apple currently only supports native playback of h.264 video and not WebM, which all other major browsers are backing. No further details there.

Safari 5 uses the new Nitro JavaScript engine, which Apple says is 30 percent faster than Safari 4′s engine. You also get the ability to choose Bing as your search provider (just like in the iPhone 4 demo).

Full release follows:

Apple today released Safari 5, the latest version of the world’s fastest and most innovative web browser, featuring the new Safari Reader for reading articles on the web without distraction, a 30 percent performance increase over Safari 4,* and the ability to choose Google, Yahoo! or Bing as the search service powering Safari’s search field. Available for both Mac and Windows, Safari 5 includes improved developer tools and supports more than a dozen new HTML5 technologies that allow web developers to create rich, dynamic websites. With Safari 5, developers can now create secure Safari Extensions to customize and enhance the browsing experience.

“Safari continues to lead the pack in performance, innovation and standards support,” said Philip Schiller, Apple’s senior vice president of Worldwide Product Marketing. “Safari now runs on over 200 million devices worldwide and its open source WebKit engine runs on over 500 million devices.”

Safari Reader makes it easy to read single and multipage articles on the web by presenting them in a new, scrollable view without any additional content or clutter. When Safari 5 detects an article, users can click on the Reader icon in the Smart Address Field to display the entire article for clear, uninterrupted reading with options to enlarge, print or send via email.

Powered by the Nitro JavaScript engine, Safari 5 on the Mac runs JavaScript 30 percent faster than Safari 4, three percent faster than Chrome 5.0, and over twice as fast as Firefox 3.6.* Safari 5 loads new webpages faster using Domain Name System (DNS) prefetching, and improves the caching of previously viewed pages to return to them more quickly.

Safari 5 adds more than a dozen powerful HTML5 features that allow web developers to create media-rich experiences, including full screen playback and closed captions for HTML5 video. Other new HTML5 features in Safari 5 include HTML5 Geolocation, HTML5 sectioning elements, HTML5 draggable attribute, HTML5 forms validation, HTML5 Ruby, HTML5 AJAX History, EventSource and WebSocket.

The new, free Safari Developer Program allows developers to customize and enhance Safari 5 with extensions based on standard web technologies like HTML5, CSS3 and JavaScript. The Extension Builder, new in Safari 5, simplifies the development, installation and packaging of extensions. For enhanced security and stability, Safari Extensions are sandboxed, signed with a digital certificate from Apple and run solely in the browser.

Pricing & Availability

Safari 5 is available for both Mac OS X and Windows as a free download at www.apple.com/safari. Safari 5 for Mac OS X requires Mac OS X Leopard 10.5.8 or Mac OS X Snow Leopard 10.6.2 or later. Safari 5 for Windows requires Windows XP SP2, Windows Vista or Windows 7, a minimum 256MB of memory and a system with at least a 500 MHz Intel Pentium processor. Full system requirements and more information on Safari 5 can be found at www.apple.com/safari. The Safari Developer Program is free to join at developer.apple.com/programs/safari.

*Performance will vary based on system configuration, network connection and other factors. All testing conducted by Apple in May 2010 on an iMac 3.06 GHz Intel Core 2 Duo system running Mac OS X 10.6.3, with 4GB of RAM. JavaScript benchmark based on the SunSpider 0.9.1 JavaScript Performance test.

See Also:

• Apple’s HTML5 Showcase Less About Web Standards, More About Apple
• On Web Video Support, Safari Now Stands Alone
• Apple Taunts Flash With List of ‘iPad Ready’ Websites