854724 - Slice & make responsive: Student Reps Template

Status: RESOLVED FIXED

(www.mozilla.org :: Newsletters, defect, P2)

Description

[Jessilyn Davis]

Attachment: Student Reps PSD

We have a new email template design that needs to be sliced.

We're going to try something a bit different this time with the email coding so that our new templates are not just mobile friendly - but mobile responsive.

Please see attached PSD for template.

Please see attached example email templates that are optimized for mobile responsiveness and other email goodness.

I'm personally in uncharted territory with coding emails for mobile responsiveness across inboxes/clients/devices. Please advise if you've got people up to the challenge/skillset, or if we need to look for contractors with this specific experience.

One thing to note: please hard-code any/all text & table special effects that can be hard-coded. The less images - the better.


Timeline: Due April 5th*

Please let me know if you have any questions and thanks!

Jess


*If this date isn't possible, please let me know a reasonable timeline. We want to carryover this code & design for other newsletters as soon as possible (ie Firefox & You)

Comment 1

[Jessilyn Davis]

Attachment: Mozilla Foundation's Mobile responsive design HTML

Comment 2

[Jessilyn Davis]

Attachment: Mobile template example HTML

Comment 3

[Jessilyn Davis]

Attachment: Hidden Image + Intro text code example (pretty neat)

Comment 4

[Jessilyn Davis]

If possible, it would be great to have this code no later than 4/23 so that I can re-brand it for the May Firefox & You newsletter.

Please let me know if 4/23 deadline is doable.

Thanks!

Jess

Comment 5

[Jessilyn Davis]

Hey - just wanted to check in on timing. Anyway this can be ready by next week 4/23?

I'm banking on this as part of the Firefox & You redesign for the May newsletter: Bug 855533

Thanks!

Comment 6

[Mike Alexis [:malexis]]

Assigning over to Steven. Pretty straight forward but let us know if you have any questions. The whole Web prod team is in Toronto but checking bugzilla and email periodically.

Comment 7

[Steven Garrity [:sgarrity]]

(In reply to Jessilyn Davis from comment #5)
> Hey - just wanted to check in on timing. Anyway this can be ready by next
> week 4/23?

Yup - we'll have it for you in time. Thanks.

Comment 8

[Stephen DesRoches]

Attachment: Student Reps Template Markup

Jessilyn, attached are the files for the responsive email template. It has passed mailchimps inbox inspector so it should be ready to go. Let me know if you have any problems with it.

Comment 9

[Jessilyn Davis]

Thanks Stephen! :D

I only had a few problems with padding not working in some email inboxes and some of the fonts changing when they're wrapped in <p> and <a> tags. (The parent styling doesn't always hold true across email clients + browsers if the font style and size is missing from the inside tag. So you have to be super repetitive with the "style" attribute for nested tags.)

I should be able to make these changes pretty easily (add in the repetitive styles and come up with creative ways to ensure the spacing sticks instead of using padding styles).

Overall this looks fab! Thanks!