Think Mobile First When Developing an Effective Church Website

During 2014, mobile devices overtook desktop devices in digital consumption (comscore). In other words, more people use the internet through their smart phones and tablets than they do through their laptops and desktops. The problem: most church websites are designed for desktop devices and show up poorly on mobile devices. Mobile usage is still trending up, so churches and other nonprofit organizations need to start thinking quickly about how their sites show on mobile first, then figure out how they will display on a desktop.

There are several ways in which you can create a robust mobile web-presence. Some are better than others, and some are situational. Here’s the rundown:

The Mobile Site Approach

With this solution you have two separate sites: a desktop site and a mobile site. There is some “special sauce” within a website that recognizes what kind of device you are using and loads the appropriate site. This was the original solution to the mobile problem but has become less popular in light of newer alternatives.

There is still room for this solution, but it’s not for most churches. The only reason left to use this solution is if you want your mobile site to react radically different than your desktop site. For example, if you wanted to highlight your media on your mobile site and a message of welcome on the desktop site, this strategy might be appropriate. However, even in this scenario it might be better to use an app to develop the mobile functionality you are looking for.

The App Approach

Apps are programs made to work on a smartphone and are available in the repository of apps that matches your smart phone (Apple App Store or Google Play, for example.) There is a movement afoot lately (driven by a few companies who cater to churches) that suggests that every large- and medium-sized church needs an app.

This is a bit misleading. The advantage of using apps is that they can take advantage of the special hardware on your phone, such as the camera, the GPS, and so on. Instead of leveraging those advantages, app companies will typically market an app that mirrors your website. As with the Mobile Site Approach, you’ll find yourself managing two sites that perform roughly the same function.

This doesn’t we shouldn’t be using Apps, however! There are lots of innovative ways that churches can leverage apps to do ministry. Think of what you are are trying to accomplish with your ministry, then think about how the special functionality of smartphones can help you accomplish that goal. The bridge will be the App.

The Responsive Design Approach

The best and most popular solution to the mobile problem is to make a site “responsive.” That is, the website responds to the different sizes of screens being used today. This is usually accomplished through the shrinking and stacking of columns. It’s also the reason why boxier sites are trendy right now.

Responsive Design

With responsive design you only have to manage one site in order to have both an effective desktop and mobile web presence. Aboundant is built to be responsive from the ground up. It works automatically, no matter how you design your site.

Other Mobile Considerations

Most of these considerations relate to the ways in which touch screens change the way we interact with the internet.

The Thumb Menu

It is hard to shrink an entire menu down to a mobile size, so a new type of menu has entered the scene. The thumb menu is represented by three lines like this:


Clicking on this icon will overlay a menu on your screen that is often contained in one column, in order to fit it on the screen. Web browsers are smart enough to switch from a normal menu to a thumb menu based on the device you are using.

Infinite Scrolling

It’s easier than ever to scroll down a page with your thumb, especially when compared to scrolling with a mouse. This has led to the inception of using “infinite scrolling” in lieu of normal pagination. Infinite scrolling is exactly like it sounds: you can scroll through every post on the site until you reach the final one. With normal pagination (a Page 1, 2, 3… approach) it’s usually hard to hit the small “Next” button on a smaller screen.

“Full” Sized

It used to be that all important information on a site was “above the fold.” Just as newspapers put their most important stories in the top half of the first page, the most important content showed up on the screen when the site first loaded. You didn’t have to scroll to get anywhere. Mobile websites have thrown this concept out the window. Now web developers are more likely to put just one full-sized image or banner on the home page. They know that when it’s re-sized for mobile that either A) more stuff will show up below it in a vertical view, or B) it will be easy to thumb down the page in a horizontal or vertical view.

Video Restrictions

Video restrictions aren’t as big of a deal as they once were unless you are hosting your own videos. It used to be a problem that Apple spurned Flash (and technically it still does.) The difference now is that video hosts such as YouTube or Vimeo are smart enough to know what device and browser you are using, then serve you the video format that is most compatible. If you are hosting videos yourself, make sure your video player is just as smart.

The Bottom Line

Thanks to responsive design, building for mobile is easier than ever…but it still requires a significant shift in thinking. When you are adding an element to your website, be sure to test it out on a mobile device before you commit to it.

This site is protected by reCAPTCHA and the Google Privacy Policy and Terms of Service apply.