Upload
drywallbmb
View
272
Download
0
Tags:
Embed Size (px)
DESCRIPTION
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.
Citation preview
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