The Importance of Mobile for the Church

Vatican Website on the iPhoneBy 2015 (probably sooner), more people in the world will be accessing Church websites with mobile devices than traditional desktop computers (source).

Most Catholic websites (including this one, currently) are designed only for traditional desktop computer displays, and look either atrocious or (at best) hard to read on mobile devices.

This is a major problem.

It's not good enough to simply be present on the web anymore; the Catholic Church—once a leader in the arts, science and technology research, etc.—has fallen far behind on the Internet. The Vatican's website, once one of the only public websites on the Internet, is now a relic of the past, being difficult to navigate and read not only on mobile devices, but even on desktop computers.

Most diocese-level websites have a design aesthetic straight from the late 90s, and parish-level websites are beyond that. Many in the Church say "the 90s isn't that long ago...", but they don't realize that for the new generation of youth who are now maturing into adulthood, an ugly and hard-to-use website is the equivalent of locking the doors to your church during daytime hours so they can't come in and pray (which, sadly, many Catholic parishes also do).

Many parishes don't even have a website, much less a website that's designed to be easy to use for mobile users. Even if a parish just had a page that listed the parish name, had a picture of the parish, a map link, a phone number, and Mass Times (and nothing more), it'd be better than about half the parish websites that exist today. And it would probably work better on mobile browsers.

An article posted recently to CatholicTechTalk.com asks, is your church website mobile-enabled? I would ask, more pointedly, is your church website designed for mobile users? (I would even say that it would be better to design only for mobile users than only for traditional desktop users, at this point).

What to Avoid

To make sure your website is at least at a base level of mobile-friendliness, here are some things you should try to avoid—especially on your site's home page:

  1. Complexity.
    Complexity kills performance, confuses users, and even makes it harder for you to manage your own site. Don't include something in navigation unless it's really important, and cut down on the features/add-ons you add to your site (especially on the front page).
  2. Adobe Flash. For anything. Get rid of it.
    Most devices won't show it at all, and those few that do, render Flash poorly and/or slowly. (Same goes for Silverlight, Java, or other plugin-based content).
  3. Large image backgrounds and other large images.
    Mobile devices are often used over 3G connections, and even newer 4G connections are nowhere near as fast or reliable as home broadband. Don't make mobile users wait for a minute to load your website—they won't wait, they'll just close the window and leave.
  4. Things that require mouse-based interaction.
    Really detailed image maps should not be used, as they're difficult for a touch-based user to touch. Also, some forms of menus (like mega menus) should be well-tested on touchscreen devices before they're deployed.
  5. Script-heavy pages.
    If you have a lot of JavaScript logic (or jQuery/whatever library you use), mobile devices often spend 5-10x longer than desktops processing the logic. Keep that in mind when you decide to use 35 different JS effects on a page! 

What to Foster

  • Simplicity.
    One of the greatest challenges of my job redesigning the Archdiocese of St. Louis' website was reducing the clutter on the front page; cutting down links, showing only a few items, etc. Sometimes it's hard to cut clutter, but think of exactly what site visitors want, and focus only on that. As a side effect, your website will load faster and be easier to read.
  • Responsive and/or mobile-first design.
    It's not too hard to turn a simple design into a responsive design, which looks good on a variety of devices (think iPhone, iPad, Kindle Fire, Laptop, Desktop, TV, etc.). Here's a quick guide I wrote for Drupal themes. A good book to get you started is here: Responsive Web Design. Check out an example of responsive design (resize your browser window or view it on a mobile phone).
  • Fewer resources.
    If possible, try combining small JavaScript files or multiple CSS files into one. Use preprocessors and minification tools (like UglifyJS) to make resources much smaller in size. It takes mobile devices much longer to download resources (especially when there are many) than desktop computers.
  • Front-end performance.
    A lot of people spend hours worrying about optimizing MySQL to gain 100ms on the server processing a page, or optimizing a PHP function to save 10ms. Did you know that most of the time spent rendering a page these days actually takes place on the user's device (especially with mobile devices, which are many times slower than the fastest desktops on which you're developing your website!). Read this article for more info: Big Performance Wins on the Front End.

Not There Yet

I'm giving these bits of advice to fellow Catholic web developers; unfortunately, most that I know are overworked, don't get paid enough by Catholic institutions to justify spending time helping make a site mobile-friendly, or can't spend their free time trying to help often stubborn Catholic institutions to join the 21st century web.

Sadly, then, most of these words are going to fall on deaf ears. But the Church and Catholic organizations need to seriously consider whether they want to court an entire generation of web users who will have only a mobile phone and maybe something like an iPad, or ignore them and focus only on a bygone time of the web. Bulletins, mailings, and phone calls aren't cutting it today, and they won't cut it in the future.

Personal contact—one of the things at which the Church is a pro—isn't a given these days, and the Church needs to court people in any avenue possible, especially online. Let's clean out our welcome mats (our websites), and make our entrances more inviting. Welcome people through technology, and then make a personal connection.

Comments

Ricky Jones's picture

I agree with you 100% on this Jeff, in fact that's what got me to focus most of my efforts on designing Church websites. But I must admit, I haven't paid attention to the mobile users either, so I'm thankful for this article!

Slow-to-keep-up Mama's picture

I see where you're coming from, and agree with what you're saying, but try not to overlook those of us who haven't progressed to mobile access of everything just yet. I know there will come a day when I'll probably be frustrated by these same things, but I'm not going to be there for a while. You know.

Open Source Catholic's picture

Oh, definitely not. But I believe that even a mobile-first design would be better than many of the designs I've seen out there, and would make your life easier as well, even if you only use a desktop computer. Designing with mobile limitations in mind helps keep interfaces simpler and faster...

Advancing the faith.

Domenico Bettinelli's picture

Good article overall, Jeff. I would amend one thing. When you refer to sites not looking good on mobile, in general that's true for phones, but not tablets. In fact, most sites look fine on my iPad (with the exception of Flash, of course). That said, will phones in 2015 and beyond suffer from the limitations of phones today? Perhaps they always will due to size issues. I agree that responsive design is a solution, but I hope one day we can put worries over device screen size behind us along with worries over browser HTML/CSS implementation *cough*IE*cough*.

Jeff Geerling's picture

Even tablets, though, come in a lot of types and sizes. Right now the iPad is definitely dominant, but in it's portrait orientation, some sites look less-than-optimal. So, I would suggest responsive design with some breakpoints and just enough fluidity that they'd look good in the 1000px+, 700-1000px, 450-700px ranges.

Plus, as tablets like the Kindle Fire and other 7"ish tablets slowly gain traction, more people will probably start reading sites in portrait (very narrow on those tablets) orientation, necessitating a narrower design than we're used to.

Finally, with regard to limitations of mobile devices like RAM, connection speed, processor speed, etc., I think those will all get better by 2015, but I don't think certain things (like bandwidth allotments (2 GB data caps—ouch!)) will go away by then, and that should still make us think twice about serving up pages that are 1+MB in size, or having 25+ separate resources.

Web developer from St. Louis, MO. Personal website: Life is a Prayer.