pixelfaith

The State of Bible Apps on the iPad

So holiwrit has been in the App Store for three months, and was one of the first in at the launch of the iPad. holiwrit was built for a few reasons. I love to experiment with a platform by putting a Bible on it. As soon as the iPhone came out, a friend and I put a webapp Bible together and were featured on Apple's long since forgotten webapp directory. When the App Store launched two years ago, big names got into the game with Bible apps. Though it was great to see native apps and see people using them so much, I was saddened by the lack of care in the reading experience. I wondered if a great user experience was even possible on such a small screen.

As soon as the iPad was announced in January, I jumped into Photoshop with images of a beautiful Bible reading experience on a device that was truly made for reading. With a number of mockups, I finally found my groove and started learning Cocoa and finding my way around Xcode. holiwrit was built in a week and shirked all those extra features that, I found, made most Bibles complicated. I just wanted to read. I went as far as to market it by saying, "Are you a pastor? A theologian? A Master of Divinity? This app is not for you." This was a Bible for the everyman.

We are now three months into the iPad market, and all your big players are on the iPad with scaled up iPhone apps, for better or worse. I just wanted to give you my thoughts on the fallacies and successes that I see in these apps. Reading experience, interface as a whole and those extra, useful tools are the things I want to touch — or should I say tap? — on here, and let you see what is affecting my design decisions for the new, upcoming version of holiwrit.

ESV Bible

ESV came to the App Store for iPhone very late, coming out earlier this year and got a lot of attention. They are, as far as I know, the only translation that has its own app. Yes, from the tech savvy ESV, I would have expected this. However, I quickly came to hate some of the key things in the ESV app on the iPhone, including the Zune-like interface for changing book/chapter. I love the Helvetica Neue Light, but it is a horrible use of space on an already small screen. Furthermore, they went with the infinitely scrolling Bible that I really love to hate. For quickly finding a verse in a long chapter, I like to flick hard and get to the end of the chapter. With ESV (and numerous others) I may be facing the End of Time instead of the Olivet Discourse with this hard flick. This hate aside, I love the font choice and readability isn't the worst that I've seen. Carefully large leading makes my eyes happy.

On the iPad, they just scaled this up and passed on custom colors and went with the plain UIKit color tone. The slightly unique navigation color on the iPhone should have been carried over. The awkwardly un-Apple (read Zune-like) browse interface came too, and is even more awkward in a pop-over.

As for those extra little features: highlighting, favorite and notes are all available, but sit one click away. ESV removes the standard text selection and implements their own, making touching the text weird. Highlighting, a featured I'd like to use more, is two clicks away once you get the text selected.

YouVersion Bible HD

YouVersion was in the first 500 apps in the App Store for iPhone, and has been one of the most popular iPhone apps since the get go. Their app was initially really well designed and maintained a greater focus on the text than their website does. However, over time YouVersion for iPhone has become extremely cluttered and seems like features were just tacked on where they could fit them in. The app is, in my opinion, in need of a complete redesign so that all those new features can be simplified and better integrated.

YouVersion's goal since the launch of the site was to make the Bible relevant to people who found the Bible outdated, antiquated, and vastly irrelevant. Through user contributions to the text, YouVersion allowed readers to see how the Word related to them and to others. The website today seems to focus more on the contributions than on the Bible itself, though with the latest version launched last year the reading interface was much improved.

The iPad app launched at the start, but unlike its older sibling, this High Definition (HD? Really?) app didn't bring much of anything that made YouVersion unique. The text has primary focus, with the toolbar subdued greatly. It is easier to switch books than the iPhone version, but only once you figure out that the title in the toolbar is tappable, but then you just discover the same list view used on the iPhone. Switching translations (which there are tons at your fingertips) is hidden under something that looks more like a text label, rather than a button. The text is spaced massively, somewhere way too close to double spacing, and has massive margins on the left and right. I like the arrows, but this adds two directions of movement (scrolling vertically in a chapter and left to right through books). This is more comfortable than infinitely scrolling horizontally, but not perfect.

YouVersion, minus the contributions that make it YouVersion, seems to have been hastily designed and put together to be in the Store at launch, rather than meticulously thought out and designed for the best user experience.

Logos

In the Bible software world, Logos is the giant that everyone knows. They have wonderful Mac software, but their iPhone app is bloated by trying to pack all these massive study features in. I was hopeful that their iPad app would be more like their Mac software, but it ended up a scaled up iPhone app.

