Mobile Ministry Magazine (MMM)

Posts Tagged ‘jQuery Mobile’

John Dyer and Digital Bible Society Introduce Bible Browser

Thursday, March 15th, 2012

Was meandering about the web when I saw a note from John Dyer speaking about a new(ish) project he worked on with the Digital Bible Society (DBS). Called the Bible Browser, its very similar to the apprach I’ve taken with the All Books Project in terms of making a Bible reader that is built with HTML, CSS, and jQuery. John’s a better coder (by a few country miles) than I, and there were several groups participating in this project, so the end result is a good bit more polished, and further ahead. Still, the Bible Browser represents what I think should be the base level of performace and integration we should be seeing in the use of HTML as a platform for publishing with the Bible starting as the foundation.

Here’s a bit more about the project from John’s announcement:

…Now, there are already lots of amazing Bible website and applications out there today built by wonderful Christian brothers and sisters, so it might seem unnecessary to build yet another Bible application. Each of these has a place in what God is doing in the world, but the software that DBS creates has some special requirements that necessitates something new:

  • Must be able to run without Internet access
  • Must be able to run without being “installed”
  • Must be able to run in any browser on any device

In a country where it’s illegal to follow Christ or ask about Christianity, installing Bible software and accessing Bible website are big no-nos, so this security is absolutely paramount. The best solution we have so far is to create an HTML/JavaScript application that runs on whatever browser the user has installed.

The challenged is that HTML-based applications can be a bit slower than full desktop software (like the awesome apps Logos, Accordance, or SWORD) and since we are designing them to run without Internet access (like the amazing YouVersion or Biblia) they can’t have a powerful server to do things like process search queries. This makes for some interesting programming challenges, but it’s also part of the fun of doing something different to serve the church at large. The app also needs to be able to run on very basic phones with limited HTML/CSS support, another fun challenge.

For those technically inclined, the basic setup is that each chapter of the Bible is a separate HTML file linked together by jQuery Mobile which makes browsing the Bible work really well on basic phones all the way up to iPhone/Android. Then a desktop application reads these same HTML files and uses them to produces the multi-pane application you see in the video above…

Very cool stuff. We’ve added it to the Bible Apps page and definitely want to encourage you to check out the Digital Bible Society’s website and support their efforts. John Dyer also has some other neat projects which are great to take a look into (Bib.ly, Bible Web App, etc.) and support.

Now, back to work on All Books… am encouraged to continue and persue this project’s direction.

 

[Experiment] Redesigning MMM

Wednesday, February 1st, 2012

[Screenshot] MMM Alternate Homepage - Share on OviFor a number of years now, we’ve been talking about redesigning MMM. This has been a much harder process than I would have thought because of changes in the general organization of site assets, as well as other tasks relating to making a living out of this endeavor. That said, things have been happening on that front and I’m ready to put forward something of a beta to what would/could be a new iteration of MMM.

View the Alternate/Redesigned MMM (for those viewing this on their mobile device, see the note at the bottom of this posting for an additional step to see this)

This is following inline with some of the 2012 resolutions we’ve posted so far (practicing what we preach). This is also an evolution in the philosophy behind MMM in being more than simply a destination towards information, but a collection of those stories presented in a way that accents the use of mobile towards addressing those questions and implications of using mobile in faith-based contexts.

Goals of the Redesign
Of the comments most heard about MMM, one of the loudest has been in the findability of information on the site. Indeed, its an issue. This site has been in existence since 2005 and there’s over 3000 posts full of content. In addition to just having those posts, there’s been several themes that have run throughout the site, making it harder still to simply use a search box to figure a direction to find things. This design seeks to make the entry point to the content better (behind the scenes, content is literally being reorganized to fit a consistent paradigm).

The other goal of this redesign is to reflect the overall user experience (UX) goal we’d have for mobile applications. There are a few mobile applications that we’ve published to date, yet none of them were able to capture exactly the kind of reading, searching, and interactive experience that we’vev been after. After careful consideration of the options (using one or more content management services, developing several native applications, etc.), it was decided that to create a single webpage that had most of the features in a mobile-first role would be the direction. This would be incomplete without redoing the entire WordPress template, so this initial design was completed in order to test the feasability of moving forward.

