Tag Archives: HTML5

Aiming Towards FirefoxOS

Firefox Marketplace on the Geeksphone

It seems to be some kind of tradition here at MMM to poke a look at mobile devices, services, or experiences that are a bit more on the fringes of what’s possible, what’s happened, or what’s coming. In that light, I think a small look at FirefoxOS, and its aims for those markets/regions where there isn’t that much in terms of smartphones makes for an interesting perspective.

What is FirefoxOS?

For those familiar with the web browser Firefox, there’s a good bit of similarity happening with FirefxOS. The former (browser) was a chance to unseat the incumbent and dominant web browser (then Internet Explorer) by offering a standards compliant, fast(er), and more expandable (through the use of extensions) web browser. In part, the goal was to disrupt Internet Explorer by making it be what it wasn’t trying to be – the center of one’s web browsing environment. FirefoxOS is going a similar route but from the perspective of being a mobile phone platform. And what it aims to disrupt are (a) the route of development, and (b) the use/marketing of the top smartphone platforms, Apple’s iOS and Google’s Android.

Disrupt the Route of Development

One of the fabled innovations of the last half-decade of mobile has been the rise of the “app economy” and the ability for those with the time, patience, and funding to get into a platform and design some kind of unique experience within it. This is nothing new to the MMM audience – from as far back as the original Bible Reader on PalmOS Classic devices, the idea of a few people learning a platform then making content or services available made a lot of sense. Over time, this evolved into offerings a places such Handango/PalmGear, Nokia’s Download! service (the first manufactuer-pushed app store), iTunes App Store, and now every other app store imaginable (seriously, look at just the list of places you can download a bible). The problem is that it left the ability to build into a select group of folks who would have a particular motivation to continue. All the while, a place to produce with a lower barrier to entry, i.e., make a webpage, continues to sprawl at an amazing pace.

FirefoxOS aims to disrupt in this wise first: if someone can make a webpage, why can’t they make an app?

Disrupt the Top Smartphone Platforms

What’s also quite true about mobile now is that for the greater majority of those who use a mobile device in developed nations (please note all of the qualifiers that I just used), when asking the question “what is a smartphone,” or, “what is your preferred smartphone device or platform,” there are only two answers: Apple (iOS) and [Google] Android.

In the midst of such an answer are the incumbents whom are older: Microsoft ( with Windows Mobile then, Windows Phone now), Nokia (with Symbian, S40, and Maemo/MeeGo then, Windows Phone now), and Blackberry. And then there are those whom are looking to jump into the scene: Samsung’s Tizen, Jolla’s SailfishOS, Cannoical’s Ubuntu Mobile, and Mozilla with FirefoxOS. The former are more or less looking not to become unrelevant. While the latter platforms are looking to grab a slice of the mobile pie inside of a world context that has shifted the priority and profitability of mobile from a Western European/USA audience to an Asian and South American one.

FirefoxOS wants to be embedded into these newer regions and environments but to do so, it has to also disrupt the attention that the leaders and incumbents have towards their platforms. Disrupt doesn’t just mean attention though, it also means shifting the conversation from what has been possible to what is doable.

Phones for Apps for FirefoxOS

Part of the strategy for Mozilla to change the conversation (disrupt the incumbents if you will), is to offer a chance for developers of any skill level to get into the stream of creating apps and services for their upcoming platform that showcase the flexibility of it, but also endear the platform to the context of the markets it will be developed into. The Phones for Apps for Firefox program that’s going on this month intends to do just that.

If your proposal is accepted (and there are still devices left), then you will have the opportunity to create within the stream of some of that disruption that FirefoxOS seems to be aiming for. And even if you don’t get into the program, there’s documentation and software available to help you get started in making this platform something worth keeping into the conversation of what’s available for you or your content.

What that means for us here at MMM is that we could jump into the fray and either develop an app (we’ve got one worth doing) or learning the platform such that we can assist others who might begin considering it. That’s not a small endeavor (we did mention all of the other platforms that are fighting for attention these days earlier). Still, it makes sense that at the intersection of faith and mobile tech that we look at what’s prime to disrupt the status quo, and then ask the question “what makes the most sense for those folks coming online, specifically through their mobile devices, as devices become more malleable and personal?” We think FirefoxOS is one of several ways to go about answering that. We’ll see what the future of mobile looks like when we design it.

