Mosaic is a faith community in Lincoln, NE committed to live by faith, to be known by love, and to be a voice of hope. In late 2014, an opportunity arose to start a new campus in north Lincoln at an indoor skate park called The Bay. The goal of MOSAIC @ The Bay is to meet the physical and spiritual needs of the community surrounding The Bay and the greater Lincoln community.
Connecting Pointe Church of the Nazarene (CP) was established in Lincoln over 100 years ago. They provide ministries for all ages and have a heart to help people get plugged into the church and grow in their faith. Like a lot of churches and community organizations, they have grow and change as the years go by, but sometimes their websites get left behind. A couple months ago Adam, the senior pastor at CP, approached me about revamping their website. Adam said he really liked the design and functionality of the Destinations Coffeehouse website I had just finished, so we started there. A lot of people today go “church shopping” online before ever stepping foot inside the building and a website is the first interaction they make with the church. Adam wanted to make sure that CP made a good first impression to outsiders. By the end of our first meeting we had a vision:
- 1. Clean, welcoming, and informative.
- 2. A page for each ministry that can be easily updated.
- 3. Upload sermons and listen on a mobile device.
- 4. A place on the front page for a welcome video, church information, and links to Facebook and Twitter.
- 5. Ability for people to give donations online.
1. Clean, welcoming, and informative
The color scheme of the site was centered around a new CP logo created by Josh Topolski. To keep the site clean and consistent I used the two shades of blue from the logo as my primary colors while mixing in different shades of gray throughout the site. The homepage prominently displays service times and the church address on top of the page in the blue bar as well as in the footer and on the contact page. The about section informs visitors of what to expect on a Sunday morning and gives some faces to the church through the staff profiles.
2. A page for each ministry that can be easily updated
My overall goal was for the transition from the old to the new to be as easy and smooth for the church staff as possible. Fortunately the old CP site was built on WordPress so there wasn’t a need to learn how to use a new content management system. WordPress makes it easy for anyone to update content through a visual editor that uses common word processing functions. Each sub-page follows the same template layout. A large image with the main menu category title spans across the top of the page just under the navigation menu. There is a space on the left for content and a sidebar on the right that shows links to other pages within that category. The links give the user the ability to see what other items are in the category without needing to go back up to the drop down menu.
3. Upload sermons and listen on a mobile device.
One of the biggest challenges of this project was editing and styling the output from the Sermon Browser (SB) plugin for WordPress. I chose SB over some other solutions because the church had uploaded over 80 sermons using this plugin. Changing to a different plugin would lose all of the attached sermon descriptions and would add unnecessary work to the project. I wanted the SB output have the same look and feel as the rest of the website. Using Google Chrome’s inspection tool I was able to write new style rules for many of the elements. SB also has a great support forum where I was able to find which files I needed to change and modify.
The last thing to style was the default WordPress mp3 audio player. The previous site used a flash based audio player which was incompatible with mobile devices. WordPress versions 3.6 and newer come with a built in HTML 5 audio player that can be use on any device that by default is a dark gray almost black color. With several instances of the player on the “Sermons” page I didn’t want it to stick out quite as much. Thanks to <a “href=”http://brianshim.com/webtricks/style-the-wordpress-3-6-media-player/” target=”_blank”>Brian Shim’s blog postI discovered how to make the player a bit more subtle.
After getting Sermon Browser styled, uploading sermons stayed the same as the old site. In addition all of the previous sermon files were able to be transferred over to the new website without a hitch.
4. A place on the front page for a welcome video, church information, and links to Facebook and Twitter.
The homepage needed to be fresh with updated content that shows things are happening at the church. My solution to this problem was found in widgets that automatically updated when a new sermon was published and new content was added to the ministry calendar. Getting the front page sermon widget to display was quite the chore, but after going back and forth looking at the Sermon Browser forum, PHP code, and HTML/CSS I was able to accomplish the task. Each time a new sermon is uploaded to Sermon Browser it is automatically displayed on the home page.
The Google Calendar Events plugin I utilized was a great, simple plugin created by Ross Hanney. I was able to put in the CPNaz Google calendar address and the plugin put out lovely unstyled text. A bit of work learning about the shortcodes and themes from the plugin website and I was good to go. This was a perfect solution as I could style everything easily with CSS. I could put what I wanted, where I wanted without fighting the plugin each step of the way.
I also integrated a blog into the website. I thought this would be a good place to promote upcoming events or summarize past ones. The staff was new to the idea of blogging so it is yet to be seen if this will be a staple of the site or something that gets taken out later on. Currently the title of the newest blog post shows up on the homepage for easy access to visitors. As an alternative I built in a plugin that will display the most recent Facebook page post in this space instead.
5. Ability for people to give donations online
Giving was set up through independently Vanco Services. Links on the giving page and footer transfer people to the Vanco website where they can set up a donation. Simple and easy.