Membership Knowledge Hub

Mobile strategy thoughts

With the huge and ongoing growth of smartphones and tablets, we are getting more and more questions and requests about mobile access to Wild Apricot. Our 'bandwidth' is quite constrained at the moment due to the imminent release of Version 4.4 and then the next version already in our development pipeline - 5.0 - focused on our content management system upgrade. Nevertheless, the strategic importance of mobile usage of Wild Apricot is quite clear, so we have been doing a lot of thinking to define our strategy and next steps.

For starters, there are three large and separate angles to this:

1. Administrator access to Wild Apricot's backend from mobile devices. For example, searching your contact database, updating web pages or sending out email blasts.
2. Mobile access to our clients' website content - basically people reading your web pages from their smartphones and tablets.
3. Mobile self-service transactions on our clients' websites. Similar to #2 but about visitors or members actually performing transactions - event registrations, membership applications etc.

Here's current situation and our thinking on how to approach each of these areas:

Administrator access to Wild Apricot backend from mobile devices

Our current administration backend has been designed with desktop access in mind. Modern smartphones and browsers do a pretty good job of handling web pages which are designed for desktop - but unfortunately this mostly works for 'static', aka 'content' web pages and not as well for very interactive or 'dynamic' web pages. Wild Apricot - like most cloud software - makes heavy use of dynamic Javascript-based functionality to provide a responsive interface right in your browser, without you having to download and install software on your desktop computer. So when we conducted a quick round of testing of Wild Apricot's backend administration from various mobile devices, we did not expect it work. We were pleasantly surprised that many parts of the Wild Apricot backend in fact did work just fine! However one major piece did not - our so-called web editor. This editor is used for making updates to web pages, emails - and in some other places. It's an extremely complex piece of code our team has evolved over the last 6 years and unfortunately mobile browsers, like mobile Safari (iPhone/iPad) and mobile browsers on Android phones, can't handle it. 

So, the bottom line is that very important pieces of Wild Apricot's backend don't work on mobile devices. 

After a good deal of research, it looks like it might be possible for us to recode our editor to work on mobile devices - and we will likely do that anyway - however, even though we might make Wild Apricot's backend 'workable' from mobile, it will never provide optimum mobile experience without recoding it from scratch. The thing is that mobile devices, with their small screens, require very different design approaches to how menus are laid out, how much text you can display on a screen, the kind of standard interface elements that are usable, use of touch-screens instead of mouse and so on.

Right now, the backend dashboard kind of works on some
mobile devices (pictured here on iPhone), but the text
is very small, a lot of scrolling is required, and buttons
are hard to click.

Our conclusion is that we need to design and develop new mobile-targeted WA administration backend from scratch. As you can imagine, this is a huge amount of work. So our plan is to eat this elephant in small bites. We will keep the current desktop-targeted backend interface as is (some complicated operations will never be as convenient to do from mobile devices as from a regular desktop or laptop computer) - and will start developing a new interface, function by function. 

Upon reviewing our Wishlist discussion forum and support requests we get, we are thinking that our first steps for a mobile backend should be focused on: 

1. Search contact database and view contact details (read-only). What would really help us here is to get your feedback on the most common search scenarios we should design for - what kind of searches do you run most frequently for your contacts/members and what kind of data are most frequently needed?
2. Implement long-requested functionality for event attendance tracking - via a mobile interface. In other words, if you have a smartphone or a tablet with Internet access, mobile interface focused on you checking-in event attendees at the event venue.

Currently, a backend search in the contact database on a
mobile device (iPhone pictured here) is less than ideal.

Mobile access to website content

The situation here is much better. In our initial round of testing we found that most Wild Apricot-based websites already look quite nice on mobile devices. There are some important caveats:

