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.
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:
See how it centers in the browser window, and nothing is cut off?
Let's look at it again using mobile preview mode:
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:
Let's look at it again using mobile preview mode:
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:
Alternately, when we use the mobile-optimized template instead
(click to enlarge image):
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.