{"id":13458,"date":"2017-11-14T19:16:41","date_gmt":"2017-11-15T03:16:41","guid":{"rendered":"https:\/\/www.podfeet.com\/blog\/?p=13458"},"modified":"2017-11-17T07:43:29","modified_gmt":"2017-11-17T15:43:29","slug":"safari-reader-view","status":"publish","type":"post","link":"https:\/\/www.podfeet.com\/blog\/2017\/11\/safari-reader-view\/","title":{"rendered":"Tiny Tip – Safari’s Reader View"},"content":{"rendered":"

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.<\/a>. 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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

\n\"01
Bart’s site in normal view<\/figcaption><\/figure>\n
\n\"02
Bart’s site in default Reader View<\/figcaption><\/figure>\n
\n\"04
Bart’s site with dark Reader View<\/figcaption><\/figure>\n

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.<\/p>\n

I should mention that these changes you make to Reader View are persistent across all sites so you set these preferences just once.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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.<\/p>\n

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!<\/p>\n

\n
\n\"cnet\n<\/div>\n
CNET without Reader View<\/figcaption><\/div>\n<\/figure>\n
\n
\n\"Cnet\n<\/div>\n
CNET in Reader View with beige background<\/figcaption><\/div>\n<\/figure>\n<\/div>\n

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.<\/p>\n

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\/…<\/a>. 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:<\/p>\n

(My emphasis in bold)<\/p>\n

Reader is a Safari feature that allows users to read online articles in a continuous, clutter-free view, with no ads<\/strong> or visual distractions. Reader concatenates multipage articles<\/strong> 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.<\/p><\/blockquote>\n

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!<\/p>\n

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.<\/p>\n","protected":false},"excerpt":{"rendered":"","protected":false},"author":1,"featured_media":12158,"comment_status":"open","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"jetpack_post_was_ever_published":false,"_jetpack_newsletter_access":"","_jetpack_dont_email_post_to_subs":false,"_jetpack_newsletter_tier_id":0,"_jetpack_memberships_contains_paywalled_content":false,"_jetpack_memberships_contains_paid_content":false,"footnotes":""},"categories":[147,1764],"tags":[165,126,51,1974,1973],"class_list":["post-13458","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","category-blog-posts","category-tiny-tips","tag-accessibility","tag-ios","tag-mac","tag-reader-view","tag-safari"],"jetpack_featured_media_url":"https:\/\/www.podfeet.com\/blog\/wp-content\/uploads\/2017\/06\/Tiny-Tip-Logo-300px-wide-solid-background.png","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/13458","targetHints":{"allow":["GET"]}}],"collection":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/comments?post=13458"}],"version-history":[{"count":17,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/13458\/revisions"}],"predecessor-version":[{"id":13499,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/posts\/13458\/revisions\/13499"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/media\/12158"}],"wp:attachment":[{"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/media?parent=13458"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/categories?post=13458"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.podfeet.com\/blog\/wp-json\/wp\/v2\/tags?post=13458"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}