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 p...
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 th...
Email is Mobile
CLIENT
iPhone

SHARE

Other

25%

Outlook

17

iPad

12

Android

9

Mac Mail

9

Outlook.com

6

Yahoo!

...
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 ...
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 n...
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 size...
Mobile Email CSS
@media only screen and (max-device-width: 620px) {
table[id="outer"] {
max-width: 600px;
width: 100%;
}
i...
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 ...
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
– L...
For more…
• Responsive email CSS:
http://cshp.co/PuVgOG
• Salsa Mobilizr: http://cshp.co/15hGxhP
• Find us in the Geek Lab...
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Salsa on the Go: Think Mobile!
Upcoming SlideShare
Loading in …5
×

Salsa on the Go: Think Mobile!

703 views

Published on

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.

Published in: Technology, Business
3 Comments
0 Likes
Statistics
Notes
  • interesting — and thanks for the response! I'll give that a shot. Do you know if that applies to meta tags too? (e.g. , etc?)

    ETA: Follow-up to anyone who stumbles upon this: the 'meta' tags inside the head were what was causing the entire contents of the 'head' element to be stripped out. When I removed those, the 'style' element remained intact. I still haven't found a way to preserve 'meta' tags, so we lose the benefit os such attributes as 'viewport', but it's better than nothing…
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Hi Kerri: The good news is that CSS styles don't have to be within the element, you can put them atop the and it should be okay.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • I came upon your slideshare while googling after frustration working with SALSA email. I see on slide 14 some code very similar to what I am attempting to create in SALSA to make our emails responsive, however, upon saving, SALSA consistently strips out all the elements between the head tag (meta tags and styles). Have you (and how) managed to save templates that have retained these crucial bits of code? Even SALSA documentation states that it strips these out because they are 'unnecessary' in email.
       Reply 
    Are you sure you want to  Yes  No
    Your message goes here
  • Be the first to like this

No Downloads
Views
Total views
703
On SlideShare
0
From Embeds
0
Number of Embeds
45
Actions
Shares
0
Downloads
3
Comments
3
Likes
0
Embeds 0
No embeds

No notes for slide

Salsa on the Go: Think Mobile!

  1. 1. Salsa on the Go: Think Mobile Making sure your Salsa emails and forms are accessible on portable devices
  2. 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. 3. About You • Developers? Campaign Managers? • Have a smartphone? • Use it for email? • Use it for the web?
  4. 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. 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. 6. Email is Mobile Smartphones and tablets account for at least a 46% share of email clients ? Desktop Phone/Tablet
  7. 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
  8. 8. Responsive Design Example
  9. 9. Making Salsa Responsive • Your users are on mobile • Don’t be Apple • Just add CSS to your email & web templates • Do it now
  10. 10. Making Salsa Responsive • [screen shot of salsa admin: asset upload page]
  11. 11. Making Salsa Responsive • [screen shot of salsa admin: template editor page]
  12. 12. Mobile Email Templates • Just like working with web pages • Add CSS with media queries • Set max-widths • Adjust font sizes
  13. 13. 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
  14. 14. Mobile Email Templates • Screenshot of KAF
  15. 15. Mobile Salsa Pages 1. Write CSS for your template 2. Write CSS for the Salsa elements 3. Test 4. Watch your numbers go up
  16. 16. 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
  17. 17. Mobile Donation Forms Screenshot of FoE
  18. 18. Mobile Donation Forms Screenshot of FoE
  19. 19. Mobile Donation Forms Screenshot of FSFP
  20. 20. 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
  21. 21. For more… • Responsive email CSS: http://cshp.co/PuVgOG • Salsa Mobilizr: http://cshp.co/15hGxhP • Find us in the Geek Lab • hello@cornershopcreative.com

×