1. Optimizing Your Website for Mobile Devices July 25, 2013

2. Using ReadyTalk Chat and raise hand All lines are muted If you lose your Internet connection, reconnect using the link emailed to you. If you lose your phone connection, re-dial the phone number and re-join. ReadyTalk support: 800-843-9166 Your audio will play through your computer’s speakers.

3. This seminar will be available on the TechSoup website along with past webinar presentations: www.techsoup.org/community/events- webinars You will receive a link to this presentation, material and links. Twitter hashtag: #techsoup You Are Being Recorded…

4. Optimizing Your Website for Mobile Devices With Tierney Smith from TechSoup Canada

5. Our Presenter Software engineer Nonprofit technology blogger Community manager @tierneys @techsoupcanada facebook.com/techsoupcanada techsoupcanada.ca/community/blog youtube.com/techsoupcanada slideshare.net/techsoupcanada

6. Behind the Scenes Assisting with chat: Ale Bezdikian Facilitator: Becky Wiegand

7. Agenda 1. Is it mobile friendly? 2. Why mobile? 3. Approaches to mobile websites

8. TechSoup is part of TechSoup Global, 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. Who Is TechSoup?

9. TechSoup is a 501(c)(3) nonprofit organization. As of April 30, 2013, TechSoup Global has served more than 208,300 organizations — including over 67,000 organizations outside of North America. We have distributed more than 11 million software and hardware product donations and enabled recipients to save more than US$3.61 billion in IT expenses in 56 countries around the world.

10. Technology donations available through the TechSoup catalog: 401 Number of donor partners for US programs, including Adobe, Cisco, Microsoft, and Symantec: 63 NetSquared Local monthly meetup groups around the world: 48 TechSoup’s community blog and forums have participation from more than 50,000 monthly NPO and library users. Reach more than 200,000 NPO, library, and philanthropy subscribers in the United States with our newsletters each month.

12. About TechSoup Canada

13. Is your website already mobile-friendly? yes/no/not sure Participant Poll Placeholder

14. Is It Time for Your Website to Go Mobile? Tierney Smith, TechSoup Canada

15. Mobile What? Photo credits: louisvolant, Adrian Measureslouisvolant Adrian Measures

16. Elements of Mobile Strategy mobile Mobile web Mobile app Mobile-optimized email Text-to-donate Text campaign

17. Is It Mobile Friendly? 123 www.cccc.orgwww.giveconfidently.cawww.nature.org

18. Is It Mobile Friendly? No Mobile Site 1 www.cccc.org

19. Is It Mobile Friendly? Responsive Design 2 www.giveconfidently.ca

20. Is It Mobile Friendly? Mobile Site 3 www.nature.org

21. What About Your Site? GoMo: http://www.howtogomo.com/en/d/test- your-site/ http://www.howtogomo.com/en/d/test- your-site/

22. WHY MOBILE?

23. Think Mobile First Source : http://www.rositacortez.com/social-media-101/10-reasons-why-your-nonprofit-needs-a-mobile-site/http://www.rositacortez.com/social-media-101/10-reasons-why-your-nonprofit-needs-a-mobile-site/

24. Mobile Internet Use Is Increasing Mobile traffic on large ecommerce sites Source (+ many more mobile stats): http://www.smartinsights.com/mobile-marketing/mobile-marketing- analytics/mobile-marketing-statistics/ http://www.smartinsights.com/mobile-marketing/mobile-marketing- analytics/mobile-marketing-statistics/

25. Americans Spend 58 Min/Day on Mobile Source: http://www.infodocket.com/2013/05/28/new-mobile-user-stats-americans- spend-58-minutes-a-day-on-their-smartphones/

26. Are Your Visitors Mobile? 20122013 mobile 3.1% tablet 2.4%

27. Why Are Mobile Visitors on Your Site? Saw an ad/poster Clicked through via social media Clicked through via email Used a QR code Need to find contact info on the go They just happen to be on mobile

28. Who is your audience? Why are they coming to your site? How are they getting to your site? What are their goals? What are your goals? What About You?

29. APPROACHES TO MOBILE WEBSITES

30. 3 Main Approaches 1 2 3 Mobile-Optimized Content Mobile Website Responsive Design

31. Mobile-Optimized Content Big Idea Specific content, pages or forms are mobile-optimized This content is meant to be accessed via mobile Could be… Donation form Petition/advocacy action Sign up page Key content or content that is mobile-optimized by default 1 Sample code for a mobile-friendly donation form: http://open.convio.com/downloads/mobile-friendly- donation-form.html Case study of a mobile-friendly sign up form: http://www.nten.org/articles/2012/how-to-quickly- optimize-your-website-for-mobile-devices http://www.nten.org/articles/2012/how-to-quickly- optimize-your-website-for-mobile-devices