Issues in This Redesign
Its one thing to go mobile-first, its another to meet each mobile device that comes here with the experience that’s best for their devices. This alternate landing page doesn’t address every mobile device. Its JavaScript-heavy, and has some features which would make some of our lower-end mobile devices, without a proxy-based browser such as Opera Mini, to choke on either the size or the features. Mobify is still being used to streamline the existing WordPress template’s pages for mobile viewing therefore. A complete theme would be mobile friendly (responsive web design methods) and might not need that help to do so.

Performance is also an issue. Thankfully, its a lot better than it was in initial testing (was very happy to get this onto the production server and see signifiant page loading gains). There’s going to be an issue though since there’s a JavaScript interpreter on the page rendering the Articles section, which makes for a potential bottleneck in loading for some browsers/devices. Ideally, a full WordPress template (written in PHP) would be better able to address this.

There are some more niggles. I’ll see more as time goes on. If you spot anything, let us know via Twitter (@mobileminmag). Small items will be fixed. Bigger items will be fixed in that WordPress version.

Resources to Address Issues/Goals
What’s good about this alternate homepage is that it is providing a means to relearn some JavaScript, brush up on HTML5 and its newer abilities, and finally put into practice some lessons about working with content management systems like WordPress which require not only development, but content strategy focuses. The resources to do all of this is widely available online, and is constantly tapped.

There are a number of people/groups in the Body who deal with aspects of building this which will also come in handy along the way. Web app developers, WordPress customizers, etc. have the kinds of collective wisdom that would be utilized to make this happen. If at some point the work goes beyond the time/abilities here, its possible that such a redesign project would be farmed out.

Lastly, there’s you. For those of you visiting the site daily – thank you. You coming to the site, offering feedback, or simply hitting areas (constantly) helps to direct projects like this towards completition. The more you use the site, especially this alternate version, then the better we are able to make a resource that fits your needs.

Implicaitons of This Design
There is a good chance that we will probably stick with a web-app method for delivering content from here on out. That would mean that building and maintaining apps which also publish this site’s content would only be done as a means to explore the workings of content mangement systems and publishing experiences, rather than anything strategic towards pushing this site forward.

Another, probably more jarring, implication to this design is that we would be (finally) going back to our roots in respect to being mobile-first in everything. This could mean shorter articles, but definitely means more flexibility and versatility in the data streams that make up MMM. For example, we have a “tab” which has a link to all the places we conduct conversations online. Such an item could easily become a single page stream and RSS/XML feed for those who would rather find content in those methods.

The design is using features of CSS and HTML which are more advanced. Based on some of the stats we can gather form those visiting MMM, those features are supported by those visits. However, that’s not a 100% solution. We would like to be as close to 100% mobile compliant, and not at all desktop browser compliant. We’d like to drive the desktop browser experience to primarly search and RSS versus casual browsing.

We are also going to slowly start making the shift towards getting away from email for non-collaborative tasks, and use Twitter as a means to not just be poked about items, but also conduct the initial parts of conversations. Until we do something a but broader federated (identi.ca and/or XMPP-based stuff from our server), that would help us to best triage communications and move quickly towards managing opportunities in this space.

Or you can look at it in this simple statement: we are going even more mobile and virtual and dragging you along for the ride :)

What’s Left?
Using it, finishing the WordPress custom theme conversion, making mobile apps match its UX… ya know, the normal ;)

Just go to http://mobileministrymagazine.com/m.html and have a go at it.

Note for Those Coming from The Mobile Site
If you are reading this from the mobile site, then on clicking this link, you will have to click the link that says Full Site on that page. That’s simply because of how links from our use of Mobify behave.

 

2012 Resolution #4: All Books Project and Mobile UX Standards

Sunday, January 15th, 2012

NET Bible (logo)Technically, it’s the last week of the year and I am supposed to be on vacation. It not felt needed to be taking this time off, but even felt that unction from the Lord that I really needed to set this aside and just breathe a bit. 

And that’s been the case for the most part. Ok, so I cheated a bit one day and pre-wrote another post. But I’ve remained quiet on Twitter and in much administrative work. The break was needed. Then I was awaken from a nap on Christmas Day with a former idea about redoing the UI for the NET Bible. You see, I haven’t found a suitable application for the N8 which I own (I have indeed changed my perspective towards my needs for a Bible app on that style of a mobile several times), and have therefore left things stoic with the HTML files which come from the NET Bible’s publishing. It’s not difficult, as it is a bookmark in my web browser, making me just a browser search away from further readings. But, it’s not the most mobile-optimized experience. Hence, the waking from a really good 2nd nap.

