886429 - [about:mozilla newsletter] Design review needed

Status: RESOLVED FIXED

(Marketing :: Design, task)

Description

[Jessilyn Davis]

Attachment: PDF of re-design

Hello!

Our about:mozilla editor, and email coder extraordinaire (both cc'ed) have come up with a great mobile-friendly, re-design of the old about:mozilla newsletter.

Please see attached PDF to see the design.

Can someone from Brand please review the template and make sure it looks okay style wise? (colors, fonts, etc.).

We might have to play a bit with the chosen fonts to make sure that they're email-friendly, but wanted to get your feedback on general layout and colors, sizes, etc.


Let us know what you think and if you have any questions.  There is not a psd file at present, but I do have a keynote file is that's helpful (will attach separately).

Timing: when you have a moment - sometime in the next few weeks. Not a P1, but would like to get it updated by mid-July if possible.


Thanks!

Jess

Comment 1

[Jessilyn Davis]

Attachment: Keynote file of about:mozilla redesign

Comment 2

[Jennifer Balaco]

Thanks for submitting this, Jess. I will make sure that it gets attention soon. 

Cheers, 
Jennifer

Comment 3

[John Slater]

Jess, could you post an example of our Firefox & You newsletter so we can have a side-by-side comparison? My sense is that there will be a bit of cleanup needed around fonts and other styles.

Comment 4

[Jessilyn Davis]

No prob - check out:

http://htmlpad.org/6-2013-firefoxAndYou-EN/


The PSD for the Firefox & You redesign can be found here: 
https://bugzilla.mozilla.org/show_bug.cgi?id=855533#c19

Comment 5

[John Slater]

Ty, can you review the file in comment #0 and offer any direction on stylistic changes that need to happen?

Comment 6

[Ty Flanagan]

Attachment: about:mozilla newsletter redesign

I made a few changes which use the Mozilla colors. The blue is titles are a bit of disconnect and is primarily used for URL links.

Here is the PSD for this design:

https://www.dropbox.com/s/vsfstvai26fuw57/aboutMozilla_Newsletter_redesign.psd.zip

Comment 7

[Jessilyn Davis]

Thanks Ty! This looks great!

There are just a few features that I think we'll need to tweak to make it mobile email friendly and easy to update each month:

1) The image across the top will need a way to be mobile friendly. I think the easiest way will be to have mobile css property to shrink the image. What does this image look like when it's shrunk to 380 px wide? Do the small red rectangles need to be wider?

2) The calendar is super cute...but will be super not fun to update each week/biweekly. Do you have a suggestion for a design that isn't locked into a specific month and dates for certain events? We'll also want to be sure that the date can be easily changed for the listing of events.

Thanks!

Comment 8

[Ty Flanagan]

Attachment: Calender - HTML

Hey Jess,

If the mobile size is 380px wide, we could point to a 2nd resized image for mobile vs using the 600px wide version for desktop.

With regards to the calendar, I have attached an HTML + CSS version which could be used. It would require a bit of time each month to setup, but I dont think it would take more than 5 minutes to modify.

Comment 9

[Yousef Alam [:yalam96] (use NEEDINFO)]

I'm not really a fan of that red/brown for the background of the title box. It would look great as a site, but I'm not sure if it would work as an email. That said, I'm not sure would would/can work.

The calendar looks great - I think we could make a template and some easily readable colour classes and that would make it as easy to change as possible. A suggestion would be to have the event names and locations aligned so it looks neater.

Comment 10

[Jessilyn Davis]

Heyo!

Yousef, in regards to the red/brown background of the header - I think it will be okay in email. 

I do recommend that the "mozilla" word should be white like the "about:" so it stands out more and doesn't get lost in shades of red. 

For the calendar, the HTML+CSS that Ty sent would work for a website, but all the styles have to be inline, and each individual block needs to have a set height and width that's also styled inline for it to work across email clients and browsers. It's a lot of repetitive code that will take a lot of time to edit, and will increase the size of the email too much for what it's worth (and bigger emails take more data to download, and slower times to view in places where internet isn't super fast).

Is there a more generic calendar section design we can play with? We can definitely test out the custom calendar and see if it's something that's easy to update and doesn't affect the email size too big, but I think we need a generic option. Including how we display the actual dates in the list.

Ty can you tackle a quick mockup of a generic calendar section?

Thanks!

Comment 11

[Ty Flanagan]

Hi Jess, 

Ill have something mocked up this Friday for you.

Comment 12

[Ty Flanagan]

Attachment: aboutMozilla_Newsletter_redesign_calendar.png

So I simplified the calendar to a basic list. This should be a fair bit easier to implement and will be better for a responsive layout

Comment 13

[Ty Flanagan]

Attachment: aboutMozilla_Newsletter_redesign_calendar_b.png

Sorry, the previous uploaded version contained the incorrect color options for the date/venue/locale

Comment 14

[Ty Flanagan]

Attachment: aboutMozilla_Newsletter_redesign_2.jpg

Heres an updated version of the newsletter incorporating the changes to the header and the updated version of the calendar/event list.

Comment 15

[Jessilyn Davis]

Thanks Ty! This looks great to me!

Jan and Yousef - are you cool with this redesign?

Comment 16

[Yousef Alam [:yalam96] (use NEEDINFO)]

Looks awesome - I'm happy with it.

Comment 17

[Jennifer Balaco]

It looks like this one is ready to be resolved. Please reopen if you need anything else. 

Cheers, 
Jennifer

Comment 18

[Jessilyn Davis]

Just need the PSD from Ty - Ty can you send when you get a moment?

Comment 19

[Ty Flanagan]

Attachment: aboutMozilla_Newsletter_redesign.psd.zip

Here is the PSD :)

Comment 20

[Jessilyn Davis]

Sweet! Thanks Ty!

Comment 21

[Jan Bambach [:Jan]]

I <3 it! Thank you so much. :)