How do we build mobile friendly websites in BBNC?

Steve MacLaughlin · September 2012

How does BBNC handle mobile websites? How do we get started? Are there any tips and tricks?

Joseph O'Driscoll · September 2012

Absolutely! I've never heard of a CMS requiring media-queries to be in separate stylesheets. It's always great to learn more about a product when the opportunity presents itself.

Jonathan tmp · September 2012

Hi Jacee,

Media queries aren't dependent on JavaScript, so even with that turned off you would still be seeing the media query styles.

You're missing most of the media queries from the http://boundless.cofc.edu site so it's possible that either they've not been copied across or BBNC has stripped them out somewhere along the way. Try including a media query style in an Unformatted Text Part, something like:

@media only screen and (max-width:767px){

body {display:none}

}

This should hide the page when you get to a smaller device breakpoint - pointless for a live site but a quick test to see if the media query is there

Jacee Brown · September 2012

It appears that the media queries aren't pulling, but maybe it's the JS not firing?

Jacee Brown · September 2012

Hi y'all, the page in BBNC that we're working on is:

https://giving.cofc.edu/campaign/donate

The site I'm modeling:

http://boundless.cofc.edu/

The main stylesheet the layout is using contains all of our media queries, which under non-BBNC circumstances (and coupled with JS that's also been imported and referenced in netcommunity) make the layout responsive, but not sure what the problem is now.

P.S. You two are awesome! I'm so grateful for your willingness to give this a look. Thank you!

Jaime Lassman 2 · September 2012

Jacee,

Since developing mobile templates in 2012, we stepped it up and redesigned the site around twitter bootstrap this summer. I'm still working out some kinks with BBNC parts in a responsive site, but once you have your media queries and the needed JavaScript, it is just a matter of refining the CSS to make those parts work.

I'll share with you what I'm working on if you're interested.

Jonathan tmp · September 2012

Hi Jacee,

I would ignore the BBNC device detection and do what you've done and build the site with media queries.

What are the problems you're facing with getting the design into BBNC?

Jacee Brown · September 2012

Hi Joseph, don't know if you'll get this since this thread is over a year old, but thought I'd try. We've developed a site--boundless.cofc.edu--that has a single style sheet with media queries, and it works just fine, until you get it in NetCommunity (we're building the donation form template there). I've had ZERO help from Blackbaud support on this, so hoping someone out there can help. Thanks,

Jacee Brown

College of Charleston

Jonathan tmp · September 2012

What properties does BBNC's server-side detection test for? I'd like to emulate a mobile device within my desktop browser but changing the user agent doesn't seem to have any effect. Viewing the page from a genuine mobile device loads the mobile layout as expected, but this isn't ideal for development.

Joseph O'Driscoll · September 2012

Vanessa, you can email me directly at bbnc@boun.cr (masked email). I can go over the details of the needs required from your project further! Apologies for taking so long, I don't actively check the email associated with my account on the BBNC forums.

Vanessa Soria · September 2012

I am trying to do something similar for my site's mobile donation forms. Is there a stylesheet on Blackbaud that handles these donation forms as nicely as those links? Or did you just use your own code in the media queries?

3eighteen media · September 2012

Thanks for clearing that up, Chris. The only problem I've found with the approach you mentioned (several media query sections in one stylesheet) is that it did not work. I won't rehash it here, but Blackbaud and I have had words about this in the past.

I am doing a training session with a Blackbaud designer next week to get more clarification on this (one of my clients is in the middle of a redesign) so hopefully I won't have to go through the multiple stylesheet madness again.

Chris Martin · September 2012

You should not have to place separate media queries each in a separate stylesheet. The functionality is there for convenience if you'd like to keep a large number of targeted styles separated for organizational purposes, but there should be no reason you couldn't add as many media query sections (targeting things like device width, screen orientatin, etc.) into a single stylesheet as you'd like.

If you have a live page where it seems that for some reason media queries in a single stylesheet appear to be not being sent to the browser for some reason, I'd advise creating a support case so one of our BBNC analysts could dig into the root cause for you.

3eighteen media · September 2012

I agree, Joseph. I've been working with RWD and media queries for a little over a year on several different CMSes, and Blackbaud NetCommunity has been the outlier in terms of implementation.

Issac Story · September 2012

Starting in version 6.41, we introduced the ability to associate multiple Layouts to a Template, including mobile Layouts that will be displayed when a mobile browser is detected.

A web designer can use the mobile Layout in conjunction with a mobile-specific stylesheet to optimize the website for mobile viewing.

3eighteen media · September 2012

Actually, it'd be great to get some word on this from Blackbaud on the best way to do this in NetCommunity.

3eighteen media · September 2012

As I said in my response, I'm not sure if this has changed in future versions. The organization I work with is on 6.53.516.11, and separate stylesheets have to be made for the mobile styles because the media queries are not detected in one main stylesheet.

Joseph O'Driscoll · September 2012

I don't believe the second part is true as my environment is running 6.41.537.33 and I have not run into any hiccups using multiple media-queries in a single stylesheet.

https://secure.massgeneral.org is my BBNC environment.

3eighteen media · September 2012

That's not my approach to mobile styling Joseph, but it *is* the one which Blackbaud recommends in their documentation (which is incorrect and outdated).

Even with using media queries in a single stylesheet, NetCommunity requires those media queries to be broken into separate stylesheets. Not sure if this has changed in any future versions, but the last time I looked at it a few months ago this was the procedure.

Joseph O'Driscoll · September 2012

The reason you cannot see the mobile version is that your approach to mobile styling is using the media="handheld". If you targeted your CSS through media-queries, you would be able to display your custom styling by resizing your browser.

You can also change your user-agent within a browser to render in a handheld of your choice (most common = iPhone/iPad).

Joseph O'Driscoll · September 2012

I must say, the usage of two separate stylesheets seems to be unnecessary when a single style sheet with proper media queries could create a true "responsive environment".

https://secure.massgeneral.org

https://secure.massgeneral.org/cancer/

https://secure.massgeneral.org/children/

https://secure.massgeneral.org/event-...

https://secure.massgeneral.org/cancer...

https://secure.massgeneral.org/childr...

The links above use a single stylesheet, single layout and a single template for each type of form that stems out to hundreds of pages.

Jaime Lassman 2 · September 2012

We contracted with Blackbaud to develop our mobile site. I could not be more pleased. At first, I was told that all I would get is a mobile site with seven functions. I learned that instead of a full site with mobile stylesheets, I was getting a separate site dedicated to mobile devices. While that seemed limited, I knew I could build more to that menu.

In the process of building it out, I realized that I sort of got both. Once I have layouts, stylesheets, and templates dedicated to mobile devices, any page on my site can have a mobile view and a desktop view. We kept the mobile site limited to just a few options, but I can choose page by page whether to provide a separate mobile template or the same desktop template for any page in my full site.

I'm very happy with the work Blackbaud did in terms of design and functionality. I recommend it to everyone.

3eighteen media · September 2012

Great post, Jono. I also want to mention that testing for your mobile BBNC pages has to be done on a mobile device.

I found this out when doing some mobile pages for a client and wondering why I could not see the mobile versions in my browser by resizing its width. There's some server-side detection on Blackbaud's end which serves up the mobile stylesheets for a responsive design only to mobile devices. This can make debugging a little bit difficult since you're making edits in the browser which you will only be able to see on your mobile device.

One bridge around this is to use Adobe Edge Inspect; you can do development and debugging locally before adding your code to BBNC pages.

Jono Young 2 · September 2012

It's great to see that mobile is catching on with the Blackbaud community. I'm going to provide some clarity a few tips, and some examples of mobile optimized Blackbaud NetCommunity websites. If it's early, go get your tea or coffee first, as you can see, there's quite a bit of goodness to consume below.

CLARITY

The latest version of Blackbaud NetCommunity includes new mobile features, weather hosted or not, that allow you to provide a mobile-optimized website to your supporters. Blackbaud NetCommunity has server side detection built right in - meaning that when a visitor comes to your site with a mobile device, Blackbaud NetCommunity can automatically provide the user with the mobile version of your website. For advanced users, or "nonprofit techies" out there, you can forego the default server-side detection and build a responsive site if you really wanted to. The mobile solution that Blackbaud has built truly is first-class.

There are six steps to creating a mobile optimized Blackbaud NetCommunity website:

Create mobile style sheets
Create mobile layouts
Create mobile templates
Create mobile pages
Create mobile content
Test your mobile site

Those steps should look familiar - they are the same six steps required to build a desktop website in Blackbaud NetCommunity. That's one of the great features of how Blackbaud NetCommunity does mobile - you mostly already know how to do it.

The biggest limitations are not within the product; they are in the learning curve associated with learning how to code a mobile site. There are many great resources online that teach how to develop mobile sites, you are only limited by what you have time to learn and what time you have to code.

WHAT ARE THE LIMITATIONS?

Blackbaud NetCommunity does mobile better than many other Content Management Systems and it provides a number of flexible choices for how you want to create your mobile site.

For example

you can build a responsive mobile site, or you can build a mobile site with server-side detection - allowing for a more optimized mobile user experience.
You can reuse your desktop content on your mobile website, or you can use unique content on your mobile site for an even more optimized mobile user experience.
You can target different mobile browsers and different screen sizes - allowing you use any additional gain in screen size for additional content or navigation.

Weather you are hosted by Blackbaud or hosting your own site has no bearing on what you can accomplish for your mobile site. There really are not many limitations that cannot be overcome, however there are a few items to be aware of.

For the sake of brevity, here are two limitations.

The current version of Blackbaud NetCommunity does not natively support CSS frameworks such as LESS or Saas (although I do beelive it is in the road map fora near-future release). This is true for quite a few Content Management Systems (CMS) due to the recent development and ever-changing nature of new technology. The folks who developed such frameworks are aware of this limitation, so some have built a pre-compiler app that will convert LESS (for example) to a standard style sheet, ready to be migrated into a CMS such as Blackbaud NetCommunity. See "RESOURCES" below to learn more about LESS and Saas.
Creating a site optimized for tablets requires a bit of content strategy and craftsmanship on the desktop code. Tablets can be targeted in the same way that mobile phones can, however your desktop site and content really need to be mobile-ready. In the event that you want a Blackbaud NetCommunity website that is optimized for phones and tablets, a "responsive" approach is likely best, but not the only option.

A few examples of Blackbaud NetCommunity mobile sites, visit these on your phone:

https://advance.einstein.edu (full mobile site)
http://www.fmsc.org/mobile (mobile campaign site)
https://www.csmcgiving.mobi/sslpage.aspx (single donation page)
http://www.smileschangelives.org/page.aspx?pid=329 (full mobile site)

IF YOU NEED ASSISTANCE

A mobile-optimized giving site can be up and running in two to three weeks. I am an Interactive Design Principal at Blackbaud Interactive for the Enterprise Business Unit and I developed our mobile solution offering based on what our customers were asking for. We have a few different mobile solutions to fit your needs and budget, including:

top-notch code
mobile device testing
mobile feature training
success metrics check-ins to ensure we've built a mobile site that is performing well, a choice of mobile themes
Google Analytics integration, and more.

However, if you don't want all of that, we can simply bolt in a mobile optimized website, forego the strategy and guidance, and send you on your way. We want to provide the best possible solution, however we can cut back on the strategy and guidance to fit most budgets.

Another option is to get some remote training on how the new mobile features work in Blackbaud NetCommunity. We have a great team of mobile designers at Blackbaud Interactive ready to assist or train your team on the new mobile features and functionality. After the training, you can take a shot a building your own mobile site with your in-house resources. Contact your Blackbaud Account Representative for more information.

RESOURCES

Issac Story · September 2012

Great link, and make sure that you scroll down to Jono's reply, which has a lot of useful information.

David A. Kennedy · September 2012

I found this Forum topic really helpful in explaining exactly how BBNC leverages server side technology and responsive design.

How do we build mobile friendly websites in BBNC?

Comments

Categories