Monthly Archives: April 2012

Readability for Android

So you want Readability bookmarklets on your Android device, huh? Not so fast! At the time of writing, it’s not possible to access the official Readability bookmarklets on Android but there is a workaround. Here’s how to do it in three easy steps.

Step 1: Copy the Readability script

In Opera Mobile or Mini (I don’t think this works in other browsers), select and copy the code below:

javascript:((function()%7Bwindow.baseUrl%3D'http%3A//www.readability.com'%3Bwindow.readabilityToken%3D''%3Bvar%20s%3Ddocument.createElement('script')%3Bs.setAttribute('type'%2C'text/javascript')%3Bs.setAttribute('charset'%2C'UTF-8')%3Bs.setAttribute('src'%2CbaseUrl%2B'/bookmarklet/read.js')%3Bdocument.documentElement.appendChild(s)%3B%7D)())

Step 2: Create a bookmark

Open the Bookmarks menu and click on the Add button (don’t click Save yet).

Step 3: Edit the bookmark

Screenshot of Opera Mobile Readability bookmarklet

  1. Change the title to Readability (or something similar).
  2. Delete the address and paste in the code copied from above.
  3. Click Save.

Voila! You should now be able to go to any article or blog post, click the Readability bookmarklet and enjoy a better reading experience.

Free HTML5 template

Official HTML5 logoAfter being asked for a bit of advice by a colleague, I decided to make a very simple starter template for creating an HTML5 page. You can download it here:

Download HTML5 template

Notes

The tricky part is making sure it works in older browsers, for which I used the following two steps:

1. Normalize.css
(Click on “normalize.css” -> “Raw” to get the main CSS file.)

This makes all browsers behave the same way, including making relevant HTML5 elements into block elements. I recommend minifying the CSS to save bandwidth and time.

2. HTML5 Shim

This makes HTML5 elements styleable in old versions of Internet Explorer. Put it after all styles in <head>.

I’ve also added a viewport meta tag as follows which, in most cases, should improve the readability of the page on small screen devices.

<meta name="viewport" content="width=device-width, user-scalable=yes">

Going further

You might want to include Modernizr in your page, to enable you to detect support for newer CSS3 and JavaScript features.

For a much more full-featured template, there’s the popular HTML5 Boilerplate with a host of built-in goodies.

I’d love to hear if this is useful for you or if you have ideas for improvement – let me know in the comments below.