elojasNews - e-Commerce Sources

A round-up of eight inspiring email subscribe form designs

You have a gorgeous email design that looks great across most of the major clients. You've got the perfect subject line, a thoughtful A/B test in the works, but... No subscribers.

Often, we pay so much attention to the visual and technical beauty of email newsletters, that we overlook the subscribers part altogether. However, as anyone with a soft spot for stats knows, designing an email newsletter subscribe form to attract a maximum number of signups is just as involved as any campaign A/B test... If not more so. After all, with no subscribers, you have no campaigns.

In this round-up, we'll look at 8 standout-yet-simple email subscribe forms that have been crafted largely by our customers and discuss how each goes about making a great first-impression on potential subscribers. Hopefully you will find them as inspiring as we did!

Less is more #1: Super Funky Monkey

Signup form screenshot

First of all, lets start with Super Funky Monkey - an upcoming site for finding desktop wallpapers. What we find so gorgeous about this form is its absolute simplicity - the whole page is dedicated to finding out about their launch, a little about the site and that's it. There's no clutter, no scary product descriptions and the signup form itself is impossible to miss.

Less is more #2: TapPlace

Signup form screenshot

Same goes for TapPlace - an iPhone app which has been released since this screenshot was taken. The lack of detail here is almost a selling point - the less they tell, the more you want to know. According to a Smashing Magazine survey, 61% of designers use this minimized approach to sign-up form design - the central idea being that anything that doesn't help the user to complete the form, shouldn't be there at all.

Less is more #3: Luxylight

{title}

Finally in this category, we have Luxylight, an iPhone app that's currently under development. We love the use of glowing buttons, great use of type and modern, textured look to create an enticing signup form for a rather mysterious product...!

The downside of this zen minimalist approach is that it doesn't really let the subscriber know what they're in for. It's worth considering how to strike a balance between aesthetics and context (ie. that you're going to respect their privacy, how frequently you're going to email, what kind of stuff you're going to email), if only to steer clear of potential permission issues.

VaultPress: Who doesn't love mad-libs?

Signup form screenshot

Who can't feel a soft-spot for this playful signup form? Talking about striking a balance between aesthetics and context, this VaultPress piece gives you all the information you need as a potential subscriber, without being dry about it. Before you dismiss this approach as novelty, mad-libs forms have been shown to increase conversion by 25-40% - plus they can be a lot of fun to fill in!

Think you've seen this approach before? Huffduffer had a great shot at it, too.

The Incident: Adding video to increase signups

Signup form screenshot

Although the subscribe form may not be the star-attraction of this page, the video is certainly full of compelling reasons why you should sign up for The Incident's newsletter. In fact, one comparison by ABtests.com found that featuring a video could increase conversion by 81% - so next time you're in a design jam, perhaps you should change your focus from the form itself, to what's near it.

Flight of the Conchords: The most beautiful form in the room

Marry me, Jemaine!

Love them or hate them, lightbox-style forms like this one from Flight of the Conchords simply command attention, while not forcing users to navigate away from where the action is. We love the large, bold type, plus the complete lack of distractions. And Jemaine. Sigh.

Pixel Creation: Skip to the good stuff

Signup form screenshot

What's unique about Pixel Creation's site is the floating 'subscribe' tab on every page. Clicking on this tab scrolls the browser window smoothly to the footer of the site, where the signup form is located. It's a subtle visual cue on a site that doesn't assume that everyone will scroll to the bottom of each page. Yes yes, I know, we're guilty of this!

4 Pines Beer Club: Raising the glass to custom fields

Signup form screenshot

Finally, if you've seen our date-based custom fields, you may have already started thinking of some neat ways to use the 20 fields available to you. 4 Pines has made the most of at least 3 of them, by tastefully collecting date of birth, mobile and postcode/zip code details from their subscribers. Not only does this prevent 4 Pines from marketing alcohol to minors, but it also allows them to gather demographic information and run targeted campaigns based on age and location.

We hope that this round-up has provided some food for thought and a little inspiration when you're next designing a subscribe form. Attracting subscribers to your email newsletter is a central part of the game, after all! If you've got a favorite form or approach to collecting signups, please share it with us in the comments below.

Read more...

Magento Mobile Quick Start—Tomorow in our Summer Webinar Series

Magento Mobile is almost ready to hit the streets. Tomorrow’s webinar in our Summer Webinar Series is a Magento Mobile Quick Start and will demo the Admin Panel and app building process (spoiler: it’s really easy). 

