What can we do to make it easier to design with Wild Apricot?

Are you a designer? We want your feedback!

We're want to create more resources for anyone who designs sites on top of Wild Apricot. But as always we're looking to get your input first.
To get the ball rolling here are some ideas we've been thinking about.
1) Wild Apricot Web Designer Guide (online/e-book) - A detailed guide to all the structural CSS elements of a page, including a cookbook (recipe) approach to customizations. 2) Wild Apricot 'Designer Community' (online only) - Move all customization/design resources to a new location (i.e., outside of forums and help) built just for designers to discuss, share and learn different techniques for designing sites inside Wild Apricot. Do you like one of these? Do you have something else in mind? Tell us!

2 votes
Sign in
Check!
(thinking…)
Reset
or sign in with
  • facebook
  • google
    Password icon
    I agree to the terms of service
    Signed in as (Sign out)

    We’ll send you updates on this idea

    Frank aka Fresh ApricotAdminFrank aka Fresh Apricot (User Experience, Wild Apricot) shared this idea  ·   ·  Flag idea as inappropriate…  ·  Admin →

    18 comments

    Sign in
    Check!
    (thinking…)
    Reset
    or sign in with
    • facebook
    • google
      Password icon
      I agree to the terms of service
      Signed in as (Sign out)
      Submitting...
      • Frank aka Fresh ApricotAdminFrank aka Fresh Apricot (User Experience, Wild Apricot) commented  ·   ·  Flag as inappropriate

        Hi yrwray,

        I'm assuming you've seen our "Getting Started Guides", especially our Website guide (see http://help.wildapricot.com/display/DOC/Getting+started+with+websites )

        But I think what you're asking for is something a little more detailed/design specific - which totally makes sense.

        Unfortunately we can't promise anything yet, but if we do create anything like this we'll post updates here (including collecting feedback on what should be included).

        Thanks for posting!

      • yrwrayyrwray commented  ·   ·  Flag as inappropriate

        First let me say I have a 6 year old WA site and love it.

        A guide (online or e-book okay) is my preference. Right now I could use one to help me determine if the customizations I want to make need to happen in the “Colors and Styles”, CSS overrides, API, etc. I have a project that I want to accomplish where I need to wade into those things right now.

        There are two parts to my project with my 6 year old WA site:
        1) I want to change the entire WA site colors and theme to a updated design which is mobile responsive.
        2) I want to display the event calendar information on a public webpage on a different site from my WA site in a format that is different from the standard grid calendar provided in the widget. I could additionally have the calendar display in the custom format within WA too if it makes things easier to implement.

        I don’t do this full time, so my skills are rusty and my time limited, however with a guide I could quickly get to the right place to find the information I need.

        Without repeating what others have said I concur with
        iant
        scott_btm
        mitchiedog

        Thank you for asking.

      • eelseels commented  ·   ·  Flag as inappropriate

        I'm starting to get used to how things work in WA and generally I like it a lot. Just a couple of suggestions:

        1. In the WYSIWYG editor, and maybe this is just an issue in Firefox, but I would love for keyboard shortcuts to bold, italicize, etc. This is something most other CMS apps provide.

        2. I wish the process of creating a theme were a little easier. Maybe similar to how WordPress does it. With the way the system is setup now, there's just so much bloated CSS code. Often times I find myself having to edit both theme.css and basic.css and searching through thousands of lines for what I need. At least a bare bones, no frills template that would allow us to set things up a bit more easily.

        3. Instead of WebDav, I'd love to be able to use FTP instead.

        That said, the functionality of what you guys offer is just first rate!

      • Frank aka Fresh ApricotAdminFrank aka Fresh Apricot (User Experience, Wild Apricot) commented  ·   ·  Flag as inappropriate

        Yes you should be able to utilize the jQuery library within Wild Apricot sites. However since Wild Apricot already uses jQuery you don't need to include the library into your site. You can just start using the methods/plugins right away.

        You can test this using the following simple example:

        <script type="text/javascript">
        $(document).ready(function() { alert("Hi Wild Apricot"); });
        </script

      • CounsellingHubCounsellingHub commented  ·   ·  Flag as inappropriate

        Hi, did you resolve your JQuery issue? I'm tyring to implement it and was wondering if anybody has manged to implement globally. Steve

      • iphtciphtc commented  ·   ·  Flag as inappropriate

        I am having some issues with using the jquery code just for some simple animation. IT really is inputing the and then refrencing it in the code could you help me.

      • Dmitry ButerinDmitry Buterin commented  ·   ·  Flag as inappropriate

        Chris,

        FYI - If you wish, we can switch off the HTML cleaning script for your account. Just contact tech support.

      • Frank aka Fresh ApricotAdminFrank aka Fresh Apricot (User Experience, Wild Apricot) commented  ·   ·  Flag as inappropriate

        Thanks Chris - It sounds like your suggests/comments align with our current plans for the 'template engine' improvements in 4.1 and 4.2 . However how flexible these improvements will make Wild Apricot is still a little unknown but it's definitely something we're focusing on and will push towards.

        As for the issues with jQuery these are known issues that we will be addressing. However a specific timeline has not been set. But it may very well go hand in hand with the 4.1 and 4.2 updates to the template capabilities.

      • Chris NelsonChris Nelson commented  ·   ·  Flag as inappropriate

        Firstly, we love this system and are currently in development with several accounts.

        Problems we've had are with the HTML cleaning script (worse with 4.0) and having to bounce around between the CSS custom screen, and then back to the HTML. The customization process is not very intuitive because of the separation, ideally we could upload existing CSS files and use those instead of, or in addition to, the custom css input you have built. The existing process is time consuming which costs me money.

        We're stuck goofing around with firebug to do some pretty basic stuff (like menu bar customizations) and so I would agree with other postings here that we need a bare bones template to build on. We also would like to be able to integrate existing Javascript and jQuery scripts. WA 4.0 cleaning scripts seem to prevent this, can you comment on this issue?

        I like both suggestions for a separate forum and a designer help manual. Again, overall this is an excellent product, thanks!

      • iantiant commented  ·   ·  Flag as inappropriate

        As background, I've been using WA for around a year now, site #1 is just going through its first "restyle" and I've just started development on site #2 for another client. I’m not a web designer by trade.

        Both the suggestions in the initial post would be most welcome, especially the "Web Designer Guide" idea. This would be a great time saver.

        Whilst I agree with mitchiedog’s comments above I do also feel that an active forum ought to be worthwhile. I’ve found that WA users are usually very willing to try to assist each other via existing forums so I think that the “designer community” could work well. Of course, evidenced by the lack of responses to this thread in the 3 months it’s been active, I could well be wrong :-)

        One of my major difficulties is knowing what can/cannot be changed easily via the “Colors & Styles” route and what required delving into the CSS files. Customisation of the various themes is made difficult because there is not a great deal of consistency across themes which on the surface look similar to each other.

        For example, in one theme I can quickly change the colour of the background of the page footer, in another I can’t so I have find out the Hex code of the colour I want to alter, access the CSS file and then search for the right occurrence of that colour code, capture the offending code and then paste it into my web site with the new colour. There can potentially be a lot of “suck it and see” going on.

        Other things I have found when attempting to switch themes on an existing site emphasise the lack of consistency. At the moment I am trying to find out how to change the large green column under the menu down the left side of the “Modern Green 2” theme. I know the colour code but changing any of the three places that number occurs has no effect so I don’t know how that has been achieved.....

        Similarly this theme has an image used for the “current selection” menu item, now how do I replace that without knowing its size? Really theme should not have these little idiosyncrasies, but the technique to achieve them if needed should be well documented.

        In my experience, most organisations, having picked the most appropriate/appealing theme for their site, want to brand it in their own colours. I imagine that a great deal of site customisation consists of meeting this simple enough requirement. This could be quickly & easily improved by having consistent themes and better commented CSS files and as mentioned above: “if it has a colour –make it editable”.

        The design of new site themes should always, always be performed bearing in mind that someone, somewhere will very soon want to change colours, fonts, sizes and in the case of functional pages, the text displayed.

        Finally WRT scott_btm (point 3): You can edit your site as admin in firefox , and simultaneously review in IE 8 as a standard user. I use a dual-screen system which makes this much easier but is not essential.

        Regards,

        Ian

        Worthing and adur chamber of commerce

      • scott_btmscott_btm commented  ·   ·  Flag as inappropriate

        Hey! Great work on WA, I'm loving the system as a whole. It has just the right amount of simplicity without being feature-less...(is that a word?).

        I am a designer and programmer and spent a good chunck of time customizing our first WA template when we signed up. Using my coding knowledge, a lot of patients and some fancy work-arounds, I was able to turn the WA template into an exact replica of our (then) existing site...so kudos on the system.

        Here are the main issues I had:

        1. Even though you provided the full CSS of the theme I picked, and though it was organized and commented, it was difficult to identify (and just as difficult to keep track of) how the classes affected the html (especially related to the "div hierarchies"...if that makes sense). For example, I could assume wich classes related to the nav bar, but figuring out which containers were which was not as easy. This resulted in a lot of trial and error.

        2. I found it difficult to bend some of the styles and dimensions to my will - as related to form content or dynamic content from the database, i.e. personal account info, member directory lsitings, etc. (tho I realise that I may have been customizing my template beyond its limits, so I didnt mind this part so much). It's always rough when trying to modify someone elses coding, but if we could make how the CSS interacts with the html - or dynamic content more transparent........I dont even know where Im going with that, maybe more specific CSS commenting?

        3. Lastly (and perhaps not necessarily a customization issue), I was frustrated that I could not preview some dynamic content layouts while logged in as an admin...(I may have not been doing it right??). In general, this is troublesome all the time for me.

        Other than some mild headache, I was impressed that I was able to do what I did. I came to WA after trying some other systems, some of which were much more expensive, that didn't allow for that type of customization.

      • Dmitry ButerinDmitry Buterin commented  ·   ·  Flag as inappropriate

        Hey mitchiedog, thanks for a great comment! This is exactly the kind of input we are looking for!

        I will forward this to our team working on the redesign of our template engine - and we will also discuss internally what else we can do to address the issues you raised.

        Thanks again.

      • mitchiedogmitchiedog commented  ·   ·  Flag as inappropriate

        Hi

        Im a graphic designer too, with very little web knowledge, but I must say I have found WA to be a joy. This is the first site I've developed and in my opinion you have the balance of simplicity vs complexity really nicely. I love the way I could extend my site a bit more (using my knowledge and other software) by reading about CSS customisations, and then applying them. This is one of the huge strengths of WA in my opinion.

        I like your idea about web designer guide with the structural CSS elements outlined. This is great. I like this more than the dedicated online forum. The forums tend to have a 'disorganisation"about them. You rely too much on the authors/users putting content in the right place, in order for others to be able to find it. This categorisation can be a bit unreliable. It means keyword searches need to be really accurate (and you know what these keywords are) and you end up with duplicated content.

        I think there's another common problem with "sectioning off" a forum for advanced WA. Who decides what is advanced? My experience with WA has been that I didnt discover something was "advanced" (ie required CSS customisation) until I investigated it. I thought it would be simple. So how would I know which forum to look in? A help forum is a help forum and ALL topics should be there. Personally I would always start with your Web designer guide, - Inevitably it will be easier to find the answer. Lots of online help and companies have this problem. Don't repeat it.

        While useful, I dont think a forum should be the only means of learning more about WA customisation.

        I have found the online documentation to be really good, really user friendly, well organised and nice GUI. A separate version of this could be created for "WA customisation". In other words the new guide ignores basic material and assumes the reader has a WA site live already with members etc, created from a basic theme & menus and doesn't need help to get that far. It would be instruction beyond that point...

        Couple things I've found:

        * Colors and Styles (beta) - LOVE THIS FEATURE. It can make or break a site design wise, for someone like me who doesn't have the knowledge to change these things with code. but... I did a lot of trial and error to find out what changes here...changed what content on my site. eg. it wasnt clear, and to this day I still dont know what some of those styles do. I think each needs a better definition and examples. (eg what/where on my site is functional page > box ? info box ? colored box? is this only apparent in certain themes?

        * Themes: MORE NEEDED! I think the themes are good, but it became clear to me immediately which one I would have to use. Not because of the header or colors in it (because I know how to alter these and make my own) but because of the subtle LAYOUT and menu behavior. If there was something i didn't like about it...it was too difficult to change. A few more "empty" options to choose from would be good. They only need to be subtle changes to existing ones...like rounded edges element vs square edged , drop shadow version vs no drop shadow..., header height: small, med, large,...menu height small, med, large...reflective button, vs non-reflective button etc things like that. Even two or three added per year to keep up with design trends would be cool.

        * Color: if something has a color..make it editable. I've struck a few things where I wasn't able to isolate the color of an element using color & Styles. (eg without CSS) I think every color should be able to be edited this way.

        Keep up the good work. I love the way I'm shielded from all the technical stuff (which I can tell is very complex) behind my site. I think the customizations should be directed at people like me....with an eye for design...and basic CSS...but nothing beyond that. I can paste code snippets you provide me (to position, size, & play my flash file for example).

        www.wwa.org.nz

      • moxiemindymoxiemindy commented  ·   ·  Flag as inappropriate

        HI there! I'm not a developer, but I am a graphic designer and know just enough coding to be dangerous. For me the system is difficult because the themes are, design-wise, outdated. I'd love to have a theme that was more blank so I had more control over the design of it. Kind of like the ones they have on Squarespace. Clean, modern-looking would be great for those of us who want to do more design-wise. I'm new here, and I'm frustrated trying to customize the navbar. I don't like the one that comes with, but I don't know enough about CSS to change it.

        So the old thing about 'less is more' would be a big help to me here.

        thx!

      • Dmitry ButerinDmitry Buterin commented  ·   ·  Flag as inappropriate

        One specific and very important item we are looking for feedback on is this:

        We have heard from our partners that they find it hard to customize WA templates.

        We are hearing you and we definitely want to address this - so we would highly appreciate inout from - as detailed and specific as possible:

        what kind of customization issues you are facing when customizing WA templates? How would you ideally like to see it changed?

      Feedback and Knowledge Base

      Wild Apricot Inc. 144 Front Street West Suite 725, Toronto, Ontario, Canada M5J 2L7