
7 Great Church Websites That Have Responsive Design
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.
We just updated our website at the end of 2012. It’s built with WordPress with a responsive theme.
Do you have a URL Ron? Is it this one? http://www.gethsemaneevansville.com
Yes this is the URL. We will be updating the site later this year with a different theme.
http://www.nsb.org
Our in-house custom responsive WordPress site.
Thanks for the other examples!
Nice work Scott!
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
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/
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!
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
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! 🙂
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 🙂
Thanks for that, Neil.
I saw your earlier comment, and it’s certainly something I’m going to investigate.
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.
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?
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.
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
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.
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 🙂
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?
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.
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.
Hi Javin, I would do both. Stagger them if you need to for implementation. But both are relevant.
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?
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?
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?
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
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.
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?
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..
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
Mark, did you use a wordpress theme? If so, which one did you use?
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
Thanks Mark!
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.
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
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
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)
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.
Revisiting this list. Some of the above don’t really seem to be technically “responsive”. Any new and wonderful sites to list – anyone?
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.
http://www.madisonmethodist.com
http://ouuc.org/
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.
Hi Sheryl, Thanks for commenting! Great to hear you are making the switch. Steve
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. 🙂
Check out City Church For All Nations @ http://www.citychurchfamily.org .
My church 🙂 – https://theriverchurch.us/