Salsa on the Go: Think Mobile!

Salsa on the Go:Think Mobile

Making sure your Salsa emails and forms are accessible on portable devices

About Us

We offer a wide range of affordable services for nonprofits and small businesses

• Website design

• Strategic planning• Campaign implementation

• Using Salsa effectively

About You

• Developers? Campaign Managers?

• Have a smartphone?

• Use it for email?

• Use it for the web?

Why Mobile?

• 55% of mobile phone users use their phone to access the web

• 31% exclusively use mobile phones to access the web

• A sale on eBay via a mobile phone happens every 2 seconds

• 78% of Facebook users access it via mobile devices

Email is Mobile

iPhone

iPadAndroid

Other

OutlookMail

CLIENT SHAREiPhone 25%

Outlook 17

iPad 12

Android 9

Mac Mail 9

Outlook.com 6

Yahoo! 6

Gmail 3

Other 10

Email is Mobile

Smartphones

and tablets

account for

at least a

46% share of

email clients

Desktop Phone/Tablet

?

Responsive Design

• Layout changes its formatting in response to the size of the screen it is being displayed on

• Can be grafted on to existing assets

• What you need for Salsa

Responsive Design Example

Making Salsa Responsive

• Your users are on mobile

• Don’t be Apple

• Just add CSS to your email & web templates

• Do it now

Making Salsa Responsive

• [screen shot of salsa admin: asset upload page]

Making Salsa Responsive

• [screen shot of salsa admin: template editor page]

Mobile Email Templates

• Just like working with web pages

• Add CSS with media queries

• Set max-widths

• Adjust font sizes

Mobile Email CSS

http://cshp.co/PuVgOG

@media only screen and (max-device-width: 620px) { table[id="outer"] { max-width: 600px; width: 100%; } img[id="header"] { max-width: 600px; width: 100%; height: auto; } td[class="content"] { font-size: 18px; }}

Mobile Email Templates

• Screenshot of KAF

Mobile Salsa Pages

1. Write CSS for your template

2. Write CSS for the Salsa elements

3. Test

4. Watch your numbers go up

Making Step 2 Easier

• Use our new Salsa Mobilizr

• http://cshp.co/15hGxhP

• Open source CSS and JS

• Works with standard donation and advocacy forms

Mobile Donation Forms

Screenshot of FoE

Mobile Donation Forms

Screenshot of FoE

Mobile Donation Forms

Screenshot of FSFP

Remember

• Your supporters are on mobile

• You need to make it easy on them

• Cover the entire engagement path– Email– Landing page/form

–Confirmation– Follow-up

For more…

• Responsive email CSS: http://cshp.co/PuVgOG

• Salsa Mobilizr: http://cshp.co/15hGxhP

• Find us in the Geek Lab

• hello@cornershopcreative.com