Salsa on the Go: Think Mobile!

  • 204 views
Uploaded 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 …

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.

More in: Technology , Business
  • Full Name Full Name Comment goes here.
    Are you sure you want to
    Your message goes here
  • 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…
    Are you sure you want to
    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.
    Are you sure you want to
    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.
    Are you sure you want to
    Your message goes here
    Be the first to like this
No Downloads

Views

Total Views
204
On Slideshare
0
From Embeds
0
Number of Embeds
2

Actions

Shares
Downloads
1
Comments
3
Likes
0

Embeds 0

No embeds

Report content

Flagged as inappropriate Flag as inappropriate
Flag as inappropriate

Select your reason for flagging this presentation as inappropriate.

Cancel
    No notes for slide

Transcript

  • 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
  • 8. Responsive Design Example
  • 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. Making Salsa Responsive • [screen shot of salsa admin: asset upload page]
  • 11. Making Salsa Responsive • [screen shot of salsa admin: template editor page]
  • 12. Mobile Email Templates • Just like working with web pages • Add CSS with media queries • Set max-widths • Adjust font sizes
  • 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. Mobile Email Templates • Screenshot of KAF
  • 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. 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. Mobile Donation Forms Screenshot of FoE
  • 18. Mobile Donation Forms Screenshot of FoE
  • 19. Mobile Donation Forms Screenshot of FSFP
  • 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. For more… • Responsive email CSS: http://cshp.co/PuVgOG • Salsa Mobilizr: http://cshp.co/15hGxhP • Find us in the Geek Lab • hello@cornershopcreative.com