Launch the app and you are prompted to sign in or sign up for Logos. You can skip this, but it comes up every single time you launch to app. It is immediately clear that Logos isn't as much about the Word itself, but all the other study tools around it. For someone more interested in extreme study, this may work for you, but for someone that wants to read the Bible, it takes three taps to get to a Bible. Plus, since the Library in Logos doesn't separate Bibles from other books, you have to know the name of a translation to get to one.

The reading interface is chromeless, and just text on a screen. Tight leading makes it feel very heavy, and uncomfortable for long reading. The text is pure black and the background pure white, making for the most extreme contrast one can get. This text isn't designed, to make those statements more clear. Logos doesn't show you where you are in the Word, since the chrome is gone, so as you move through an infinitely scrolling horizontal interface (simulating pages of a book… badly…) you have zero clue where you are, and without pagination on the bottom, you don't even have anything relative to look for.

Olive Tree Bible Reader

Oddly, this is by far the worst of these four. Some creative interface decisions, Olive Tree unfortunately feels half baked. The wood texture used everywhere would feed better if it didn't feel so flat. The shadows used on it are overdone and make it even worse. Plus, why did you take over my status, Olive Tree? Second to that, why did you do it so badly? I only know one app that uses the status bar well, and that is Reeder for iPhone. This is just a bad distraction, all just to show me the translation and my location in the Bible. That is what a toolbar is for.

Olive Tree allows you to customize the app to your liking. You can customize every single color in the app and the font faces for everything. Don't like the background? Change it. Prefer Marker Felt? Cool! Tired of 16 pixel font? 39 is cool with us! I'm a believer in convention over configuration and opinionated software. Why put in all this work to allow your users to customize the app? Doesn't that distract from making one amazing user experience? Gives the developer an excuse, in my opinion. If my users don't like my design decisions, they can go elsewhere or tell me why they would prefer "bright pink" text on a "lightslategray" background.

That said, the default background to text contrast isn't horrible, but the font size may be a bit small and there is a lot of text on the page. They are the only one of these four apps that went with the, in my opinion, logical choice of multi-column text, but when the columns are this tall and the text this small, it gets wordy. They, too, go with the infinitely scrolling horizontal interface that Logos has, but make it easier to switch chapter and even verse (which seems unnecessary). Tapping the segmented tabs in the toolbar brings up a pop-over with a weird mix of native blue and flat wood with bad shadows. If you are going custom, go all the way or make it look really great.

To access any text features, you must tap the verse number, which isn't immediately evident. This too uses the half custom pop-over.

I have to quote Rework in saying, "Cut your ambition in half. You're better off with a kick-ass half than a half-assed whole." Olive Tree seems to have tried to pack a million features, and allow everything to be customized, in a few short months of development and didn't scrap a single concept or thought. It all got implemented, for better or worse, and not a single element of Olive Tree's Bible Reader is done amazingly. This goes for Logos too, both seem like they tried too hard to be awesome at everything, and ended at not being awesome at anything.

Summary

Gotta say that the best interface with the most thought is none of these. It's Commandments. It's quirky, and nearly useless to someone wanting to study the Bible, but it is the "kick-ass half." In fact, they are the "kick-ass whole." Joking aside, I find that the ultimate issue is that developers forget that the purpose of their app is to read the Bible, or even to study the Bible. Olive Tree's app name sums this up: Bible Reader. Developers that focus more on the app and it's features and fail to focus on the reading interface for an app meant for reading ultimately fail. Some are just trying to get every feature in (like Logos), some are trying to give the user everything they want (like Olive Tree), and others are just trying to get the app out. If I'm gonna spend a long time reading in an app, you should spend more time designing the reading experience.

Before the printing press, the monks and other people that copied the Bible word for word spent countless hours making the Bible a work of art. With the printing press, the Bible is printed with reproducible care and typographic precision. Now with these apps, we just take the text and fill a jar that we design and forget about this important part? A little CSS here and there, but no real care and focus? Where is the art?

holiwrit has made only $100 since its launch in April, but it has consistently been called one of the best looking apps with one of the best reading experiences. Sure, it doesn't have every feature in the world of Bible apps. No, it doesn't even allow you to change the font size. Heck, holiwrit doesn't have any settings whatsoever. holiwrit is a kick-ass half, and now I am working towards more features and making sure that if it ain't kick-ass, it ain't going into my app.

Apps Mentioned:

ESV Bible

YouVersion Bible HD

Logos

Olive Tree Bible Reader

