Creating responsive/mobile-friendly forms & pages

Options
Nicole Holt
Nicole Holt ✭
Ancient Membership Facilitator 2 Name Dropper Photogenic
in Blackbaud Raiser's Edge NXT®: General Discussion
I was reviewing our NC donation form in a #givingtuesday meeting yesterday and (yikes) realized that we are not mobile-ready. I'm reading through the "web design" manual and will plow ahead with some tests, but I'm wondering if anyone has any go-to resources on this? Looking to work smarter and...faster. Thanks!
Tagged:

Comments

  • Rebecca Leifert
    Rebecca Leifert ✭
    Ninth Anniversary Facilitator 1 Photogenic
    Hi Nicole,

    I have a question as well as some extra information for you: Is your site itself responsive/mobile ready? If the answer to that is yes, then you need someone to program the CSS of that donation form to be responsive/mobile ready. If the answer to that is no, then you have an issue that is two pronged: 1) you need a mobile ready/responsive template & then 2) you need your dontaion form CSS styled to be responsive/mobile ready.


    Most older sites have fixed width templates (this was industry standard until approx 3 years ago) - unless you've hired someone to convert them to be responsive or mobile ready. The extra layer of complexity is that the default stying/installation of BBNC's donation form/general forms/calendar/tables/parts in general are fixed width so they don't adjust to different size screens automatically, even if they've been placed on a responsive template. You will most likely need to work with someone to get at least one template & the donation form CSS updated to be responsive/mobile ready. 


    There aren't very many resources out there for implementing CSS changes in BBNC, I actually rely on my programmers to do that for me since it can get really sticky depending upon how clean the original CSS code is. I'm not sure if that helps or not.


    If you have additional questions, post them & I'll try to help more.
  • Nicole Holt
    Nicole Holt ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic

    Rebecca Leifert:

    Hi Nicole,

    I have a question as well as some extra information for you: Is your site itself responsive/mobile ready? If the answer to that is yes, then you need someone to program the CSS of that donation form to be responsive/mobile ready. If the answer to that is no, then you have an issue that is two pronged: 1) you need a mobile ready/responsive template & then 2) you need your dontaion form CSS styled to be responsive/mobile ready.


    Most older sites have fixed width templates (this was industry standard until approx 3 years ago) - unless you've hired someone to convert them to be responsive or mobile ready. The extra layer of complexity is that the default stying/installation of BBNC's donation form/general forms/calendar/tables/parts in general are fixed width so they don't adjust to different size screens automatically, even if they've been placed on a responsive template. You will most likely need to work with someone to get at least one template & the donation form CSS updated to be responsive/mobile ready. 


    There aren't very many resources out there for implementing CSS changes in BBNC, I actually rely on my programmers to do that for me since it can get really sticky depending upon how clean the original CSS code is. I'm not sure if that helps or not.


    If you have additional questions, post them & I'll try to help more.

    Thanks so much, Rebecca! We only use NetCommunity for our form pages (donation, sign-up, etc), and it seems to be entirely unresponsive. Our overall site (everything except a page hosting a form) is responsive through Wordpress.


    I was hoping I could bootstrap a solution, but my tests are showing my lack of understanding of CSS, but I guess we'll need to contract.

  • Rebecca Leifert
    Rebecca Leifert ✭
    Ninth Anniversary Facilitator 1 Photogenic
    So as frustrating as this revelation has been, what you've just told me is pretty good news for moving forward. Since you have what I refer to as a hybrid site (marketing face in another CMS - WordPress in your case & transaction pages is BBNC) you can probably get away with converting one template for your transactions and limited CSS work to make the parts you use respond with the new template/layout. This is much less time & budget intensive than a full site so that's actually good news.


    BBNC's programming structure and the way it picks up/implements CSS is wonky compared to what other CMS systems typically use, thus your struggles using bootstrap. If you'd like Nonprofit Garden's programming assistance, just let me know. 
  • Nicole Holt
    Nicole Holt ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic

    Rebecca Leifert:

    So as frustrating as this revelation has been, what you've just told me is pretty good news for moving forward. Since you have what I refer to as a hybrid site (marketing face in another CMS - WordPress in your case & transaction pages is BBNC) you can probably get away with converting one template for your transactions and limited CSS work to make the parts you use respond with the new template/layout. This is much less time & budget intensive than a full site so that's actually good news.


    BBNC's programming structure and the way it picks up/implements CSS is wonky compared to what other CMS systems typically use, thus your struggles using bootstrap. If you'd like Nonprofit Garden's programming assistance, just let me know. 

    Good news is good! This is the wrong time of year for me to put in a budget request, but I will probably be in touch for programmng help in the near future :)

  • Rebecca Leifert
    Rebecca Leifert ✭
    Ninth Anniversary Facilitator 1 Photogenic
    Totally understandable - Wish there was more I could do to help in the immediate, but I look forward to hearing from you at a later date!
  • Lance Olenik 2
    Lance Olenik 2 ✭
    Ninth Anniversary Facilitator 1 Photogenic

    Nicole Holt:

    I was reviewing our NC donation form in a #givingtuesday meeting yesterday and (yikes) realized that we are not mobile-ready. I'm reading through the "web design" manual and will plow ahead with some tests, but I'm wondering if anyone has any go-to resources on this? Looking to work smarter and...faster. Thanks!

    NC's donation forms are table-based, so making them truly responsive is near-impossible. What I've done for most NC forms is hide them (use CSS - position:absolute and visibility:hidden on the top-level table) and write my own forms using proper HTML from this decade. I've written jQuery to allow the forms to automatically fill out the hidden NC forms when a person fills them out. This allows NC to work the same, but for the user to have a much better experience. I'd also be glad to share code if needed.

  • Nicole Holt
    Nicole Holt ✭
    Ancient Membership Facilitator 2 Name Dropper Photogenic

    Lance Olenik:

    Nicole Holt:

    I was reviewing our NC donation form in a #givingtuesday meeting yesterday and (yikes) realized that we are not mobile-ready. I'm reading through the "web design" manual and will plow ahead with some tests, but I'm wondering if anyone has any go-to resources on this? Looking to work smarter and...faster. Thanks!

    NC's donation forms are table-based, so making them truly responsive is near-impossible. What I've done for most NC forms is hide them (use CSS - position:absolute and visibility:hidden on the top-level table) and write my own forms using proper HTML from this decade. I've written jQuery to allow the forms to automatically fill out the hidden NC forms when a person fills them out. This allows NC to work the same, but for the user to have a much better experience. I'd also be glad to share code if needed.

     

    I'm afraid this is entirely out of my skillset (but that's never stopped me before...which can be good or bad). If you could share the code so I can see if I can make it work on our site, that would be fantastic. My email address is nholt@preblestreet.org. Thanks so much!

  • Scott Reuschling
    Scott Reuschling Blackbaud Employee
    Tenth Anniversary Facilitator 1 Photogenic
    Hi Nicole,


    Rebecca provided a great answer!


    It looks like you're only using NetCommunity for the donation form and for email messages. Have you considered using Online Express to create forms and send email? The forms are responsive by default, and you can insert them into your main site without the need of a separate NetCommunity site. They arrive into Raiser's Edge just like the NetCommunity transactions do and are processed in the same way.


    Plus, OLX as a standalone product is cheaper than NetCommunity so you'll save some money. If you're considering upgrading to RE NXT, OLX comes bundled with it, so that's a nice little bonus.


    Just another option that I thought I'd throw out there.


    Have a great day!
  • Rebecca Leifert
    Rebecca Leifert ✭
    Ninth Anniversary Facilitator 1 Photogenic
    Nicole,

    As time in this busy season allows, please update us with what you decided to do and how it worked for you! I'm always on the hunt for new/unique solutions to help organizations who are in a pickle.

    Rebecca
  • Alec Moloney
    Alec Moloney ✭
    Sixth Anniversary Photogenic First Reply
    Hello friends,


    I realize this thread is 2 years old and so perhaps unlikely that you will read or respond to my query. But I find myself in a very similar situation to what Nicole reported back then. Our entire website (vanaqua.org) is responsive through concrete5 I believe and has only recently been revamped and updated. We just use BBNC pages for event registrations so I guess we also operate a hybrid website. Our BBNC pages have never been programmed to be mobile responsive or friendly and in trying to use the online resources and edit them myself I've run into trouble with my lack of CSS and HTML knowledge. Perhaps in the intervening 2 years some more resources or tips have come to light that you folks are aware of? 


    Any input would be appreciated.

    Many thanks,

    Alec

Categories