Readr Theme

2.0 — A New Beginning

It’s been quite a while since Readr has seen its last additions. I was sure it had reached a state at which I would be comfortable with calling it my favourite Tumblr theme. That was about one and a half years ago. A lot of things have changed since back then. I’d say I’ve gotten better at designing and developping, but even more than that, both my personal taste as well as general asthetics have changed.

Today I’m happy to announce that the one year-long process of developping the next iteration of this theme has come to a point where I’d call it ‘done’. You can grab Readr 2 right from the Theme Garden.

‘What’s new?’ you might ask. ‘Everything.’ is what I’d answer.

Room to breathe

The more I was working on this release, the more I got tired of all the tight spacing the old version offered. Sure, I had whitespace in mind when I started developping Readr in the first place, but version 2 takes it to a whole new level.

All elements have enough room to breathe. All of them take their part of the page and make for a beautiful visual hierarchy and a very focused browsing. As with the old version, you’re still free to show or hide most sections of the page so you can have just the content you want your readers to see.

Photos and videos in all their glory

Readr was focused on presenting a great reading experience, so comes the name. But letting people view videos and photos in a nice way was already somewhere inside my head back then. Still they were stuck inside the same cards as all other elements with no special treatment whatsoever.

Readr 2 brings the experience of browsing a photoblog or a videolog to a whole new level. Videos shine in their intended 16:9 aspect ratio with a size large enough to allow for ideal 720p video quality.

Even better typography

Yes, the old version was quite readable and things even improved over time, but at some point, the same old fonts just don’t work anymore, it’s time for something new. Source Sans Pro and Droid Serif are beautiful fonts and work together so incredibly nice. A lot of thoughts were also spent on the ideal font size, line height and all things regarding typography.

Minimalism is dead; long live minimalism

I always loved how I could customize Readr to look exactly the way I want it to. I could add features or remove them with the click of a single option. From a simple starting point, the theme could take all kinds of variations with many different features.

This is still true for Readr 2. It offers a beautiful starting point with options to make it yours only. Readr 2 is a one-column theme with no sidebars, no scrolling headers, no useless extras that could get in the way of consuming the content. Like that, your viewers can have a calm viewing experience to really enjoy all your posts.

By focusing on the essentials I can really give those aspects the attention they need to make them as gorgeous as possible. This is minimalism with both asthetics and the viewer in mind.

Readr gets a social treatment

Readr offered some sharing options since day 1, but they never quite stood out. The new reblog and tweet buttons on all posts are front and center, while still not drawing too much attention. That means your viewers can reblog a post on Tumblr or send the post to their twitter followers right from your homepage, all without any hassle.

But there’s more. You can link to your various only presences right in the footer so everybody can follow you wherever they want. Currently, some of the major networks like Facebook, Twitter and Instagram are supported, but more will come in the future.

Completely rewritten code

Seriously, I can’t really think of any part of the old version that I reused. This leads to a much more simplified codebase and, of course, better performance. I won’t go into too much detail right here as much more detailed information is available right in the well annotated source on GitHub.

Yes, Readr is now completely open source. You can contribute, raise issues or just fool around with the code however you wish to.

All those new features make Readr 2 ideal for all kinds of blogs. You’re writing long texts? Readr’s got you covered with it’s beautiful typography and the distraction-free reading experience. A photoblog? Hide all extraneous content and show your photos front and center, no distraction around. Chats? Links? Q&As? It doesn’t matter, all post types are supported. There are no limits.

It’s quite a big release, truly, but this is nowhere near the end. I still have a huge list of tasks that I need to complete. For now I’m keeping them private, but there’s a list of publicly raised issues on GitHub.

Be sure to watch this blog for further updates. Over the next couple of days I’ll post some tidbits about this new version so you can get the most out of Readr.

Once again, Readr is a free download on Tumblr’s Theme Garden. Follow this blog or follow me on Twitter to keep up with the latest updates. If you’d like to do me a favour, tweet about Readr to your followers and spread the word.

<3, Sacha

Stay tuned, something big is on its way.

Readr Is Back and It’s Better Than Ever!

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

Removed: ”Blog title”

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.

Readr - The what, the why and the why not

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. :)

I love photos like this one.

When life gives you a hundred reasons to cry, show life that you have a thousand reasons to smile.

Unknown

Thursday, August 11th, 2011

My Personal Blog

I’m not just a developer, I’m also a human. I blog about things that interest me like photography and some happenings around the world.

∞

This song has been stuck in me head for like the last three days.

This is insane. Those are really impressive pictures from one of the most interesting places on this planet.