• This might depend on your selected website theme. We have not tested this across all the themes in Wild Apricot yet. 
• This does depend on your own website look and feel customizations - the ones we call 'Advanced' - CSS Customization, Javascript and Theme Overrides. Making those customizations work well on mobile devices might turn out to be tricky, especially for more complex changes. On the other hand, these tools can be used by experienced designers to provide some mobile-specific site customizations so that it looks okay on mobile devices.
• This also depends on your particular web page content. Complex HTML and Javascript code you insert into your webpages might look totally messed up on mobile devices - and unfortunately this is something we can't be of much help with, since this is your own code. From our experience, the top reason for web pages to look messed up in certain browsers (and especially so on mobile devices) is that content was pasted onto your web page from some other place, e.g. Microsoft Word. This content usually comes with tons of proprietary formatting codes (which can also make Wild Apricot online editor inoperable). So avoid pasting formatting content - paste it into a text editor like Notepad first to strip the formatting and then copy-paste from there into your web page. (We do have some code in Wild Apricot that tries to clean up invalid formatting - but it is limited in how much it can do without breaking the actual content.)

This site example has used Theme Overrides to make the layout fluid so it resizes to fit browser
width -- it looks okay on a smart phone, but no so great on a desktop browser. (click to enlarge)

Another example of using Theme Overrides.

As with all websites not built with mobile in mind, a Wild Apricot
site will display and work on a mobile device, but it will
shrink-to-fit and will be very small -- not an optimized experience.

Here's our thinking about the strategy and next steps in this area:

• Design the new themes we add to Wild Apricot to follow concepts of 'responsive design' where design morphs depending on the current device displaying the web page. This is a great concept - but it's no silver bullet because it also requires very careful thinking from website editor as they create and update each web page since actual page content have to work together with the 'responsive design' theme wrapper for this page. This is something that only experienced web designers can figure out so even the best responsive design theme might still display a totally messed web page on a tablet or smartphone because of the content of that page.
• Retrofit existing design themes to use responsive design concept
• Develop a special mobile-targeted theme. The thinking here is that for some clients mobile access to their webpages is very important - but they use existing Wild Apricot themes and are not likely to switch to our new mobile-friendly theme and sacrifice or redo all their customizations. So we are thinking that as a first step we might be able to design and develop a minimalist mobile-friendly theme which can then be used by any account, whatever their current selected theme is. In other words, people accessing your website via desktop computers will see your current look and feel - while people accessing it from mobile devices will view your web pages with a much simpler design and navigation. The downside is that this mobile theme will not match your main theme - the upside is that you can provide much more usable mobile content to your website sooner. 
• Provide a way for administrators to set a special mobile version of the page content. (This concept is similar to how some email sending programs provide for editing a separate HTML and text version of your email) If a particular page has a (simplified) mobile version of its content, system will present that version when your site is viewed on a mobile device. In this way you can start by creating simplified versions of your most important pages first and later doing that for other pages. The caveat of course is that these would be two totally separate versions of content and you would need to remember to update both of them.

I would love to hear your thoughts on these ideas. 

Mobile self-service transactions

Much of the stuff in previous section applies to self-service transactions as well. And it is already currently possible for people to do many of the self service transactions via their smartphones and tablets on your Wild Apricot website - and you can further improve this by using our existing design customization tools!

The biggest difference with content pages is that self-service transactions typically involve quite a few so-called interactive 'system' pages that encode the necessary workflow for each transaction. For example, event registration includes an email entry page, registration type (ticket) selection page, event registration form, payment page and so on. These pages cannot be customized by clients (except for basic tweaks for fonts and formatting). Thus, it is up to us here at Wild Apricot to create mobile-optimized versions of these pages. 

Upon reviewing all the various transactions and pages in Wild Apricot, we think that our first steps should concentrate on:

• Event registration workflow (existing functionality)
• Event RSVP workflow (new functionality - has been on our wishlist for a long time. Much more simplified vs. current event registration workflow; only applies to free events.
• Viewing/searching member directory

Conclusion

Smartphones and tablets are here to stay so the Wild Apricot team will be working to ensure that your Wild Apricot websites can be used from mobile devices - as well as to roll out mobile-tailored administration functions. So stay tuned!

We would love to get your feedback on our current ideas outlined above (just comment below) - as well as any other mobile-related suggestions (through our forum: http://community.wildapricot.com/8/2621/ShowCategory.aspx)