Securing the Doors Around Here

Update: the HTTPS piece talked about here has been turned off for the moment as it was the reason for the downtime today. It will come back. So please take note of the below as a bit of a preemptive note.

As if there isn’t enough news going around these days about data, access, and security, one of the more recent pieces that has sounded an alarm is the news of a botnet (automated scripts that act like tiny computers within programs) that is aiming to use WordPress-powered blogs for generally making a bit of nasty noise around the web. Since MMM is among many faith/tech sites that uses WordPress, we’ve been going about adding some measures of security to the site here – and its noticable that it will have an effect on how you consume information around here.

If you are coming here direcly by typing in the URL (as about 45% of our visitors do), you will have noticed a note about the security certificate for the page, and then you would have noticed that we are now running the site with SSL enabled. You notice this specifically by the https:// that is in the URL field of this page. That’s the biggest piece of friction and has actually resulted in about 2/3 of the traffic that we normally see in that organic fashion going away. Crazy drop I know, but if it means that the information here remains usable in a secure manner, that’s going to have to be the case.

Enabling SSL, along with a few other features behind the scenes, happened to be enabled by the use of the WordPress plugin Better WP Security. Better WP Security enables all kinds of neat features that you would normally need to know a bit about network security to implement, while also adding some semblance of sanity through log reviews, IP blocking, and site database backups. Being that MMM is no stranger to strange visitors, this is a very important measure of security that we needed to implement, and frankly probably comes at a great time. Our server admin also considers it a good thing to add, even though its not necessarily the route they would have gone with (they are admins, they know things too).

The SSL tweak has broken pages for a number of visitors. The biggest break is actually on the side of our RSS feeds. You will need to check your feed address – its needs the https:// then mobileministrymagazine.com/feed in order to work properly. Yes, I’m still using Feedburner (feeds.feedburner.com/mobileminmag – I think that’s it), but if that service was also to be cut off by Google, you need to know how to get our content in the most direct way as possible.

For those of you not coming to MMM through any of our apps/experiments, you can still get to MMM content through our HTML5/jQuery web app, or by the (only?) mobile ministry portal out there – MobMin.Info. Either one puts our content in front of you in a mobile-friendly, quick, and contextually-relevant manner. Who knows… we might just let those stay as the entry points while the rest of the web works itself out.

Other than that, content will still flow to and through our Twitter feed (@mobileminmag). And there will also be a slew of content posted by others at Twitter, Pinterest, and other social media outlets if you search for #mobmin. There’s a growing body of conversations and works happening, and MMM is proud to be a part of that conversation.

I’m sure that our folks who work in the mobile security space will have more to add to this thread, and that conversation remains open here and other places. If anyone has continued advice for MMM, please don’t hesitate to drop us a line.

For some other tips on how to secure your WordPress blogs, visit this recent article at Internet Evangelism Day – with IE Day coming up in a few days (April 21st) this makes even more sense to be on top of for your ministry communications.

MobMin.Info Updates

MobMin.Info screenshot