Commandments

holiwrit and the ipad

It has been too long since I have posted to my wonderful li'l pixelfaith.com! The last post was about the use of the multi-column layout module of CSS3 with the text of the Bible and included my li'l experiment in doing just that. Well, last week I introduced a product that is of direct connection to that experiment. holiwrit is a breath of fresh air in a world of overly complicated Bible apps and Bible readers.

So what is holiwrit? Well, back in January one of the most revolutionary and magical devices was announced. That device, of course, was the iPad. I saw it and my first thought was how amazing it would be for reading the Bible. I waited for a month or so to see what app developers would announce and/or show off, and saw amazing apps coming from Panelfly, MLB, Icon Factory, and many others. Sleek, simple, and large interfaces that displayed content in wonderfully thought out designs. I grab a paper and leather-bound Bible, and I expect careful typography, but for some reason no one seemed to care about typography when it came to the Bible on mobile applications. No one seemed to care about user interaction and flow with the Bible. They often seemed to focus too much on the Bible reader as opposed to the Bible itself. And, thus, holiwrit was born.

I started with a simple page and worked from there, using multi-column as my basic foundation, simple serif typeface over that, and some nice whitespace through large leading and spacious margins. holiwrit doesn't implement word studies, commentaries, or anything else. It is a Bible first and foremost, focused with a great reading experience, easy navigation, and clear typography. I believe it succeeds at all of this, but I know that people want more.

holiwrit is not a "study tool" in the sense of word studies, commentaries, etc. I don't want it to become that, at least not right now. I want to be able to read the Bible, and not have all the complexities hovering around. If I'm going to implement it, I will need to find the right way to do it. I don't want to just do something to do it, or do it to make more money. What is next for holiwrit is social, along with enhancing the navigation flow and the foundation of the reading experience. In the coming weeks, I will be revealing more about the next big release of holiwrit, here and on Twitter and Dribbble. Stay tuned!

PS: This entire article was written on my iPad, in Pages with a Bluetooth keyboard. This device is truly magical, and in, so many ways, way better than my MacBook Pro or any other computer I have ever worked with.

A Multi-Column Layout Module Experiment

Blown away by the hits this weekend on my experiment. Boredom leads to amazing things, in my experience. So what is this experiment you speak of, Jay? A Bible.

You see, I wanted to experiment with some new CSS3 stuff that I hadn't touched yet, including the multi-column layout module. But to truly see the beauty of the multi-column layout module, you need enough text to work with. So what better text to use than the Word of God? I know, brilliance, right?

So the first test was using The Message translation text for Acts 5. I splashed in some Helvetica Neue Light (only visible on the Mac) for a smooth, elegant feel, and the wonderful multi-column layout module did the rest. So here is the code:

-webkit-column-count: 3;
-webkit-column-gap: 20px;
-moz-column-count: 3;
-moz-column-gap: 20px;
column-count: 3;
column-gap: 20px;

This makes it work in Webkit (Safari, Chrome) and Mozilla (Firefox) browsers. The column-count tells the module to create 3 equally sized columns, and the column-gap adds a 20px gutter between each column. Cool, eh?

So then, here I am looking at the beautiful text of the Bible, formatted beautifully in columns and Helvetica Neue Light, and I said to myself, "Dude, this is the Web, let's make this sucker move!" But, unfortunately, when it comes to the Bible, there are not a lot of good sources to get it on the Web. There are plenty of good Bible readers, but not much in the way of Bible text API's. The most open translation (that isn't open domain like the KJV) is the ESV (English Standard Version, for those that are getting last in acronyms). They actually have their own API, and it is amazingly awesome! With it, one can load entire chapters (or single verses) that are beautifully HTML formatted.

The next step, obvious to the boredom inside me, was to start loading the Bible from ESV's API. So I built a basic interface to jump next and previous chapter/verse, and search for a specific chapter, and then used jQuery to load out the Bible. Since ESV returns as HTML, and AJAX doesn't work cross-domain, this required creating a small proxy script on my server to handle getting and returning the text.

<?php

//get passage
$passage = urlencode($_GET['passage']);

$key = "IP";
$options = "include-first-verse-numbers=0&include-footnotes=1&include-audio-link=0&include-copyright=0&include-short-copyright=0";
$url ="http://www.esvapi.org/v2/rest/passageQuery?key=$key&$options&passage=$passage";

//get data
$ch = curl_init($url);
    curl_setopt($ch, CURLOPT_RETURNTRANSFER, 1);
    $response = curl_exec($ch);
