OPTIM

IZIN

G YOUR

WEBSIT

E FOR M

OBILE

DEVICES

TI E

RN

EY

SM

I TH

, T

EC

HS

OU

P C

AN

AD

A

ABOUT TECHSOUP CANADA

ABOUT ME

• Software engineer

• Nonprofit technology blogger

• Community manager

@tierneys@techsoupcanadafacebook.com/techsoupcanadatechsoupcanada.ca/community/blogyoutube.com/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?

WHY

MOBILE?

DO CANADIANS HAVE MOBILE INTERNET?

5%

37%

in 2001

in 2011

MORE PEOPLE ARE GETTING SMARTPHONES

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

ONCE UPON A TIME…

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?

ASK

HEATHER

Why did CCCC decide to make

www.giveconfidently.ca mobile-friendly?

ASK HEATHER

• “Think mobile first”

• Can see clear trend towards mobile

• Want to be proactive about adopting new technologies, not fall behind

• Experience as a user shows good mobile design is important

• Already had to design a new site: good time to think about mobile

• Reach & engage a younger demographic

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

• Key content or content that is mobile-optimized by default

1

EXAMPLES OF MOBILE-OPTIMIZED CONTENT1

Mobile donation formm.cancer.org

Sample code for a mobile-friendly donation form:http://open.convio.com/downloads/mobile-friendly-donation-form.html

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: info, blog & key actionsm.nature.org

Mini-site: blog onlym.350.org

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

• Examples: WPTouch, WPTap, WordPress Mobile Pack

3.DIY

• For advanced or unusual sites, you may want to build it yourself

• Like building a website, but mobile-friendly

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

3https://www.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

MOBILE WEBSITE VS. RESPONSIVE DESIGN

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

ASK

HEATHER

Why did CCCC choose responsive

design?

ASK HEATHER

• Big cost savings – don’t have to pay extra for a mobile site

• Don’t have to worry about different device sizes (e.g. tablet)

• Simple maintenance – only one website to update

DESIGNIN

G FOR M

OBILE

iOS User Experience Guidelines

A User-Centered Approach To Web Design For Mobile Devices

PRIORITIZE CONTENT

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 USER INPUT

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

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

ASK

HEATHER

How is website design different for

mobile devices?(In particular with responsive design)

ASK HEATHER

• Keep it simple

• “Text on a diet”

• Design with mobile in mind

• Test on as many devices as possible!

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