Some time back, we announced the MobMin.Info portal – a simple resource portal to much of what’s happening within this space we call mobile ministry. Since its unveiling, there have been a few updates to it, and we want to highlight those items, as well as the updates that have happened most recently:

  • The addition of a Videos section – pointing to several videos which speak directly to mobile ministry (definition, activities, and trends)
  • The addition and refinement to the Bible Apps and Dev & Services sections for more platform-specific content – so if you are trying to build or deploy something, this is a one-stop-shop for those resource links
  • An updating to the Articles, News & Discussions sections links – adding a bit more of what’s happening in social networking spaces (if anyone has a mobile ministry specific link for Facebook, please send that and we’ll get that there too
  • Setting up the page to act like a mobile app – so that you can access this when offline, and if needed, you can utilize your mobile device’s ability to send links to others (via SMS, Email, or Bluetooth) for those items which might be applicable to them; this feature uses the HTML 5 Application Cache feature, and has been implemented as a beta/experiment play (this might not work on your device)

Hopefully, this is something that can serve to help you better understand what mobile ministry is about. And if you are looking to develop, this kind of page can potentially serve as a template to guide you towards how to translate content into a mobile-friendly view (for example, this portal page uses elements from Modernizr, jQuery, and Google Analytics in concert with a UI custom design).

If you have any additional items that should be added here, please get in contact with us so that we can update accordingly. To view this portal, simply point your browser to http://mobmin.info

All Books Project Update

At the end of 2011, we started a project called All Books as an exercise in developing a Bible reader interface that was based around a spatial oriented UI than the normal list/task UI scheme. As the year has progressed, development has as well. There’s been some healthy learning about the limitations of using the Nokia Web Browser on my N8 as the baseline for this. Some lessons towards JavaScript and what works efficiently and what doesn’t. And a few more lessons here and there.

At the end of last month, I got around a Windows PC and was able to send to GitHub the updates that have been pending for the All Books Project (as of right now, I’ve not seen a solid GitHub app for the iPad that works with the web developer app Textastic; open to recommendations). So, if you aren’t watching that repo, I would recommend that you take a look at All Books on GitHub and download the update. Here’s the summary of the updates

UI Updates:

  • added HTML5 local storage for usage stats (needs fixing)
  • fixed a number of books which had incorrect URL pointers
  • fixed issue with navigation where stats wouldn’t hide
  • fixed issue with navigation where clicking on All Books from OT hid OT books instead of keeping them seen
  • shortened text on Reset Stats button

CSS Updates:

  • added CSS for stats area
  • added text-ellipsis for buttons

Now, remember, All Books is just a web-based interactive container (HTML5, jQuery for JavaScript, and CSS3). The content that I am feeding to this comes from Bible.org and several other sources (noted in the UI About section). You can pretty much take any directory of HTML documents that are Biblical in content and point this UI to. No, its not as clean as Browser Bible, YouVersion, OliveTree, and the others. This is in part by design. In order to know what works and what doesn’t you’ve got to sometimes get into things and build it yourself.

That said, All Books is also designed to be a gift to the folks at Bible.org. They have an excellent HTML package of the NET (New English Translation) Bible, but the HTML interface for it wasn’t the easiest to use on tablet and mobile devices. All Books answers that interface question, and sets the ground for the kind of interface that (when scripted) can easily translate across languages and levels of literacy. So to that end, I hope the Bible.org folks can appreciate these and keep pushing the Gospel forward.

If you have comments towards All Books, or would like to contribute to the project, visit the All Books Project on GitHub and just jump right on in. As for me, there’s an upcoming update to my Nokia N8 which might help performance issues, and finally get me on ball to some of the next features for this.

All Books Project on Github

All Books Screenshot
I’ve added my All Books Project to Github for those who might be interested in taking a look as to what I’ve been working on. Right now, that’s just the UX. I’ll get the ReadMe and Wiki updated in time.

As of now, I’m not really planning to do much more to it before I finish some lessons with JavaScript and figure out the speed issues on my Nokia N8. But, if you’ve got ideas, or want to jump in, well, there it is.

Oh… the colors, measurements, and arrangement is all for a reason. That all comes in the documentation… stay tuned.

John Dyer and Digital Bible Society Introduce Bible Browser

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.

Spatial Interfaces, Theological Literacy

Tim Challies Visual Theology - Books of the Bible iPad-sizedLast week, or so, I wrote over on my personal site (Blog.AntoineRJWright) a post talking about this idea of spatial interfaces and how the concept of such a means of navigation intersects directly with the thoughts I’ve been having about theological (more specifically, biblical) literacy and what that means we should be enabling given this age of connectivity, productivty, and access to tools of publishing (re: internet). Here’s a snippet:

As I was just going through Twitter and seeing what all people have been posting about today. I came across a neat Biblical visualization from Tim Challies. Seeing this reminded me that I’ve not done much of an update here (or MMM) about the All Books Project that I’ve been working on. So, let’s talk spatial interfaces (a topic seen in a recent meetup I attended) and theological literacy – and why these merge nicely.

Read of the rest of Spatial Interfaces, Theological Literacy at Blog.AntoineRJWright

I make some bold claims in that piece (“theological literacy isn’t just reading/comprehension, but its able to (re)create the Word contextually” for example). What are your thoughts? Especially for those of you whom are teachers/pastors, can you teach to this level? And if not, are you misapplying the term literacy in light of the command in Matthew 28:18-20?

[Experiment] Redesigning MMM

[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.

Continuing on Resolution #4: Raising the Bar on Mobile UX Standards

MMM on the N8 - Share on OviA few articles ago, we went a bit on a extended talk about the All Books Bible Reader that I’m developing for personal use. After talking through the technical features and goals, we wrapped up with a statement talking about clarifying the goals and features for your mobile(-first) endeavors, and being mindful of the specific UX needs mobile presents:

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.

With that starting point, we want to highlight a bit more about Mobile (UX) Standards and in referencing that All Books Project, and some of the items to keep in mind whiile moving forward in your mobile initiatives this year and beyond.

Mobile UX Standards
It is assumed that the idea of what makes for a great mobile user experience is pretty easy – just grab yourself an Apple iPhone and use it for a week or two, then switch to another platform for the same amount of time and note how often you frown, toss the device, or find yourself limited in some fashion. And while we can agree that Apple’s iOS platform does make for some suitable claims towards what makes a good mobile experience (consistency, quality, variety of applications, etc.), its not the only mobile experience, nor does it answer every question anyone developing, selling, or using mobility will ask towards.

Over at UX Mag, an excellent article talking about mobile standards beyond the styleguides, frameworks, and guidelines that would usually reference as we develop apps makes an excellent point:

…Apple, Android, and Blackberry all do a great job of sharing standards with their developer communities. They share detailed guidelines on standard UI elements, the associated terminology, and their behaviors, and give usage examples for the UI. However, what they don’t do is string them all together into patterns.

  • What happens after you click this button?
  • How should these messages change in context of the task?
  • If you’re opening a document online, should it open in a new window or in the current window?
  • When and where do error messages appear in a form?
  • Is that different or the same in a wizard or series of forms?

These are the questions that designers and developers spend most of their time toiling over—the little things that pull UI elements together into a full interaction. And these are also the questions that the OS standards do not cover. This is a key gap in standards for designers and developers that can be filled by a new custom set of guidelines, which further save money and time in development efforts and add value to the existing, basic OS standards.

*List formattting added

Beyond simply saying “we want to go mobile” or “let’s use this or that to go mobile,” you really have to ask core questions about the interaction and steer adamantly towards those goals. What happens when you don’t steer specifically towards the goal, understanding these kinds of questions throughout, is that you end up with a glut of features, conflicting brand messages, dis-engaged users, and missed opportunities to deliever the depth of the Gospel that you/your group intends that application or service to portray.

Start With A Picture, Ask Until the Ink Dries
With the All Books Project, I started with an idea in my head (more efficient Bible reading on my personal mobile device that wasn’t limited to closed-licensed texts), and started scraping together what was needed and what wasn’t in order to make that happen. I boiled things down to two features: reading and searching. And then I took to one of my favorite apps on my iPad (Tactilis) to sketch some reasonable ideas towards how I would get there.

UX Flow for All Books Personal Bible Reader - Share on Ovi

This UX flow document is my gage of whether I’m meeting my goals. If I am, then the lines here continue to make sense. If not, then I go back to this document towards what I (originally or later modified) thought and ask whether my thinking should continue down the path I’m or, or get back on course to what was drawn.

One of the pieces of interaction that I’m aiming for with All Books is a sliding popup for when I click on those verses with footnotes. The feature is harder to implement than its drawn. But, because I’m clear towards what I want to do when the popup is envoked, how its interacted with, and how it is dismissed, I can keep my programming focused and timelines (generally) well kept.

A Good Mobile UX Is Also Your Feedback Loop’s Process
In designing an effective mobile user experience (UX), you also need to take into account the development/design of your support infrastructure. As we talked about once before when developing mobile web apps, you need to have in place the resources not just to build the app, but to support, maintain, and maybe even update it.

Build, Get It Out There
After I was able to figure out my issue relating to displaying content within All Books, I needed to start using it. It didn’t matter that there was (noted) performance issues or the inability to see the footnotes as I’d like. Getting it into my normal use allows me to catch things that I’d not considered in my initial development and design, and then adjust on the fly without effecting other pieces of the project. For example, I realized that for all the work I did with makng this a spatially-orienting design, I still felt lost when navigating. The insertion of colored indicators on the section that I was within helped this considerably, and it was a few lines of code to add to do this (1 CSS class and 1 JS statement).

With that: do you have your mobile UX resolution refined now. Its the middle of January, don’t let too much longer go by.