Join us if you’re interested in being the first in your gang to see Magento Mobile in action. Webinar is Thursday August 19th, at 9AM Pacific time (GMT-7). Register to join on the Summer Webinar Series page. Space is limited, so register now!



FROM THE MAGENTO TWITTER FEED

RT @benmarks: Not a true #FF - but if you are involved with #magento the new KB is a must-read. http://tinyurl.com/magentokb

Follow Magento on Twitter »

NOW AVAILABLE

The Official Magento User Guide by Varien is here!

Get your eBook today »


View Source...
Author:kara

Plywood People and Making Ideas Happen

Last Friday we had the pleasure of sponsoring Plywood Presents "Making Ideas Happen." I was eager to attend and soak up the presence of some of our region's most creative folks.

View Source...
Author:Juliana

Unbounce Integration With MailChimp

Unbounce is “the world’s simplest DIY landing page platform.” That means they make it easy to create, publish and test custom landing pages. Custom landing pages are great for when you’re running a specific ad campaign or promotion and want to send traffic to a targeted page within your own site. Recently Unbounce announced an [...]

View Source...
Author:Amy

Email Showcase – Scoutmob’s San Francisco Launch

That "little quirk" may have something to do with how awesome I think this email from Scoutmob is, but I'm pretty sure I'd like it even without my unhealthy relationship to Full House. Their campaign is a great example of a fun way to get your subscribers excited about a launch.

View Source...
Author:Juliana

Code Emails For Social Sharing, Not Just Inbox Readability

Mashable reports that 75% of the news consumed online is shared from social networking sites or email. With that in mind, it’s more important than ever to code your emails for social sharing, not just readability in the inbox. Still not convinced? NPR recently surveyed its 1 million plus Facebook fans to ask the question: Do [...]

View Source...
Author:Amanda

Propel Youth Arts E-Zine

What really caught our eye with this campaign from Propel Youth Arts by Papercut Media was the navigation. The content split up into respective blocks that are linked from the menu to the left of the opening content. Easy to get back to the start too so you don't get lost. The bold blue colour helps the reader to distinguish the content areas. The iconography associated to each area is quite a nice touch too.

A couple of considerations for this template would be to look at using text for the navigation rather than images. As when images are disabled, it's not totally clear there is navigation available. Also, a permission reminder at the very top of the campaign wouldn't go amiss. Just to show who it's from and why, as the brands only noticeable if the images are enabled.

Overall though, a nice looking campaign that is easy to read and navigate.

Read more...

Background color and alignment issues in Windows Live Hotmail

Thanks to our friends at Emailcenter, we were recently alerted of an email alignment and background color rendering glitch in the new Windows Live Hotmail. Thanks to this issue, we're seeing email designs being narrowed down to the width of an enclosed table, which is duly making email newsletters look 'left-aligned'. Lets go into a bit of detail and show how you can prevent this from happening in your campaigns.

Bye, bye background colors

A common technique used to add background colors or images to an email newsletter is to wrap a table with all your content, with another table applying a background color like so:

<table width="100%" bgcolor="#f0f0e8">
   ...
   <table width="600" align="center">Your content here</table>
   ...
</table>

Sadly, what the new Windows Live Hotmail is doing is setting the email width as the maximum fixed width defined in your HTML code. This means that it's collapsing/ignoring the outer table (width="100%") and only showing the inner table (width="600"):

Hotmail alignment/bg issues

The side-effect of this is that the campaign now also looks left-aligned, thanks to the copious amount of white-space to the right.

Ouch... What's the fix?

In so much as you could set the fixed width of your inner table to something wider (eg. width="800"), this makes the email increasingly difficult to read on devices with small resolutions, such as smartphones and older PCs. Thankfully, Emailcenter came up with an ingenious fix, that simply involves adding the following code to the <head> section of your HTML email code:

<style type="text/css">

   .ReadMsgBody { width: 100%;}

   .ExternalClass {width: 100%;}

</style>

Like magic, your email newsletter is restored to all its glory:

Fixed!

With Hotmail accounting for over 16% of email client market share worldwide, it's simply worth adding this fix to keep your email rendering as close to what's intended as possible. Reassuringly, this snippet doesn't have any impact on how your email displays in all the other major email clients.

Many thanks to the team at Emailcenter for sharing this valuable tip with us, and thank you to Oye Modern for allowing us to demonstrate with their lovely newsletter. If you're seeing any other quirks in the new Windows Live Hotmail, please share them in the comments below.

Read more...

Page 9 of 21

You are here: Home