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:
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
- Change the title to Readability (or something similar).
- Delete the address and paste in the code copied from above.
- 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.
After 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
The tricky part is making sure it works in older browsers, for which I used the following two steps:
(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">
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.