I recently had the opportunity to revamp an email template that is exposed to about 5-6 million users per month. Getting it to work across all email clients was a number one priority. There are lots of helpful articles out there that offer best practices and tips so I have included them below for reference. In the end, keep it simple and make sure the content is quality, otherwise it won’t matter how good your template looks. I wanted a personal reference for future projects that covered all the issues I came across and overcame, so here they are:
CSS Box-Sizing
Box-sizing has been my most recent CSS “go-to” for solving the issues of the CSS box-model, specifically when working with responsive design and percentage based widths, padding and margins. While it requires some pre-fixing, it is totally worth it! Also, the browser support is pretty solid (http://caniuse.com/#search=box-sizing).
Designers need to be: Empathic, Assumption Rejecting, Storytelling Unicorns
An Event Apart, Seattle 2013 contained a star studded line up with talks designed to inspire. I left feeling enlightened by the prospect of what the future of experience design has in a multi-device landscape. I also left feeling humbled by the monumental task that lays ahead. There is a tremendous opportunity out their for our industry, not only capitalize on, but shape. We can thank the “disruptive innovation” of these little growing screens in our pockets for this demand and I couldn’t be happier.
Equal Height Columns
When working with dynamic content and fluid layouts – which should be every project – you will inevitably run into a situation where you need the background style of a sidebar to appear the same height as the main content column. If only it were as simple as adding height=100% – why does this exist in the first place? There are many articles out there that offer various CSS hack solutions (I’ve listed a few below), and many may work for your particular situation, however, in my experience using a simply line of jQuery solves this problem very efficiently.
Understanding Radio Buttons & Labels
Forms are probably one of the most common elements on the web, and boy can they be a bitch to get right! One specific element that always frustrated me was working with radio buttons. Below you will find the HTML and CSS necessary to create a list of radio buttons with labels that align.
The HTML
<ul>
<li><input type="radio" class="radio" name="radio-buttons" value="1" id="one" />
<label for="one">When the cursor hovers over the text you can trigger the radio buttons</label></li>
<li><input type="radio" class="radio" name="radio-buttons" value="2" id="two" />
<label for="two">When the cursor hovers over the text you can trigger the radio buttons</label></li>
<li><input type="radio" class="radio" name="radio-buttons" value="3" id="three" selected="selected"/>
<label for="three">When the cursor hovers over the text you can trigger the radio buttons</label></li>
</ul>
The CSS
ul{
list-style-type:none;
padding:0;
margin:0;
}
ul:after, li:after {
clear: both;
}
ul:before, ul:after, li:before, li:after{
content: " ";
display: table;
}
li{
margin:5px 0;
}
label {
float:left;
display:block; p
padding-left:1em;
}
input[type=radio], input.radio {
float:left;
margin:3px 0 0 0;
}
The Logic
Radio buttons have a tendency to look and behave differently in every browser and we are not offered the flexibility to style them through CSS. It is possible to customize radio buttons, but it involves some sketchy graphic sprite swapping and excessive Javascript. In my experience the luxury of having a customized radio button does not outweigh the workaround code and ensuing headache. Therefore, I recommend accepting the style that the browser offers and make adjustments on the margin and padding (your developers will thank you).
The code for adding a radio button with a label aligned to its right is pretty straight forward. There are a few ways to do this, but this is my preferred method. First off, I have put my radio buttons and labels in an unordered list since I want them to appear stacked, one on top of the other. Then I add my input radio button element followed by my label element within the li element. In order to have them align side by side I have applied “float:left” to the label and input elements. It will be necessary to tweak the text and radio button alignment with the targeted padding and margin. Finally, If you want the radio button to be clickable when you “click” on the label as well as the radio button, make sure that the “for” attribute matches the corresponding “id” attribute in the input element.
Radio buttons typically offer the user a group of options based on a category. Therefore, it is necessary to include the same “name” attribute in each input element. Otherwise the user will be able to select multiple radio buttons and that functionality is made for checkboxes. Hopefully that has been helpful. Good luck and remember to test!