 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 slash community slash events dash webinars. You will receive a link to this presentation, the full recording, and any links discussed later on this afternoon. If you are tweeting this event, feel free to use the hashtag pound 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 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 event producer here at TechSoup. I have been here about five years and prior to that I was an accidental techie at 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 of things can help you improve your web presence for mobile devices. You will also see Ali Bazdikian who will be assisting with chat questions in the back end. So 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 will be talking about is it mobile friendly? I am 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 will talk a little bit about why mobile is important. We will 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 are working toward 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 is a little bit about the impact. We are a 501c3 nonprofit as is TechSoup Canada. They are a nonprofit as well. And 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 about TechSoup Canada. They also provide a lot of the same resources, 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 sizable chunk of our group who either aren't sure what makes the site mobile friendly 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 some major overhaul type ways. So with that I'd like to go ahead and 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 or with TechSoup Canada. And tell us, is it time for mobile? Thanks Becky. So hi everybody. It's great to be here today. As Becky said, I think she pretty much summed everything up really well. But yeah, 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. Tweet to us, say hi, whatever. And if you're in the US, I love you too. That's great. So also would love to get to know you better. So getting started today with mobile websites. So where this kind of topic came up for me originally is that I think all of us have experienced 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 may be 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 is on the same page. So when I use the word mobile in today's webinar, I'm going to be referring to both smartphones and tablets, but with a focus on smartphones. So when smartphones encompasses many different types of smartphones, you may be familiar with iPhones. Google built a system called Android Phone but there's lots of different devices like the Nexus or Samsung. 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. So 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 tablet, the playbook. Anyway, so 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 like a feature phone. So that's kind of your phone that does texting, does phone calling, but you wouldn't really 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. So we're not going to be talking about those phones so much in today's presentation. We're more focusing on smartphones that really have a good mobile browser on them. So another little piece of context I want to give before jumping into talking about mobile websites is to frame this larger discussion of mobile strategy. So mobile websites is only one possible way that you can connect with your supporters through mobile. So as a nonprofit I just want to put it out there that there's a lot of different ways that you can be embracing the mobile trend in terms of how you can communicate with your 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 might 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 e-mails since so many people read their e-mail 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 e-mails on a small screen aren't being overwhelmed by this teeny tiny text and so much stuff going on. So 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. So 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 of the desktop size, the desktop views of some of these websites are a little bit 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. So 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 and it's called the Canadian Council of Christian Charities and their website is 4cc.org. So if we look at their website on a typical, what we 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 screenshot 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 for that the mobile browser is taking the whole thing and just shrinking it down to a teeny tiny size. So 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 and 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 usable on a mobile device. You can pinch and zoom to make it bigger. You can still click around. So if you are on 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't access your website on mobile they will still be able to get that information. It will be in maybe not an optimal format but it will still be available to them as long as your website doesn't have a certain element like flash-based or something like that. So just putting that out there. But now let's look at some websites that actually are mobile-friendly because that's what we are 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 the picture right there. You actually, if you scroll down on this which I couldn't capture at 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 bit 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 U.S. 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 their logo looks kind of the same and they're using some of the same color scheme but what you'll find is 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 the 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 what we're going to call in this webinar, it's a mobile website. So they've actually built a separate website specifically to look at on mobile. And so when you go to visit their site at nature.org it decides am I on a desktop right now? So it shows you the desktop version of the site and if not 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, so 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 in 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 on a mobile device. So as said to be fair this is something that we are 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 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 U.S. how are each one used? How many are there out there? And I think the trend is pretty clear. Basically there are less feature phones and more smartphones than we are getting at the point where we are switching through. Again you may see this in your personal life as well just that more and more people once their phone plan comes up due or whatever it is it's Christmas time they want a nice present that they are choosing to get the smartphone. So that's where you are 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 are talking about, mobile websites here, right? So this is actually an example from a study that is done regularly with some large e-commerce sites. So a little bit different from our target audience but it still gives us a good idea. It shows for them in 2012 versus 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 gray is from traditional like from a desktop. The blue is from a tablet and the light gray is from a smartphone. So you can see 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. Even just in 2012 it 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 is 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 prediction 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 are planning a redesign soon or you can kind of jump on the bandwagon and even make some small changes right now are really going to help you to 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 taken by surprise and overwhelmed. Also I've provided a link at the bottom of the slide that has a bajillion 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. And one more graphic just to sort of illustrate this trend. This is a breakdown of how much time people spend doing different things on their smartphones. So on average this study found that Americans spend about 58 minutes per day so 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. Now 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 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 and 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 that 3.85% of our traffic was from mobile or the number of visits. And that was taken in about September of 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 being called mobile by Google Analytics but I think it means smartphones versus about 2.4% from a tablet. So overall that pie has grown although the chunk that's actually from a smartphone is still about the same. So 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 visiting your homepage or maybe they come to your homepage on their mobile site and then they leave. So 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. And worse off, God forbid if they're actually trying to donate to you or something like that and then that discourages them because they didn't find your site easy to use on a mobile device. So 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 wanted 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 the mobile visitors are on your site anyway. How do 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 really the best approach is again reflect on yourself and your personal experience and that of your family and friends. 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 and 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 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 that 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'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 and 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 in the mindset that your users are coming with. And what might their goals be? So that's how they get to their site but what is it that they're really trying to do? So 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. So this was a really nice example of a mobile website that I saw from the Best Friend Animal Society and I really liked it because there's 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. Okay, there's a campaign that you can sign up for. You can find it 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 at my computer and then possibly forgetting about it and that opportunity is missed. Hey, Tuni, just ask a quick question based on some of the information that 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, I mean obviously you showed a bunch of charts about 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 to, 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? Yeah, I think there's a lot of good data on mobile on the web. Honestly, I'd have to check in 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 bit more digging on that. However, I think looking at 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 that Google Analytics set up. And of course there's always the option set Google Analytics up right away. I mean you won't have the same depth of traffic but even if you can get maybe two weeks or a month worth of traffic while you're kind of building your case that will give you a little bit of a bunch line to work with. So those are maybe a few ideas for moving ahead with that. Great, 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 or their site, to their ways to get that information. 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 not just 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. Great, thank you. Any other questions so far? Because this is a good time to pause before we just jump into the next really chunk of the week. Well we had a question just come in from Sheila asking what's the website address for analytics. And 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. Absolutely, yeah. 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 had a date on one of them at 528, but if you have any other details about how recent some of the data was there was some interest in that as well. Yes, I think most of it that I tried to find was within, I'm just looking at my slide for that one. The one with the Americans spent 58 minutes per day, one that was from May of 2013 so that was fairly recent. And 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 was sort of from the last few months. But I highly recommend there's a lot of good data on this online and I really only skimmed the service 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 because 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 and 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 and then when they wanted to run it they would click on that icon and it would open it up and it would run this little program. So 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. So some of the text is bigger, some of the buttons are bigger, it's a bit of a different layout, etc. We also did a web, sorry go ahead. 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 that it doesn't matter whether you're on a Mac or a PC to visit a website. That's the simple definition. There's 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 in a kind of a simple mindset, think of an app as something you've downloaded. It's a separate program you have to write for every device and a website is something you go to in a browser. We also 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 developed 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. 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 something, some action that people can take or some activity that they can do or some type of game or interactive feature. It should be to do something as well which you did mention. But 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. 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. But that's certainly why this presentation is focused on mobile websites because I think on the whole for the average nonprofit it is 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 to the end and just kind of go into this next little section of the webinar. So now what I want to talk about is 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, and 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 is 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 it down into at a really high level three kind of approaches you can take to this idea of mobile friendly websites. So 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 in most of these already, and we'll look at a few more as well. So the first one that I want to mention is this idea of having mobile optimized content. So 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. So 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 totally its normal browser, not 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 petitioner, some kind of advocacy actually we want people to take, and it's going to be a very social media driven campaign. So 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 silent page for your newsletter, etc. So a few examples of that in practice that I found, the one from 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, it's a lot spaced out, it's going to be a lot easier to type into when you're on your mobile. An 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, in-depth site, so I could see why it'd 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 too much more into it, but on the previous page I did include a link at the bottom that it is a little bit older at this point, but it's worth looking at as a starting point, a sample code for a mobile friendly donation form that Kinvio has provided just 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. But now we're going to look at a bit more at the two main ways to make your entire site or big chunks of your site mobile friendly. So the first one we're going to talk about is building a mobile website. So the idea here, again as I said before, is that you're building a separate mobile website, separate from your main normal desktop website, and 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. So it could just include your blog, or it could just include a few key pages with pieces of information, 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 if you're running a specific campaign and you just want to make that mobile friendly as a way to test out what kind of response you get from mobile, then you could build a separate mobile website for that campaign. So I've shared here a few different examples of what this could look like. The first example is from an organization called CyberBullying UK, and 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. So where this could really be appealing is that if you have a lot of people come and you're trying to drive traffic to your blog, again 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. So this is for a museum. So again, a destination that people are visiting, and it makes a lot of sense to have some of this information be really accessible on a mobile device because people are likely 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. And you'll notice that they also, and this is common, have an option to switch to the full view. So if you're not getting the info you need on their mobile website, you can always go back to their, looking at their main website on your little mobile device and do the pinch and zoom until you can find what you need. 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? So we're going to talk about a sort of a few approaches that you can use. One is that you can use a mobile website service. So this is basically a content management system. If you're familiar with that term, and if you're not, examples are like Drupal, WordPress, Weebly, whatever, those are sort of normal desktop content management systems. It's a separate content management system that's specifically built for mobile websites. So 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 low paid free 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 to kind of help you design that. But basically that will create that mobile friendly website for you, whether it's just the 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. And as I said, a lot of those have a small monthly charge. I think they started about sort of in the $10 per month range. And there's one or two that had a free ad supported version that I noticed. And 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 to get a theme or a plugin 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 plugins 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, and the third way to do this is obviously 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 parental 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 a different car is available. You can put in the times that you want. You can put in sort of the destinations and whatever and it will give you your list of possible cars. So that's something that's pretty customized. You wouldn't just get that through churning it through this mobile website services or maybe with a simple plugin. 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. A lot of money I imagine. One other option too that I just wanted to mention, you mentioned that some are built into platforms. So I just wanted 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. Very cool. I didn't even know about those because we don't have them in Canada unfortunately. But those sales are really cool. 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 mobile-ly optimized. 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 is you've got two separate websites, one for desktop, one for mobile. For responsive design you have one website that changes layout 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 is 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 that again what I recommend you do and I unfortunately can't do this demo live but basically go to this on your desktop browser, on your computer or your laptop, whatever you have. Go to visit these URLs and then take the bottom right corner of the browser and you have it nice and big at first that takes the full screen and gradually make it smaller and smaller and smaller until you have it about the size of the 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. So that's how you can tell it's a responsive site. So how do you go about building a responsive site? So 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'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 is just web or desktop only, why not get a theme that already has responsiveness built into it? That just makes sense. So the example I showed you was St. Augustine's Church. That website was built on basically a $0 budget by a volunteer who just went to the site of Utheme.com and found a responsive theme that they liked, worked for them, customized it a little bit and was able to finish that project in a few weeks. It was a really quick process that he was able to make that site responsive because he was able to use the theme that was already pre-built. Then of course the other option if you're building a theme yourself or 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 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 a lot of also templates and resources that are available to speed that up, process up. So you're not, 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. So in short, how I would sum it up is that a mobile website, your separate website gives you a lot more control over the look and functionality of how it's going to be for the mobile user. Because it's a separate site you can make it whatever you want. You can feature different content that you think would 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 just more manageable on that small mobile real estate. Also because of the website, if you take sort of the website service, mobile website service option, it can be a really easy place to start out. If you already have a desktop site you're not planning on redesigning it anytime 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 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 beyond a day-to-day basis. So it's 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 we have to maintain things, which as a nonprofit we're all really busy just having one website to deal with really does simplify things. One place is already hard enough to get your content updated, right? Might as well only just have to do it once, or 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 to someone with a bit 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 within the next year. So 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. And 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 are going to be. And now of course one more word on, I talked about this a bit, but how much is it going to cost as always a common question among nonprofits. So the sort of the most obvious fixed cost is if you go the mobile website service route it's about $9 a month. That's sort of the lowest cost and 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 are going to go the theme route, so either getting a mobile website theme or a responsive theme, like any other website theme that's pre-built, some of them you can get for free, and some of them usually about 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 4Cs 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 to 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 do this on a budget. It doesn't have to be this massive thousands 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. And 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. 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 that there's this 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 that you can look at those at 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? So for me, I would look at, 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 is 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're working on Drupal so a good theme or like someone who knows just all the basic principles that you would normally expect from someone who is doing your website. So 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 and 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 a previous experience doing responsive websites is a great thing to look at, 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 the general attributes I'd look for when doing any other piece of work. It's a good question. Kami Yeah, references are always good to look for no matter who you're hiring, right? So Steve had a question about if you're designing for mobile, should we be designing based on screen size in pixels or in inches or centimeters? In other words, should we pay attention to pixel density? Kami That's a good question. So I will say, and I usually said this caveat up front, I'm not actually a mobile website designer myself. That's not my background. I'm more 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. If you were looking at the size of things, everything you talk about screen size in pixels more often. So I think that's kind of a technical question that I'm not sure I'd feel comfortable answering. Kami That's totally fine. I've heard similar though that it's most likely pixels that you're looking for. Without being an expert on this either, I would concur. Kami Even in just normal website design, I've never used, 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. Kami 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 if you have a mobile site, do you have to offer the option for full site? Kami You don't really have that with responsive design. So that's depending on how you see it, maybe one of the downsides, because responsive design is inherently the same site that's just rearranging itself. 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 the desktop option. But usually with responsive design, 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, you can be, maybe you think that you've thought through all their needs, and that you've put all the most relevant information in that 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 anticipate. And if you don't make it easy for them to get back to your full desktop version that 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. Great. We have a question from Fred asking if there are any opinions or recommendations on third-party services like Wufu for mobile friendly forms or pages that can be embedded. And I know you had a few options recommended back in the slide deck. Yeah, those are 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 really good things about Wufu, although I've never personally used it myself. And then there's, yeah, it's kind of a bit of a separate topic, so I'd have to do a little bit of extra research on that one. Okay. We also have Rachel asking, we're migrating to WordPress for our main page. Is there one WordPress plugin that you would suggest to help us get mobile? 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, WP Touch and WP Tap that I saw the most highly recommended for WordPress. 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. I'd like to also — 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. And I'm certainly not the only expert in the room, so thank you for sharing your thoughts. 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 of 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. And thank you everyone so much for joining us. Thank you Tierney, and thank you Allie on the back end for fielding questions. Have a terrific day.