Our process is much the same as this. Would second the fact that Sketch is a good, lightweight tool for design.
Also, sharing the progress early and often has been key for us in ensuring we are meeting expectations and gathering feedback from all team members.
Hi Daniel. I actually preferred Brackets for coding, but the only snag was that I struggled to set up custom HTML snippets in Brackets.
I wanted to set up custom HTML snippets for my common table structures (1 column, 2 column, spacers etc.) and be able to insert my snippets using keyboard shortcuts. I Couldn't set this up in Brackets, but found a way to do it in Sublime!
And with Sketch I like to use shared styles and symbols as it helps with consistency. Plus, most of the designers here have adopted Sketch so it makes collaboration easier. Good point about being able to open Sketch files though! Had a few issues sharing with external teams...
I like to use Sketch for design, the shared styles and Symbols feature help to make consistent designs.
Sublime text for coding, I have custom snippets set up for common patterns (tables, spacers, images) with their own tab triggers
Interested to know if anyone uses SASS as part of their workflow at all?
Hi Alan, I think that you can sort this by setting the
line-height on the
<td> that contains your button text so that it matches the height (e.g. 41px in this instance).
Here is the code (I can never get a code block to work properly on this discussion board!):
<tr> <td width="180" class="" align="left" height="41" style="height:31px; mso-line-height-rule: exactly;"> <table width="180" border="0" cellpadding="0" cellspacing="0" style="border-collapse: collapse;"> <tr> <td width="16" height="41" align="left" bgcolor="#f63c48"><img src="http://image.nationwide-communications.co.uk/lib/fe9915737560007a76/m/4/ag-red-button-left.png" width="16" height="41" border="0" style="display:block; width:16px; height:41px;" alt=""></td> <td width="137" height="41" align="left" valign="middle" bgcolor="#f63c48" style="font-size: 16px; font-family:'Arial', sans-serif; line-height: 41px; color: #ffffff; font-weight: normal; text-align:center; vertical-align: middle; mso-line-height-rule: exactly; display: block; background-color: #f63c48; padding: 0 0 0 0;"><a href="#" style="color:#ffffff; text-decoration:none;" target="_blank"><span style="color:#FFFFFF; font-size:16px; text-decoration: none; vertical-align: middle; text-align: center;">Find out more</span></a></td> <td height="41" width="27" align="left"><a href="#" style="color:#ffffff; text-decoration:none;" target="_blank"><img src="http://image.nationwide-communications.co.uk/lib/fe9915737560007a76/m/4/ag-red-button-right.png" width="27" height="41" border="0" style="display:block; width:27px; height:41px;" alt=""></a></td> </tr> </table> </td> </tr>
Just to add to Kathleen's <th> solution, if you are going to put any text inside the <th> then we noticed some email clients will make your text BOLD by default.
BOLD is the default style for text within <th> (table header) so you may need to set
font-weight:normal as an inline style to prevent it.
Hi Yulia, welcome :-)
They certainly do look like they could be utility classes, for the purpose of applying CSS styles to blocks of content (images, sections, text areas, hero). This is how classes are typically used within HTML email.
If they have no styles then it could be that the email designer/developer has used the class name to simply label (or name) a section within the email for ease of reference - and to make navigating the code easier. I know that some people prefer this over HTML commenting.
No, it isn't significant in this context. You can create a table with or without the tbody tag. It doesn't alter the way that your table displays (as far as Im aware!).
It's purpose is to give semantic meaning to the table by breaking up thead & tbody - example from W3S:
<table> <thead> <tr> <th>Month</th> <th>Savings</th> </tr> </thead> <tbody> <tr> <td>January</td> <td>$100</td> </tr> <tr> <td>February</td> <td>$80</td> </tr> </tbody> </table>
Edit: sorry about code formatting, struggling to figure out how to post a properly indented code block!