The Blog

Fun with Outlook 2016

Alas and alack, MS Outlook 2016 continues the trend of of being awful at rendering CSS and HTML for emails. Here are some great tips for coding to (or around) 2016's particular set of rendering bugs

Fun with Microsoft Outlook HTML Email

Anyone who has had the "pleasure" of designing email has probably come to one very poignant conclusion: MS Outlook is terrible at rendering CSS and HTML for emails. The reason for this is that, starting with Outlook 2007, Microsoft thought it would be a reall great idea to stop rendering HTML email with the Internet Explorer engine, and instead render it with the MS Word rendering engine. Yes, you read that correctly: Word handles HTML and CSS for any emails in Outlook.

jQuery Fallback for HTML5 Placeholder Attribute

I love HTML5 and all its wonderful, new little attributes that make the life of the developer easier and more enjoyable. For example, the placholder attribute, which you can use on text input fields in forms. Why is it great? Because it allows you to place a label inside the form that automatically disappears when the user starts typing text in it. Before HTML5, everyone was doing this, yes, but you had to include javascript to make it work. Not so with HTML5! Now the placeholder attribute has all that UX goodness for you, right in the browser, no js necessary.

Cheat Sheet for Special HTML Entities

Came across this great cheat sheet listing many of the special HTML characters (or glyphs) we, as web developers, come across from time to time. In addition to listing the the HTML code, the chart also lists the numeric code; a description of the character; the HEX code; the ISO in CSS content (for use with pseudo-selectors like :before and :after); and the Octal (I'll be honest, I've never had to use this one before). All in all, a super-handy reference sheet to have around.

CSS: Background Images for Hi-Resolution Displays (like Apple's Retina)

I ran into a task today that led me to wonder about the best approach to create and implement CSS background images for hi-resolution displays like those found on more and more mobile phones and tablets. Hi-res displays, like those phone on the iPhone, iPad, Kindle HD, and the latest Motorola Droid and Samsung Galaxy phones, are capable of rendering stunning, sharp images—but only if you supply them through your Website or app.

Prevent Long URL's From Breaking Your Layout

It has become increasingly important to make sure your layout doesn't break when viewing your Website on a phone. So what do you do when, in Android or Google Chrome, you notice that your layout is blowing out because of an especially long word (or line of unbroken text, like a URL)?

Print CSS: page-break-inside

Have you ever tried to print a web page from your browser and found some crucial piece of content is being cut in half at the page break? There's a very easy way to fix this using CSS for print.

Tags: 

Pages