Mobile Responsive Church Website Design 101

Written by  //  February 10, 2014  //  Church Websites  //  6 Comments

Website design is in a revolution that is unlike anything we have ever seen. Up until the last couple of years, all websites had a desktop screen that used a mouse and keyboard and went to a monitor. The biggest challenge with website design then was if you should create a website bigger than 640px by 480px as monitors became bigger as well as more browsers could make displaying your website complex and frustrating.

What Is Mobile Responsive Web Design?

With the rise of the mobile device, tablets and smartphones from Android based operating systems, Windows devices, or the giant iOS platform from Apple, we now have a new way of reaching people. Here are just a couple of the questions that mobile devices have brought up:

1) We have issues of smaller screen size with phones as well as larger and higher resolution screens with tablets. How can we make the website look good?

2) Another issue is that unlike the mouse for computers, we have fat fingers that are trying to navigate through the website. How do we make it easy to flow through the website while still looking good when someone is reading content?

3) Finally, load times across wifi are improving every day with higher bandwidth speeds, but mobile 3G and 4G speeds are still slow a majority of the time unless you are near towers or in open space. If a website takes too long to load, the user will ditch the website. How do we be visually appealing while still loading up quickly?

Comparing iPhone 5S with iPhone 5 Responsive DesignThe solution is to create a new website presentation for mobile users than desktop users, thus the term mobile responsive web design. Now, this is not a debate for if a church should create an app or a responsive design. If you want to have that discussion, check out our post in November of last year. Instead, we want to look at how to create a mobile responsive web design for your church’s website.

Mobile Responsive Web Design Solutions

Here are several solutions that your church can take for your church website. Note that we give the positives and negatives of each, but it is up to your church, the importance of a mobile responsive web design, their dedication of resources, and the established goals that come of redoing your website.

1) Hire Someone To Redesign Your Website

This solution is the most powerful option that will reap you the best results for your website. It’s highly customized, optimized for your use cases, all of your website will show up, and your branding can always be present. In all honesty, the programmer is simply manipulating some CSS, testing it on different platforms, and getting the most out of your website. Nearly every Fortune 500 company goes this route because it is the best. The downside is that it will cost you more to go this route than any other. If you value your website, how you are communicating to your audience, and have the resources to do this, this is the option for you.

2) Purchase a New Website Design that is Responsive

This is the solution that I choose with my personal website when I bought a WordPress theme. You will pay a little more for a responsive design, but prices have become very competitive and nearly an industry standard now. If you are looking for a new website design anyways and would like to buy a theme package, this is a perfect solution. If you need some options, we have brand new 2014 web designs from people you can trust for great theme designs. Make sure the theme you buy is mobile responsive and if you are not sure, ask the developer. Do not buy a new theme without ensuring it will look great on a smartphone. The problem with this approach is that you are going to be a bit limited on your branding, flexibility of design, and fully integrating your website into the design. But the cost is much lower than hiring someone.

[Note from E-zekiel, one of CTT’s Premier Sponsors who offers responsive themes for churches: E-zekiel designs are cleverly built from the ground up to be responsive. Their designs offer smart and beautiful transitions for viewing websites on the desktop down to tablets, smart phones and other Internet-enabled devices. So your site will look great on big and small screens without you doing any additional work. View some of their latest responsive designs here.]

3) Use a Mobile Responsive Website Plugin 

For some websites that run on WordPress, Joomla, or Drupal, there might be plugins that help detect what device is viewing your website and automatically change it. Solutions like WPTouch are designed to take what you have and convert it for you. What you get is a great design that is perfect for all mobile solutions. Even better, there are free versions of this available to you. Yet, the biggest issue is that the design you get on your mobile device will most likely be completely different from your church website and so if branding is important to you, then this is a terrible solution. More so, plugins do not account for church podcasts, special ministry pages, or other specialized web pages and can break your website. This solution should be seen as a temporary fix till you move to a better solution.

We’d love to see your mobile responsive websites for your church or ministry. Share them in the comments below and show off your great sites.

About the Author

Jeremy Smith has been a blogger for three years at seventy8 Productions and is a frequent contributor for ChurchTechToday. He has a bachelors degree in Computer Engineering, Master's in Family Ministry, and has been doing youth ministry for ten years in two different ministries.

View all posts by

6 Comments on "Mobile Responsive Church Website Design 101"

  1. Kevin Smith February 10, 2014 at 4:56 am · Reply

    We redesigned our site from a clover site last June and have loved our responsive site. http://www.thepeoplechurch.com

    • Lauren Hunter February 10, 2014 at 9:39 am · Reply

      Hi Kevin, Thanks for sharing! I’m curious – did you mean that you used to use Clover or that this new site is running on Clover’s CMS? We’d love to know what you’re using for your new site. It looks great!

    • Jeremy Smith February 10, 2014 at 3:18 pm · Reply

      Kevin,

      Your site’s responsive theme is great and I love how the theme is compatible with your desktop design! Great work.

  2. Steven Gliebe February 11, 2014 at 10:04 am · Reply

    I was surprised at a statistic I saw the other day about what percentage of users surf the net with their smartphones. I can’t remember the number but I do remember it was higher than I thought (and I already figured it’d be a large percentage).

    It seems like most commercial WordPress themes are responsive. I consider it a standard thing now so there isn’t really a major difference in price between a responsive and non-responsive theme (they’re all basically $50 – $100 anyway which is a tight range on the low end of website construction spectrum). A year or two ago there was some resistance. Some designers were saying they won’t hop on the responsive bandwagon. Now I’m seeing pretty much every theme designer doing it because it is demanded by users.

    With http://churchthemes.com our themes will always be responsive and we like to add a “Full Site” button in the footer. You might notice popular websites almost have this option if you scroll down. While most users probably do enjoy responsive design, there’s no doubt sometimes you want to view the whole “desktop site” and just pinch and zoom around. So I’d say when looking for a theme, see if it has this option. That way you can please *almost* all of your site visitors. ;)

    I’d like to point out one more thing. Having somebody custom design your website is not always the best thing, even if you can afford it. You will get the most unique site, but it will not necessarily be the best site. Ask around and see if you can find churches who paid several thousand for a site and are unhappy. I recall a church who paid in the thousand dollar range and ended up switching to our $50 theme because they liked the result better. The great thing about using a theme or one of the hosted solutions is that you can preview a design and have a realistic idea of what you’ll get before plunking down the bucks. A nice compromise is to hire somebody to customize a pre-made WordPress theme.

    • Lauren Hunter February 12, 2014 at 9:52 am · Reply

      Hey Steven,

      Thanks so much for your insightful comment above! I think you are right. Often churches will pay for custom and find that a responsive wordpress theme does the job even better. What’s your perspective on all the church-specific CMS companies out there? Do you feel that some of these might be a better fit for churches? Love your two cents!

Trackbacks for this post

  1. 5 Trends Churches Should Pay Attention to in 2014 | Symbiota

Leave a Comment

comm comm comm