markjgsmith

Revisiting Instapaper for offline reading

Following on from Monday's piece about the issues reading web development content offline with Safari Reading Lists and Pocket, I wondered again about Instapaper. I had previously tried it but gave up after getting frustrated with the experience. There was a lot going on last time I tried it. I was having to jump around between apps, and was also in a bit of a rush. It's easy to get lost in a sea of features sometimes. Was the overall app experience really as bad as I remembered?

I re-opened the app to have another look. The default screen on opening the app is the saved article list. The first thing I noticed was that it just sort of looks a bit classier than Pocket's listing page. The title font and the layout of each item results in a vaguely newspaperish vibe. The content just seems to fit the available space a bit better. There are both titles and descriptions and less white space around the thumbnails. The article titles all seemed to be correct too. When an item does get saved, it looks kind of nice. I decided to give Instapaper another try.

Let’s look at the same screenshots:

As with the Pocket, the article saved in Instapaper has most of the page styling removed. It looks much the same as Pocket’s version. The site’s style is lost but the page is still readable. I guess some folks like the consistency. Personally I prefer being able to see the original website styling.

As with Pocket, the article saved in Instapaper is missing images. In fact it’s a bit worse because literally all the images are missing. It’s already game over as far as learning CSS. There’s not much point continuing to read the article. But let’s continue for the sake of comparison.

Code snippets are looking better than in Pocket. At least the newlines haven’t been removed, but syntax highlighting has, and that has exposed the style hint meant only to inform the syntax highlighter what language is being used (CSS in this case). Readable but looks kind of ugly. An entire article full of these would be a real slog to get through. Syntax highlighting really makes a big difference when trying to comprehend code.

The listing page for Instapaper looks pretty good, though notice it’s still “downloading”. That never completed by the way, nice though it is to have a progress indicator. I don’t have a screenshot of my Bitcoin article, but the title did get correctly saved. So it seems Instapaper has the better webpage parser, or at least it works better with my website.

The article page for Instapaper is very similar to that of Pocket’s, though I think I prefer Pocket’s version, less wasted space. But as previously described, Pocket gets the title wrong, at least for my website.

The overall Instapaper experience is better than I remember but the following issues are still there:

• Images still missing much of the time
• Code snippets are there and readable, but look weird, no syntax highlighting
• You can’t copy and paste article titles on an article page, that’s really annoying
• When images do get saved, there is no way to zoom, so anything with detail is unreadable

This time I figured out how to ensure the Instapaper icon always appeared in the Share Sheet. That’s the box with the arrow emerging from it that you tap to share things throughout iOS. I think of it as the share button, no idea why they call it Share Sheet. Previously it was there sometimes, other times it wasn’t. I installed the bookmarklet too, very difficult installation procedure, and I found it didn’t always work. There was a 3rd way to post via email, which might be useful but it wanted access to my contacts and I’ve had bad experiences with that.

The thing that struck me was how confusing setup was. That’s what got me last time. It never felt like I got to a safe place during setup. Even after completing setup it still felt like there were two many ways to post and when it didn’t work I wasn’t sure if it was me, or the setup, or iOS config. Eventually I gave up.

I’ve been using Instapaper for a few days now, and for non-web development content it’s actually quite decent. The item download indicator is the biggest improvement over Pocket. The classier look is a big draw too. It’s nice when apps have the right vibe.

Overall though for reading web development content while offline, none of these apps are adequate. If you are relying on them to learn web development you will be at a profound disadvantage compared to being online. That’s currently a certainty. #

Ideal offline reading app for web development content

I've spent the early part of the week exploring various Read Later apps for reading web development content offline. First I compared Safari Reading Lists, Pocket and then I added a comparison of Instapaper. These are the most popular. What I found was that none of them were adequate. It's important because it's one of those things you don't realise you might need until you do, at which point if it doesn't work, well it's too late.

The main reason the current apps all fail is their handling of images and code snippets. A huge part of web development content is diagrams, screenshots and of course code and configuration examples. Without these it's very difficult to understand what the author is attempting to communicate. Most of the current apps remove page styling in order to save on space and apparently to create a consistent reading experience.

That's all well and good but by removing the styling they also remove the code syntax highlighting and occasionally the formatting, including newlines. Without newlines the entire code snippet is squashed onto 1 really long line. That makes it really really difficult, nay impossible, to comprehend web development articles with any kind of complexity.

The code snippets problem is bad enough to make things really terrible, but on top of that, very often images from the saved articles don't get saved. Instead either empty rectangles where the images used to be, or indeed, nothing at all. You might not even know that something important is missing. Both these bugs together make reading web development content offline effectively impossible.

I put together an opinionated list of features I think is necessary for a Read Later app in order for it to be useful for reading web development content.

Basics

• Setup should be easy, install the app and you are ready to start saving articles
• It should be totally obvious how to save a page from Safari, no wondering if you have to use a bookmarklet or the "share sheet", whatever that is
• No need to configure anything in iOS settings
• Saving always at least adds a new item, or displays an error somewhere if there was an issue, a viewable activity stream for all modifying operations performed would be useful
• All images in a page get saved no matter what
• Code snippets and config file examples remain untouched, with syntax highlighting, newlines etc
• App displays when it is downloading / synching items
• App downloads and syncs in the background so you never have to check that it synched before you go offline, no surprises when you get offline, the articles you saved should be there ready for you to read
• Clear docs with guidelines / best practices for website devs so they know how to structure their pages in order to have their pages save correctly
• App doesn’t randomly refresh pages, once the page is downloaded / synched, you can switch between pages quickly and easily without the page going blank or loosing content
• App doesn’t insist on restarting every time you bring it to the foreground
• Title, description and website address are always saved and displayed correctly on saved articles listing screen
• All text of an article can be copy pasted, including author, date/time, title, images and code snippets
• Images can be zoomed
• Listing page has a thumbnail next to item

Nice to haves

• The page looks identical to the page you saved, don’t remove styling
• In the background save copies of pages linked to by the saved page, and be able to read these pages offline when you click on associated link in the saved page
• Videos get saved for offline viewing
• Widget to easily see the list of items being downloaded / synching
• Automatically create an archive of the page using an archive service like archive.md or archive.org way back machine

I think that a Read Later app with these features would be good enough for reading web development articles offline. Reading articles offline is not only extremely convenient in a busy world but it could even prove vital should you experience internet connectivity issues. Hopefully that's something that many of us have learnt, having now got through the many pandemic lock downs of the past couple of years. App builders please consider making your apps ready for these types of scenarios. #