Webinar – Optimizing Your Website for Mobile Devices – 2013-07-25


Becky: Welcome everyone, to
Optimizing Your Website for Mobile Devices. My name is Becky Wiegand,
and I’m at TechSoup.org. I’ll be taking you through
today’s webinar, but before we begin let’s do a little bit of housekeeping. Just to make sure you’re comfortable
using ReadyTalk, you can chat and raise your hand to ask any questions. You can chat into this
little box down on the lower left side of your screen. We will keep all lines muted for the
duration of the webinar to ensure that our sound quality of our presenter is loud and clear and that
we can capture a recording for you to listen to at your convenience after. If you lose your
Internet connection, please rejoin and reconnect using the link that was sent to you
in the confirmation or reminder email. If you lose your phone connection,
you can redial to rejoin the conference or you can also hear the
audio through your computer speakers. If you need to contact
ReadyTalk support, here is their 800 number. We do record these webinars so that they are
available to you after, so that you can share them with friends and colleagues, and
watch them at your own convenience. You can find this and other recent
presentations at TechSoup. org/community/events-webinars. You will receive a link to this
presentation, the full recording, and any links discussed later this afternoon. If you’re Tweeting
this event, feel free to use the hashtag #techsoup. Welcome to Optimizing
Your Website for Mobile Devices. Today our presenter will be
Tierney Smith from TechSoup Canada. She presented on this topic about a
year ago, and we thought it was so terrific that we wanted to make sure that we
could present it for our audience as well. Tierney has been a software engineer, a
nonprofit technology blogger, and a community manager. She works for our affiliate in TechSoup
in Canada and manages a lot of their campaigns and blogs and does webinars there as well.
So we are glad to have Tierney joining us today. Also, behind the scenes,
my name again is Becky Wiegand. I am an Interactive Events Producer here
at TechSoup. I have been here about five years. And, prior to that, I was an accidental
techie at of a handful of small nonprofit organizations in Washington, D.C., San
Francisco, and Oakland, California. So I have been in the position of
trying to figure out how to optimize my website as a small organization staff person,
so hopefully between Tierney’s expertise and my lack of expertise, we can
shed some great light on what kind things can help you improve your
web presence for mobile devices. You’ll also see Ale Bezdikian who will be
assisting with chat questions in the back end. She will be capturing your questions
throughout the webinar to make sure we have time to answer them during the Q&A. Our agenda for today, we’ll be talking about
is it mobile friendly and looking at some examples of websites to see whether they are
mobile friendly or whether they really aren’t, to help give you an idea of what the
differences are. We’ll talk a little about why mobile is important. We’ll talk about some
approaches to mobile websites, and as well, provide some examples. And then, we
probably won’t have time for some of it, but we do have some additional slides
that Tierney gave us about designing for mobile, with some key tips. Those will be
included in the slide deck. We may not cover them during this hour since it goes by pretty
quickly. But you are welcome to review all of that information after the
webinar in the deck on your own. Before we hand off to Tierney – just a little
bit about TechSoup. We are part of TechSoup Global and we’re working towards the day when every
nonprofit, library, and social benefit organization on the planet has the
technology knowledge, and resources they need to operate at their full potential. Part
of doing that is providing product donations through companies like ReadyTalk, who
is hosting this webinar for us, Microsoft, lots of other companies. The other part
of that is providing educational opportunities like this webinar for free,
articles, blog posts, community forums, where you can share your expertise. And,
as well as doing that in the United States, we do that in 56 other countries around the
world. So, here’s a little bit about the impact. We are a 501(c)(3) nonprofit, as is
TechSoup Canada. They are a nonprofit as well. Tierney will talk a little bit about her
organization in Canada in just a moment, but this is a little bit about what TechSoup has done and
how we try to help achieve that mission. And if you haven’t been to our new
website, feel free to join us there at techsoup.org. A little bit aboutTechSoup Canada,
they also provide a lot of the same resources or very similar resources with software
donations and technology. They have a blog and lots of articles and resources like webinars as
well that they provide to Canadian organizations. So now, jumping into the topic at hand today,
I’d like to take a moment and have you complete a quick survey. Is your website already
mobile- friendly? Yes, No, or Not Sure. Let us know here. Go ahead and click on your screen to let
us know. This will help us hopefully respond and tailor our presentation
a little bit more to your needs. So we have about 60% saying No, and about
30% Not Sure, so that’s a good sizeable chunk of our group who either aren’t sure what
makes the site mobile-friendly and/or is pretty sure that their site is not. So,
hopefully today’s presentation will provide you with some great resources on how to make
it mobile-friendly, both in some simple ways and in some major overhaul type ways. So with that, I’d like to turn it
over to Tierney Smith from TechSoup Canada. Is It Time for Your Website to Go
Mobile? Tierney, go ahead and take us through. Feel free to introduce yourself with any more
information, if you’d like, for TechSoup Canada and tell us, is it time for mobile? Tierney: Thanks, Becky. Hi,
everybody. It’s great to be here today. As Becky said, I think she pretty
much summed everything up really well. I’m the Community
Engagement Manager here at TechSoup Canada. So if any of you are joining us from Canada
today and you aren’t familiar with TechSoup Canada services, please do come over and
join us and get to know us a little bit. You know, Tweet to us and say, “Hi,”
whatever. If you’re in the U.S., I love you too. That’s great and so also
would love to get to know you better. Getting started today with mobile websites,
so where this topic came up for me originally is that I think all of us have experience in
our day- to-day lives. Many of us now own Smartphones. Many of us may even own tablets or are
seeing family members and friends that have those and maybe kind of wondering if this
is such a big trend in our personal lives, how can this trend impact us in our
work. And so one of the ways that it does is in terms of how our website is
designed. So we’re going to go and look a little bit about that today. So, just to start us off
and frame the discussion, I just want to clarify what we mean by “mobile”
so everyone’s on the same page. When I use the word mobile in today’s
webinar, I am going to be referring to both Smartphones and tablets, but with a focus on
Smartphones. So what Smartphones encompasses, there’s many different types of
Smartphones. You may be familiar with iPhones and Google built a system called Android phone but
there’s lots of different devices like the Nexus or like you know Samsung makes some.
There’s different phone vendors that make phones that have Android on
them. Blackberry has Smartphones, and then there’s also the Windows 8 phone
and previous versions of Windows phone as well. Those are the most common ones
you’ll hear about in the Smartphone world. And as well, there’s also Android
and iPhone tablets and Blackberry tablets, the PlayBook and so anyway,
those are the slightly larger devices. The one thing that we won’t be talking
about so much today is sort of what’s known as a “feature phone. ” That’s kind of
your phone that does texting, does phone calling, but you wouldn’t use it to browse the
Internet. You can sometimes but it’s such a tiny screen and so unwieldy, usually you just
have the keyboard with the numbers on it, not actually a full keyboard. We’re
not going to be talking about those phones so much in today’s
presentation. We’re focusing on Smartphones that really have a
good mobile browser on them. Another little piece of context I want to give
before jumping into talking about mobile websites is to frame this larger discussion
as Mobile Strategy. So mobile websites is only one possible way that you can
connect with your supporters through mobile. As a nonprofit, I just want to put it out there
that there’s a lot of different ways you can embrace the mobile trend in terms of how
you can communicate with our supporters. Some of them that I’ve listed
here include, yes, having a mobile website, which we’re going to talk about.
You can also use texting to do a campaign. Or you could use text-to-donate to
raise money. We have a good blog on our website about how to do
that, if you’re interested. You may want to build a mobile app,
depending on what you’re trying to do and if you have a specific area where
that would be good. Or you may want to choose to actually mobile-optimize your
email. Since so many people read their email on their Smartphones and tablets, you might want
to make it a little bit more friendly for that format, so that people who read your emails on
a small screen aren’t being overwhelmed by this teeny-tiny text
and so much stuff going on. Those are a few of the different ways to
be embracing mobile in terms of your outreach, but as I said, today we’re going to
be focusing on specifically your website and how to make it
friendly to view on a mobile device. So, I noticed that about a good chunk of you
in the poll said that you weren’t even quite sure what it means for your website to be
mobile- friendly, and that’s totally okay. What we’re going to do first is get
everybody on the same page by looking at some examples and discussing whether
it’s mobile-friendly or not. I will apologize in advance, the
pictures that I have are for the desktop size. The desktop views of some of
these websites are a little small because ReadyTalk doesn’t make it easy for
me to switch back and forth to the website live. However, I hope you’ll still be able to get a
feel for it and I also encourage you to participate. I’ve provided the links to the websites
we’re going to look at in my slides, so you’re welcome to go to view this in your own browser or pull
out your Smartphone and tablet, if you have it on you, and navigate to these sites on your
device as well, so you can see this as we go along. The first site that we’re going to
look at is the site of an organization in Canada that is an umbrella organization
for a bunch of Christian charities. It’s called the Canadian
Council of Christian Charities, and their website is
four c’s-dot-org, cccc.org. If we look at their website on a
typical, what we’ll call like a desktop view, so that’s like you’re on your
kind of desktop computer with a monitor or you’re on your standard size
laptop and you’re going to this website. What you’re going to see is this view on the
left. So it’s basically a very nicely designed website. And then if we go to that
exact same website on our Smartphone, which is what I’ve taken a screen shot of
here, you can see that it looks basically identical. So this is a surefire method to tell you
that there is no mobile site going on here. What you’re seeing is simply the
same site, except that the mobile browser is taking the whole thing and shrinking it
down to a teeny-tiny size. Some of the characteristics you’ll notice are that for example, some
of the text is quite unreadable. Some of the links are very difficult to click on because they’re
so small. As well, some functionality might not work quite as well, so for example, drop-down menus
won’t necessarily work if they are relying on you hovering your mouse over them. However, the other point I want to make is
that this website is still useable on a mobile device, right. You can pinch and zoom to make it bigger.
You can still click around. So if you’re in the boat where you decide at the end of today’s webinar
that this isn’t something you want to keep in mind, but it’s not something you want to pursue at
this time, then I just want to say that is an okay decision, because as a nonprofit you
have many different priorities in your life, and the fact that people still can access
your website on mobile, they will still be able to get that information. It will be in maybe not
optimal format, but it will still be available to them, as long as your website doesn’t have
certain elements like its Flash-based or something like that. Just putting that out there. Now, let’s look at some
websites that are mobile- friendly because that’s what
we’re going to focus on today. So the next one let’s look at is
actually created by the same organization, and it’s called giveconfidently.ca. So if you look at
the little picture on the left, what you’ll see is again what it looks like on a desktop. So you’ve got a
big – you’ve got for example, all of the four links across the top are all in one row. You
have a nice big picture with some text next to it, and then you have these three
blocks underneath of different colors. Now what happens when you go to this
on your Smartphone is that you see something a little bit different. So if we look at the
picture on the right, you see that the links are rearranged. You actually have two per line. You have
some of the same text but it’s kind of rearranged and you don’t see that picture right
there. You actually, if you scroll down on this which I couldn’t capture it all, you
would see that the picture is further down. So basically what’s happened is the website
looks exactly the same, but some of the elements have been rearranged. And that is
our clue that this is a responsive site. Basically it’s been built using a technique
called responsive design. And that’s basically the idea behind responsive design which we’ll get
into a little more, is that it’s simply taking your existing website and adjusting the
layout, rearranging some items depending on the size of the device that
people are viewing it on. Now, let’s look at one last example. So
this is from another organization called nature.org, actually a US-based
organization, The Nature Conservancy. And if we look at their desktop version on
the right, they’ve got a lot of stuff going on. They’ve got a gorgeous big banner,
some nice buttons on the left, some menu bars across the top, etc., very nice site. And
if we look at their site on a mobile device, it looks completely different. They
certainly have some of the same elements. So they have their logo that looks
kind of the same, and they’re using some of the same color scheme but we’ll
find that a lot of the elements are there. So the banner that was on their desktop site
isn’t there. The same buttons aren’t there. The same menus aren’t there. In fact,
instead they’ve highlighted certain things. So this “Spotlight on Nature
Photography” which is kind of buried on the desktop page, they’ve really highlighted on their
mobile when you go to it on your mobile device. So what’s going on here is it’s what we’re
going to call in this webinar, it’s a mobile website. They’ve actually built a separate
website specifically to look good on mobile. When you go to visit their site at
nature.org, it decides am I on a desktop right now? If so, it shows you the desktop version of the
site, and if not, then it says are you on a Smartphone right now? Let me show you
the Smartphone version of the site. So, that’s what’s going on here. So those are basically the three main ways to
get a mobile or the three different scenarios I guess, you can be in with mobile websites. I will
also say this comes back to what about your site. If you’re not sure and you don’t own
a Smartphone yourself, you want to find out what it looks like for other people. A
handy little way to do that is this GoMo link. So that just allows you to put in the URL of
your website and then you can see what it looks like. This is actually our old website,
TechSoup Canada. Our new one is not nearly that bad, although it still is not mobile-friendly.
And as you can see it definitely looks awful in a mobile device. As said to be fair,
this is something that we’re all working on. Now, I am going to give a little
background briefly on why mobile is so important. I think most of you know this so
I’m not going to dwell too much on this, but just sort of a few stats to have in
your head, because you may be in the position where you need to, you know, you decide this
is a good idea and it’s something you want to do strategically for your organization,
but you may need to persuade other people that this is a worthwhile endeavor. So
here’s a few stats to help back you up. This is a chart I found about a year ago,
so there may be a more up-to-date one available. Basically it shows the trend of Smartphones
and feature phones. That’s the ones I talked about before that just have the number
keypad. And basically showing you in the US, how is each one used.
How many are there out there? I think the trend is pretty clear. Basically
there are less feature phones and more smartphones, and we’re getting at the point where
we’re switching through. And again, you may see this in your personal life as well, that more
and more people once their phone plan comes up due or you know, whatever it is, it’s Christmas
time, they want a nice present that they’re choosing to get the smartphone.
That’s where you’re seeing that trend. The next question you might be
wondering is okay, a lot of people have smartphones but are they actually using them to browse the
Internet, because that’s what we’re talking about, mobile websites here, right? This is actually an example
from a study that’s done regularly with some large e-commerce sites. And so a
little bit different from our target audience but you know, it still gives us a good
idea. It shows for them in 2012 vs. in 2013, in their first quarter, how many of the
visitors to their site were coming from a mobile device. It’s a bit hard to read, but basically the
dark grey is from traditional like from a desktop, the blue is from a tablet, and the light grey
is from a smartphone. So, you can see that basically the mobile traffic
doubled between 2012 and 2013. So this is the thing. It’s still at the point
where it’s relatively small. You know, even just in 2012 there was only 5% of each device type.
However, it’s growing really, really fast. So if I could, say, kind of give
you one takeaway when it comes to trends, it’s that even though right now you
might not have a ton of visitors on your website, this is a really strategic
feature item you need to be thinking about because it’s just going to keep
growing, by every production that I’ve seen. So, this is really, you need to be
forward-thinking, and the more you can get on this now if you’re planning a redesign soon
or you can kind of jump on the bandwagon and even make some small changes right now,
they are really going to help you stay on top of this trend instead of in a few years when it’s
like half your mobile traffic or whatever it may be that’s coming, or half your
traffic that’s coming from a mobile device, then you won’t be so
taken by surprise and overwhelmed. Also I’ve provided a link at the bottom of
the slide that has a bazillion more amazing statistics on mobile use and mobile website use. So if
this is something you want to learn about more, I highly recommend
checking out that particular link. One more graphic to sort of illustrate
this trend, this is a breakdown of how much time people spend doing
different things on their smartphones. On average, this study found that Americans
spend about 58 minutes per day, almost an hour on their mobile devices, and about
14% of that time is spent visiting websites. So definitely an important
chunk of time that’s spent on the web. These are, of course, general stats
but before undertaking anything like this, you also want to ask “What about me?
What’s going on on my website right now?” So, if you don’t have Google Analytics
already or a similar program, I highly recommend that whatever else you take out of
this webinar, please go in and install it. The sooner you can be collecting
data with a good reputable Analytics program on your website, the happier your life is
going to be down the future when you get a data nerd into your organization who
will want to make some use of it. This is an example from our website that I took.
So last year when I originally did this presentation, I took a snapshot of what our mobile data
looked like and it was at 3.85% of our traffic was from mobile, like the number of
visits. That was taken in about September 2012, to give you an idea. I just took that today
again, sort of reflecting over the last few months of our traffic and I’ve noticed that about
3.1% of our traffic now is what’s considered, it’s being called “mobile” by Google
Analytics, but I think it means smartphones versus about 2.4% from a tablet. So over all
that pie has grown although the chunk that’s actually from a smartphone is still
about the same. That’s just to give you an example of what it’s like for us, but
definitely look at what your own traffic looks like. Now for us, this tells me okay, so mobile
traffic is relatively small for us, so I think it’s one of the reasons we’ve sort of felt that having
a responsive website, while it’s something we want to work towards isn’t a number one priority for
us at the moment. But you also have to dig a little bit deeper into this and ask okay, are
people are just visiting your home page, or maybe they come to your home page
on their mobile site and then they leave. Maybe that tells you they want
to learn more about you on mobile, but you’re not really giving them the
opportunity because your site is not really easy for them to read or to use. Worse off you know, God
forbid if they’re actually trying to donate to you or something like that, and that discourages
them because they didn’t find your site easy to use on a mobile device. Certainly, I would really encourage you to,
if you have Google Analytics or something similar, really dig into that data. Look at
what those people on mobile devices are doing, not just how many of
them there are, and find out. That may give you some good insight into
where you should get started for your organization. Now, one more thing I want to leave
you with before we jump into actually looking at how to make your site mobile-optimized, is to
really just reflect on why is it that mobile visitors are on your site anyway. How did they
get there and then what are their goals? So in terms of thinking about how they get
there in the first place, I think the best approach is again, reflect on yourself and your
personal experience and that of your family and friends. You know, how is it that you actually
come to be browsing the web on your mobile device and then maybe it would end up at a charity
site? So, here’s a bit of a brainstorm I did from thinking about my own experience and
talking to other people. And a lot of the things that I thought of, such as you see an ad or like
a poster and you think, “Oh, I want to find out more about that,” so maybe you pull up your
phone and Google it. Or you’re going around and you see a QR code and you click on that,
or maybe you’re going to visit an organization for whatever reason. You’re thinking, “Oh,
I need to go pick up – I was going to go get a pet from the pet shelter but I’m on my way
and I can’t remember really where exactly it is. Let me just look it up and map it, so I
know where to go.” A lot of these things happen when you’re on the go. That’s
when you turn most to your smartphone. The other way I thought of, the main thing is
via email and social media when it’s really common for people to do those things on the
phone. Maybe you’re just waiting, you know, you’re on the subway or on the bus,
or you’re waiting in line for something and you have a bit of extra time, so
you’re taking that time to check your email and your social media, and you’re doing it on
your phone. Maybe you’re getting email from nonprofits that you’ve donated to or signed up for
their newsletter, or maybe you’re browsing through your social media, and you see
updates from nonprofits and you’re clicking through to their website. So these are
some other examples of cases where people could be coming to you. So again, I
think it’s good whenever you’re approaching any kind of technology project, keep
in mind the kind of context and the mindset that your users are coming with. And what might their goals be? That’s
how they get to their site, but what is it that they’re really trying to do? This is
something that of course again, you think about as part of any website design but even more with a
mobile design, because it’s so stripped down, because there’s such small amount of
real estate, you really have to be focused on what the goals of the users are, and
helping them to most quickly achieve those goals. This was a really nice
example of a mobile website that I saw from the Best Friends Animal Society. And I
really liked it because it has these really clear buttons. It’s not like pages and pages of
information, although they do have a short paragraph explaining who they are and what
they do. But it’s just really clear. There’s a campaign that you can sign up
for. You can find out about volunteer opportunities. You can find a pet. You can sign up for their
email. So it’s very clear what you want to do. It’s very focused. This is a site that’s
really, maybe it’s not like the snazziest graphically but it’s attractive, it’s clean, and
it’s really well built with the user in mind. So, if I was in their area and was
interested in supporting animal-related causes, this would make it much easier for me
to get involved with their cause as opposed to another site. And it would make
it easy for me to do so if I was on the go or for some other reason coming from my
mobile. I would be able to take advantage of that opportunity instead of thinking “Oh well, I’ll
check this out later when I’m back on my computer,” and then possibly forgetting
about it, and that opportunity is missed. Becky: Tierney, just ask a quick question
based on some of the information you just gave. If an organization doesn’t have Google Analytics
for example, to look at their site traffic in detail, are there any assumptions they can make
about mobile that might – obviously you showed a bunch of charts about mobile increase
or mobile usage increasing for smartphones. If they’re making a case and they
don’t currently track that type of data, any ideas of what they can do? Are there any reports
that you came across that would give them an idea of what sort of traffic might be coming
to them with mobile and smartphone devices? Tierney: Yeah, I would. I think
there’s a lot of good data on mobile on the web. I would have to, honestly I’d have
to check it again after this presentation to see if there’s a really good one for
nonprofit mobile traffic. I’m not aware of one that’s been done off the top of my head,
but I could do a little more digging on that. However, I would also, I mean, I think
looking at sort of some of the small business stats often is comparable, and then the other
option is always talking to similar nonprofits in your area who may have Google Analytics
set up. And of course, there’s always the option to set Google Analytics up right away. I
mean you won’t have the same depth of traffic, but even if you can get you know,
maybe two weeks or a month’s worth of traffic while you’re kind of building your case that
will give you a little bit of a bench line to work with. Those are maybe a few
ideas for moving ahead with that. Becky: Okay, thanks, and I know
even if folks don’t have Google Analytics they may have some type of data and Analytics
that’s being collected by whatever their tool is or whatever their host for their site.
So there are ways to get that information. Tierney: Yeah, you can always talk to, if
you have a developer or something working on it, there may be something on there that
you’re just not aware of. It’s possible. However, I do of course at the end
of the day, recommend getting something like Google Analytics because going
forward you’ll want that for other reasons. Becky: Great, thank you. Tierney: Any other questions so far,
‘cause this is a good sort of time to pause before we just jump into the
next really chunk of the program. Becky. Sure, well we had a
question just come in from Sheila asking, “What’s the website address for
Analytics?” I think if you just type in Google Analytics you’ll be taken to it. It’s pretty
straightforward, and it’s pretty huge and you can apply it to your website and it will give you
probably way more data than most of us really need in our daily lives, but
you can see a lot of information about where your traffic is coming from. Tierney: Absolutely, yeah. Becky: Otherwise, I think we had a couple
about the pie charts, asking how recent the data was. And I know that if anybody else was
interested, I know that you just updated and created a couple of these slides
to refresh this presentation for this year, and I know you have a date on one of
them as 5/28 but if you have any other details about how recent some of the data
was, there was some interest in that as well. Tierney: Yes, I think most of it that I tried
to find was within – I’m just looking at – I had my slide for that one. Yeah, the
one with the Americans spend 58 minutes per day, that was from May of 2013, so that was
fairly recent. The other one was from quarter one, so that would be January to March of
2013. So there is a lot of current data available but that was the particular
data from the last few months. I highly recommend, there’s a lot of good data
on this online, and I really only skimmed the surface with what I shared in this
presentation, so please don’t feel limited to that. I just noticed another question
came in which I will jump on and answer ‘cause this is also a good time, and I
didn’t really go into detail on this too much earlier which is “What is the difference
between a mobile site and an app for your site?” So, an app is usually something that
you, it’s a program that you build separately, and it’s something that you
build specifically for each type of device. So you would build kind of like a little
program for iPhone, and you would build a little program for an Android, and that program would have
a specific purpose. It may do things like access the Internet and show you web pages in the app,
but it’s sort of this separate program on its own, and it’s something that the
user or your constituents or whatever would go to their app store on their smartphone
or whatever it’s called on their particular device and they would download it possibly for
free, or paying for it, depending on your model, and it would install itself.
So that’s a little bit different. So then and when they wanted to run it, they
would click on that icon and they would open it up and it would run this little
program. That’s a mobile app. A mobile website is simply a normal
website that has some special code in it to style it in a way that it looks good on a
mobile device. Some of the text is bigger. Some of the buttons are bigger.
It’s a bit of a different layout etc. I was just going to say a mobile website,
you just build it once and it doesn’t matter what device people are on. They
just go in their browser in the same way it doesn’t matter if you’re on a Mac or a
PC, to visit a website. That’s the simple definition. There is a little bit of blurring of the lines
between those two which I won’t really get into because it’s kind of technical.
But it’s kind of a simple mindset. Think of an app as something you
download and it’s a separate program you have to write for every device, and a
website is something you go to in a browser. Becky: We did a webinar on
this topic on developing mobile apps just a couple of weeks ago, and this
topic came up around what the difference is between a site and an app. And one of our
presenters who develops mobile apps for a living said, “You don’t ever want to
spend a ton of money trying to develop an app that is your website. There’s no reason for
it and nobody has a real drive to want to download an app that doesn’t actually do anything but
just show them something that they can already see on their browser.” So, an app should have some action that
people can take or some activity that they can do, some type of game or interactive
feature. It should be to do something as well, which you did mention. The other
presenter on that one made it really clear that don’t spend your money on
trying to make an app of your website because people can
just go to your website. Tierney: Absolutely, I could not agree more.
And this will be as I said, with the whole issue of different devices really taking an app
is sort of a bigger step. For most organizations, I’d recommend that probably investment
in a mobile-friendly website is more worthwhile than the investment in a mobile app. That
doesn’t mean there aren’t really good cases where a mobile app can be effective, and
I’m sure that there’s some good examples on this other webinar that I recommend
you check out. That’s why this presentation is focused on mobile websites because I
think, on the whole for the average nonprofit, it’s definitely a much
more worthwhile use of your time. Okay, so I noticed there’s a few other
questions, but I’m going to save them until the end and just kind of go into this
next little section of the webinar. So now what I want to talk about is okay,
we’ve kind of gone over what does it mean for a website to be mobile-friendly, and why should we
bother doing this, and what goals might we have, what goals might our users have.
But there’s also that technical aspect, and I think in the mind of every
nonprofit and anyone considering this, of how does this actually work,
how is this actually going to happen, and how much work is it going
to be, and how much will it cost me. So basically what I’ve done for this
presentation is I’ve broken down into a really high level three kind of approaches you can take to
decide if you have mobile-friendly websites. We’re going to talk a bit about each
of them, what are some of the differences, and what it might involve. And we’ve
looked at examples for most of these already, and we’ll look at a few more as well. The first one that I want to mention is
this idea of having mobile-optimized content. The reason I put this in is that in some
cases maybe you’re not ready for whatever reason to make your website mobile-friendly,
or you have some challenges with your website or something’s going on. But maybe you
want to sort of dip your toes in the mobile lake, or you want to have some
mobile focus for a specific topic. Maybe you just want a little
bit of mobile-optimized content. So maybe these are specific
pages, or forms, or any other kind of thing that is meant to be accessed via
mobile. Meanwhile the rest of your site is sort of it’s totally
normal browser, non-mobile-friendly self. So a few examples I thought of, you
could just choose okay, only our donation form is going to be mobile-friendly,
even though the rest of the site isn’t. Maybe we’re running a specific campaign and
we have a petition or some kind of advocacy action we want people to take, and it’s
going to be a very social media driven campaign. Again, we don’t have time to make our
whole site mobile-friendly for this campaign, but you know what, if we made that
petition mobile-friendly then we would really get a lot more responses to our campaign. Or it
could be a sign-up page for your newsletter, etc. A few examples of that in practice
that I found, the one from the Cancer Society. Their whole website is actually
mobile-optimized, but I shared this as an example of what a mobile-friendly donation form
can look like. You’ll notice how it’s again, we’re not going to get too much into
mobile design. But you’ll notice how the fields are much bigger and it’s a lot spaced
out. It’s going to be a lot easier to type into when you’re on your mobile. Example of a mobile petition is from care2.org.
So, at least at the time – the last time I updated this, most of their site was not
mobile-friendly. And they do have a very large, comprehensive, i n-depth site, so I can see why it would be a
major project for them to make it mobile-friendly. However, their petitions are
mobile-friendly. So again, they’re recognizing that people are likely to come to these
through social media and through other ways that they’re going to be on their mobile,
and they’ve made this much easier to fill out for those people. If you’re interested in this, I’m not going
to get much more into it, but on the previous page I did include a link at the bottom.
It is a little bit older at this point but is worth looking at as a starting point.
It’s sample code for a mobile-friendly donation form that can be provided openly, and a case study
of how to make your sign-up form mobile-friendly. So if you’re interested in
this, I recommend checking those out. Now we’re going to look a bit more at
the two main ways to make your entire site or big chunks of
your site mobile-friendly. The first one we’re going to talk about is
building a mobile website. The idea here again, as I said before, is you’re
building a separate mobile website that’s separate from your main formal
desktop website. It’s specifically designed and specifically focused on the mobile user.
So this could be your entire site that is redesigned for mobile, or your mobile site could
actually be almost like a subset of your main site. It could just include your blog or
it could just include a few key pages with key pieces of information. It’s
kind of what’s called a “mini site.” Or it could just be a specific campaign website
or a specific program or event, something like that, right. Maybe you’re running a specific
campaign and you just want to make that mobile-friendly as a way to test out you know,
what kind of response you get from mobile. You could build a separate
mobile website for that campaign. I’ve shared here a few different examples
of what this could look like. The first example is from an organization called Cyber
Bullying UK. What they’ve got is a mini-site that is just their blog. So if you go
through their website on a mobile device, you’ll see that as I said, it’s basically
just a list of the different blog posts that they have. Where this could really be appealing is that if
you are you know, if you have a lot of people come that you’re trying to drive traffic to your
blog like through social media, through your email which people might be checking on their mobile
device, they see this nice, mobile-friendly blog. And if they want to go get more
information, they can always go to your full site and just kind of do
the zoom-and-pinch thing. We’ve also got here an example
of another mini-site that has a blog, as well as some key information. This is
for a museum. So again, a destination that people are visiting, it makes a lot of sense to
have some of this information be really accessible on a mobile device, because people are
like, going to be on their way to the museum, or at the museum wondering about this type
of information, obviously planning your visit being the most important thing. When is it
open, what are the hours, how do I get there, that kind of thing. You’ll notice that they
also, and this is common, have an option to switch to the full view. If you’re not
getting the info you need on their mobile website, you can always go back to looking at
their main website on your little mobile device and do the pinch-and-zoom
until you can find what you need. And then as the third example I have
the American Cancer Society which has made, as far as I can see, their entire website
into a separate mobile site that is laid out in a way that will be friendly on a mobile
device. So this may, depending on how big you are, depending on who’s in your audience,
this may or may not be an investment that you can or want to make, but it’s
definitely an option out there and creates a really great mobile
experience for your users. So how do you actually go
about building a mobile website? We’re going to talk about a few
approaches you can use. One is that you can use a mobile website service. So this is
basically a Content Management System (CMS), if you’re familiar with that term. If
you’re not, an examples are Drupal, WordPress, Weebly, whatever. Those are normal
desktop content management systems. It’s a separate content management system
that is specifically built for mobile websites. Often what a lot of these services will
do is it will say, “Tell us, what’s the URL for your normal website?”
You kind of feed it into the service, and then if you’re kind of on the
lower-paid pre-plans, it will kind of churn out a little mobile version of your site.
And then if you’re on a higher-paid plan, then they might have an expert
that kind of helps you design that. Basically, that will create that
mobile-friendly website for you, whether it’s just a blog or just some key info or whatever. And
you can also go in there and you can make some modifications yourself and I think do
some theming of it. As I said, a lot of those have a small monthly charge. I think
they start at about the $10 per month range. And there’s one or two that have a
free ad-supported version that I noticed. So those are some examples of ones to look
at if you’re thinking about going this option. Another approach to mobile websites
is to basically get a theme or a plug-in for a content management system you
may already be using. So I shared here some for some of the popular
content, open source content management systems like WordPress and Drupal. They actually
have these themes and plug-ins available already that can really help you to build your
separate mobile site. So if you’re on these platforms, this can be a
great way to approach that. Next, sort of the third way to do this is you
build it yourself. So if what you want is really complex, say an example of this not in the nonprofit
world, but if you look at like a car rental agency or something like that, if you visit their
website on your device, you may get this nice little form that really allows you to easily find
out about when are different cars available. You can put in the times that you want. You
can put in sort of your destinations and whatever and it will give you your list of possible
cars. So that’s something that is pretty customized. You wouldn’t just get that through kind of
churning it through these mobile website services, or maybe with a simple plug-in. So if
you have those kind of custom fancy needs, then you may need to invest in building
it yourself which can range from costing money to more expensive. Becky: A lot of money, I’d imagine. One
other option too, that I just wanted to mention, you mentioned that some are built into
platforms. So I just want to mention that there are also two programs through TechSoup’s Donation
Program here in the United States that are available to users where they can get mobile
websites included. So if you’re interested in having something built, or
included in your other mobile activities, these are two
options as well to check out. Tierney: Very cool. I didn’t even know
about those. We don’t have them in Canada, unfortunately. But those sound – Becky: Hopefully someday. Right? We’re
trying to expand our programs to be everywhere, but these two are at least available
to eligible nonprofits in the United States. So if you are one, then definitely check those
out if you’re looking for a service to help you get your website mobiley optimized. Tierney: Absolutely. So now we’re going
to talk a little bit about the other main option that I outlined which is responsive design.
So again, the big difference here, a mobile website you’ve got two separate
websites, one for desktop, one for mobile. Responsive design you have one website
that changes layouts depending on the size of the device that you’re on, whether
it’s a smartphone, whether it’s a tablet, whether it’s a desktop. So some examples of what this looks
like. We looked at the Give Confidently example before. You can also visit St.
Augustine’s church. It’s a church that has a very simple responsive website. And
fundraise.com is another example. Of course, there’s
many more. These are just three. Again, what I recommend you do, and I
unfortunately can’t do this demo live. But basically go to this, you know on your
desktop browser on your computer, or your laptop, or whatever you have, go to visit these URLs.
And then take the bottom right corner of the browser, you’ll have it nice and big at first, but
take the full screen and gradually make it smaller, and smaller, and smaller, until you
have it about the size of a smartphone device. What you’ll see is that as you change the
size of the browser, the website kind of shifts and rearranges itself and changes layout.
That’s how you can tell it’s a responsive site. So how do you go about building a responsive
site? Again, there’s sort of two main approaches here I guess. One of them is that
you get a theme that is already responsive. So this is great, especially if you’re
at a stage when you’re redesigning your site. You’re getting a new theme anyway. You are
sort of, you’re already going to be buying a theme and then maybe customizing it a little bit.
Instead of just buying a theme that’s not responsive and it’s just web or desktop only, why
not get a theme that already has responsiveness built into it? It just makes sense. So that example I showed you with St.
Augustine’s church, that website was built on a basically a zero-dollar budget by a
volunteer who just went to this site of yootheme.com and found a responsive theme that they
liked, worked with them, customized it a little bit and was able to finish that project in a
few weeks. Like it was a really quick process that he was able to make that site
responsive, because he was able to use a theme that was already pre-built. Then of course, the other option if you’re
building a theme yourself, you’re styling your own website, is to get your designer to use CSS which is
the way that you style your website, the language, to build in responsiveness to it. So
ideally, you want a designer who has interest in this, or is interested in learning about it, or
even more ideally has already expertise in building responsive sites. Because responsiveness has been a
trend that’s been around for a few years now, and it’s really very popular in the web design
community, you’re going to find a lot more people that have knowledge about this,
and have the skill to be able to do it. And there are also a lot of templates
and resources that are available to speed that process up, so your developer isn’t
starting from scratch with having to figure this out. So let’s talk a little bit about
what’s the difference between responsive design and the mobile website option. Or why
would you want to go one way or the other? In short, this is how I would sum it up is
that a mobile website, your separate website, gives you a lot more control over look
and functionality of how it’s going to be for the mobile user, right. Because it’s a
separate site, you can make it whatever you want. You can feature different content that you
think will be more appealing to a mobile audience, etc. You also have less content because you
can strip down what the content is available, so that can make it a lot
easier to digest and more manageable on that small mobile real
estate. Also because of the website, if you take the mobile website service
option, it can be a really easy place to start. Or if you already have a desktop site and
you’re not planning on redesigning it any time soon, you just sort of feed it through that
service, or you just build a separate mobile site. You don’t really have to
make any changes to your current site. And some of them, some of those
services I mentioned do have features where it will link to your current site. So
say, if you publish a blog on the current site, it would publish the blog on your mobile
site, so it’s not like you would have this sort of dual update process all the
time. You would have a bit of duplicated work but not maybe on a day to day basis. Those
are kind of the advantages of a mobile website. Responsiveness is, I would say is
overall, if you kind of talk to a lot of developers, like people in the web design and
development community, overall where they would encourage most organizations to go, in terms
of what’s the trend and best practice in mobile website development. Because one of the big
advantages is that you only have one website, so it’s only one place where you
have to maintain things. Which as a nonprofit, we’re all really busy. Just having just one
website to deal with really does simplify things. One place to up your content. It’s
already hard enough to get your content updated. You might as well only have to do it once. If
you make a change to the theme or anything like that, just have to do it in one place. It can be a little bit harder, depending on
your existing website, to adapt it to be responsive. You really need to talk with someone with
a little more expertise to find out how hard that process is going to be. For some
people, it could work. In our case, we actually built our new website. It’s not responsive right
now, but we built it with responsiveness in mind, knowing that’s a project we want to do
sort of within the next year. So we actually thought when we thought about the layout, we
thought about how can this be something that we can make responsive later
on. We kind of based it on a grid layout. So that’s something to think about. If you are building a new website, I
would highly, highly encourage you to think about either building responsiveness in from the
get-go, or at least planning to make it responsive later on, because again, this is just where things
are going. The earlier you can think about it, the better off you’re going to be. And now, of course, one more word, I talked
about this a bit, but how much is it going to cost. That’s always a common question
among nonprofits. The most obvious fixed cost is if you go the mobile website
service route, it’s about $9 a month. That’s like sort of the lowest cost, then
it goes up from there. But there are some good ones in the range of sort of $9 to $15 per
month for just like a really simple plan. So if you sort of prefer that low
regular cost, pretty low maintenance, then that’s sort
of the option for you. If you’re going to go the theme
route, so either getting a mobile website theme or a responsive theme, those like
any other website theme that’s prebuilt, some of them you can get for free,
and some of them usually between $0 and $100 is where you see
the cost of those ranging. Then the trick is if you get into
custom development it could really vary hugely. So for example, with the organization the
four C’s that built the giveconfidently.ca site, they were already building that site. So for
them, actually adding on the responsiveness piece was very minor. They felt that it
really didn’t increase the cost at all, or only maybe by a few hours,
because they were already theming it anyway. However, if you were really starting from
scratch, or you want some super-fancy mobile website, I mean I’m sure you could
blow the cost through the roof. But I guess what I want to say is
that if you want to keep this on a budget, there are ways to keep this on a
budget. It doesn’t have to be this massive t housands-of-dollars project which is
of course important for every nonprofit. So at this point, I’m going to
really just wrap up the main presentation part and let’s see kind of what questions you
have. As I said, there’s further resources here, and you can always find me on
Twitter or Facebook or anything like that if you have more questions. Becky: Great. Thanks so much, Tierney,
and you will get all of these resources after. I just want to mention before we go into a
few of the questions that over here on the back of the slide deck when you get it, there’s a
section on designing for mobile with lots of tips. We’re not going to go through them all right
now, but some of this may answer your questions too, like put your text on a diet, simplify, make
room for fingers, lots of really good logistical tips that Tierney has included in the back
end. So you can look at those on your own time. Feel free to post your questions into our
Chat tool, and I’ll go ahead and get started with a few of them that have already
been asked.So Tierney, Brett was asking, “What are some qualities to look
for in a mobile website design contractor? If you’re looking to have somebody do it,
what are some things that you would look for?” Tierney: For me, I would look at,
I’d say for example the situation I was in. We were looking at redesigning
our website and looking at someone who would theme our desktop website
and then also be able to turn that theme into a responsive theme. In our
case, that project’s happening later on but in your case I suggest you really integrate
it. If you’re not on – our website is a very special, bizarre case. So, please don’t extrapolate from
it. And in that case really what we’re looking for is a good – like we are working on
Drupal, so a good themer, like someone who knows just all the basic principles that
you would normally expect from someone who was doing your website. Do
they have for example, good CSS practices which is a bit of a tricky thing to evaluate,
but you can look at some of their previous work. There are some resources online
of how you can kind of test that out. Because, sort of the cleaner they are with
their CSS and the more skilled they are in that way and just really make use of good
practices, then they’re going to be much better at incorporating
responsiveness into that. Certainly, previous experience doing
responsive websites is a great thing to look at. You know, like looking at what work have they
done before is always one of the best indicators, and of course talking to
other people they’ve worked with. If we’re not talking about
responsive, I don’t know. It’s a good question. I don’t know if there’s anything specific
that I would look for other than just the general attributes I’d look for when doing any
other piece of work. That’s a good question though. Becky: Right. Yeah, references are always good
to look for, no matter who you’re hiring, right. Steve had a question, “If you’re
designing for mobile, should we be designing based on screen size and pixels
or in inches or centimeters? In other words, should we
pay attention to pixel density?” Tierney: That’s a good question. So I’m not,
I will say that I usually say this caveat up front, and I didn’t. I haven’t ever, I’m not
like actually a mobile website designer myself. That’s not my background. I’m
more in the explaining what the options are, so I don’t have personal experience with
this. But from what I know about website design, most of it, pretty much everything is done,
like if you were looking at the size of things, everything you talk about
screen size and pixels more often. So, I think that is kind of a technical question
that I’m not sure I’d feel comfortable answering. Becky: That’s totally
fine. I’ve heard similar, though, that it’s most likely
pixels that you’re looking for. Tierney: Even in just normal website
design, I’ve never used you know, for a desktop, you’d never use inches or
centimeters or anything like that. You’d usually talk about pixels or other
types of units that are meaningful for web design. Becky: We also have a
question from Steve saying, “When using responsive design, is it
important to allow users to be able to switch to the desktop version instead?” So you know, if you
have a mobile site do you have to offer the option for a full site? Tierney: You don’t really have that with
responsive design. So that’s, depending on how you see it, maybe one of the downsides, because in
responsive design it’s inherently the same site that’s just rearranging itself,
right.I mean, there may be some kind of hacks or whatever you can put in to sort of force the
website host to think that it’s serving up a website to a desktop system, and then kind
of force it to give that desktop option. But usually with responsive sites the idea is
that it’s just the one site and it has everything on it that you would need, so there’s not
really that need to switch to the desktop version. If you aren’t going the responsive
route and you have a mobile site, absolutely, I would definitely give people
the option to switch, because yes, maybe you think that
you’ve thought through all their needs and that you’ve put all the most
relevant information inside the little mobile site, and it’s so well thought out. But,
honestly at the end of the day, your users are always going to have needs
and questions that you didn’t answer, and if you don’t make it easy for
them to get back to your full desktop version that you may have some additional information
that they need, then they’re going to be frustrated. So yeah, in that case I would
always give people the route back. Becky: Great. We have a question
from Fred asking if there are any opinions or recommendations on third-party
services like Wufu or mobile-friendly forms or pages that can be embedded. And I know you had a
few options recommended back in the slide deck. Tierney: Yeah, those were for
mobile website services which is not the same as exactly what Fred’s referring
to which is mobile website friendly forms. I have heard of really good things about
Wufu, although I’ve never personally used it myself. It’s kind of a bit of a separate topic, so I’d
have to have to do a little bit of actual research on that. Becky: Okay, we also have Rachel
asking, “We’re migrating to WordPress for our main page. Is there one WordPress
plug-in that you would suggest to help us get mobile?” Tierney: So I would look at, if you are
building, if you’re going the responsive route, which I would recommend – and then
– okay, I just noticed your comment, Rachel. Yeah, if you’re getting a
pre-built theme, I would get a responsive theme. Just go the responsive route. If you
don’t want to go that route for whatever reason, these were the three WordPress,
Mobile Pack, WPTouch and WPTap that I saw are the most highly
recommended for WordPress. Becky: Great. Well, we are just about at the
top of the hour, so I just want to take a moment and thank our presenter. Thank you so
much, Tierney, for sharing your expertise and experience. Tierney: I was just going to say a lot of
great people commented in with really good advice and suggestions, so if there’s any way to
share those as well, just thank you for everyone who did that. I’m certainly not the only expert
in the room. So thank you for sharing your thoughts. Becky: Absolutely, and we invite anyone to
come to our mobile forum in our community forums to share their expertise and ask more
questions, because we really do appreciate people sharing their experiences with specific
programs or services, so that all of us can learn on how to do these things better. I’d also like to thank our webinar
sponsor ReadyTalk, who has offered this platform for our use to present
webinars to you regularly. We will have another webinar coming up
on August 8th where we will be doing a tour of our site and helping you get registered, if
you’re not already. So, if you’d like to, please join us. We will include a link to all of the
resources including our mobile forum and all the resources that Tierney shared in the follow-up
email. You can also join to see the recording later on this afternoon, so
watch for that email in your inbox. Thank you everyone for joining us. Thank you, Tierney, and thank you,
Ale, on the back end for fielding questions. Have a terrific day. Captioning by YourOnlineScribe.com

Leave a Reply

Your email address will not be published. Required fields are marked *