32. Examples of Mobile-Optimized Content 1 Mobile donation form m.cancer.orgMobile petition care2.org

33. Mobile Website Big Idea Separate site, optimized for mobile Could be a full site, or with reduced content Often linked to main site Could be… Mini-site with basic info, key actions (donate, sign up), blog Campaign/program/event website Full mobile website 2

34. Examples of Mobile Websites Mini-site: key info burkemuseum.org Mini-site: blog only m.cyberbullying.co.uk 2 Full site (pretty much): m.cancer.org

35. Approaches to Mobile Websites 1.Mobile Website Service A CMS specifically for mobile websites Your main website is the starting point Options to build your mobile website using their CMS, or get an expert to do it Often a small monthly charge, some have a free ad- supported version Examples: Mofuse, GoMobi, WinkSite, Duda Mobile, Bmobilized, Mobify, Moovweb 2

36. Approaches to Mobile Websites 2.Mobile Themes & Plugins Website themes that are optimized for mobile CMS plugins that detect mobile and apply a mobile theme Wordpress: WordPress Mobile Pack, WPTouch, WPTapWordPress Mobile Pack Drupal http://drupal.org/project/mobile_toolshttp://drupal.org/project/mobile_tools Joomla http://extensions.joomla.org/extensions/mobilehttp://extensions.joomla.org/extensions/mobile Plone http://plone.org/products/web-and-mobilehttp://plone.org/products/web-and-mobile 2

37. Approaches to Mobile Websites 3.DIY For advanced or unusual sites, you may want to build it yourself Like building a website, but mobile-friendly 2

38. You can get mobile websites included in the donation programs through TechSoup from: – Guide by Cell Guide by Cell – Connect2Give Connect2Give Donated Mobile Websites

39. Responsive Design Big Idea One site that changes layout depending on the size of the browser/device Looks good on all devices Same content on all devices 3

40. Examples of Responsive Design www.giveconfidently.ca 3 www.fundraise.com/www.staugustineschurch.ca/

41. Approaches to Responsive Design 1.Responsive Themes Themes that are built to be responsive E.g. www.yootheme.com/ builds responsive themes for Joomla & WordPresswww.yootheme.com/ 2.DIY Designers can use CSS to create a responsive design. Need a designer with expertise in this area. Various templates and frameworks are available to make development faster (http://webdesignledger.com/resources/responsive-web-design-templates-and-frameworks)http://webdesignledger.com/resources/responsive-web-design-templates-and-frameworks 3

42. Which Approach to Take? MOBILE WEBSITE More control over look & functionality Reduced content is easier to digest Easy to create when starting with existing desktop site Can pull content from main site RESPONSIVE DESIGN One website & theme to maintain One place to update content Easiest to include when building a new website

43. How Much Will It Cost? Mobile website services start at $9/month Pre-built mobile or responsive themes cost between $0-100 Costs for custom development vary greatly depending on your goals Could be free if you have some IT skills and can make some tweaks for responsiveness Could be very expensive if you want a DIY mobile site from scratch

44. THANK YOU! @techsoupcanada or facebook.com/techsoupcanada Links & resources: http://techsoupcanada.ca/learning_centre/we binars/2012/10/03/mobile-optimized-website

45. Q & A Please type your questions in the chat window. Follow-up questions can be posted in the community forum:

46. Thank You to Our Webinar Sponsor! ReadyTalk offers dedicated product demos for TechSoup organizations 4 times per week. For more information: techsoup.org/readytalk

47. DESIGNING FOR MOBILE iOS User Experience Guidelines A User-Centered Approach To Web Design For Mobile Devices

48. Put Your Text on a Diet Be succinct. Smaller screen sizes require even more careful attention to the content displayed to the user. Put on your editor’s hat and cut unnecessary content, then cut some more. When you’re done, prioritize the content and display the most important content first. “Giving to a Christian charity is one of the most meaningful ways you can put your faith into action, but how do you know the organization you’re giving to is using the money responsibly?”

49. Simplify, Simplify, Simplify Ask for less info Provide dropdown menus and checkboxes where possible Mobile form design strategies

50. Make Room for Fingers Apple’s recommended fingertip size is 44x44px Make buttons big enough; provide space around clickable things

51. Support Multiple Sizes & Devices Don’t forget to check with different orientations of the same device!

52. Follow Good Website Practices Following standards will make any website easier to use on mobile devices HTML5 features are increasingly supported by mobile browsers http://mobilehtml5.org/ E.g. form input – using a special tag on a form field can make a special keyboard or input option pop up http://www.quirksmode.org/html5/inputs_mobile.html

53. Does It Work on Mobile? Some elements don’t work on mobile (Flash, pop-ups) Some things just aren’t possible (hover) http://www.talktofrank.com/cocaine-basement