Woody Chai - Yunxiang(Woody) Chai

Yunxiang(Woody) Chai

Sign in Subscribe

Woody Chai

Alternative Anchor Link for iOS Device

Email Development Featured

Alternative Anchor Link for iOS Device

Anchor link, aka. jump link. Usually used for jumping to a specific location on page. When you search on Google for a solution on anchor link in email, you probably will be directed to below posts. Tutorial: How to Add Anchor Links in Emails - Email Design Workshop Anchor Link

Ultimate Guide to Outlook Page Break Gaps

Outlook Featured

Ultimate Guide to Outlook Page Break Gaps

This is a guide that can help you understand the weird gaps ONLY in Outlook 2007 & 2010. Before we start, I strongly suggest you analyze your recipient list, see if it's really worth to fix those gaps. Because you are about to cut some images into two

Comma Risk in Sender Profile

Back to two days ago, we were testing new Sender Profile for our client on SFMC. We identified a bug in Sender Profile. You can call it comma risk or special character risk. The thing is if you only put comma, or only put special character in the Sender Profile,

Email Development

Using magic inline-block to align stacked dynamic height columns in mobile view

I run into a weird requirement last week that I have to bottom align 4 cells in 1 row in desktop design and 2 cells in 2 rows in mobile design. It's all because that each cell is having content with a dynamic generated unknown height by ESP.

Improve your code with Chrome Dev Tool - AOL Label Support

Email Development

Improve your code with Chrome Dev Tool - AOL Label Support

This week, I was working on a hamburger menu for a client and was trying to make it work also in AOL Webkit browsers. But I went into some problem that the AOL does not support for attribute when I was checking the FreshInbox for some CSS support look up.

Debug your email web client with Chrome dev tool - <style> tag

When I was writing this post about how to remove the unwanted gaps for Outlook.com, I think I should introduce some basic usage of the Chrome dev tool to help with figuring out some mystery of email web clients. And here I'm going to talk about the

Gap Under Image in Outlook.com and Office 365

Recent there was a hot discussion on Litmus community. Basically, you will always see a gap under each image like below. There are a lot of fixes to remove the unwanted gap. But I would like to go a little deep on why we are seeing these gaps. Click here

Watch out when using reverse stack in long copy email design

Note: When I move my blog to another server, I lost some images and links are not working. So I removed them. But the basic idea will remain the same. Feel free to reach out if you have any question. I ran into a render issue of reverse stacking two

Email Development

Why sometimes correct width matters in email development

I was asked to solve a render issue in Lotus Note 8/8.5. Well, the first thing come in my mind is that Lotus Note 8/8.5 is using IE 7 render engine. And then, the problem was I can't perfectly align the image to the

Email Development

Stack multi column list in responsive email

Recently I've run into a situation that need to stack a two column list. But actually the list is not a simple li element. In email, it's a table with a column of bullet and a column of content. And I need it to look like

Email Development

Background image won't show up until we click

It's been a busy week again. My apology that this solution should be posted earlier. OK. Before we start, please notice that This solution currently only applies to a fixed dimension background image. The problem is that when we are using the background solution provided by Stig'

Image-free triangle arrow for email development

It's been a while since last time I updated the blog. I've been really busy till this week. So I caught a chance to dig into some issue that I found when working in the email. One of the question is how can we make out

Weird Gap in Outlook 2007 and 2010

Before I start, I think most of you may wondering what kind of issue are you saying. Check the image below. (In order to protect client's data, I did a gaussian blur...) See this gap beside the RED ARROW? The reason I put such a long screenshot is

Translation and Subtitle work - Arnold Schwarzenegger's Motivational Speech

I was really inspired by Arnold's motivational speech. Ana I just did a search and found that there is no Chinese copy of this video. So I took some time and translated it with some subtitles. Thanks Xiaolu Xie for her English subtitles. Youtube Video: 中文视频 Please send