Wild Apricot Blog

View: Tags | Archives

Wild Apricot's New HTML Email Templates and Mobile Preview Feature

Lori Halley 04 June 2012 9 comments

This past month, Wild Apricot hosted the Nonprofit Blog Carnival, where our topic looked at the increasing use of mobile devices, and how non-profits and associations could work to overcome the communication challenges this changing landscape poses.

Wild Apricot Version 4.4 release is coming up, and with it we'll roll out the first of our new features that tackle mobile browsing. Our new HTML email templates will come equipped with a handy "preview" feature that will let users see how their mail will look on different devices, and we even have some templates designed specifically for optimizing view on mobile devices.

Let's See How It Will Work

In Version 4.4, users will be able to select from pre-designed email templates to create their messages. They'll have the option of changing all the text and photos, and even saving those newly customized templates for future use.


To show off how the new preview feature works, we're going to use the "Plain Blue" templates in both desktop and mobile-friendly formats.

Blue Templates

Desktop-Optimized Templates

All email templates will be viewable on both desktop and mobile devices -- the question is how optimized they are for each view? Our email templates that take up the full width in a browser are designed using fixed width values, so that it is always optimized for a browser width of 900px.

Fixed width layouts occur when:

"A designer defines each table element size in absolute units eg. px, in, em, pt. It has the advantage of giving more precise control but doesn't take into account the size of the browser."

There is absolutely nothing wrong with fixed width layouts -- in fact, the majority of the internet is currently designed for fixed width.

Here's how our newsletter looks in desktop preview mode:

Desktop Preview

See how it centers in the browser window, and nothing is cut off?

Let's look at it again using mobile preview mode:

Mobile Preview

We can see that some of the content is going to be cut off in a default view. The content is still there -- it just means that if your email is being read on a mobile device, those users will have to scroll to see the rest of the content.

Mobile-Optimized Templates

Our mobile templates are designed using fluid layouts.

A fluid layout is defined as:

"A page layout where some or all of the elements are sized in relative units eg. 50%. The benefit of this is that page elements conform to any sized browser window."

Our mobile templates are set to have the content fill the space based on percentages, so when it is viewed on a desktop, it fills up to a maximum width of 900px; on mobile, it fills accordingly based on a width of 300px.

Here's how our newsletter looks in desktop preview mode:

Desktop Preview


Let's look at it again using mobile preview mode:

Mobile Preview

Testing Time!

This new handy feature of being able to select a preview mode in Wild Apricot is great, but it doesn't give you exactly the same experience as viewing on a real phone.

Let's see what happens to our desktop-optimized newsletter when viewed on a mobile device:

Desktop Newsletter on Mobile Device


Alternately, when we use the mobile-optimized template instead
(click to enlarge image):

Mobile Newsletter on Mobile Device

Future Development

We're definitely planning more support for mobile devices within Wild Apricot for future releases. To stay on top of what we have planned, be sure to watch out for our monthly Software News posts -- and if you haven't already, you can subscribe for our monthly product newsletter here.



Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

Posted by Lori Halley [Engaging Apricot]

Published Monday, 04 June 2012 at 10:24 AM


  • Carol Warkoczewski said:

    Friday, 29 June 2012 at 11:46 AM
    Thanks - great feature!
  • Liz Aperauch said:

    Friday, 29 June 2012 at 11:56 AM
    Loving the look of the new templates and very glad to see them. Good job!
  • Dhaval Joshi said:

    Friday, 29 June 2012 at 11:58 AM
    Thanks for adding this feature, it makes my life easier :)
  • Ann Edmonds said:

    Friday, 29 June 2012 at 12:37 PM
    I put out a monthly newsletter and have for years wished for a template like this! I hope it meets my expectations in reality. I need something easy for my members to access and view on the go.
  • Bonnie Wilson said:

    Friday, 29 June 2012 at 1:34 PM
    This looks great, but our paypal feature seems to be messed up a lot lately.
  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Friday, 29 June 2012 at 3:20 PM
    Thanks for the comments. Of course, since it's the first stage release, we'll be enhancing these features in the future (as we do with all modules). So be sure to comment in our Wishlist forums if you have any suggestions for improvement: http://community.wildapricot.com/2/7839/ShowThread.aspx

    Bonnie - if you're having trouble with PayPal, please contact our support team so we can rule out any issues on Wild Apricot's end. support@wildapricot.com
  • John said:

    Friday, 29 June 2012 at 10:20 PM
    So can we use a base HTML template for our member communication emails?
  • Larry D Bechdol said:

    Sunday, 01 July 2012 at 6:45 AM
    I like what you've done with these templates. I also encourage you to change your desktop templates to use the percentages instead of px so that people with disabilities who need larger print will be able to see more of the screen in larger print. I've already done that on the parade site.

    Also, please, please make sure to include ADA features in your web site. This has improved over time, but it IS a big job, I know.

  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Tuesday, 03 July 2012 at 9:58 AM
    John: yes, you will once Version 4.4 is released this weekend.

    Larry: Thanks for the input. Have you left your comments about accessbility features in our Wishlist forum? Our developers check there regularly for product enhancements: http://community.wildapricot.com/8/ShowForum.aspx
Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

About results ( seconds) Sort by: 
Sorry, an error occured when performing search.
Scroll to top