tiny tip logo

Tiny Tip – Safari’s Reader View

ReaderThe tip I’m going to give you today transformed my enjoyment of the Internet, both on iPhone and on Mac. Oddly I think it’s been around for a long time, but I think it’s been enhanced in recent versions of Safari. If you’ve already been using it, go ahead and say “I knew that!” But if you haven’t used it, you’re going to love this tip. Let’s start with a problem to be solved, shall we?You’re on your iPhone and you come to a lovely website, such as Bart’s site, bartb.ie.. Bart’s theme was developed long before responsive design for mobile devices was expected, so it has rigid sizes to the width of the center, left and right columns. Before I embarrass him further, he is designing a new theme, but you may run across another site with equally valuable content that’s a problem to see on your mobile device. Anyway, because of the rigid widths, the content area is wee tiny on an iPhone’s screen.

If you’re using Safari on the iPhone and you navigate to bartb.ie and choose a specific post, to the left of the URL you’ll see an icon that is three lines with a shorter line below it. That icon means that Reader View is available. Tap on the Reader View icon and instantly the web page is transformed to only show the main content of the web page, and the text is quite large and readable. It’s amazing! I want to emphasize that Reader View doesn’t show at the main url, you have to be in a post to see the Reader View icon in the URL bar.

It gets better though. Once you’re in Reader View, to the right of the URL you’ll see a small A and a larger A. Tap on that icon and now you can change the way Reader View looks on your phone. You can choose to shrink or embiggen the text using the small and large A’s.

01 barts site not reader view
Bart’s site in normal view
02 barts site default reader view
Bart’s site in default Reader View
04 barts site dark theme
Bart’s site with dark Reader View

You can also change the background color of the page from white to beige to a dark grey or to black. The text color changes along with these options, from black text on white to lighter greys as you move towards black. You can also choose between 8 different serif, sans-serif, and monospaced fonts. This is a boon for those with vision impairments where a bright white screen can actually be painful to the eyes.

I should mention that these changes you make to Reader View are persistent across all sites so you set these preferences just once.

Now Bart’s site is 100% content. What about those annoying sites covered with ads, or all kinds of distractions on the sides? Reader View on the Mac in Safari is perfect for those too. As soon as a single thing starts to distract me on a website, I hit that Reader View icon.

As an example, I went to cnet.com and clicked on an article about the new update coming to Firefox. There was a giant banner ad for T-Mobile, a pretty tall menu bar to navigate to other stories on CNET, a giant title for the article, then a two-sentence synopsis of the article. Next, it had who wrote it, and a bunch of social media buttons ensuring I’d be tracked on Facebook and Twitter. After that, yet another banner ad for T-Mobile.

At that point, a video ad for a refrigerator came up on top of the right side of the screen. That was partially covering a piece of art that appeared to be unrelated to the Firefox story. On a 27″ monitor with a window at 80% the height of my screen, I could not see a single word of the article I had requested.

I clicked on the Reader View button and while I got the title and synopsis and author, immediately following that was the actual content of the article. Reader View brings a tear to my eye!

cnet before reader view
CNET without Reader View
Cnet in reader view
CNET in Reader View with beige background

I started poking around trying to figure out where Reader View works and where it doesn’t. When it does work, you may see something that says, “Reader View Available”. I thought a good test would be on podfeet.com since I know how it works. I went to the home page but didn’t see a Reader View icon. I clicked on Blog Posts, which is actually a link to the WordPress Category I’ve named Blog Posts. Still no Reader View. Then I went to an actual post and was rewarded with Reader View. I went to a lot of work to declutter podfeet.com so it’s not a huge difference but it does let you choose your color and font and font size which could be a big help.

I thought I’d be able to find an Apple Support article describing Reader View to learn a bit more but they don’t appear to have one. I did find the documentation on how to implement it though, over at developer.apple.com/…. I’ll skip the technical details (but I actually understand a bunch of it because of Programming By Stealth!). The opening paragraph explanation did describe Reader View really well:

(My emphasis in bold)

Reader is a Safari feature that allows users to read online articles in a continuous, clutter-free view, with no ads or visual distractions. Reader concatenates multipage articles into a single scrolling pane. There are events that fire when Reader is available, activated, or deactivated. In your extension, you can enter and exit Reader programmatically, inspect properties on the Reader object, and inject scripts and style sheets.

I didn’t realize Reader View would also get rid of those annoying websites that make you click next next next to get to all of the content!

Now that I have Reader View in Safari on my Mac and on my iOS devices, I’m invoking it pretty much everywhere I go. Easier than ad blockers, customizable to me, and I can actually read the content people have spent so much time writing! Like I said, I swear it’s been there a long time, but when I searched, most articles about it are pretty new.

5 thoughts on “Tiny Tip – Safari’s Reader View

  1. Rick - November 15, 2017

    Great tip! Been using Reader View for awhile. And with IOS 11, you can make Reader View persistent for any site. Way cool.

  2. Colin C - November 16, 2017

    What’s also nice, on the Mac at least, is you can print the Reader View version too. So you don’t get pages of printout cluttered up with unnecessary crud.

  3. Paul N - November 16, 2017

    I am running iOS 11, but do not see Reader View icon when I go to bartb.ie in Safari.

    Any ideas?

  4. podfeet - November 17, 2017

    Yes, Paul and I should have explained that you have to go to a specific post. Like with podfeet.com, you can’t see Reader View on the Category page for Blog Posts but if you look at an individual post you’ll see it. Hope that helps!

  5. Mike - November 24, 2017

    Reader View also works great when using Speak Screen to have Ms. Siri read you a webpage/blog post.

Leave a Reply

Your email address will not be published. Required fields are marked *

Scroll to top