Under the Bonnet: Kings Website 2017

In Tutorials, Web Design

At Kings we recently went live with our new website which you can find online at www.kings.church. It’s fully responsive with a searchable media archive, groups directory and blog; as well as some other features like retina images, embedded background video and off-canvas navigation. I’ve included all the little tricks I learnt below, just incase it’s useful.

Kings Church Website

At the beginning there were a few options on the table. Like outsource it out for a custom build, go for an off-the-shelf template like ekklesia360 and ChurchInsight, or design it myself. After some research and experiments I decided to go with the last option for a couple of reasons:

  1. Designing website’s is cool. One of the coolest things you can do, no doubt.
  2. It would save us budgeting an extra £7k to outsource.
  3. We can get exactly what we want, whenever we want, down to the last pixel. And we’ll never have to pay £60/hour + VAT for updates.
  4. We already have a member management system in the form of CCB.
  5. You can design a really powerful media archive with a wordpress blog, and integrate it seamlessly into your website.
  6. I’m a geek and used to design websites.

 

Most churches don’t have in-house geeks, so this is an option that’s perhaps a little unique to us. Granted, if I get hit by a bus Kings will have to get another designer to update. But that’s not the end of the world.

Naturally there’s pros and cons to everything in life, and there’s a few drawbacks to this approach:

  1. If I want someone else to update the site, they need a good dose of training. We are doing this, but it is a little complex and I usually record step-by-step video tutorials.
     
  2. I can schedule anything on the three integrated WordPress sites (media archive, blog and groups directory), but the events page is just raw HTML (no CMS). So I manually add and delete events, they don’t expire at a predetermined time (which would be nice). There’s probably a solution to this somewhere online, or you could integrate another simple WordPress site, but I decided it was no big deal. Editing a CMS is no quicker that editing HTML. I update the events every Monday and with we’ll structured HTML it’s pretty quick and painless.

 

A note on me

I’m fundamentally a graphic a designer and videographer. I also used to do a lot of Flash back in the day, as well as designing HTML websites. Although I’m quite technically proficient, I’m not a developer, so I don’t have the vast coding knowledge that those guys do. But I know HTML, CSS, and a tiny bit of PHP. Hopefully this blog post illustrates that there’s a lot you can achieve with these, especially when you combine them with WordPress.

Structure

Most of the site is pretty simple: HTML5 and CSS3 with a few plugins here and there. The HTML pages are saved as PHP, simply to make use of one key feature — PHP includes (see below). This is a way on including code from one HTML file across your entire site, as if it was directly written in each page. Different to an iframe, and very, very useful. The navigation and footer uses these. A single update to these files and they’re live across the entire site.

As mentioned above, there’s three WordPress blogs integrated into the site. The designs were based off one of the standard WP themes and customised through CSS. The navigation and banner design was added to the header.php file and our footer design added to footer.php. Basically through a lot of experimentation, and the ‘Inspect Element’ feature in Safari, you can work out how to target each design element in the blog and override them with your own CSS.

If you can nail the design and get it consistent with the rest of your site, the WP blogs integrate really well and provide you with some very powerful tools. Having a teaching archive which can be filtered by series, speaker, topic, scripture and year makes it very accessible. There’s also a search bar and people can find what they’re looking for quickly. It just opens things right up.

Tricks

I did a fair bit of research to find solutions to all the different tasks. Below is a simple list of what I used and came across that might be useful to you if you’re a fellow HTML geek!

40+ Responsive Navigation Solutions (Examples & Codes)

A great article detailing lots of options. We went for the Off-canvas navigation by Pushy.

HTML5 background video

Tutorial by InsertHTML, used on the home page. I had to set the height of the container div to scale at the same aspect ratio as the video. You can calculate this and set the height of video as a percentage of the viewport width e.g. height:30vw;

Fullscreen background video:

Another tutorial by sliceJack on background video which was useful.

Video Conversion

It’s good to include WEBM and OGG video files as fallbacks for your HTML background video. As you can’t publish these from the Adobe Media Encoder, you have to find something else to do the job. CloudConvert worked really well.

Responsive grid from Foundation

Foundation is a framework for designing responsive sites. My initial experiments began by using this. It has some great features, and a good off-the-shelf solution. In the end I found that I preferred using my own divs, unordered lists and CSS media queries. It was simpler and allowed me to control exactly how the information was displayed at every browser width.

PHP includes

Super useful way of including common elements like your navigation and footer from a single HTML file. Much better than using iframes for this purpose as the code reads as if it’s be written in the HTML of the parent page. Update the navigation once, and it’s updated across your whole site.

For the integrated WordPress blog, the PHP include code looks like this:

<?php
$root = realpath($_SERVER[“DOCUMENT_ROOT”]);
include “$root/shared_files/navigation.html”;
?>

I inserted this in the header.php of the theme. In your normal web pages the code looks like this:

<?php include(‘shared_files/navigation.html’); ?>

Incidentally, if you’re designing your site in HTML, you can just change the extension of your pages to .php. You still design and code in the exact same way, but you have the added functionality of PHP, and you can make use of features like this handy include.

Browser testing

MobileTest.me was good for checking out the presentation of responsive design, giving an idea of how it would look in smartphones and tablets. Not a live test on the actual devices, just useful as a reference.

