This project was a group effort..
Brown’s is a mobile responsive savvy client, so we wanted to make sure they had responsive email solutions. Travis designed the email, and I converted it to be responsive on a mobile device.
Achieving the mobile navigation was the most difficult step. Two navs needed to be created, a top nav for desktop view and a bottom nav for mobile view. Hiding the bottom nav took a bit of force. On a website, you would just use display:none, which works for hiding the top nav on a mobile phone. However, display:none doesn’t work in all inboxes, particularly gmail.
It seems like overkill, but these styles need to be applied to all tables and cells in the bottom nav to ensure it will be hidden on a desktop in all inboxes:
width:0; overflow:hidden; display:none; float:left;
Once that is working, you can simply override the style with css !important on the mobile view. Works like a charm, but it can be a pain in the ass.
listrak:
Travis Buck
When creating a responsive design it’s important to consider the limited amount of space you have to work with. Take this email from Browns for example. When viewed on a mobile device the navigation is shifted to the bottom and becomes stacked.
You may be thinking why on earth…
Here is another mobile responsive email series. I posted a responsive email last night that had a lot of great feedback, so I decided to post another one.
Below or some screen shots. Here are two live examples in html:
http://tinyurl.com/azxu3c2
http://tinyurl.com/bdoagwy
One of the arguments against responsive emails that I received was whether it rendered consistently across browsers and different email inboxes. The main reason in question was the css needed to make the email responsive. Best practice for email design is to use old-school html table structure. The only css used to create the desktop version are inline styles, as styles in the head do not work in all inboxes. These inline styles are simply text and cell styles, so rendering works across the board!
To achieve the responsiveness for mobile, classes are assigned to tables and cells. Styles can be added to the head of the html document in a media query. Those styles will be applied only when the email is viewed on a device at the size the media query calls for.
Since best practice for email design is to keep the width 700px or less, designing for multiple devices is mostly unnecessary. An email designed for a desktop view at that size will render fine on all desktop screen sizes and most tablets. Tables are not as easy to work with as divs, so creating fluid templates is more of a challenge. This is why it’s easier to simply assign a media query to style the email to be responsive only for a mobile device.
View previous responsive email »
Recently designed this mobile responsive email. I love the design of the testimonials section and the mobile responsiveness of the products section. Hope you like!
I plan on posting more responsive email creatives soon and possibly some explanation of how it’s done.
Here is a live example in html: http://tinyurl.com/al2hbvf
View next responsive email »
I just finished developing a mobile responsive preference center form. Here are some things I learned, and some things I already knew:
- To get stared, use this code to apply your mobile styles:
@media only screen and (min-device-width : 320px) and (max-device-width : 480px), (max-width : 480px) {
- Remember to include viewport meta data. This will resize your content to the width of whatever device you’re using.
<meta name="viewport" content="width=device-width">
- Lastly, if you have any buttons on your form, use this css style to remove the mobile styling that is applied to the buttons on a phone.
input[type="button"], input[type="submit"], input[type="reset"] { -webkit-appearance: none; }
