If you’e ever dealt with trying to make complex emails look good on every email client, you’ll know how big of a deal this is.
Big news email designers: Gmail announces that they will support responsive email design, as well as improved font styling and CSS for accessibility.
Read more at Litmus
Use flexbox to make tables responsive and flip columns with rows
David Bushell writes:
Four years ago I shared an idea to make tabular data responsive. Browser support was experimental and the workarounds were extremely hacky. I revisited the technique this week, cleaned it up, and I am pleased to say all modern browsers work perfectly.
Read more from dbushell.com
Bootstrap 4 is on its way and may help Bootstrap remain the king of CSS frameworks.
There are a ton of major changes to Bootstrap and it’s impossible to cover them all in detail here, so here are some of our favorite highlights:
– Improved grid system
– Dropped wells, thumbnails, and panels for cards
– Brand new customization options
– Dropped IE8 support and moved to rem and em units
– Improved documentation
Read about the details at Bootstrap Blog
With engagement down and confusion up, Facebook and others stop using hamburger menus
James Archer writes:
The hamburger menu is one of the more embarrassing design conventions of recent years, and it’s time to stop thinking of it as a default, unquestioned solution for mobile navigation.
Our team fell for it, too. We had reservations, of course, and talked through possible alternatives, but for about a year and a half it was the established industry convention for dealing with mobile navigation. Our clients were asking for it, everyone was talking about how great it was, and there wasn’t yet enough data to have clear answers one way or another. We launched a lot of sites that use hamburger menus. We did the best we could with what our industry knew at time.
However, the data’s in now. The hamburger menu doesn’t work well, and it’s time for everyone to move on. At this point, there aren’t many good excuses for using them in new site designs, and it very well may be worth revisiting older sites to see if they might perform better with an updated navigation structure.
Read more from the source: Deep Design
Facebook Developers explain how they include ~200 byte preview JPEG images in user profile JSON payload to speed up load times
Facebook profiles can be slow to download and display. This is especially true on low-connectivity or mobile networks, which often leave you staring at an empty gray box as you wait for images to download. This is a problem in developing markets such as India, where many people new to Facebook are primarily using 2G networks. Our engineering team took this on as a challenge: What could we design and build that would leave a much better first impression?
How a change in preview photos helped speed up profile and page loads by 30 percent.
Read more from the source: Facebook Code
The lessons I’ve learned for designing emails that look good on every device
- Campaign Monitor explains a lot of these ideas that I’ve discovered through my own email projects:
- Outlook respects widths only for table, tr, and td elements.
- Outlook handles padding only for td elements.
- You can add css targeted to Outlook using this block: <!–[if mso]><style>…</style><![endif]–>
- You can insert a <link> element to get custom Google Fonts; just be sure that you use an mso block to specify a fallback font for Outlook; otherwise it will fall back to Times New Roman.
- You can shrink content widths and images for iPhone Mail using media queries.
- Always use 6-character hex values for colors (not 3 characters).
- Lotus notes and Blackberry are lost causes.
- You’ll have to deal with a sub-optimal experience for Gmail for Android. It suffers from most of the limitations of web-based Gmail.
- Use Litmus.com for testing emails!
- It is complex but possible to send multi-column emails using <table align”…”>.
- Always provide a sensible plain-text mime part; Outlook and others use this plain text to construct the first-line preview. If not, you’ll see <doctype html><head>…
Read the guide at campaignmonitor.com
Other helpful resources:
http://templates.mailchimp.com/development/css/client-specific-styles/ http://templates.mailchimp.com/development/css/reset-styles/ http://templates.mailchimp.com/development/css/outlook-conditional-css/