Establishing the Goal, Identifying the Issues
The first issue that anyone runs into with mobile bible readers is getting around. Yes, there are other aspects such as speed, available content, notes, etc. But, I tend to always boil things down to two key features: reading and searching. Both of these aren’t done well enough in general on mobile, nor on specific platforms, to tilt me one way or another. I figured that since I’m in a browser often enough, and across two platforms which don’t have much shared between them in terms of consistently updated, shared applications, that I could do something that better fits my personal needs. One part of that is navigation, another part is that I search for content differently. The ideal reader for me would need to be equally proficient in both of these.

I am tacking the first issue of navigation on my mobile for this NET Bible. I want a UI that works on my mobile device, with one hand, that spatially orients me to the text, and doesn’t (necessarly) lock me into an app as much as it makes the case for a translation that works and I can change that source as needed. Reading the Word shouldn’t be a distraction, it should make me smile, even in the parts where the justice of God is splitting folks wide open. The UI is first.

Second is search. I’d like to be able to search anything and everything in the text. And then save that search. Search should work as fast as a contact search does. It also should be intelligent – showing me what I searched for previously, and automatically saving the search when its done. That’s the piece that would take the longest to nail. Maybe its a native solution only here – that’s ok, I’m willing to compromise from the route I’ve taken with doing the UI with HTML/CSS/JS – I think.
All Books - Personal Bible Reader (In-Dev Screenshot) - Share on Ovi
What’s Been Developed to Date
What you are looking at is essentially a framework, slightly HTML5-friendly and leveraging jQuery till my JS skills improve (uhmm, CodeYear is looking quite attractive). This is what I’m now using to get around the many, many pages that make up the NET Bible on my mobile. And the really neat thing is that it gets me around, while getting out of the way so that I can simply read. That is key for all of us when looking at reader applications and services, and I think this nails that well.

I’m skipping the landing page that’s done on the official NET Bible. Since this is a personal project, I’m really all about just getting into the text as fast as possible. As you can tell from the screenshot, each section has its own color. That’s just a visual aide to get me into that section as fast as possible. Interesting thing here was how the colors made it easier to navigate on the tablet, where it made little difference initally on the mobile.

At the top of the page is what amounts to a navigation menu. That’s just there to refine things and to setup an eventual search feature. I’ve ignored some (not all) of the conventions for touch-based navigation because I want to keep more of the screen available for text. Being able to have as much screen as possible for reading is important to me.

Remaining Issues/Imperfections
I’ve actually not yet gotten the text placed into this yet (at the time of this article’s writing/editing). I know what I want to have in terms of look and feel, but not sure how best to implement it from a JavaScript perspective. That’s a knowledge gap on my end that I hope to solve, but if you take a look at my sketches, its something that’s probably a lot easier than I’ve been thinking about it.

Another issue, and this follows the text, is that of having the notes show/hide in a pretty manner. The notes are one of the key reasons that I use the NET Bible (really, all published versions of the Bible should come with through translators’ notes). Having those notes show on a tap/swipe manner is something that I think I’d have to switch to using jQuery Mobile or jQuery Touch – or even a custom JavaScript function – to make work.

Performance is a problem. The Nokia N8 received a new web browser with the Nokia/Symbian Anna update, but it still seems to suffer a good bit with my using of jQuery. That’s going to bug me when the full text gets in there. That’s sitting as a near-major issue.

I have not (nor plan to) test this on every mobile platform. I built this on my iPad, and made sure it worked on my N8. It’s totally something to address a personal (peeve) need of mine, but I am compelled as all get out to share it. It uses jQuery, though should probably have the JS written from scratch into th page since it uses so little. And it relies on CSS being supported enough so that it works cleanly (though the HTML is semantically written so that it doesn’t matter if CSS is not supported at all). This also uses a bit of data for the image and for jQuery. So, if you wanted to use this as is, be sure you are aware of that part. I’m not sharing this to support it – only to share something that can be useful for your pursuits.
UX Flow for All Books Personal Bible Reader - Share on Ovi
Things to Work On
At this point, I haven’t tweaked the NET Bible chapter pages as I would like to. The notes are my most important reason for using this text and figuring how to take their code for opening the notes into the footer area that I have is a bugger. I want that to work most of all, but haven’t yet figured up how to make it work best on my device (let alone anyone else’s).

Search needs to be worked on. I have the flow of how search works, now its a manner of building search that works best for (a) the device I’m using and (b) the approach I’ve taken. I’ll probably be leaning on the insights of some developer communities for this.

