Optimizing Your Website for Mobile Devices July 25, 2013

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

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

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

Our Presenter Software engineer Nonprofit technology blogger facebook.com/techsoupcanada techsoupcanada.ca/community/blog youtube.com/techsoupcanada slideshare.net/techsoupcanada

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

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

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?

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.

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.

About TechSoup Canada

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

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

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

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

Is It Mobile Friendly? 123

Is It Mobile Friendly? No Mobile Site 1

Is It Mobile Friendly? Responsive Design 2

Is It Mobile Friendly? Mobile Site 3

What About Your Site? GoMo: your-site/ your-site/

WHY MOBILE?

Think Mobile First Source :

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

Americans Spend 58 Min/Day on Mobile Source: spend-58-minutes-a-day-on-their-smartphones/

Are Your Visitors Mobile? mobile 3.1% tablet 2.4%

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

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?

APPROACHES TO MOBILE WEBSITES

3 Main Approaches Mobile-Optimized Content Mobile Website Responsive Design

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: donation-form.html Case study of a mobile-friendly sign up form: optimize-your-website-for-mobile-devices optimize-your-website-for-mobile-devices

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

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

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

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

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 Joomla Plone 2

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

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

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

Examples of Responsive Design 3

Approaches to Responsive Design 1.Responsive Themes Themes that are built to be responsive E.g. 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 ( 3

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

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

THANK or facebook.com/techsoupcanada Links & resources: binars/2012/10/03/mobile-optimized-website

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

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

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

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?”

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

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

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

Follow Good Website Practices Following standards will make any website easier to use on mobile devices HTML5 features are increasingly supported by mobile browsers E.g. form input – using a special tag on a form field can make a special keyboard or input option pop up

Does It Work on Mobile? Some elements don’t work on mobile (Flash, pop-ups) Some things just aren’t possible (hover)