Date post: | 26-Jun-2015 |
Category: |
Technology |
Upload: | drywallbmb |
View: | 272 times |
Download: | 0 times |
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