Why Even Do This
Personally, I’ve just not been happy with any Bible reader since Bible+. Part of that is that my attention and needs have changed even more than I’ve changed devices. I started simply wanting to read, then it became a matter of comparing versions, then needing something to facilitate teaching/discussions, then it was all about just having apps. Now, I just want the text. As much of it as I can take in, as much of it that’s historically receivable. As much as I can that will continue to provoke me to grow up in this. For all of that, I was practically compelled to build one at some point (Brett and LJ, I’ve listened).

On the other side of this, I’ve gotten a lot of questions about formats for documents on mobiles in 2011. I keep telling folks the same things: .txt and .html. Those are the most ubiquitous formats out there for text documents and work everywhere. If you can get your content into HTML 4.01 you really can meet just about every device made in the last decade that has a browser (regardless if they have a connection or not). If you have a “container” like this, and just fill in the text with whatever txt/html archive that you have available, it works. Many people don’t need multiple versions, they just need to get in and read.

I also thought about how the community came together to solve issues like this with the Palm Bible+ app from the Palm Pilot days. For those of you with a PalmOS PDA or Treo/Centro around still, you should dust it off and download that app and a few modules. Notice something different compared to current apps? Speed in the navigation and search. Heck, if you have peeked into the manual, you’d notice that there’s some easy to remember/use text shortcuts for just about every primary feature, and a few not-so-primary ones (I wrote the manual, and designed the website). Most of all, it gets out of the way. You get into the text and everything else gets out of the way. This is what I thought of when I had the NET Bible and other mobile bible apps. Yes, there is some extent of “designing the experience” that happens, but in consideration to the “Father in heaven who revealed this,” (Jesus said this to Peter) too little chance for that to happen. In a real sense of things, “get out of the way and let me meet God (in my mobile bible reading).”

I have ideas of how to do the search on my N8, but need to know if I need to hack the widgets/WRT feature and figure some kind of database that would live on my memory card which that search could address those queries (maybe there’s a search widget that could be constrained to the local files and/or an online search). Then I would have it, something similar enough to the simplicity of the PalmOS experience, but much like apps today where I am taking (some) advantage of the context of the device I am using and building from there.

From Here To…
This is something that I’m hoping to keep my attention towards finishing this year. Even if I don’t have the N8 at the end of the year, this is something that could work on just about any device I’d go with (except the iPhone). There’s a bit of pain happening with building this, and some understanding (again) of the fun folks (YouVersion, Logos, OliveTree, etc.) go through in building this. But, since I’m just looking to build something that works for me, I can keep most of the distractions at bay and just go for it. Plus, I’m using the HTML archive of the NET Bible as I’m building this, so if there’s something I’m not doing right, it can change pretty quickly.

For you, this is merely an exercise to share. Some of you might be in a similar mode that I’m in – nothing quite works and you have just enough technical skill to nearly get there. If you feel like taking a stab at this for your own efforts, here’s a link to my public Dropbox folder continaing the mobile container and the NET Bible archive (if someone puts this on GitHub, awesome). Whatever you do, let the folks at Bible.org know. I think this will help their efforts (and I’ve not even broken my brain on doing the UI completly from an icon-driven aspect, yet).

Mobile-Friendly and Personalization As Core to User Experience
The takeaway from this project is that there have been several methods to engaging Bible/document reading, social/offline networking, funddraising, and other initiatives in mobile ministry. However, even if you nail the features, at some point in the maturing of that person using the service or the company offering it, doing something that fits the mobile context and that’s personalized will come forth. It might not be the aims of your projects initially, but do know that eventually, they all point to these goals needing to be met.

Some people commit to reading the Bible anew at the beginning of the year. I’m trying to make a Bible app… yea, that fits.

 

Weekly Web Watch #27 at Mobile Advance

Thursday, June 9th, 2011

Over at Mobile Advance, a weekly list of links to news and happenings in and around mobile is posted. Here’s a snippet of what’s in Weekly Web Watch #27:

Apps

  • Introduction to jQuery Mobile (by IBM/C. Enrique Ortiz)
  • Why Web vs. Native Isn’t a Black and White Battle
  • Standards for Web Applications on Mobile: May 2011 Current State and Roadmap

Read the rest of Weekly Web Watch #27 at Mobile Advance.

 

Mobify empowers marketers and developers to create amazing mobile web experiences. Tap to learn more

Mobify