Design Your Church a Mobile Website!
Why?
Some time ago I installed a button from Extreme Tracking on the bottom of my church website, inconspicuously, I hoped. I don't pay for the service, so I only get the free version, which tells me about the last twenty people to visit the website. At the time, I was noticing the diversity of browsers people were using--the usage had changed from almost exclusively Internet Explorer to a diversity of browsers with Explorer representing the largest percentage, but less than half, and Firefox hot on its heels. The big question then was how to design a page such that it looked good at different resolutions and through different browsers. That was just a couple of years ago. Earlier this week when I looked at data on the last twenty users, six were from mobile phones (one of which I could rule out as mine). With one-fourth of the users looking at the website from mobiles, I knew I needed a church webpage that was friendlier to mobile usage. I suspect that mobile phone users are more likely to be "seekers" than members, but I have no data to back that up, except that I could see search terms and know that some were coming from Google, some from my blog page, and some were going to the site directly.
So this week I've been working on a mobile version of the webpage. It's available at http://www.libertyuu.org/mobile, if you want to check it out. (Our regular page, for comparison, is at http://www.libertyuu.org, although I hope to redesign it next week because I'm pretty unhappy with its look currently.) I suggest you check the mobile site out on a phone, as that's what it's made for, and it looks strange on a PC. I don't yet have the script in place that would automatically route mobile users to it, but am working toward that goal. And there's a big question about iPad and other tablet users, whether they should be directed to the mobile site or the full site.
Content
I don't have any digital video or audio capability at my church, so both webpages are heavily text-based, and the mobile site more so, since I didn't want to direct them off too often to outside pages. The goal here was to keep information as brief as possible, and put up the things that seekers would most want to find. Brevity is not my strong suit, as anyone who knows me can attest to, so I'm still working on trimming it down. But I finally settled on nine links: Sunday Services, Directions, Religious Education, Social Justice, Newsletter, Beliefs, Shop, Phone, and More Information. I figured that what seekers want to know is when, where, and what they'd be getting from us, so "Worship" tells the "when," "Directions" (and "Phone") tells the "where," and all the rest are the key pieces for the "what" -- worship, religious education, social justice, and newsletter. The "More Information" lists staff members and the church e-mail and phone (again). "Shop" lets people go through our Amazon Associates account to shop on Amazon.com, guessing that some people might do this from their phones (although maybe, like me, they go through their Amazon apps, so this might have little appeal). There's a lot on our regular webpage that there's no link to here -- staff bios, church history, sermons, forms, by-laws. All that is stuff I'm guessing the average mobile user doesn't need. But I do intend to go back and add a link to the full site. And then, at the bottom, I have links to our Facebook page, Twitter, and all the icons that usually appear to tell people we're welcoming, accessible, etc. The other icons are all linked to a page that explains what they all are.
How to Do This:
The biggest question for me in doing this wasn't the question of what content to put on the page, but how to make what I call "the box" -- how to size my page correctly so that it's the right size for mobile phones. This is particularly complicated since mobile phones have a wide range of screen sizes. My father, William Landrum, is my tech support, but he hadn't done this before either, so we went through some trial and error before we got it to where I think it's right for most phones. It turns out it's not so much about creating a page where we create everything in a small box. When we did that, we got a phone screen where all the date was in a smaller box on the corner of the phone screen. The key is having a piece in there that tells the phone that this is designed for it. In the code, before head, even before where it says html, it says:
One trick we've learned is that just like you can make a link on e-mail addresses that opens up an e-mail program to send mail, you can make a link that will have people's phones go straight to their dialer. This is something that often really irritates me when browsing the web on my phone, that I can't just tap on the phone and have the phone dial. It turns out it's because people haven't coded the phone number to do so, because they're assuming browsing from a PC, where you can look at the number and pick up your phone and dial it while still looking at the number. I can't count the number of times I've had to search for something to write on while holding my phone, so that I could dial and look at the phone number at the same time (no, I can't remember a ten digits easily, and that may be true for more people than you think, especially with a small child in the back of the car making all sorts of noise). So even if you don't design a mobile webpage, go to your existing page and hyperlink your phone number, people. Inside the angle brackets just type something that looks like a href="tel:5175294221", only with your phone number instead of my church's. It's that simple. Can you believe that every company isn't doing this? Ridiculous, when you think about it. But, like many of us, they're not realizing yet that a) a lot of their traffic is coming from phones and b) those people want to call for information or reservations or something, and c) it's this easy! Yes, if you're using an app to find your restaurant or other business, the app will often do this. But sometimes people search through a browser, too--and maybe more often for a church than for a restaurant. Can you tell I feel strongly about this? Nobody is clicking on your phone number from their phone hoping to be able to write it down on paper and use it later. They're happy it goes straight to the dialer, where they can hit "send" or they can save it in their contacts for later. Trust me.
Now, if only I could figure out how to link the address such that it opens up their navigation app, I'd be set. And, sadly, the Twitter and Facebook go to the mobile browser version, not to the often nicer apps. I want to put a link up for Gowalla and Foursquare to our locations, although this will have the same issue. And I'm thinking adding a "like" button for Facebook and a "+1" button for Google wouldn't hurt, either, although then I'm getting into space limitations again. And then if the church gets a Google+ presence, there'll be that to deal with, too.
Ironically, what takes up the most space is the name of my church -- Universalist Unitarian Church of East Liberty. It wraps to take up three lines of space once I put it next to a chalice picture. For a seeker site, I don't like the acronym option, so I think I'm stuck with it, but it's wasted space on a phone. That's something that, for example, Micah's Porch or our local nondenominational Westwinds has right. I remember when the first church I served, the Northwest Community Unitarian Universalist Church, whose acronym is nearly as long as "Westwinds," took a vote, which narrowly failed, to change their name. I can't remember for sure what the other option was (a lot had been discussed, and this is ten years ago now), but I think it was "Harmony Church." I'm guessing when any of you are designing a mobile page you'll be wishing, as I do, for a name more like "Harmony Church" and less like "First Unitarian Universalist Society of Eastern Suburb of Big City." I appreciate the desire to have our heritage and denomination present in our naming of ourselves, and I wouldn't propose going through a name change, having seen how difficult a subject it is, but never has it been more awkward than in designing for a screen about 200 pixels wide.
Well, that's all there is to it. I appreciate comments & suggestions for improvement, and am happy to answer questions if I know the answer. I've often felt like saying, however, in my best Bones McCoy voice (if I had one, which I don't--really), "Damn it, Jim, I'm a minister, not a website designer!"
Some time ago I installed a button from Extreme Tracking on the bottom of my church website, inconspicuously, I hoped. I don't pay for the service, so I only get the free version, which tells me about the last twenty people to visit the website. At the time, I was noticing the diversity of browsers people were using--the usage had changed from almost exclusively Internet Explorer to a diversity of browsers with Explorer representing the largest percentage, but less than half, and Firefox hot on its heels. The big question then was how to design a page such that it looked good at different resolutions and through different browsers. That was just a couple of years ago. Earlier this week when I looked at data on the last twenty users, six were from mobile phones (one of which I could rule out as mine). With one-fourth of the users looking at the website from mobiles, I knew I needed a church webpage that was friendlier to mobile usage. I suspect that mobile phone users are more likely to be "seekers" than members, but I have no data to back that up, except that I could see search terms and know that some were coming from Google, some from my blog page, and some were going to the site directly.
So this week I've been working on a mobile version of the webpage. It's available at http://www.libertyuu.org/mobile, if you want to check it out. (Our regular page, for comparison, is at http://www.libertyuu.org, although I hope to redesign it next week because I'm pretty unhappy with its look currently.) I suggest you check the mobile site out on a phone, as that's what it's made for, and it looks strange on a PC. I don't yet have the script in place that would automatically route mobile users to it, but am working toward that goal. And there's a big question about iPad and other tablet users, whether they should be directed to the mobile site or the full site.
Content
I don't have any digital video or audio capability at my church, so both webpages are heavily text-based, and the mobile site more so, since I didn't want to direct them off too often to outside pages. The goal here was to keep information as brief as possible, and put up the things that seekers would most want to find. Brevity is not my strong suit, as anyone who knows me can attest to, so I'm still working on trimming it down. But I finally settled on nine links: Sunday Services, Directions, Religious Education, Social Justice, Newsletter, Beliefs, Shop, Phone, and More Information. I figured that what seekers want to know is when, where, and what they'd be getting from us, so "Worship" tells the "when," "Directions" (and "Phone") tells the "where," and all the rest are the key pieces for the "what" -- worship, religious education, social justice, and newsletter. The "More Information" lists staff members and the church e-mail and phone (again). "Shop" lets people go through our Amazon Associates account to shop on Amazon.com, guessing that some people might do this from their phones (although maybe, like me, they go through their Amazon apps, so this might have little appeal). There's a lot on our regular webpage that there's no link to here -- staff bios, church history, sermons, forms, by-laws. All that is stuff I'm guessing the average mobile user doesn't need. But I do intend to go back and add a link to the full site. And then, at the bottom, I have links to our Facebook page, Twitter, and all the icons that usually appear to tell people we're welcoming, accessible, etc. The other icons are all linked to a page that explains what they all are.
How to Do This:
The biggest question for me in doing this wasn't the question of what content to put on the page, but how to make what I call "the box" -- how to size my page correctly so that it's the right size for mobile phones. This is particularly complicated since mobile phones have a wide range of screen sizes. My father, William Landrum, is my tech support, but he hadn't done this before either, so we went through some trial and error before we got it to where I think it's right for most phones. It turns out it's not so much about creating a page where we create everything in a small box. When we did that, we got a phone screen where all the date was in a smaller box on the corner of the phone screen. The key is having a piece in there that tells the phone that this is designed for it. In the code, before head, even before where it says html, it says:
{?xml version = '1.0' encoding = 'UTF-8'?}except that { and } are lesser-than and greater-than symbols -- I can't seem to type them in my blog without it becoming the code. I'm too lazy right now to figure out the work-around which I assume is pretty simple although complicated to Google, so I'm going this route. If you look at the code on the page, you'll see everything easily. It's in pretty-straight-forward html without bells and whistles. Anyway, that code does the trick, and the webpage is sized correctly. As long as whatever tables (and the cells in the table) you're using don't have a specified width or height, everything will wrap to fit on the mobile screen. Then it's just a matter of designing it such that you're not putting too much text up there, so that people don't have to scroll too much. You do want fonts and icons bigger than usual to make them easier to tap on. I'm going with font sized 5 (18pt), and it's workable, although perhaps still on the small side for larger fingers. My icons on the bottom are sized about 32 pixels high, and again they're on the small side to easily tap on.
{!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd"}
One trick we've learned is that just like you can make a link on e-mail addresses that opens up an e-mail program to send mail, you can make a link that will have people's phones go straight to their dialer. This is something that often really irritates me when browsing the web on my phone, that I can't just tap on the phone and have the phone dial. It turns out it's because people haven't coded the phone number to do so, because they're assuming browsing from a PC, where you can look at the number and pick up your phone and dial it while still looking at the number. I can't count the number of times I've had to search for something to write on while holding my phone, so that I could dial and look at the phone number at the same time (no, I can't remember a ten digits easily, and that may be true for more people than you think, especially with a small child in the back of the car making all sorts of noise). So even if you don't design a mobile webpage, go to your existing page and hyperlink your phone number, people. Inside the angle brackets just type something that looks like a href="tel:5175294221", only with your phone number instead of my church's. It's that simple. Can you believe that every company isn't doing this? Ridiculous, when you think about it. But, like many of us, they're not realizing yet that a) a lot of their traffic is coming from phones and b) those people want to call for information or reservations or something, and c) it's this easy! Yes, if you're using an app to find your restaurant or other business, the app will often do this. But sometimes people search through a browser, too--and maybe more often for a church than for a restaurant. Can you tell I feel strongly about this? Nobody is clicking on your phone number from their phone hoping to be able to write it down on paper and use it later. They're happy it goes straight to the dialer, where they can hit "send" or they can save it in their contacts for later. Trust me.
Now, if only I could figure out how to link the address such that it opens up their navigation app, I'd be set. And, sadly, the Twitter and Facebook go to the mobile browser version, not to the often nicer apps. I want to put a link up for Gowalla and Foursquare to our locations, although this will have the same issue. And I'm thinking adding a "like" button for Facebook and a "+1" button for Google wouldn't hurt, either, although then I'm getting into space limitations again. And then if the church gets a Google+ presence, there'll be that to deal with, too.
Ironically, what takes up the most space is the name of my church -- Universalist Unitarian Church of East Liberty. It wraps to take up three lines of space once I put it next to a chalice picture. For a seeker site, I don't like the acronym option, so I think I'm stuck with it, but it's wasted space on a phone. That's something that, for example, Micah's Porch or our local nondenominational Westwinds has right. I remember when the first church I served, the Northwest Community Unitarian Universalist Church, whose acronym is nearly as long as "Westwinds," took a vote, which narrowly failed, to change their name. I can't remember for sure what the other option was (a lot had been discussed, and this is ten years ago now), but I think it was "Harmony Church." I'm guessing when any of you are designing a mobile page you'll be wishing, as I do, for a name more like "Harmony Church" and less like "First Unitarian Universalist Society of Eastern Suburb of Big City." I appreciate the desire to have our heritage and denomination present in our naming of ourselves, and I wouldn't propose going through a name change, having seen how difficult a subject it is, but never has it been more awkward than in designing for a screen about 200 pixels wide.
Well, that's all there is to it. I appreciate comments & suggestions for improvement, and am happy to answer questions if I know the answer. I've often felt like saying, however, in my best Bones McCoy voice (if I had one, which I don't--really), "Damn it, Jim, I'm a minister, not a website designer!"
Comments
But it's exactly the right thing to do, and good going.
(And the confirmation word is "amens" so that's a good omen.)
https://philosophicalpenguins.wordpress.com/2011/06/19/wptouch-pro-a-very-slick-wordpress-plugin/
For congregations who are using Wordpress.com (free blogging - web hosting site) or Blogger.com, both blogging sites offer a mobile browsing theme as a free option.
Our congregation (All Souls UU in Shreveport, Louisiana) is using Wordpress for content management:
http://www.allsoulsuushreveport.org/
We were using Movable Type but the version provided by our web hosting provider was getting old and Wordpress offered more options for improving our web site.
Worpress (using Wordpress software on your own hosted web site) and Wordpress.com (free blog hosting similar to Blogger.com) allow you to create a blog RSS feed for announcements and static pages that rarely change. And you can set one of these static pages to be your home page when a person goes to www.yourchurchname.org (for whatever your church's domain name is).
We have the a few static pages (general info, FAQ, office staff, newsletter archive, podcast archive, etc). And one of the pages is the "announcement" page which is blog-like and is the place where one can find info on upcoming events, latest newsletter uploaded to web site, latest podcast uploaded, etc.
The "About Us" page that is the default home page is very effective when viewed on a mobile phone or tablet. The first two things the mobile browser sees in when does worship happen and the church address. The address is liked to the Google map info ... with an Android phone, it will then launch the Android Google Maps phone app which gives the mobile user turn-by-turn GPS directions.
The RSS feed for the announcement page automatically feeds into the church's Facebook page and Twitter feed. All I have to do is post something once to the web site and it goes out to these two other social networking sites.
For Facebook, we use RSS Graffiti to receive our RSS feed on the church page (it also receives my personal blogger.com and wordpress.com feeds).
For Twitter, we use the free version of the "WordTwit" plugin to send our updates to the church Twitter account. Plugins are available for Wordpress when you use it on your hosted web site. Plugins are not available on Wordpress.com blogs and sites.
To prepare for moving the church from Movable Type to Wordpress, I first created a free personal Wordpress.com blog to play with. I also bought a book from my local bookstore called WordPress in Depth. In addition to the dead tree version, it's also available for Nook and Kindle.
I hope this helps.
Take care.