Church websites are notoriously behind the times in terms of web design and appearance, but yours doesn’t have to be. Here are some good design tips for church websites, to help you avoid common problems and improve the visibility, readability, and aesthetic appeal of your church website.
Church Websites – Don’t Do:
1. Goofy Fonts
It’s inevitable; many fledgling or self-taught designers think that the go-to, be-all end-all answer for every design is a snappy font. And then they choose:
Or even worse:
Let’s not even talk about their lovechild abomination:
When adding content to church websites, best practice is to use standard, web-safe fonts and use good images with a well thought-out design to make your church website really attractive. Don’t rely on a cutesy (but actually horrendous and overused) font; put the time and effort into your site to make it right.
An even better and more modern option is to use Google Fonts. This article explains what Google Fonts is and how to use it to make your website really shine.
2. Clashing or Poor Color Schemes
Often, the person maintaining the church website is someone with many years of experience in the “old web,” the 1990s-2000s school of web design thought that included a variety of fundamental assumptions that are no longer acceptable in modern web design. One example is a tendency to use bright, contrasting (or clashing) colors on the site, such as fluorescent backgrounds and text colors that really “pop” (and look horrendous). Instead of following these outdated design concepts, use an online color palette generator, research best practices in web design color schemes, or find a professional website design that you can copy.
3. Multiple Text Colors
Often, to draw attention or differentiate between different content, church website designers will use multiple contrasting text colors. Not only does this technique look like something out of a psychedelic 80’s music video, but it’s distracting and even juvenile.
Best practice for text colors is to use a single color across all the standard (paragraph) text, and possibly use a slightly different color for H1, H2, or H3 elements (if you don’t know what those terms mean, then see the “Dos” section for a CMS-Content Management System-suggestion). This helps make the website look more consistent and readable, plus it helps people who suffer from colorblindness to read your site better. Sometimes more is less, and less is more.
4. Flashing Graphics
This is something that never should have existed in the first place: flashing or glittery GIF images. Ok, so teenagers loading up their MySpace pages with abominable, flashy images is understandable, but that was 10 or more years ago, and we’ve moved on since then. If your website has anything that “moves” other than a video or a slider, you should delete it immediately (and that includes scrolling text). It’s obnoxious and likely to drive people away. Normal, static images are the way to go. If you want a more visually-gripping header, check out these cool websites with video headers for some design ideas.
5. Massive Images
A common mistake made by even experienced web designers is to use full-size images in their websites, which results in slow-loading pages. Best church websites design practice is to use a tool like Optimizilla or Jpeg.io to crunch images down to size, making them load more quickly, and resizing them to fit the correct dimensions. Most responsive website designs will rearrange the content as necessary to make it fit on whatever screen the viewer happens to be using, but make sure your images aren’t sucking down a huge amount of bandwidth for your site’s visitors.
Church Websites – Do:
1. Easy Navigation
Make sure that your church websites have a simple, consistent, visible menu somewhere at the top of the site or on the left side of the screen. This will help prevent frustration for your site’s visitors. Remember, it’s not important what you think looks good: what’s important is that your site’s visitors can access the information they’re searching for.
A menu that’s easy to find will help your site be easy to navigate. Put yourself in a visitor’s shoes and imagine what they’re going to see when visiting church websites. Also, the same exact main menu should appear on every single page. Varying the menus depending on the page is terrible web design practice.
2. Consider a CMS or Static HTML Generator
If you’re still using Microsoft FrontPage, or maybe even Weebly or Wix or Webs, you should consider moving your church website to a Content Management System (CMS) or a simpler static HTML site generator. Either way, self-hosting (meaning paying for your own hosting space) is getting cheaper all the time, and the improved flexibility over the more typical site builders is well worth the investment. We heartily recommend WordPress.org for a CMS (KJV Churches runs on WordPress), but there are many different options out there, most of them free to use.
Another self-hosted option is a static HTML generator. These applications deploy finished HTML sites that don’t depend on a MySQL database and dynamic php to display. This results in a much faster website. This option is great for most church websites that don’t have a lot of content that changes constantly. Check out this list of top open-source HTML site generators for some options should you consider going that route.
3. Bonus: WordPress Tips and Tricks
If your site is one of the 74,652,825 (and counting) websites running WordPress, there are some important tweaks that can help your site be more accessible and easy to use.
Set your site’s Permalinks
Under the Settings in your WordPress dashboard, there’s a “Permalinks” option. On church websites installed recently, this isn’t a problem, but sites that are more than a year or two old will need to have the permalinks set manually.
Permalinks are the URL structure for the dynamically-generated pages and posts of your site. By default, a link will look something like this: http://www.yoursite.com/?p=1234, which is ugly and useless. Instead, pick a different permalink option that will result in a more obvious URL containing the page or post name. Since the default structure points to the post ID, it’ll always work, but it’s unseemly and should be changed before deploying a website.
Install Yoast SEO
Search Engine Optimization (SEO) is a vital aspect of having a website. Good SEO makes the difference between your church website appearing at the top of a Google search and appearing at the bottom of the second page. Yoast SEO is a free WordPress plugin that will help you optimize your site and page/post content for search engines. It offers a lot of different tools, such as integration with Google’s Search Console. We highly recommend you install Yoast SEO and follow the instructions for a boost in your site’s ranking on Google.
Integrate Google Analytics
Did you know that you can track how many people visit your site each day without installing a clunky hit counter? (hit counters are SO 1990s) Google Analytics is a free tool to track visits, traffic sources, bounce rates (people who only view one page and leave), and glean data on how to improve your website. After you sign up for a free account, you can use a plugin like MonsterInsights or simply copy the Google Analytics code into your church website header section (be sure to follow the instructions carefully) to start tracking visitors.
Conclusion:
The internet has evolved tremendously over the last three decades, and web design practices need to evolve as well. Church websites are the digital representation of the local church, and just like you wouldn’t want to paint your building purple with green highlights and put strobe lights on the roof (I would hope not, anyway!), we shouldn’t put that on our websites, either.
One Response
Our son and his wife attend your church. Last Sunday he recorded a song that was sung and played at your morning service by the pastor’s daughter. We were at home listening
to our church services online. Thank you for the song (He’s Still God). We were blessed by it.