Congratulations! You are finally happy with your website! But just when you thought you could relax, statistics like this appear:
■ There are over 1.2 billion mobile web users worldwide
■ In the U.S., 25 percent of mobile Web users are mobile-only (they rarely use a desktop to access the web)
■ Mobile device sales are increasing across the board, with over 85 percent of new handsets able to access the mobile web
These statistics caused one blogger to remark, “Many users will likely only ever see the mobile version of your site. That’s an astounding revelation isn’t it?” It’s an “astounding revelation” to communicators in the church that care about reaching as many people as possible with the gospel message as well as with updates and schedule details from the church. Depending upon the demographics of your church, the number of people only accessing the important information (that you put on your website) through their mobile device is most likely a large and probably growing part of your congregation.
Our challenge is how to make certain our website is accessible on mobile devices.
Recognize your limitations
Most of us do not code our websites from scratch: you’re probably using a template from one of the many fine companies that make them for churches. Perhaps someone at your church designed your website, and in the church office you are responsible to update it. We’ll talk about what you can do in a minute, but because you can’t control the underlying construction of the site, there are many aspects of mobile design you can’t do anything about. That’s a limitation you need to understand and live with.
The primary thing about your website that you must make sure of (and this is something all the major companies do today) is to make certain the site is what is termed “responsive”: the site knows if it is being viewed on a desktop, tablet or phone and the content resizes to be read most effectively with that device in mind. The site responds to the device being used to view it.
Not that long ago on mobile phones, the website was exactly like it was on the desktop, tiny and hard to read or navigate. Now, sites are optimized for mobile phones and tablets and the material is much easier to read and the sections easier to find. If your site is built on a WordPress foundation or your designer used WordPress, this feature has been built into most sites today.
If your site is not responsive, this is the first thing you must insist on in order for your site to both have credibility and be useful to your audience. None of the suggestions below will matter if you have a tiny, shrunken version of your website on a mobile device.
Do what you can do to make your mobile site more effective
■ Be sure you are using a template that looks good on a mobile phone. This is #1 and the most basic, but it’s especially true when you are picking out a template from a national company. Be sure you check it out on your mobile devices before you commit to it.
Some templates are simply easier to read and navigate on phones and tablets than others. Some template designs look great on the desktop but are totally confusing on a mobile device. Take the time to check them out before you invest the work in personalizing one for your church. If the template you picked out doesn’t look good on mobile devices, you can usually switch templates within a company without losing any data. Start here: optimize your template choice before you do anything else.
■ Check out the template navigation on mobile devices before you finalize template choice. Some templates are intuitive and work well, for others it is very difficult to find various ministries or the location of the main menu can be in an odd place or very hard to find. (This is something we take for granted when we work on our desktop computers.)
■ Check out what your header or nameplate looks like on the mobile phone. Some seriously odd things can happen here if you try to use an old graphic of such a size that doesn’t resize well to mobile devices. If the image is cropped oddly or the name of your church isn’t clear, people will click away without trying to figure out what’s going on. If you like the rest of the template, this isn’t a major concern: you can simply redo your logo or nameplate in Canva.
■ Understand the navigation system on mobile devices. This may be very different than the layout of your website on your desktop computer. If you display information in sidebars (that you expect people to be able to see when they first come to your site) this may not work for your mobile layout. Different templates and programs put sidebar material in different places, or in different orders! The important thing is: you need to figure out what appears on your mobile site and keep that in mind as to where you put material on the desktop version you work on.
Sometimes instead of making things more difficult, the mobile template will do things more clearly than on the desktop version. For example, on my site, I put small thumbnails by the articles and I always caption them. In desktop viewing, they are a minor graphic element, but on the mobile version, the picture is centered directly below the title and the caption is below it. I had nothing to do with that design change, but I really like how it looks on mobile devices and now I can select images and captions with this in mind.
Check out all changes on the mobile version of the site after you make them on the desktop
Again, you will not be directly modifying your mobile site. Whenever you make website changes on your desktop system those changes may look fine on your desktop, but what works well on your desktop may not look good (or work well) on the mobile version, even if it is responsive. This means you must keep checking back and forth to make sure both sites look good, are readable and make sense in navigation. This can be a pain to do, but having your phone by your computer and checking out changes is essential.
If you are building your site and using the Genesis framework, get the Design Palette Pro plugin. You can make changes in the look of your site (layout, type, colors, etc.) and on the side of the page are little icons that immediately let you see what it looks like on your phone or tablet. True, you can always simply resize your website, but a plugin like this will immediately give you an accurate preview.
Design tips for effective mobile viewing
Here are specific design suggestions, but keep in mind that your success will depend upon your specific system, and which features you can and can’t control.
■ Think SIMPLE. This is particularly important for graphics. A gorgeous photo that looks great on your desktop monitor may turn into a muddy mess on the phone. Plus, the print overlay over the same photo may be unreadable.
Graphics — and the words on them — must be super-simple in order to be useful on mobile devices. The message must be readable at small sizes.
If you are designing web graphics with Canva (and I highly recommend it), shrink it down (using the little slider on the bottom right of your canvas) periodically as you work to make sure your image is clear and readable at a small size.
■ Think SMALL. For faster, more efficient sites both on your desktop and mobile versions, you want your images to be as small as possible. This can be a challenge especially for PNG images, which is the recommended graphics format for the higher resolution images on mobile devices. Though the resolution is great, PNGs are many times larger than JPEG images.
The solution is to use a compression program that shrinks them down significantly. Tinypng is a site everyone can use. It compresses both png and jpeg files. WordPress has a fantastic plugin that will do the compression for you automatically.
■ Make links big enough for big fingers. One of the most frustrating things for mobile devices is that the links may be one tiny, underlined word and very difficult to hit exactly. If possible, use an icon or image. Even making a link in BOLD CAPS gives users a bigger target to hit quickly with their thumb.
If you have a choice, stick with simple, sans serif typefaces. Don’t get fancy with your type choices, if you have a choice. Go for clean and clear. Get variation from using point size, bold and italic consistently. Arial, Avenir, Roboto or Helvetica are some recommended choices, with Open Sans and Lato being two newer ones. My website uses Lato and I love its clean, readable look.
Continue improving, tweaking the versions of your site Making certain that both the desktop and mobile versions of your site work well is a continuing challenge, but also a great way to be obedient to the biblical goal of “being all things to all people that we might win some” (1 Cor. 9:22).
