Just today I’ve launched Readr 1.3. It features some great new features and very nice improvements. Some key features include:
- Many parts of the code have been rewritten. Readr is now faster, better and prettier than ever. Additionally it is easier to maintain for me, that means I can push out changes more quickly.
- Readr now features a mobile layout. All you have to do is to disable Tumblr’s own mobile optimized theme. On a side note: You can add your blog to your smartphone’s home screen. The icon will be your Tumblr avatar.
- The theme’s options have been revised in order to give you more control over your experience. Some options have been made more understandable, some have been added, and some deprecated ones have been removed.
- You prefer relative dates over absolute dates? No problem, Readr does it. You want your readers to be able to send your posts to Instapaper? Sure thing. Those are only two of the additions.
Read on for the full changelog.
Font Options
- Change: “Default” has been renamed to “Text”.
Color Options
- Change: “Default text” has been renamed to ”Text”.
- Change: “Posts Background” has been renamed to ”Post Background”.
- Change: “Date hover” has been renamed to “Hovered Date”.
- Change: “Links hover” has been renamed to “Hovered Link”.
- Removed: “Quote border”
Image Options
Conditional Options
- New: “Use Relative Dates”
- New: “Show Instapaper Link on Posts”
- Change: “Show dates only on new dates” has been renamed to “Show Dates Only on New Days”.
- Change: “Show number of words on posts longer than 50 words” has been renamed to “Show Word Count on Posts”.
- Change: “Show home link in page navigation” has been renamed to “Show Home Link”.
Functions
- New: Relative dates can now be used instead of absolute dates (e.g. “30 minutes ago”).
- New: When visiting a blog using Readr, the address bar is automatically hidden.
- New: You can now show an Instapaper link below the post date and note count.
- New: Fully fluid layout for mobile devices. In order to use this, please disable Tumblr’s optimized mobile layout (“Customize” > “Advanced” > “Use optimized mobile layout”).
- New: A scroll-to-top-link has been added. You can now simply click the button in the lower right corner of the page to get back to the top.
- Removed: As YouTube changed the embedded YouTube videos’ code, the white YouTube player is no longer available in Readr.
- Change: Swapped next/previous post links as they were in the wrong logical order.
Code
- New: html5shim is now included to ensure backwards compatibility.
- Change: The code used to be over 700 lines, now it is a little more than 400.
- Change: Some of the CSS has been put in an external file.
- Change: Some of the JavaScript has been put in an external file.
- Change: JavaScript, HTML and CSS has been revised.
- Change: The function to count the words has been changed and is now using my own countwords() function.
- Bugfix: A styling bug has been removed.
What your looking at is, you guessed it, a Tumblr theme called Readr. You may ask why it’s called like that. I wanted to create a theme, which offers a good reading experience, as I consider myself a writer so it’s rather important to let people read my texts without distraction. This is when I got the idea for Readr, which is basically just short for “Reader”.
I’ve had the idea complete in just a few hours. Readr was supposed to be a simple (or minimalistic, if you want) theme, offering a streamlined view on posts, especially text and photo posts. There were some key components I wanted to have in this theme.
1) Reading
As I said before, writing and reading is an important part of my blogging habit. So when reading a text, what should be visible on the screen? A sidebar? A scrolling page header? Certainly not. So I decided to go with a one column layout. What that means? No sidebar. No weird and horribly implemented scrolling page header. The only thing you see is the text.
Regarding colors and fonts I wanted to keep things simple again. Black text on a white background gives a high contrast. Georgia is a serif font with a great readability. Before you freak out: Readr let’s you customize all the fonts and all the colors used.
A thing that really made me think was the alignment of the texts. First I decided to justify the text. Great when it works, horrible when it doesn’t. Aligning the text left seemed to be the better way after a while, so Readr now aligns the text left.
2) Photos
I love photography. Everyone does. As an amateur photographer I try to get as much feedback as possible, so I keep posting my photos to Twitter, Tumblr and Flickr. Reader gives you a great view of your photos, with as few distraction as possible.
EXIF data (e.g. “Taken with an iPhone 4”) will be supported in a later version of Readr, as Tumblr doesn’t yet have localized strings of some strings required for this feature.
Photosets are supported too so don’t hesitate to post your photos all in one shot.
3) Everything else
Readr supports every post type. Text, photo, quote, link, chat, audio, video and answer posts are fully supported. Reblogs have a dedicated design too.
A nice little feature I’m really proud of is the following. Have you ever thought about reading a text but you couldn’t guess how long it would take just by looking at its length? Readr counts the number of words for every post. If the post is longer than 50 word, the number is automatically inserted below the post’s number count.
Another thing I like is keyboard navigation. Use left or right arrow keys to navigate through your posts. It’s that simple.
4) Customization
Readr is highly customizable. Colors, fonts, texts and what sections you want to be displayed, all at your choice. Make Readr as minimal as possible or give it more functionality.
5) Technical Notes
Readr uses HTML5 and CSS3, fully valid. Javascript is done using the excellent jQuery library. The theme uses not a single image.
Firefox 3.6+, Chrome, Opera 10.5+ and IE9 show Readr like a charm. Only IE8 and IE7 show some bugs, which are still not that bad.
All strings used in the theme are localized by Tumblr itself, so use Readr with whatever language you want.
6) What else?
This is the first release of Readr. That means that there still might be bugs or problems. If you find any of them, please contact me on Twitter or consider reading the docs.
So just go to the Theme Garden and grab the theme. :)
