easy responsive design for emails and pages in salsa

15
Easy Responsive Design for Emails and Pages in Salsa

Upload: tobias-evan-merritt

Post on 23-Dec-2015

217 views

Category:

Documents


1 download

TRANSCRIPT

Page 1: Easy Responsive Design for Emails and Pages in Salsa

Easy Responsive Design for Emails and Pages in Salsa

Page 2: Easy Responsive Design for Emails and Pages in Salsa

Communications Workers of AmericaCWA represents 700,000 workers in private and public sector employment in the United States, Canada and Puerto Rico in the following fields.

Telecommunications & Information Technology | Airline Industry | News Media | Broadcast & Cable Television | Education | Health Care & Public Service | Law Enforcement | Manufacturing | Other

Building a Movement to take on corporate power and restore our democracy.

Page 3: Easy Responsive Design for Emails and Pages in Salsa

CWA Email Recipientsmobile users over 50%

Page 4: Easy Responsive Design for Emails and Pages in Salsa

CWA - Top 10 Email ClientsJuly 17, 2014 eNewsletter Readers

1. Apple iPhone 31%

2. Gmail 13%

3. Apple iPad 12%

4. Yahoo! Mail 8%

5. Outlook 7%

6. Google Android 7%

7. Web version 6%

8. Outlook.com 6%

9. Apple Mail 5%

10. Windows Live Mail 2%

Page 5: Easy Responsive Design for Emails and Pages in Salsa

CWA

1. Apple iPhone 31%

2. Gmail 13%

3. Apple iPad 12%

4. Yahoo! Mail 8%

5. Outlook 7%

6. Google Android 7%

7. Web version 6%

8. Outlook.com 6%

9. Apple Mail 5%

10. Windows Live Mail 2%

Page 6: Easy Responsive Design for Emails and Pages in Salsa

Gmail via Firefox iPhone 5

Page 7: Easy Responsive Design for Emails and Pages in Salsa

iPad Retina Android 2.3

Page 8: Easy Responsive Design for Emails and Pages in Salsa

Yahoo Mail (Chrome) Android 4.2

Page 9: Easy Responsive Design for Emails and Pages in Salsa

Email Template Foundationhttps://github.com/philwareham/responsive-email

Page 10: Easy Responsive Design for Emails and Pages in Salsa

Add Class to Image• Add it in the HTML (Source code): <img class="full" src="" alt="" />• Or, use the WYSIWYG editor:

1. Click the insert image icon2. Click on the Advanced tab3. Add the word full or half to the Stylesheet Classes field.

Note: if it’s an image that is less than 320px wide, you don’t need to give it a class.

Page 11: Easy Responsive Design for Emails and Pages in Salsa

Email Template: Make It Yours

1. Add banner image – Optional: add link to website

2. Edit the place-holder content3. Edit the footer contact information4. Upload social image icons to your Salsa chapter and

link to them5. Edit the social links6. Edit the disclaimer and unsubscribe info.

Page 12: Easy Responsive Design for Emails and Pages in Salsa

Note about Simple Email ToolThe inline CSS is entered into the content of any email blast that uses this template. If you have any users that use Salsa’s Simple Email tool, you need to remove the Inline CSS from the template.

Explanation: The simple email tool automatically generates the text version of an email, so the text version would list the css with the content of the message.

Page 13: Easy Responsive Design for Emails and Pages in Salsa

Website Usage

(cwa-union.org) mobile/tablet

users over 36%

iPhone/iPad accounts for over 56% of mobile use

Page 14: Easy Responsive Design for Emails and Pages in Salsa

Page Template: Make It Yours

1. Add banner image – Optional: add link to website

2. Edit the footer

Page 15: Easy Responsive Design for Emails and Pages in Salsa

Have fun

files.cwa-union.org/salsa

[email protected]

cwa-union.org