Inspiration: J.Crew’s Sleek, Editorial Design Stands Out Among Retail Emails
When J.Crew’s email arrived in my inbox, I was very impressed with how it stood out among typical retail emails. I usually find retail emails to be extremely promotional and that they typically include one large image with text over it—nothing too impressive. However, J.Crew’s email pushes the border on retail emails and does so with a bang!
Clean design and editorial content
I love the clean template and how nicely the email flows. I found myself scrolling down the email so I could check out the content—both pictures and text. As I stated earlier, most retail emails are extremely promotional and are solely trying to sell you on their products or entice you with promotions, but J.Crew does so in a much less subtle way.
This email read more like an informative newsletter or editorial piece, with tips about which Fall looks they love, how to wear tweed, and back-to-school styles for kids. While they are definitely highlighting their flat-rate and free shipping offer, they do so at the very bottom of the email so it isn’t too blatant.
Clear hierarchy benefits mobile viewing
This email also looks pretty great on a mobile device. While the text under each of the subheaders may be a little small, the images and subheaders stand out very clearly on the small screen of my iPhone:
Is there anything that isn’t mobile-friendly about this email? As Justine states in her post, “Anatomy of a Perfect Mobile Email,” some mobile operating systems don’t scale your email to fit the width of the screen, so the best mobile-friendly emails should be trimmed to between 320-550px wide. Because this email is 684px wide, subscribers might be forced to scroll left and right to view the entire width of the email on some mobile operating systems.
Another major area that left me scratching my head was J.Crew’s “mobile version” of the email. The very first line of text in their preheader (and consequently, their preview text in some email clients), asks subscribers to “View this email in a mobile device.” However, after doing so, they are brought to a text-only landing page:
Unfortunately, this landing page is less mobile-friendly than the actual HTML email. The text is extremely small and the links are definitely not touch-friendly. Rather than including a text-only mobile version of the email (which may have been totally appropriate for Blackberry users a few years ago), J.Crew might have considered a responsive design, or skipping a separate mobile version altogether, especially since they have a mobile-optimized website.
Opportunity: images off optimization
The email appeared entirely blank when I first opened it because an all-images design was used for the entire email. To make matters worse, all of the calls to action in the body of the email have the same ALT tag: Jcrew.com:
Without descriptive ALT tags, subscribers are unable to differentiate between the sections in the body of the email. Descriptive ALT tags would have solved this problem.
Suggestions brought to life
Another solution to this “images-off” problem would be to break each section of the email into two columns, placing images in one column and live text in another, so that text in the body of the email would be visible even with images off. To illustrate how this technique might work, we re-coded the first section of this email, separating the image on the right from the text at the left, along with adding descriptive ALT text for the remaining images.
Here’s what the optimized email looks like with images off:
And with images on:
While the trendy fonts and exact design elements aren’t always completely replicable in HTML, we can come pretty close!
Shopping turnoff: tons of disclaimer text
The footer of this email contains disclaimer information about the flat-rate and free shipping promotions which was EXTREMELY long. Instead of typing this out, I wonder if J.Crew should have had a link to it under the promotion. It’s kind of crazy that the disclaimer is about 3 times longer in the email that the actual promotion!
While I was excited to check out some new Fall fashions after reading this email, I felt a bit dissuaded by the mountain of disclaimers at the end.
What do you think of J.Crew’s email? What do you like and dislike about it? Is images-off optimization worthwhile? I’d love to hear your thoughts!