curl_close($ch);

//print out
print $response;

This simple PHP script uses CURL to load out a passage specified in the GET variable passage. So with a little jQuery action now, we can load out verses/chapters from the Word of God.

$.get('http://pixelfaith.com/bible/bible.php?passage=John+3', function (html) {
    $('#bible').html(html);
}, 'html');

This experiment is continuing, bringing support for this Bible reader to advanced mobile devices and other features. If you have any suggestions, shout it out in the comments below or hit me on Twitter @thefinley

Making Chat Easier

How can chat be made easier? But chat is easy, Jay, you say! No, not really. You see, if there are more than 5 active people in a chat room, things get messy. Really messy. Really quickly. Linear chat rooms have been around for two decades, and you can find them everywhere. People know them, love or hate, and know how to use them. So if we are to improve upon the idea of a linear chat room, we need to maintain simplicity, and alleviate the current complexities. Let's take five people actively chatting, maybe a message every 2 minutes, 30 messages an hour. If you have 5 people in a room doing this for 1 hour, you have roughly 150 messages.

But, see, people are not just posting their own ideas/thoughts/etc. People are talking with each other, responding to questions/thoughts/ideas/etc. This is where the mess is, because I may make a point, and receive 20 replies, but each are separated by 3 unrelated messages. So why not allow a message to be directly responded to? Think of Facebook's home page timeline, but in real-time chat. I say something, and then someone responses to what I say, and it is kept with my message. This makes following a conversation a lot easier, because it is all contained as a thread. And to make things even easier, why not allow each of these threads collapsable, so long threads (ones you may not be partaking in) are easily hidden.

With this, there are complications in that a reply message may be posted to a thread that exists outside the viewport (of the scrolling window), and you wouldn't see that the reply has been made. Also, when a reply is made to a collapsed thread, it would be hidden. These issues would need to be addressed with visual aids. Such as a number indicating the number of replies made to a message. Ultimately, though, I feel that this could allow intelligible chat to go on with more people over a longer people of time, without losing track of conversations, or making conversational chat hard in the first place.

Facebook Connect for Comments

The ease of using Facebook Connect for user login and user interaction on a site is fantastic, and makes it a much easier and (in my opinion) a better experience for visitors as a whole. This can mean that a visitor doesn't necessarily have to sign up for another username and password with another site, but it also allows for your site/app to easily post messages to the visitor's Facebook profile.

One of the easiest things that Facebook Connect can be used for on a site is comments for a blog. For this, Facebook has made a special FBML – Facebook Markup Language – to use. So to set this up, first go here: http://www.facebook.com/developers/. Click the "Set Up New Application", give your "application" a name, which I use the name of the site.

The next page is more daunting, but no worry! What you need here is your "API Key". See it? Write it down. Good. Now click on the sidebar item "Connect". From this page you will need to fill in the "Connect URL" and the "Base Domain". So for this site, that is "http://pixelfaith.com" and "pixelfaith.com" respectively. Now save!

And now you are done with this panel, and the hardest part! The next chunk of code I will not bother to explain, other than that you need to create a file on your server named "xd_receiver.html" with this code inside:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" >
<head>
    <title>Cross-Domain Receiver Page</title>
</head>
<body>
    <script src="http://static.ak.facebook.com/js/api_lib/v0.4/XdCommReceiver.js?v2" type="text/javascript"></script>
</body>
</html>

Guess what? You are ready to implement the comment system now! Yes, it was that painless and easy, guys! On the page you want comments, place this code in:

<script src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" type="text/javascript"></script>
<fb:comments url="articleURL" title="articleTitle" xid="uniqueID"></fb:comments>
<script type="text/javascript">
    FB.init("APIkey", "xd_receiver.html");
</script>

On the second line of this code, you see <fb:comments url="articleURL" title="articleTitle" xid="uniqueID"></fb:comments>. The articleURL, articleTitle, and uniqueID are the things that you will need to change. These allow Facebook to link back to your article in posts that it makes to a visitor's profile. The fourth line has two things you need to change in FB.init("APIkey", "xd_receiver.html");. The APIkey is what I told you to write down earlier. The second part is the location of that "xd_receiver.html" file I told you to create. Remember where you put that? Put the URL here.

Save your page and look at it in the browser. You should now see a working comment section that will prompt you to login with Facebook. Isn't that cool? You just implemented a working Facebook Connect point of interaction on your site!