Wild Apricot Software News - June 2012

Dmitriy Buterin 28 June 2012 9 comments

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.

Backend Dashboard

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.

Current Mobile Backend Contact Search

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.)

Theme Overrides

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)

Theme Overrides for Mobile

Another example of using Theme Overrides.

A Current Wild Apricot Site on Mobile

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)

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.
Dmitriy Buterin [Chief Apricot] Dmitriy Buterin [Chief Apricot]

Posted by Dmitriy Buterin [Chief Apricot]

Published Thursday, 28 June 2012 at 3:30 PM

Get a Special Report on Simplifying Membership Management

Enter your email and receive this special report in your inbox.

Comments

  • Brandon said:

    Thursday, 28 June 2012 at 4:26 PM
    The simplest thing I would like to see implemented would be the ability to post from the moblie app into the forums on Wild Apricot. That would build a lot more user interaction - especially for a younger crowd.
  • Dan Simonelli said:

    Thursday, 28 June 2012 at 4:56 PM
    It's great to hear that WA is working on this. Many of our members have already made comments about our site not working right...and after some initial consternation thinking they were talking about the site from their computers, I determined that almost all if not all were referring to their mobile experience!

    So, while I expect the mobile launch is fairly far off, I think it will be great as it will allow us to reach further into providing members with better access to our site and events, as well as for admin review and functionality which I've often tried doing via safari on my iphone but that was quite a chore!

    thanks for always moving WA forward...the more I learn to use it, the more I'm excited about how we can implement and improve our site for our members.

    thanks
    Dan
  • Chief Apricot said:

    Friday, 29 June 2012 at 8:58 AM
    Brandon - thanks for the suggestion.

    Dan - thanks! Would love to her suggestions/examples of admin tasks you envision doing from mobile most frequently.
  • Katie Fritz said:

    Friday, 29 June 2012 at 9:24 AM
    Thank you for continuing to share your plans, goals and challenges! My personal wishlist for WA is long, but I know you are working hard to make improvements. The event check-in feature that you mentioned would be fantastic, as would better responsive design or mobile optimization for interactive forms. I'm looking forward to these changes!
  • Chief Apricot said:

    Tuesday, 03 July 2012 at 12:43 PM
    Thanks Katie, appreciate the feedback
  • Dennis Seger said:

    Wednesday, 04 July 2012 at 5:19 PM
    Thanks Chief for getting customer's input. For my three WA sites, the two most important mobile improvements you can make are:

    1. Make the editor work on iOS. Sometimes I'd like to make quick page edits on my iPad.
    2. Make all event and payment related pages (user and admin) function well on a tablet-size display. Tablets are handy to use for on-site registration, taking payments and donations on-site.

    Regarding the options for how to handle this in the themes, I feel your "Develop a special mobile-targeted theme" is best for my case. A minimalist theme where I can set some basic branding - logo, background color, and text colors.
  • Chief Apricot said:

    Thursday, 05 July 2012 at 9:10 AM
    Thanks for the comments Dennis.
    1) Yes, this is in our plans
    2) This is a bigger challenge than it seems because it's not really about the screen size but about different OS and browsers used by tablets. So we can only properly address this by developing new mobile-targeted backend
  • Wesley Wilson said:

    Wednesday, 25 July 2012 at 3:41 PM
    Hey new to wild apricot and most of my question have been answered on this page, but for right now is there a way to construct a webpage or certain template
    Type so you can see the whole thing on a safari browser? Also I've tried checking it out on different desktop computers, and it looks different on each one I use, (it basically re-configures the style I've layed out).
  • Lori Halley [Engaging Apricot] Lori Halley [Engaging Apricot]

    Lori Halley [Engaging Apricot] said:

    Wednesday, 25 July 2012 at 4:01 PM
    Hi Wesley. In general Wild Apricot should work in Safari, although there are some limitations. You can see details about this here:

    https://help.wildapricot.com/display/DOC/Browser+compatibility

    If you are having problems not mentioned on that page, please contact support.

Sorry, this blog post is closed for further comments.

Search: WildApricot.com 

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