Dan Star, Client Consultant – Web/Mobile, Shelby Systems
It’s the start of a new year and the front door of your church is a URL, not a brick and mortar building filled with people. Members and new visitors alike are seeing your church through a digital screen. What are they seeing or rather, what are they not seeing when on your site? Unlike a friendly smile and a handshake when someone enters your front door, people are now presented with the content on your home page. Does your website reflect the same environment of your church or does it paint a different reality?
Far too often website changes need to be completed in a hurry and we overlook some important details that make a website great. The past twenty months have caused a plethora of quick changes churches have responded to the needs of the pandemic. Take some time to review the following four principles and level up your site by applying them to your church’s front door.
- Responsive Site Layout
Yes, you’ve probably heard the term and most likely have a responsive template, but is your content allowing it to still be responsive? A responsive website allows one site to be viewed on a desktop and mobile device and it responds to a narrow screen by rearranging content and only scroll up and down (no side to side scrolling required). A quick test is to view your site on your desktop and make your browser window very narrow. Does content shift around (side by side elements now stack on top of each other) or does a bottom scroll bar appear? If a bottom scroll bar appears that would indicate your site is not responsive or that you have content that is causing it to not be responsive.
What type of elements cause a responsive site template to not be responsive?
- Tables are the biggest problem. They look good on a desktop, but when viewed on smartphone it turns into a nightmare for the user. Especially when table columns are assigned to be specific pixels wide.
- Images inserted with fixed pixel width and height instead of 100% width and auto height. ShelbyNext Websites only offers responsive site templates. But adding tables to page content can make sections or a whole page unresponsive and frustrating for the user. A good habit when making significant changes to a page is to view it on both a desktop and smartphone to make sure your content is presenting as intended.
- Graphics and Embedded Text
Our society likes to be entertained so we create graphics to draw attention to elements on our website. But the moment we use Photoshop to add text to a graphic becomes a grey area for website graphics. We type the text into Photoshop so we know what it says, but then apply a fancy font to draw attention, resize the text to fit, add a few layers of sparkle all before placing that image on a webpage that is a quarter of the size. And then you were in a rush and forgot to add an ALT tag when placing the graphic. It looks pretty, but is it legible? Possibly. Can a search engine read the text of the graphic? No, especially with no ALT text. Does the embed text move with a responsive site? No.
What can be done to avoid these graphic and text missteps?
- Use graphics as background images with text laid on top using HTML. This type of technique will allow a responsive site to display all text to the user and not get cutoff when the site only shows part of an image on a mobile device.
- When inserting images, use the Image Description field on a ShelbyNext Website (also known as ALT text) to describe the image. This will help your site be more search engine friendly, but more importantly it allows the blind to “see” your graphics as digital readers will tell them what’s in that space.
- Descriptions and Keywords
Every page in the admin portion of your website has the ability to add page descriptions and keywords, but are you ignoring them? I mean, you know what’s on the page, so why take precious time to fill out those areas that don’t show on the website anyway. Well, these fields are like the behind-the-scenes staff at your church who don’t like the limelight, but do the heavy lifting to make things run smoothly. Essentially leaving these fields empty is minimizing your site’s potential, since both your site search and web search engines use that content to return results.
- Description: It should be one or two sentences that describe the page content in a nutshell. In a Google search, this field is shown below the page Title and URL.
- Keywords: These should be two to seven key words or phrases separated by commas. The keywords are what someone may search when trying to find content.
- Site Menu/Navigation
Since your website is the front door of your church you need your visitors to find things quickly and easily. Just like building signage, it’s impossible to list every room throughout the building, instead signage typically focuses on the main elements: sanctuary, fellowship hall, office, restrooms and children’s area. This same logic applies to your site menu/navigation–focus on the major groupings that lead to the smaller groupings. Using this approach will allow your users to find things quickly.
- Homepage: Worship times, live stream, featured events, latest blog post, etc
- I’m New: What to Expect, Directions, Next Steps
- Ministries: Worship, Sunday School, Youth, Adults, Music etc.
- Resources: Sermons, Blogs, Events
- Give
- About Us: Beliefs, History, Contact Us, Leadership/Staff
Is it time for your church to Level Up Your Site? Shelby offers both Clover Sites and ShelbyNext Websites solutions. If your church is looking for a new website that integrates with your ShelbyNext platform, needs an additional Premium layout, or wants to start fresh with a redesign, contact webmobile@shelbyinc.com for guidance.
Dan came to Shelby Systems Fall of 2021 after working for a church for 13 years as a Communications and Media Coordinator. He is a Pastor’s Kid and fully understands the joys and frustrations of the life in the church. After graduating with a graphic design degree he worked with retail store websites providing technical and graphic solutions to reach their goals.