Make sure your Salsa emails and forms are accessible on portable devices by using responsive design techniques, which apply to both email templates and Salsa page templates. Plus, use the new open source Salsa Mobilizr to save time making your Salsa forms responsive.

1. Salsa on the Go:
Think Mobile
Making sure your Salsa emails and forms are
accessible on portable devices

2. About Us
We offer a wide range of affordable
services for nonprofits and small
businesses
•
•
•
•
Website design
Strategic planning
Campaign implementation
Using Salsa effectively

3. About You
• Developers? Campaign Managers?
• Have a smartphone?
• Use it for email?
• Use it for the web?

4. 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

5. Email is Mobile
CLIENT
iPhone
SHARE
Other
25%
Outlook
17
iPad
12
Android
9
Mac Mail
9
Outlook.com
6
Yahoo!
6
Gmail
3
Other
10
iPhone
Outlook
Mail
Android
iPad

6. Email is Mobile
Smartphones
and tablets
account for
at least a
46% share of
email clients
?
Desktop
Phone/Tablet

7. 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

10. Responsive Design Example

12. Making Salsa
Responsive
• Your users are on mobile
• Don’t be Apple
• Just add CSS to
your email & web
templates
• Do it now

13. Making Salsa Responsive
• [screen shot of salsa admin: asset upload
page]

14. Making Salsa Responsive
• [screen shot of salsa admin: template editor
page]

15. Mobile Email Templates
• Just like working with web pages
• Add CSS with media queries
• Set max-widths
• Adjust font sizes

16. Mobile Email CSS
@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;
}
}
http://cshp.co/PuVgOG

17. Mobile Email Templates
• Screenshot of KAF

21. Mobile Salsa Pages
1. Write CSS for your template
2. Write CSS for the Salsa elements
3. Test
4. Watch your numbers go up

22. 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

23. Mobile Donation Forms
Screenshot of FoE

25. Mobile Donation Forms
Screenshot of FoE

27. Mobile Donation Forms
Screenshot of FSFP

29. 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

30. For more…
• Responsive email CSS:
http://cshp.co/PuVgOG
• Salsa Mobilizr: http://cshp.co/15hGxhP
• Find us in the Geek Lab
• hello@cornershopcreative.com