7 Great Church Websites That Have Responsive Design

Steve Fogg 31st Jan 2013 Branding, Communications, Digital

0 Shares

The transition towards responsive design in the church web world is well and truly underway. In my recent post, ‘Why your church needs to update its website in 2013‘ I shared the reasons why you need to get moving on updating your website. I’m seeing new sites come online weekly. We are in fact in the middle of our own website redesign at Crossway Church using the responsive design philosophy. Church website design will always move with the times. This is just the latest chapter.

I’m sure that there are many more responsively designed church websites out there. If you have any ideas, or know of any, drop me a link in the comments area at the bottom of the post. Basically what you are reading here are the result of some of the research that I have been doing while developing our own website. Here are seven examples that I love. Plus a sneak peek of Crossway’s which is currently in development:

Granger Community Church

City On A Hill Church

Mars Hill Church

The Chapel

Woodlands Church

Irving Bible Church

Bethlehem Baptist Church

Crossway Church (sneek peek)

If you are still wondering what all the fuss is about read ‘Why your church needs to update its website in 2013.’

Have you seen any other examples of churches that have adopted responsive design? Please leave a comment and a link below.

0 Shares

48 Comments

Ron Yates - February 1st, 2013 at 2:54 am
We just updated our website at the end of 2012. It’s built with WordPress with a responsive theme.
Steve Fogg - February 1st, 2013 at 12:43 pm
Do you have a URL Ron? Is it this one? http://www.gethsemaneevansville.com
Ron Yates - February 19th, 2013 at 2:11 am
Yes this is the URL. We will be updating the site later this year with a different theme.
scott - February 1st, 2013 at 3:46 am
http://www.nsb.org
Our in-house custom responsive WordPress site.
Thanks for the other examples!
Steve Fogg - February 1st, 2013 at 12:42 pm
Nice work Scott!
Neil - February 1st, 2013 at 11:27 pm
Seem like none of the web devs involved in any of these projects read this post http://css.dzone.com/articles/ie10-meets-modern-mobile-html5
Neil - February 2nd, 2013 at 10:31 pm
I feel that my original comment could be viewed as a little troll-ish. Sorry, it was not meant that way. I truly desire to see all visitors to our and other sites experience excellence in UX design (and for web devs to realise there are other platform than OS X and iOS 😛

Anyway, as a result, I’ve taken the time to pull some information together on my own blog. Maybe it’s helpful, maybe it’s not. I just want to see responsive sites that work for everyone.
http://neilnuttall.wordpress.com/2013/02/02/why-you-should-respond-to-windows-8/
Rowan - February 3rd, 2013 at 1:44 pm
Interesting link thanks Neil. Another thing to make life difficult for web designers & developers, as if designing something that looked good on every device wasn’t hard enough already!
Neil - February 3rd, 2013 at 1:54 pm
Hey Rowan,
But without dev’s constantly pushing the design envelope, were would we be? Still oo-ing and ah-ing over flaming logos (http://youtu.be/3LkQrtCIFA4).
As I allude to in my post, as I understand in the @viewport element used in the CSS of responsive sites is currently a non-official extension. And as such the way MS are implementing it does does conform to W3C guidlelines. Anyway, keep pushing that envelope. Everyone wins in the end
Why you should respond to Windows 8 « Random : a blog by Neil Nuttall - February 2nd, 2013 at 10:24 pm
[…] on his Clear & Simple blog, my buddy Steve Fogg has a great post, “7 Great Church Websites That Have Responsive Design.” It’s a great post with some good examples of some church websites, both local and overseas, […]
Phil Maylor - February 4th, 2013 at 9:32 am
I did a complete rebuild/rebrand of our church’s website a couple of months ago, including utilising a new responsive design – http://www.salfordelimchurch.org

I’d welcome any feedback/comments – always looking to improve! 🙂
Neil - February 4th, 2013 at 10:25 am
Very nice Phil.

Renders beautifully on my WP7.8 handset (Lumia 800), and I love the navigation drop-down.
Although, as I’ve mentioned about the the other examples Steve has posted, it doesn’t respond when snapped to the side in Windows 8/Windows RT.
Take a look at my post – http://neilnuttall.wordpress.com/2013/02/02/why-you-should-respond-to-windows-8/

Neil 🙂
Phil Maylor - February 4th, 2013 at 11:07 am
Thanks for that, Neil.

I saw your earlier comment, and it’s certainly something I’m going to investigate.
Daniel - August 5th, 2014 at 1:07 am
Phil,

I would recommend re-exporting all of the images so they conform to web format (72dpi, no larger than you need them to be in terms of pixel x pixel) so as to minimise download requirements and increase load time on the website. Each banner is about 1mb, which is massive for a simple banner. They should be File > Save for web and setting the height and width in there will guarantee minimum required file size.

All the best.
Sandy Pearson - February 5th, 2013 at 7:40 am
Are these large churches that are doing responsive designs using design companies which offer Content Management Systems other than WordPress? What did you find the ballpark initial cost was to convert your website into a responsive design (and ongoing costs)? Is anyone doing them simply with “HTML” (vs. via a CMS) with device-detection and varying CSS? In your opinion, are church apps going to live longterm regardless (for limited church users)? Is the talk about HTML5+CSS3+javascript on the same page (apples-to-apples) or is that another way to approach compatability? Lots of questions… anyone with insights?
Neil - February 5th, 2013 at 10:15 am
Hi Sandy,

Just a quick comment on the just using device detection and varying the CSS.What that sounds like to me is device optimisation. If a desktop client makes a request from the server, it delivers the HTML + desktop CSS, if a mobile client hit the server they get the HTML + mobile CSS (I’ve even seen examples where the dev has created platform specific CSS for iPhone, Android, Windows Phone so as to mimic that platform’s UX). This approach works well and definitely has it’s advantages (eg: device optimised sites), but it delivers a static layout. With responsive design, the layout will change on a desktop when you resize the window, or on a mobile device (smartphone, tablet) when you rotate from portrait to landscape.

For smaller churches on a budget, hosting on wordpress.com, there are both free and premium themes that are responsive. So while the likes of Granger and Mars Hill are positioned to invest into custom design, it doesn’t have to be an exclusive club.
Rowan Winsemius - February 6th, 2013 at 9:27 am
Hi Sandy,

I come from a small church (approx 60 adults) and we implemented a responsive site last year. We’re using Joomla rather than WordPress. I started with a template from themeforest which set me back around $40 but provided me with the bones of a good responsive site, I was then able to tweak it and make it ours. FYI Im not a web pro or anything, just an amatuer hack 🙂

I’ve loved using a responsive site, having the same content on the main site as well as when viewed on mobile just makes it much easier to keep everything up to date. And yep I think you’ll find most responsive sites rely pretty heavily on html5 and css3.

Hope that helps.
Regards
Rowan
Sandy Pearson - February 6th, 2013 at 3:52 am
Thanks, Neil, for the insights about responsive vs. device detection differences. I just looked at the code of Granger’s site and actually was surprised to see wordpress theme markers in the code (except their media seems to go to another server). Not sure how deep that goes.

Currently, we just have a desktop purposed static site (that is a miniature-site then in an smart phone’s browser vs. responsive) that is XHTML1.0 using Dreamweaver and is hundreds of pages (we archive our sermons as searchable pages). It’s fast to maintain vs. a browser-based CMS, in my opinion.

But — we are also at the place of determining whether an app is important for certain purposes or if a responsive site (for all viewpoints) is a substitute. Or… if an app is needed in addition to solutions for all viewpoints/devices.

Do the responsive sites designs include considerations toward HTML5/CSS3/javascript 2014/future trend that I’ve been reading about? Why 2013?

Still trying to get my mind around next steps.
Alex Lam - February 15th, 2013 at 12:06 pm
Hello everybody from across the globe, in Malaysia. I’m a proponent of using communications in every way for the advancement of the gospel. Too many churches fall by the wayside as they try to come up with a free DIY website that oftentimes looks substandard.

If you can’t afford a full-fledged agency, get a responsive theme, then get your most savvy bloggers to personalise it for your church. I heard someone say Theme Forest up in the comments and that’s a good stepping stone. Do choose a responsive design, while you’re browsing themes.

Here’s what we did for our church: http://www.dumc.my – responsive and quite beautiful if I may say so 🙂
Sandy Pearson - February 16th, 2013 at 6:12 am
Anyone familiar with this new Adobe software that was just announced? http://www.forbes.com/sites/anthonykosner/2013/02/14/adobe-releases-new-html5-edge-reflow-for-responsive-web-designers/ Would this be a better responsive design option for those of us who are Creative Suite/Dreamweaver users than reverting to an unwieldly content managment system / WordPress?
Alex - March 21st, 2013 at 6:05 am
We launched a new version of our in January – http://12stone.com

It’s a ThemeForest WordPress theme at it’s core, but we’ve done a lot of modifications to that theme to make it our own, including more custom post types and such.
Javin Proctor - March 27th, 2013 at 4:32 am
Question for you: If you had to choose to primarily go one route first, would you choose responsive web design or creating an app for your church. I know an app will get more use from in house people, where web is both inside and out. Do you think a church needs an app? Trying to make this decision for our church.
Steve Fogg - March 27th, 2013 at 12:36 pm
Hi Javin, I would do both. Stagger them if you need to for implementation. But both are relevant.
Sandy Pearson - March 29th, 2013 at 1:25 am
Steve/others — I’ve been doing a lot of research into the RWD vs./and/or app options, and the feedback I’m getting is that apps will be a waste of $. They are so limited and stuck within the rat-race of making compatible to all the new devices/platforms, etc. They have high setup costs and ongoing costs as well. I’m working on finding ways to have our website redesigned as RWD with “app-like” features and being mobile friendly then, will resolve the need for an app. People (both internal/public) can then access everything they need by saving a web bookmark/fav icon (linking to the website) to their smart phone vs. installing a limited/duplicative app. Feedback?
Javin Proctor - March 29th, 2013 at 2:37 am
That was my biggest concern, and what I have been finding in regards to the app, cost efficiency. The biggest pro to me with the app is push notifications. Also what I’ve looked into with having an app is that they are pulling stuff off your website, so isn’t that just being redundant/unnecessary expenditure when it can be accessed on the mobile version of the site? Am I missing other benefits to the app?
Brian - June 21st, 2013 at 7:12 am
Love this list! It is a great showing of where we are headed with church website design. Here at Bridge Element we are making all our previous designs responsive. All our new designs will responsive as well. Here are our current websites for churches.

As for the Mobile vs. App conversation, I think each is geared to different audiences and facilitate very unique functions.

We advise all of our partners that their church website should be focused on the potential first time guest. The website’s function should be to make guest feel welcomed and help to remove any barriers to coming to a weekend service.

An App is best suited for regulars/members. The App’s function is to facilitate community and keep members in the loop. No potential guest is going to search the app market for your church. Push Notifications are an obvious plus to an App but we are excited about the possibilities for community building and Small Group integration.

Currently at Bridge Element we are developing an App platform that will allow each church to have a App in the Android/Apple/Kindle market. The app will match the look and feel of your website. We are building our platform to be able to pull in some data from the church website but we want our partners to be creating content specifically for members.

What kind of functions would you guys like to have in an App?
Mark Johnson - September 6th, 2013 at 11:29 am
Thanks for this list. I’m surprised how many bugs these larger church sites have. I build responsive sites for a living, so I was shocked to notice some major ui issues within the examples. I’m in the process of rebranding and building out my church’s site mobile-first, and I’ll make sure to loop it through here after launch
Sandy Pearson - September 7th, 2013 at 12:53 am
Mark, please please do so! 🙂 I need to see more sites that work, as well. As I have been visiting RWD sites, I’m not super impressed yet, and we have multi-campus to figure out for our church. We also have ministries that provide a lot of very helpful things online vs. paper, so I’m still researching best ways to approach, even though now I have $ saved toward our huge project.
Sandy Pearson - October 3rd, 2013 at 4:45 am
I finally found a web site that works as I had hoped! thevillagechurch.net is responsive, has multi-campuses, and within the campus-specific navigation, there are campus-specific calendars, staff, events and even search results that pertain primarily to that campus. Whoo hooo! The navigation is very intuitive and not confusing. It’s apparently designed by ekklesia360.com Anyone else find some good examples of RWD for multi-site?
tom blair - November 20th, 2013 at 10:32 am
We are a traditional church with an elderly congregation. I’m the web developer and I’m 62 – pretty good with HTML and photoshop, but newer web development techniques I am slow to adopt. But I definitely have to make a small version for tables/devices. OTOH – most of our congregation is elderly and doesn’t use cell phones – and often don’t even check email. Oh well..
Mark Johnson - November 21st, 2013 at 12:03 am
Steve, here’s the website I pushed up for my small church. It’s fully responsive, using the WordPress framework. I’ve built in a podcast feed as well as an event section. All my feeds validate and push to iTunes. Check it out and let me know: http://conwayalliance.org
Javin Proctor - November 21st, 2013 at 3:17 am
Mark, did you use a wordpress theme? If so, which one did you use?
Mark Johnson - November 21st, 2013 at 3:29 am
Javin –

Started with Toolbox and rolled the entire codebase and styling myself. I used html5, css3 and SASS. Here’s a link to the Toolbox theme, which basically gives you a “raw” base to work with: http://wordpress.org/themes/toolbox
Javin Proctor - November 21st, 2013 at 4:23 am
Thanks Mark!
Nate - December 24th, 2013 at 4:36 pm
Hi Steve. Thanks for the great collection of sites. We updated our church website about a month ago: http://calvarymemorial.com

It‘s designed in house. I stripped down Bootstrap for a base-level framework, and we use Ekklesia360 just for CMS. Would love feedback.
Steve Fogg - February 18th, 2014 at 9:42 am
Top work Nate, looks really clean and good. As photos are your ‘heros’ I would think about getting really photographers to get the best possible shots that represent who you are. I reckon that would really add some punch to the site. Thanks for passing on the link! Steve
Joshua - February 18th, 2014 at 9:08 am
Hello Steve,

This is really great to see! At lot of newer churches are getting in the know about responsive design. Unfortunately a lot still have very outdated websites. Hopefully more will come across this. Being a web designer and developer I only recommend responsive now.

We have seen great results with ours, http://2ndcitychurch.org, in a short time and being a new church plant in Chicago. I think between making it responsive, good content, and SEO a church community can really make an impact on the web.

Thanks for sharing!
Joshua
Neil - February 20th, 2014 at 4:15 pm
Hi,

One of the members of the Church IT Australia group on LinkedIn posted this recently.
http://www.linkedin.com/groupItem?view=&gid=6573656&type=member&item=5838894501120192515&qid=b82f17ca-d0e2-4619-8f80-b324da7e46ee&goback=%2Egna_6573656

It’s a good quick way of explaining what a responsive website is to those who may not know/understand (IE, probably the people who have to approve the expenditure)
Stephen Costello - March 11th, 2014 at 10:03 pm
Great list of sites pal. Very encouraging to see churches being creative and striving for excellence.

I recently created a website for my local church, you can view it here… http://gracegeneration.co.uk I would appreciate any feedback.
Sandy Pearson - August 13th, 2014 at 3:16 am
Revisiting this list. Some of the above don’t really seem to be technically “responsive”. Any new and wonderful sites to list – anyone?
ron - August 14th, 2014 at 2:35 pm
Created using a free joomla template from http://www.shape5.com and adding custom header and DJslideshow for the front page slider. Audio content is delivered using jwplayer. Created with a $0 budget and donated server space.
ron - August 14th, 2014 at 2:36 pm
http://www.madisonmethodist.com
Arbuckle - November 7th, 2014 at 5:22 am
http://ouuc.org/
Sheryl - November 25th, 2014 at 2:54 am
Thanks for posting this collection. I manage the website for my small church, and we are looking at a major (responsive) redesign sometime in the next year. These sites gave me some great ideas to get the gears churning. I especially loved the navigational simplicity of the City on a Hill site. Some of the others were just too confusing with too many different menus.
Steve Fogg - November 25th, 2014 at 2:41 pm
Hi Sheryl, Thanks for commenting! Great to hear you are making the switch. Steve
Sandy Pearson - January 31st, 2015 at 9:16 am
I am so excited to finally say we’ve made it through the Responsive Web Design maze. It took quite a bit of research and vendor inquiry, but we found an incredibly gifted RWD designer and developer in Elite Webscapes (http://elitewebscapes.com). Elliott just finished our site at: http://yourcrosspoint.org and it was in custom WordPress with multiple campus structuring — something others couldn’t figure out. Our highest kudos to them! Very very reasonably priced as well. Please check out our new site. We are soooooo happy and so excited to recommend him to other churches and nonprofits looking for the best solution in reasonable terms. 🙂
Andrew Toohill - July 4th, 2015 at 6:41 am
Check out City Church For All Nations @ http://www.citychurchfamily.org .
Bob Kruse - January 8th, 2018 at 10:38 pm
My church 🙂 – https://theriverchurch.us/