Implement designs for email template

[ryanfchase]

Overview

Design team has created an email template design and now we need to implement it for our Contact Page emails.

Action Items

• In the 311-Data repo, create a new directory: 311-data/templates
• Create a new file: 311-data/templates/contact-us.html
• Implement the referenced design
  • contain the work within contact-us.html, do not use external style sheets (see R1)
• Send a test email with using the Send HTML In Gmail plugin (see R2)
• Upload a screenshot into the Screenshot after proposed changes section of this post

Resources/Instructions

• R1: How to send html emails in Gmail blog post
• R2: Chrome Plugin for embedding HTML in emails: link to chrome web store

Figma Info

• Figma design file link
• Related design ticket: Create designs for email template #1763

Screenshot before proposed changes

n/a

Screenshot after proposed changes


[ryanfchase]

Ready to be picked up

[Brandoncyu]

Pull request has been opened: #1832

[ryanfchase]

@Brandoncyu I've provided a review with request for a small change to the asset URLs.

Also, notes on ticket management:

1. When beginning work on the ticket, please move from Prioritized Backlog to In Progress.
2. After completing your work, while you're waiting for review, move the ticket to In Review.

Thanks Brandon!

[ryanfchase]

@Joy-Truex @allisonjeon can we get a review on the dev's implementation? A screenshot is available here:

Details

I'm wondering if its worth coming up with a system for design leads to review dev's implementations before it gets merged. Perhaps we can talk about this tonight. Maybe a process for dropping screenshots into the Figma so design lead can quickly inspect and compare it to the original designs.

[ryanfchase]

Moving to In Review while waiting for design lead to have a look.

[Joy-Truex]

Here are my notes:

• Please ensure the text has these specifications:

Screenshot

• please ensure the linkedin is hyperlinked to: https://www.linkedin.com/company/hack-for-la/
• perhaps i can't tell from the screenshot but please if possible confirm the three dots above the logo are vector images with the following specifications

Screenshot

TY!

[Brandoncyu]

@Joy-Truex wanted to ask what a "hug" is? And if you have any instruction for inserting this into HTML?

[Joy-Truex]

@Brandoncyu basically it means the object should resize on a larger/smaller device size not just stay static.

[Brandoncyu]

I have added the new dots:

[Joy-Truex]

Great! are you able to update the font to the specifications here?

[Brandoncyu]

just did:

[ryanfchase]

Thanks all. I've approved the PR, I believe it satisfies requests made during QA.

[Joy-Truex]

Can you ensure the font is Roboto? It looks like it may be times new roman?

[Brandoncyu]

It is Roboto:

[Joy-Truex]

Will it show up differently in the email than it does in this screenshot? Roboto is a sans serif font and the font in the screenshot is serif.
Sorry if I'm missing something, ty!

[Brandoncyu]

@ryanfchase can you confirm?

[ryanfchase]

Good catch @Joy-Truex, and indeed @Brandoncyu is specifying it correctly in the code. However, it seems that we cannot use web fonts in our emails. At least, according to the guide I attached. I think we'll need to pick from the list that the Gmail text editor allows.

List of available fonts

• Sans Serif (Arial)
• Serif (Times New Roman)
• Fixed Width (monospace)
• Wide (Arial Black)
• Narrow (Arial Narrow)
• Comic Sans MS
• Garamond
• Tahoma
• Trebuchet MS
• Verdana

Screenshot of "No Web Fonts"

[Joy-Truex]

Ahhh okay that explains it.

Please proceed with Sans Serif (Arial)

(updated with a comment in the original ticket)

thank you both!

[Brandoncyu]

Changed has been made.

[Brandoncyu]