BrowserStack was fantastic. A live view of your website across all the different browsers, operating systems and mobile devices.

Retina Images

After doing quite a bit of experimentation I realised that you can compress retina images a whole lot more than non-retina images before you see the degradation. This is because four times as many pixels are squeezed into the same space. The compression is sort of masked by the detail (if that makes sense?).

As it turns out, I can add so much more compression to my retina images that on many occasions they’re actually smaller than the non-retina versions. What madness! But it’s true. Makes you wonder if you even need to serve up different versions of the same image. You could just use the @2x version and let the browser do the scaling.

FeedPress

FeedPress is the best alternative to the now obsolete Feedburner that I could find. Seems to work great, but a service that you do have to pay for.

WordPress Plugins

One little lesson when using WP plugins: don’t be too reliant on them. I originally used CPT-onomies on all three WP integrated sites. The plugin basically creates additional and separate versions of the categories box. So you can have extra categories for speakers, topic, series, scripture etc. Useful for categorising our sermons in lots of different ways, making them easier to search through.

Unfortunately when you use a third-party plugin you’re reliant on that third-party (whoever they may be) to keep their plugin up-to-date and working. If they don’t, and WordPress updates, it can go redundant and you immediately lose the functionality on your website. This happened with cpt-onomies when WP updated to version 4.7.4

Luckily I realised that everything I was trying to do with the plugin I could actually do with tags, just as long as I was careful not to create two tags the same. It’s simply the presentation of these tags on the website that’s key. Split them up into different sections in your widgets sidebar and you’ve achieved the exact same thing. So a lesson to keep things simple where possible.

I used a couple of other plugins (that hopefully won’t stop working!):

  • Featured Video Plus adds a featured video instead of an image on your blog. Very cool. And responsive.
  • Collapse-o-matic enables an expands/collapse functionality to desired content.
  • Default-sort-ascend switches the order of posts shown by date to oldest first. Useful in the groups directory where we wanted to display the listings from Monday through to Sunday, and used the publish date to order them.

WordPress Hacks

The search bar can return all sorts of entries from the database, not just the posts. You can make the search bar only return posts by editing the file wp-includes/query.php

When it says: (line 2252)
$q[‘post_type’] = ‘any’;
It should say
$q[‘post_type’] = ‘post’;

WordPress also has an annoying feature where it automatically adds enclosures to the custom metadata included in the post. So my long URLs to download the audio and video got added to every post footer and looked very messy. Adding this code to functions.php stopped the ping-backs which enabled this:

remove_action(‘do_pings’, ‘do_all_pings’, 10, 1);

CSS3 background fade

Used these on the venue buttons on the home page.
http://stackoverflow.com/questions/7622822/make-background-fade-out-in

Unit conversion

http://pxtoem.com was surprisingly useful

Instagram feed embed

SnapWidget is a great (and free) way of embedding your Instagram feed on your site. We used it on our Love Eastbourne page.

HTML: Target the Root Directory

I may be a bit of a dummy, but I’ve only recently learnt that starting a URL with “/“ targets the root directory of your site. Especially helpful when creating a navigation file that’s integrated to pages in the root and pages in subdomains. The little things you learn.

CSS for first and last list items

I also learnt that, when creating your list, code like this exists: li:last-child { }
Useful for when you want to style your last item slightly differently from the rest. For example, no border-bottom:

In fact, there’s all sorts of nth-child recipes you can cook up: https://css-tricks.com/useful-nth-child-recipies/

CSS target every other element

You can target every other element with code like this. Especially useful for long lists where you’re trying to improve readability:

.classname:nth-child(odd) { 
      …
}
.classnamet:nth-child(even) { 
      …
}

Think iTunes library:

<select> Dropdowns

Simple code to make <select> dropdowns open URLs (e.g. dropdown menus on groups )

<select onchange=”if (this.value) window.location.href=this.value”>
    <option value=“empty”>Pick one:</option>
    <option value=”/foo”>Foo</option>
    <option value=”/bar”>Bar</option>
</select>

Text Breaks

Using this CSS helps you specify where you want your text to break:

span.avoidwrap { display:inline-block; }
<span class=”avoidwrap”> Text </span>

Goodbye IE9

I checked out our site states over the last year. IE9 thankfully accounts for only 0.3% of browsers accessing our site, meaning it’s not overly essential to get everything perfect. I’m pretty sure most of those hits are from the old computers running IE9 in our shared office!

Fresco – A Beautiful Responsive Lightbox

Perfect for adding image galleries or ‘view large’ options, like the photos on the venues page: http://www.frescojs.com

Target IE 9 and lower

For when you still need to style for IE9 and below:

<!–[if lt IE 9]>
    <link rel=”stylesheet” type=”text/css” href=”ie8-and-down.css” />
<![endif]–>

REMs are pointless

No longer needed for accessibility, and they’re not supported by IE8, so you have to include the PX value anyway. Simple option: forget them, just use PX.

Adobe Typekit

If you have an Adobe CC subscription you get Typekit for free — a good range of web fonts you can use on your website. Easy to miss, but definitely worth looking at.

Expand/Collapse Module

Great for creating a show/hide feature for extra content on your website. For example, creating a ‘read more’ button which expands to show additional information rather than linking to a new page. Online at http://jsfiddle.net/9ccjE/

Submit a comment

Human check: *