Gospel Driven Websites - An Inviting Design

This is final part of a 6 part series on developing better church websites. Catch up here: • Post 1: Gospel Driven ideas • Post 2: Welcoming your Visitors: Location & Times • Post 3: Welcoming your Visitors: What the Church Does • Post 4: Welcoming your Visitors: What the Church Believes • Post 5: Welcoming your Visitors: Some Other Useful Content

We’ve got all our content out of the way. Now let’s get into the fun bit — designing! Design here is not just the aesthetics here how we’re organising our content onto a page, and how users will interact with your site. It includes not just the visual design of the site, but where content is placed, and what is used to accent the content, wether that is images, photos, video.

I want to suggest there’s two sides to design. There’s Visual Design, where the aesthetics of the site matter, which in turn is extension of what you want to communicate about your church. This cares about the colours, photography style, typography and icons that you use. What your visual design of your site is an extension of what you want to communicate about your church. But there are ways for well written content to be misused and misplaced on your website.

It’s also important to point out that Visual Design can also change quite quickly in some cases. Aesthetics change. Styles change.

Then there is User Experience Design, which is the way in which users use the site, but also how the site itself guides its users along. It’s about making useable, accessible sites, that allow for your users to find the right information.

Visual and User Experience Design aren’t completing, but are there to help communicate what you want to say about your site.

Now I will say, User Experience Design is a huge field, and although I have some thoughts and ideas, I’m not an expert in this field. I’ve used Steve Krugg’s Book, “Don’t Make Me Think” as a starting point, but there is a whole field to help you understand how to best work with your users.

Aesthetics change. Styles change. But User Experience rarely changes.

So what’s Important in a websites’ Initial Design?

What’s Important for User Experience?

Let’s get the selfish one out of the way first. I’ve already mentioned how easy it is to repeat content across different places on your site. But what this does is make the site more high maintenance than it already is. With our new site, we wanted a way to limit where we placed our content. That way, when something changes at our church, it’s an easy fix, rather than a laborious task.

But what this also meant is how we design our site also impacts on keeping it low maintenance. One suggestion that we took up was limiting the number of pages from 30, to 10, to 5, to 1. Our front page became our about page, listing everything we do on one long scrolling page. And it works, as enquirers know that webpages scroll down.

While I long for the day when I can use an API to update our site, which means that I can update content once in different places, this way of developing a site works best for us right now.

We’ve already covered setting a structure for your ministries. Now we’ll look at things from a slightly bigger view of our structure. It’s probably the hardest area to get right, because there’s no right way to get the correct information at the right time. The structure that I’ve provided in the last 2 chapters is a good starting point, as it is based upon research on what makes good design. But for some, that might not work for your church.

Hillsong has numerous churches across the globe, and each person is looking for something on their site. But they limit the navigating by guiding the audience from the globe, to their region, country, state or county, local city, before showing the local church. Once they’re there, they then focus on service times, and other events. This might work for your multi-site church, but my guess that your church is a bit smaller. You may want to group things into what enquirers are interested in about your site. In your case, limiting the number of clicks by combining similar data might help provide that structure.

Have you tried going to a new place without a map, or a set of directions? I’m someone who’s needs a GPS to get around my own city, but I’m never lost without it. But when it can’t use it, such as in festivals & shopping centres, it can be hard to find where I’m meant to be. So in those situations, whenever I see a map plastered on a wall or a popup sign, I run to it, quickly finding the big “You are Here” sticker.

Web designers do a similar thing. Often in their design of their site there are visual cues to let the user know where they are. This might be placing a big emphasis on the title of the page with a big hero image, or it might be a different colour scheme to show a different section of their site.

One common way to have a consistent way to show that same information is though the use of Breadcrumbs. This is to show what page you are at, and in what section of the website structure you are in. This can be very helpful if you have a complex site map.

Did you know that in Australia, footpaths that turn into pedestrian crossings are cut in such a way that a small ramp is created to meet the road. ‘Curb cuts’ were intended for those in wheelchairs & the disabled to get around independently, but the invention is also used anyone pulling, pushing or riding something with wheels. It’s a form of inclusive design.

The same idea applies to websites. Creating a website that is inclusive for all walks of life allows to reach to a wider audience than before. As I said right at the beginning of this series, there are many ways that those who have a disability can use a website, such as screen readers, magnification plugins, and alternative ways of using the keyboard and mouse. So taking the time to put accessible options in your website design helps everyone.

Thankfully there are guidelines that can help made the best decisions in regards to this area. W3C — a standards organisation which sets how HTML, CSS, & XML should function online — has the Web Content Accessibility Guidelines (WCAG 2.0) which help set how your site should work for a variety of disabilities. It is under four underlying principles: perceivable, operable, understandable, and robust. The guidelines are broken down also under three levels of Accessibility: A (the bare minimum, least restrictive), AA & AAA (most restrictive). Most ‘accessible’ sites that have adopted the AA as the standard for most general websites to use as their guidelines. So, if you’re in a position to build your church website with web developers, putting in as part of the statement of work is that the site should meet WCAG 2.0 at the AA level will immensely help.

