I’ve been going to Drop Inn Community Church for nearly nine years. The church was planted back then by the director of Drop Inn Ministries, Ronnie Dawson. The Ministries is an international charity, but Ronnie always had a view to start this church. It’s in an unusual position in that, whilst being a small community church, it has wide reaching arms across the globe, with numerous pastors and missionaries in numerous countries connected to the little fellowship.

All this time however, the church didn’t have a web presence, other than a mention or two on the main dropinn.net site, so it seemed like a no brainer.

We eventually decided to create a portal website. A front page; a shop window. Having pretty much zero budget meant having to head to social networks and services to deal with things like blogs, updates and audio. But with a small portal website, it gives you the scope to stretch yourself as well as embrace the parameters it’s placed in.

All things to everyone

Early on, it was decided that a mobile first approach was the way forward. And also, taking inspiration from the “cutting-the-mustard” approach taken by the BBC News team. Having the site work on every browser and every device was important, since many of our visitors would be from abroad with varying computers, phones, browsers and connection speeds.

The temptation is to keep it simple, and the church is simple, but it has character. Lots of it, so character is what the site needed.

We launched the site around Christmas 2013 and it worked fine. Using a new palette of colours chosen for the church and a consistent aesthetic, I also used photos of the local community I’d taken early one morning. Combining those with a terracotta globe image, it gave the site the impression that it was both local and global at the same time.

Effort was made to give the site a good presence on Google. Signed up to Google Places for Business and got a wee square on the search engine with a map and opening times. Made the most of “meta” tags, filling them with geo data, twitter handles and so on. I even hooked the site up with Facebook’s Open Graph, so links to it look handsome.

The viewport and hidden menus

This month playing around with vh units, I decided to give the site a slight refresh, mainly because it was looking a bit like every other church website.

I decided to go for a slightly controversial hidden menu approach. With the navigation accessed via a button in the corner. This, however, gave me scope to give attention to the menu itself, as well as making use of the full width of the page for the main content of the website. I decided to go down the uncluttered route, rather than just “simple”.

The menu now is a series of blocks: big buttons with large icons. No more pokey click areas. The same area is used to contain some contact details and links to other things. Basically it’s almost a mini-site just for navigation. It’s the Portal.

Full screen!

The main content area now has the advantage — and disadvantage of “full screen”. An exciting, but terrifying thought for any web designer. Usually we constrain ourselves into a box in the middle of the page. Now I had the use of the whole page. And I decided to make use of the whole viewport. Making use of the nice photos, I decided to make a song and dance about these and fill the top of the page with them. On the homepage, I filled the page right to all the edges with the terracotta globe. This is ripe for changing, maybe based on a sermon series at the church.

For text on the site, I chose to use a fixed width column in the center of the site with good-sized text that’s easy to read and scan. This gets round one of the problems of full width sites. The result, I find is a balanced page, where white isn’t just wasted space — it’s a frame.

I used vh units for the top banner images. A relatively new, but we supported unit that makes use of the size of the viewport. An absolute gift I thought, and worked beautifully in Chrome, Firefox, Safari… even IE 9!

Then last week I looked at it on an iPad. Oh no! The site was growing and growing. Turns out it gets confused about what viewport means and any content below it causes the page to grow… forever. Nuts. What to do? Thankfully I discovered a little fix in the form of the Viewports Unit Buggyfill. So, now it works on iPad.

Small screen

Responsive and mobile meant though that I couldn’t serve large images to small devices. That would be rude! So i created 4 of each banner image. Two for desktop and two for mobile. Each of these pairs has one for retina display. This also means that the images could be adjusted so they don’t look squeezed in or stretched out.

Movement

Another aspect of the site is animation. I intended to use it as subtly as possible, giving movement that flows with the site rather than just a pretty addition. Things like the sliding menu, the scroll down pages were to give the user a tactile and more fluid experience. Just jumping to places is not natural, and it’s disorientating. I used movement as well on the boxes on the homepage to give the sense that something’s being “pressed”.

Questions

There’s much more that I plan to do with it. I’ll be honest, it’s a bit of a playground. There’s not a lot to the site, but at the same time there’s a lot to it! There are always questions: should the site talk about all the stuff we do, or should it just be a taster… an introduction. How do you make a beautiful site that’s not an advert?

A fun project, but hopefully not just an experiment but a successful result. For an unusual church, it would make sense to do something new with the website. It’s a labour of love of course.