Email Marketing Tip #25: Design Above the Fold


“Above the Fold” is commonly defined as the part of an email that is visible to subscribers without them having to scroll to see more.  This is also often referred to as the “Preview Pane” area.  It’s important to keep key elements of your email above the fold.  These key elements should include your call-to-action, primary subject matter, logo, pre-header, and if you’re sending a newsletter, your table of contents.  Having your call-to-action above the fold gives your email a higher chance of click-throughs.  If someone has to scroll and search for the call-to-action they may end up closing your email before taking any action at all!  




Cookies by Design, the original cookie bouquet company, use email as an important piece of their marketing mix. When they started struggling with stale click rates and engagement, they wanted to do something about it. They engaged WhatCounts’ Strategic Services team to help figure out why, and fix it.

Focus on Mobile

The WhatCounts team focused on a template update that showcased the variety of sweets that Cookies by Design offers, which provided readers ample opportunity to click through. Most importantly, to capture a growing mobile readership, the focus was on creating a template optimized for the mobile viewing experience, incorporating media queries and design elements ideal for preview panes.

Testing a New Recipe

The approach with the old template needed to be updated because it was an image-heavy design that rendered the email basically blank when images are turned off, which is a default setting for most audiences that use top email clients to view their email in webmail browsers (Gmail, Hotmail, AOL, etc.). On top of that, the old template simply did not scale well to mobile small-screen size.

Old template:
CBD Pictures

Images off:
CBD Pictures

The Strategic Services team started by creating a wireframe for the new template that laid out the most important elements for a template that would scale beautifully to mobile while driving subscribers to engage:

  • Minimum font size of 14 pixels
  • All product and title images are text
  • Buttons are coded to be bullet-proof
  • Always link main offer title, image, product image title text and buttons
  • Visually demonstrate the email length through use of visual line or element on left that encourages user to scroll down to see rest of email
  • Keep main call-to-action within the top 320×260 pixels of the email

And, of course, testing of offer placement and order was strongly encouraged!

Mixing Up the Batter

Once the new promotional template strategy was finalized, the Creative and Campaign Production teams at WhatCounts designed and coded a new, flexible template using a responsive design that Cookies by Design can easily update with new color schemes, images, and themes, based on what’s current: an upcoming holiday, the time of year, and the latest products. A ‘scroll for more’ sidebar on the left shows mobile users there’s more below the first screen, so they know to keep going for more cookie choices. The main calls-to-action are above the fold, and through media queries, the email renders optimally based on what device you’re using.

Responsive design, webmail:
CBD Pictures

Responsive design, mobile:
CBD Pictures

Let Them Eat Cookies!

Cookies by Design launched the new template just in time for Boss’s Week – so bosses, be on the lookout for a cookie surprise next week, because the new template strategy looks to be working. The new template just went out, so we expect numbers to get even better, but the initial results are excellent.Compared to the old template, click rates have increased 75%, and click-to-open rates have gone up 145%. Open rates have gone up 35%.

With subscribers eating up the new mobile-optimized template, we are excited to help Cookies by Design roll in the dough! Is all this cookie talk making you hungry, too? Sign up to receive your CookiEmail here.

Karissa Lew
Senior Analyst – Strategic Services, WhatCounts