However, if you’re doing this alone with off the shelf software, here’s some easy things to keep in mind.

  • Don’t use Images to convey information: One thing I’ve noticed is that it can be quite easy to create a slide about your future event, or a new ministry starting up. What usually then happens is that the content is only then exported via an image and uploaded to the website. While it does convey content for most people, it is not user friendly for those who use screen readers, or sometimes those using their phones to zoom in on images. At this stage, however, is that a machine cannot read out loud any text from an image. So, while images are important in breaking up content, or to show a ministry in action, to use it as a way to convey information is not effective. Spending the extra time to provide an alternative by placing text as text is greatly appreciated.
  • HTML for Content, CSS for styling: Hyper-Text Markup Language (HTML) was meant to define what function each piece is into the content to be shown on the page, while Cascading Style Sheets (CSS) was developed to present that content. For example, <strong> has meaning of some text that has great emphasis, while <span style=“text-decoration:bold;”> doesn’t have that meaning. Throughout the history of the web, developers have been mixing both markup languages, by including content in their CSS, or allowing for HTML to do some of the presenting. But this makes things difficult for those with screen readers. So know when you’re using the tags for what reason. There is a site called CSS Zen Garden which is a place where different people have displayed the same content with different stylings, it’s worth checking out to see what I mean.
  • Use ARIA tools to help Screen Readers: ARIA tools are helpful web based tools that you can add to your HTML code for Screen Readers. This allows those who are using screen readers to navigate in a page, fill out forms, read out error messages, and live content updates. You can read more about ARIA tools over on the Mozilla developer page for more information.
  • Use Colours with a high contrast: Finding the right colours can be a bit of a hassle. There are entire sites that can help you find the right look for your website. But one way to keep in mind is to check the colour contrast on your page. You have to remember that those who are hard of seeing may also check your site out, so having a non clashing, and contrast helps. WCAG 2.0 AA guidelines suggest at a minimum contrast of 4.5:1 between foreground and background colours. you can use sites like https://contrastchecker.com/ or http://colorsafe.co/ to check your colours.

What’s important for Visual Design?

Now lets turn to Visual Design.

Sometimes you may have the budget and the time to go for an off the shelf option. In that case, can I recommend Communicate Jesus’s Church Website Provider list. But if you don’t or you’re using a theme on a Wordpress or Drupal installation, here’s some tips to keep in mind when designing your aesthetics.

There’s a blog that I keep coming back to from the old graphic design magazine “Before And After.” It’s an email thread between a freelance designer and the editor. The designer was asked to work on a logo for a horse riding therapy organisation. The designer got what the client wanted, even using stuff from their initial design sketches. The designer sent them a state of the art logo, with a horse riding free in the wind. It was something that they could use to look professional for years to come. But the client then used a different logo; clearly home made and unprofessional. The designer was confused. Why would they not use my logo? The editor pointed out that the client didn’t want a professional logo, they wanted a story in their logo. They wanted a logo that showed what they were doing, and how that worked in their community.

It’s easy to follow a particular trends in website design, but at the same time, it’s important to work out what is going to be important for you community. 6 years ago, it was cool to have skeuomorphic design, which is to have design elements to mimic textures we see in the world, such as wood and pyjama pants. But these days, the current trend is bright colours, or a monochromatic site. But, in some communities, a textured design that intentionally’s give the feeling of home may work better than following websites trends.

Our church has followed some of these trends to an extent, mostly to clean our site up (see below), but that doesn’t mean that you have to follow these same trends.

When designing our new front page, I thought it was important to have everything compact. I added some space here and there between the content to try to spread things out, but trying to add whitespace between the content didn’t make a whole lot of sense. Then someone on the team took some time out to redesign the site. All they did is take some design elements from a demo site, and apply them to our site. It provided a breath of fresh air on the site, and it became the new starting point for the site. So to help, try spreading things out, changing the fonts to add some more space, and see how it helps.

Stock photos kinda suck. Sometimes they follow a trend, or they’re daggy, or they’re unrealistic. Yet at the same time, we’re drawn to them to quickly get a site up. I want to suggest that showing what you’re church is like, wether it’s during a service or a ministry is incredibly helpful.

I’ve seen two trends come up in resent years. One has been the one big group photo; where it shows a wide cross section of your church congregation in a shallow depth of field. This is to show diverse your congregation, but also what a service might look like. The other trend I’ve seen is the testimonial portrait; where the church focuses on a family, couple, child or adult who has been changed by God at the church. It usually links to a testimony page.

In either case, using people doing things at your church is the best way to show what you’re church is about.

So, In Summary

  • There’s two types of Design; Visual Design, and User Experience Design.
  • User Experience
  • As a starting point, think about your site as a living document. How could you go around designing your experience to be kind to yourself?
  • Does your site consider how your enquirers will reach to what they need?
  • Have you thought on the ways in which you enquirers will see where they are?
  • Consider the ways that you can make your site more Accessible.
  • Improve your visual design by,
  • Knowing your culture and seeing what sticks here,
  • increasing the use of white space to break your content up, and
  • Use lots of pictures of your church and the people who attend.

After 4 years, “Gospel Driven Websites” is finally done! If you can, claps are appreciated, and your thoughts can be given below or via my Twitter. I am hoping to turn this series into an e-book, with some extra content, so keep up to day via my new “at-most-monthly” Newsletter!

By day, I work in Technical Support, but at night, I write on a mishmash of things. But mostly on #churchwebsites.

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store