Bulletproof Email: HTML5 and CSS3

html5-css3-header-690x362
“You can’t use HTML5 or CSS3 in email.”

Due to their “limited” support, this is a commonly-held notion throughout the email design industry. However, we’re calling it a complete myth.

While support certainly isn’t universal, many of the leading email clients support HTML5 and CSS3. In fact, about 50% of the total market and 3 out of the top 5 email clients support them. Support may be even bigger for your particular audience.

Continue reading “Bulletproof Email: HTML5 and CSS3″

Design Tools at Instagram

Screen Shot 2014-12-18 at 9.52.18 AM
Let’s face it, as designers, we waste a LOT of time on menial tasks. For us at Instagram, filling out a PSD or Sketch file requires a lot of manual labor. You know the process: make a rectangle in Photoshop, go to the web (in our case, instagram.com), find an image you want to use, drag it into Photoshop, resize and move it into place. Making a grid? Repeat that 15 times and try not to cry.

Continue reading “Design Tools at Instagram”

Everybody scrolls: Article from HUGE

scrolls
Evolve your design too quickly and you’ll leave your users behind. Design too slowly and your users will do the same to you. It’s crucial to keep design practices aligned with the way users really interact with digital products and interfaces. To help, Huge’s UX and research teams are collaborating to test conventional and emerging design and usability standards.

Continue reading “Everybody scrolls: Article from HUGE”

Decadent Hot Chocolate Mix

Here is how I’ve made hot chocolate for most of my life: heat some milk in a saucepan, add a bit of unsweetened cocoa and sugar and whisk. Form lumps. Be unable to break up lumps. Get frustrated, try again, this time slowly slowly slowly whisking milk into cocoa and sugar, hoping to form something of a cocoa roux. Heat mixture until steamy and drink merrily, trying to ignore faint background of chalkiness. Hooray for cocoa?

decadent-hot-chocolate-mix

Yield: Just under 1 3/4 cups mix, enough for 9 cups; packs up well in a 2-cup jar
Prep time: Seriously like 10 minutes

1/2 cup (100 grams) granulated sugar
1 tablespoon (8 grams) cornstarch
3 ounces (85 grams) semi- or bittersweet chocolate, roughly chopped
1/2 cup (40 grams) cocoa powder, any kind you like
1/4 teaspoon vanilla extract or the seeds from a tiny segment of fresh vanilla bean
1/8 teaspoon fine sea salt or 1/4 teaspoon kosher salt

Combine all ingredients in a food processor and blend until powdery. Don’t have a food processor? Chop or grate the chocolate until it is as fine as you can get it, and stir it into the remaining ingredients. Mixture keeps in an airtight container at room temperature for up to 2 months.

To use: Heat one cup of milk (coconut, almond or others would work here too) in a saucepan over medium heat until steamy. Add 3 tablespoons hot cocoa mix. Whisk over heat for another minute or two, until it begins to simmer and mix is completely dissolved. Pour into mug, top with mini-marshmallows or a dollop of whipped cream and hide somewhere nobody will make you share give it to someone you love.

HTML: sticky menus

When position:sticky was the new hotness, Filament Group came out with an excellent polyfill to give the Apple Safari experience to other browsers.

But since that time, sticky has had mixed fortunes. Apple still encourages it and Mozilla adopted it, but since the switch to the blink engine, Google Chrome has dropped it while they focus on squeezing scrolling performance from their render pipeline.
Meanwhile, IE doesn’t look likely to adopt it. With patchy support, you’d think it would die out, but I find more and more reasons to have this sort of behaviour.

Unfortunately the filament group polyfill was built for a specific user case. There’s no support for elements hitting the bottom of a container and sticking there, so more awkward use cases like a sticky sidebar are not possible.