Welcome to the Salsa Blog

Make Your Salsa Actions Mobile-friendly with Responsive Design

by Jon Wheller, Powerthru Consulting
This was orginally posted on the Powerthru Consulting blog.

Does this sound at all familiar – you’re catching up on email on your favorite mobile device, and you see an urgent call for action asking you to sign a petition, send a message to Congress or make a donation.

You click on the link in the message and – sad trombone noise – you’re taken a page where you have to do all kinds of pinching and resizing to get the content to look right on your mobile screen. You quickly lose whatever inspiration you had upon reading the message and go back to checking out your friends Instagram feeds.

Here’s some amazing stats (from EmailMonday): Mobile email will account for 15 to 65% of email opens, and more email may be read these days on mobile devices than on desktop clients!

This was a very familiar theme to us here at PowerThru Consulting, and after having spent some time honing our responsive design skills, we decided to apply those skills to building responsive templates for our Salsa clients.

What is responsive design exactly? It is a web design and coding methodology to ensure that your web pages provide an optimal browsing experience for site visitors no matter what device they are on, from a 27” iMac with 2560 x 1440 pixel screen resolution to an original iPhone with 320×480 pixel screen resolution. You can learn more about best practices for responsive design on countless websites, but the basic approach is to write CSS code for your page that treat elements on the page in different ways based on the width of the browser that the page is being displayed on.

You can see this in action on our new responsive templates for USAction. Check out examples of a petition-style Salsa action at http://tinyurl.com/pmd82qo or a targeted action style at http://tinyurl.com/q6wkcxo. To see the responsive goodness you can either bring those pages up on different devices (desktop, tablet, phone – remember to check them out in both portrait and landscape view!) or just slowly make your desktop browser window narrower to see the effect as you get to different common screen resolutions. You’ll notice we added some nifty features to the templates, such as adjusting whether the petition message shows up to the right of or above signers contact information – or not at all for phone-resolution view – whether you get a longer introductory message and image on the desktop version or a much shorter intro and no image on the phone version, where screen-space is a premium and you want people to get directly to the form fields with minimal scrolling, and whether the targeted action shows up in three, two or one-column format depending on screen width.

So that was our first foray into making the Salsa templates for USAction mobile-friendly. But then we went the extra mile by updating the templates for their Tell-a-Friend pages. After all, what good would it be if someone had a gorgeous, mobile-friendly page to sign a petition on, and then was taken to a really mobile-unfriendly page where they were asked to send a message to their friends on Facebook, Twitter or via email to ask them to take action as well?

As you may know, PowerThru has built an improved Social Media Tell-a-friend package for Salsa that allows you to easily add Facebook and Twitter sharing to your Tell-a-friend pages in Salsa — which by default just includes the ability to spread the word through email. So we took our existing code and updated it by creating a couple of new responsive layouts. You can see the final result here: http://tinyurl.com/ndlqzsn. Make sure you check it out in both desktop and mobile devices, as the page layout and functionality radically changes as you go from a desktop view with lots of real estate to a mobile layout.

But just like with the old ginzu knife commercials, just wait, ’cause there’s more! Our original Tell-a-friend page template for USAction had a rather inelegant way of asking people to make a donation, which we wanted to improve on. So we added some new fields to the Social Media Tell-a-friend package to allow you to define a donation page and donation text that would be associated with a Tell-a-friend page. Read the pithy blurb encouraging you to donate, select an amount you’d like to give and click “donate” and you’re taken to a donate page with that amount automatically selected. How did we do that? Well, read our upcoming blog post about our “intelligent ask donate pages” and you’ll learn all about it!

Want some responsive goodness for your Salsa templates? Just give us a holler and we’ll talk about hooking you up. Contact PowerThru today!

Topics: Advocacy