IS IT

TIM

E FOR YO

UR

WEBSIT

E TO G

O MOBILE

?

TI E

RN

EY

SM

I TH

, T

EC

HS

OU

P C

AN

AD

A

ABOUT TECHSOUP CANADA

Is my org eligible?

a) Does your business number end in RR0001?

b) Do you have a Letters Patent from Industry Canada?

c) Are you incorporated as a not-for-profit corporation with your province?

d) Are you a library?

You may be eligible to get donations of…

DONATIONS PROGRAM

ABOUT ME

• Software engineer

• Nonprofit technology blogger

• Community manager

@tierneys@techsoupcanadafacebook.com/techsoupcanadatechsoupcanada.ca/community/blogyoutube.com/techsoupcanadaslideshare.net/techsoupcanada

AGENDA

1.Is it mobile friendly?

2.Why mobile?

3.Approaches to mobile

websites

4.Designing for mobile

MOBILE WHAT??

Photo credits: louisvolant,  Adrian Measures

ELEMENTS OF MOBILE STRATEGY

mobile

Mobile webMobile app

Mobile-optimized email

Text-to-donate

Text campaign

IS IT MOBILE FRIENDLY?

1 2 3

www.cccc.orgwww.giveconfidently.cawww.nature.org

IS IT MOBILE FRIENDLY?

No Mobile Site

1 www.cccc.org

IS IT MOBILE FRIENDLY?

Responsive Design

2www.giveconfidently.ca

IS IT MOBILE FRIENDLY?

Mobile Site

3 www.nature.org

WHAT ABOUT YOUR SITE?

GoMo: http://www.howtogomo.com/en/d/test-your-site/

WHY

MOBILE?

DO CANADIANS HAVE MOBILE INTERNET?

5%

37%

in 2001

in 2011

THINK MOBILE FIRST

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

ARE YOUR VISITORS MOBILE?

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

WHAT ABOUT YOU?

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

APPROACHES T

O MOBILE

WEBSIT

ES

3 MAIN APPROACHES

1

2

3

Mobile-Optimized ContentMobile 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:http://open.convio.com/downloads/mobile-friendly-donation-form.htmlCase study of a mobile-friendly sign up form: http://www.nten.org/articles/2012/how-to-quickly-optimize-your-website-for-mobile-devices

EXAMPLES OF MOBILE-OPTIMIZED CONTENT1

Mobile donation formm.cancer.org

Mobile petitioncare2.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 infoburkemuseum.org

Mini-site: blog onlym.cyberbullying.co.uk

2Full 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

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, WPTap

• Drupal http://drupal.org/project/mobile_tools

• Joomla http://extensions.joomla.org/extensions/mobile

• Plone http://plone.org/products/web-and-mobile

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

4. Advanced Mobile Platforms

• Desktop & mobile site based off the same code, but customized for each platform e.g. Moovweb

2

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

www.giveconfidently.ca

3www.fundraise.com/www.staugustineschurch.ca/

APPROACHES TO RESPONSIVE DESIGN

1.Responsive Themes• Themes that are built to be responsive

• E.g. www.yootheme.com/ builds responsive themes for Joomla & WordPress

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)

3

WHICH APPROACH TO TAKE?

M O B I L E W E B S I T E

• 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

R E S P O N S I V E D E S I G N

• 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

DESIGNIN

G FOR M

OBILE

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

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

DOES IT WORK ON MOBILE?

• Some elements don’t work on mobile e.g. Flash, pop-ups

• Some things just aren’t possible e.g. hover

http://www.talktofrank.com/cocaine-basement

QUESTIONS?

@T

EC

HS

OU

PC

AN

AD

A O

R F

AC

EB

OO

K. C

OM

/ TE

CH

SO

UP

CA

NA

DA

Links & resources:http://techsoupcanada.ca/learning_centre/webinars/2012/10/03/mobile-optimized-website