The Importance of Mobile for the Church

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