The Spotlight : Web Design

Rotating show images in Patron Edge Online

Sean Long — Fri, 30 Oct 2009 13:30:00 GMT

My colleague, Matt Cook, recently showed off a cool Image cube he put together for Patron Edge Online. Take a look at the information below, it would be cool to see this put to work. The really cool thing about this is that each side of the cube can link to different things, so this could help drive interest in things like special events, classes, or whatever the creative minds in your marketing department can think up! As the cube is set up right now, it uses the loader.asp file to allow it to link directly to specific shows. Pretty cool!

Disclaimer: This will require you to do a small amount of coding. The example is pretty easy to follow if you are familiar with HTML, Javascript or other coding languages, but you won’t be able to contact support for assistance setting this up.

1. Create a new screen part on the page where you want the image to display (In this example, I’ll use Template 1)

· Type = Include

· File Name = imagecube.html

· Top, Left, Width, Height – position the element as desired, but you want it to be the size of your images for best resolution. I used 450,20,120,80

2. Grab the latest copy of the image cube library Note: There are literally thousands of cool jquery libraries out there, many of them dealing with images, this is just one that looked slick to me. Most are easy to use and would be interchangeable. Unzip the library into your PEOSite folder (by default, C:\Program Files\Blackbaud\The Patron Edge Online\PEOSite)

3. Open up your favorite text editor, create imagecube.html and drop it in your PEOSite folder

Here’s the code for my file:

<head><script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="jquery.imagecube.js"></script>
</head>
<div id="defaultCube" style="width: 120px; height: 80px; overflow: none;">
<a href="loader.asp?target=show.asp?shCode=64"><img src="images/shows/show64.jpg" alt="Show 64 Title" title="Show 64 Title" style="width: 100%; height=100%;"/></a>
<a href="loader.asp?target=show.asp?shCode=38"><img src="images/shows/show38.jpg" alt="Show 38 Title" title="Show 38 Title" style="width: 100%; height=100%;"/></a>
<a href="loader.asp?target=show.asp?shCode=19"><img src="images/shows/show19.jpg" alt="Show 19 Title" title="Show 19 Title" style="width: 100%; height=100%;"/></a>
</div>
<script type="text/javascript">
$(document).ready(function() {
$.imagecube.setDefaults({speed: 1000, pause: 6000});
$('#defaultCube').imagecube();
});
</script>
You’ll need to make a few changes. Namely, I referenced show codes in my sample database. You can generate your loader link as needed. Your images will also likely not be named show64, so update the img src reference as well as the alt and Title as needed. There are a lot of benefits to using Google’s jQuery library, but you can download your own if needed.

Try it out and leave a comment if this worked for you!

Add A Facebook Fan Box To Your Site

Nicholai Burton — Mon, 10 Aug 2009 13:27:00 GMT

My colleague Chad recently wrote about 6 Dogooding Webby Things Your Nonprofit Should Check Out, and I wanted to show how quick and easy it is to implement one of those webby things, the Facebook Fan Box. It's not a fit for every organization, but if you have a strong Facebook presence and want to promote it on your website, don't let the idea of building this custom piece intimidate you. And the steps work for everyone, whether your site uses PEO or a different application.

Step One: Visit your Facebook page. Go to your organization's Facebook page and click the link on the left that says Add Fan Box to your site.

Step Two: Get the code. You will be taken to a second page where you can check whether you want to include both your stream and fans, or just one of the two. You will get the auto-generated code along with a preview, like this:

Step Three: Add the code to your site. Edit the "connections" entry in the code if you want to display more than 10 fans at a time, and the "width" bit if you want it to be wider than 300 pixels. If you use Patron Edge Online as your content management system, save this code to Notepad as a .htm file and add it to PEO as a screen part. If you use a different CMS, the process should be pretty similar. Of course there are advanced options and extra styling you can get into, but these three painless steps get you from zero to Fan Box in five minutes.

Is your site using the Fan Box feature or custom Facebook applications? How do they fit into your marketing strategy or promote your mission? Leave a message for other readers in the comments.

Best Practices for Nonprofit Websites

Nicholai Burton — Mon, 18 May 2009 15:30:00 GMT

Smashing Magazine is a great resource for print and web design and consistently puts out great content. They recently had an article about best practices for nonprofit websites that I wanted to share. As the article puts it:

A non profit’s website needs to make it easy to find out more about their cause, to donate money, and to become more involved. It needs to make it easy for media contacts to find the information they need and the contact information of key personnel. And it needs to do all this in a way that’s inviting to the organization’s targeted donors and/or volunteers.

Read the full article to see examples of how to make your content the center of your website, increase volunteers and donors and keep people coming back often. If you'd like to show off your own website, leave a link in the comments for others to see.

Customizing the behavior of links in Patron Edge Online

Nicholai Burton — Fri, 20 Mar 2009 17:00:00 GMT

I was working through some advanced Patron Edge Online questions this week and was asked if there are any special parameters that you can add when loading a page to make it behave a certain way. To make life easy I've put together a comprehensive list that shows what parameters can be added, what they mean, and what pages can make use of them. Happy hacking!

Global options that can be used with any link
Interface - the interface code
SalePoint - the sales point code; only needed when using the sales point filter
language - the language code of all text on the site
Charset - the character set to use for all text
CSS_FILE - only used when overriding the CSS file of the desired interface
DIR - text direction of the site, to handle right-to-left languages

LTR - left to right (default)
RTL - right to left

Example: http://mysite.org/default.asp?Interface=3&SalePoint=102

show.asp/show_1.asp
shCode - the show code to load, from the PEO Administration Site

show_events_list.asp
shCode - the show code to load, from the PEO Administration Site

default.asp/shows_list_1.asp
cgName - category name
cgCode - category code
use_more - whether to only show recommended shows in the category, or all shows of that category

all_events_1.asp
startDate - the start date for the view
direction - number of days/weeks/months before or after the start date parameter. Date unit is determined based on the viewCode
viewCode - how shows are displayed

0 = Day (default)
1 = Week
2 = Month
3 = Calendar

Example: To display a calendar view of all events in June, use http://mysite.org/all_events.asp?viewcode=3&startdate=2009-6-1

hall.asp
event - code of the event to load, from the PEO Administration Site

donation.asp/donation_1.asp
code - the fund code of the donation to load, from the PEO Administration Site

membership.asp/membership_1.asp
membership_code - the code of the membership category to load, from the PEO Administration Site

prepaid_subscription.asp/prepaid_subscription_1.asp
prepaid_code - the series code to load, from the PEO Administration Site

merchandise.asp/merchandise_1.asp
code - the fund code of the merchandise item to load, from the PEO Administration Site
count - number of items to load by default

Example: You want an easy process to put two programs (merchandise item 24) in the basket when buying a certain show, so you use http://mysite.org/merchandise.asp?code=24&count=2

PEO Donation Round-Up, v2

Nicholai Burton — Mon, 03 Nov 2008 13:24:00 GMT

The PEO Labs series brings you information or advice on items that are geared towards users who can take high-level concepts or sample code and run with them. Please note that many of the things discussed are not supported. That doesn't mean that an item is a warranty-voider; it just means that the Support Analysts can't walk you through it or troubleshoot it if it breaks.

A client recently contacted me about the free donation round-up customization I had written for PEO earlier this year. She had a couple of suggestions to improve it, and I had some time available last week to work on it. Here's the info on version 2 of the customization:

Updated for compatibility with PEO 3.3.3
Fixed a memory leak
Added a new parameter that allows the administrator to enter the amount to round; it is no longer hard-coded to go up to the next dollar

You can download the updated copy of the feature here. Please feel free to download and install it, and let me know what you think. You will need your system administrator to run a couple of SQL scripts and put a file in place, and then it's ready to go. Full instructions are included in the ZIP file. If you install it, leave a comment to let everyone know what kind of effect it is having on your online donations.

Firefox 3 has been released!

Nicholai Burton — Tue, 17 Jun 2008 20:35:00 GMT

Firefox, the greatest of the modern browsers, released version 3 of their product just about four hours ago and it has already been downloaded nearly 3 million (million!) times. It's more secure, prettier, faster and smarter than anything else out there (yes, even you Safari). I encourage all of you to download and use it exclusively for a better browsing experience. If you need to access your Patron Edge Online Administration Site, you can install the excellent IETab extension and do it all in one browser. With this extension I don't think I've purposely launched Internet Explorer in two or three years, and haven't had run-ins with malware of any kind. And now it even integrates with web apps. For example, I can click a mailto link and it will launch my Gmail composer.

For those who have done a fair amount of PEO design work and had to do any special browser-specific tweaks to make things look the way you want, make sure to test your site in this newest version to ensure that your patrons won't experience any display issues. The US and Canada together have almost hit the one million download mark, so you can be sure that your patrons are using it already.

What do your patrons think about your PEO site?

Nicholai Burton — Fri, 13 Jun 2008 20:50:00 GMT

While thinking about ways to get people more involved with an organization's online presence, I realized that most websites give an opportunity to leave feedback about the website itself. The best way to improve usability is to talk with users, right? I’ve done this with ING Direct, Netflix and a handful of other sites to let them know about bad links or usability issues. Often I leave positive feedback, just to let an organization know that I appreciate a new feature or change to their site that has made my life easier.

So following that line of thought, I whipped this up one evening while watching reruns of Scrubs. It is a new page for Patron Edge Online that allows a person to enter her name, email (if desired) and thoughts about your site. Now that version 3.3.3 has been released, I also threw in an accompanying custom report that can be generated to allow your web marketer or webmaster to review feedback on demand.

You can view a screenshot of what the page looks like here. As always, play with it on a test interface first! This feature is pretty basic (and potentially very valuable) but keep in mind that it is not supported. To install:
1. Download this ZIP file and extract the contents
2. Add Feedback_Form.asp and insert_feedback.asp to your public\bbcustomizations folder
3. If you do not have the Custom Site Settings table yet (from earlier PEO Labs articles), run Create Custom Site Settings Table.sql against your PEO database
4. Run LeaveFeedback.sql against your PEO database to create the custom table that will hold the actual comments
5. Create a new screen called Feedback
6. Create a new screen part on the Feedback screen (INCLUDE is the type) that points to bbcustomizations\Feedback_Form.asp
7. Edit the feedbackheader CSS class so that it matches your site’s overall design

You can also import the Site Feedback Report into the Custom Reports section of the Administration Site, or review the feedback via the Custom Tables folder.

Are you currently using any method of capturing user feedback about your website? How has it affected your design or business processes? Leave a message in the comments.

Rounding up change (but not from under sofa cushions)

Nicholai Burton — Mon, 26 May 2008 22:23:00 GMT

Over the last few months I've noticed that electric and water companies are really pushing the "round up" thing to work on public projects. So why not do something similar for Patron Edge Online? With a bit of ASP and JavaScript, we can find out how much a patron's total order is, then display a message asking if he would like to round the total up to the next dollar and give the remainder as a donation. The concept is simple, the patron doesn't mind giving away the electronic equivalent of spare change, and you get a donation towards your annual fund. Everyone wins!

Here you will find a zipped file containing two SQL scripts and an ASP page called round_up.asp. This page checks to see if the patron has already put a donation in her basket. If she has not, it will auto-magically display and ask if she would like to round the total up to the next dollar as a donation. It does not just look for totals that are even dollar amounts; a total of $42.30 would add a $0.70 donation and a total of $42.00 would add a $1.00 donation.

To install:
1. Place round_up.asp into your PEOSite\bbCustomizations folder
2. If you do not already have the eSroCstmSiteSettings custom table, run Create Custom Site Settings Table.sql on the PEO database
3. Run Round Up Feature.sql on the PEO database
4. Go to Administration, Custom Tables, eSroCstmSiteSettings and set Donation Round Up Fund to the desired code (found in Content, Donation)
5. Drill into the screen parts of my_basket.asp for the appropriate interface
6. Set round_up.asp as an Include After on the basket view screen part, or create a new screen part below the basket view in the desired location

The page is pretty basic and I created it in about 4 hours over the course of a weekend. It would have taken about half that if I had ever taken a programming class (the life of a French/Business major, *sigh*). Please note that this is custom PEO code. It is not supported (which just means my analysts cannot answer questions about it) but works beautifully on my system. Still, be sure to test before putting it on your live site; I claim no responsibility if it breaks your site, burns your supper or lets your dog out of the fence!

Did you find the round up feature useful? Would you like to see more of this kind of thing on the site? Leave a message in the comments.

Blogging in Patron Edge Online

Nicholai Burton — Fri, 09 May 2008 20:02:00 GMT

Does your organization have a blog or XML feed to get out news or other information? Why not display your most recent two or three posts inside Patron Edge Online? It will help boost readership of your blog and potentially increase your number of patrons/donors as well. It is super-easy using a free online tool, and you won’t be doing ANY double-entry.

Interested? Here’s how to do it:

On the Admin Site, create an HTML screen part with a Name and Filename called Blog on the screen or template where the feed will display
Go to http://www.rss-info.com/en_rssinclude-simple.html and enter the URL of your feed
For Max entries, choose how many of your most recent posts you’d like to display
Make the Table/Iframe width the same as your screen part width
For the three color fields, I recommend setting them all to the same color as your site’s background
Open Links in a new Window refers to the behavior that you want if a patron clicks on a post title or link. To keep the patron from having to leave your ticketing site to read the post, check this box
For Integration, use IFrame. It works on all modern browsers and we can stick it in right into our screen part with no extra work
Now click Create HTML and copy the code
Highlight your screen part on the Admin Site and click Edit Free Text Field
Click the button that says TEXT; this puts you into HTML mode
Clear out anything you see here and then paste in the code you copied from the RSS-Info site

Et voilà! You now have your most recent blog posts displaying in PEO real-time. It takes less than 10 minutes to get working and just a little longer to tweak sizes, positions and colors to make it blend perfectly into your site.

Do you currently have a blog at your organization? What other ideas are you using to increase readership? Leave a message in the comments.

Give your patrons interactive directions to your venue

Nicholai Burton — Wed, 30 Apr 2008 14:30:00 GMT

The internet behemoth that is Google has given us a great tool to get people into your doors, literally. Google Maps is at a point now where there is no reason not to have an interactive map and driving directions to your venue. It’s also a very simple feature to implement using some basic PEO design concepts. Let’s walk through adding a map with driving directions to your site.

Get the code for the map

Go to http://maps.google.com, enter the address of your venue and perform a search. In the resulting map, click ‘Link to this page’. Click ‘Customize and preview embedded map’ and you’ll get this screen. Choose the desired map size and then copy all the HTML onto the clipboard.

Create a new Directions page on the PEO site

Go into Site Design, Screens and create a new screen called Directions. Due to sizing, I recommend using Template 2. After creating the screen, use the Screen Part Location Tool to create a new HTML:Free screen part. Click the button in the Text field to bring up the HTML editor. Now click the button to insert HTML and paste in the code you copied earlier. Click OK when finished.

Create a link to the Directions page

To access this page, link to it as you would any custom screen. If you aren’t sure how to create that link, just take a look at this post.

Throw some text on there with your contact information and any special notes (handicapped parking, etc) and you’ve got a simple, easy to use directions page for your patrons. Are you using any web mapping applications already for this or another purpose? Share your experiences in the comments.

Add a favicon to your website

Nicholai Burton — Tue, 22 Apr 2008 14:54:00 GMT

For those who are not familiar, a favicon is the icon that shows up in your bookmarks toolbar for a saved site, and in the address bar/tab header of your web browser when visiting a site. It's a 16x16 icon that you can use as another way to reinforce your organization's "brand" on the web.

For those of you know know all about these, I'm sure your question is, "when do we get this functionality in Patron Edge Online?" You can actually do it right now. I have found some great resources online that will allow you to add a favicon onto your current PEO site regardless of version. Here's the scoop:

Create a favicon for your site

If you don't already have a favicon, you need to create an ICO image file that is at least 16x16 pixels. Your marketing folks should be able to handle something like this pretty easily, or you can use some free tools on the web. Here are a couple of sites that can do this for you:

Add files to to your web server

There are three files that you need in order to make this work:

The image file itself. I recommend placing it in the public\Images folder of your website
This ZIP file. It contains an HTML page and a JavaScript library (and a screenshot for later). Place the HTML and JS files in your public\bbCustomizations folder. If you are interested in the technical bits of the JS library, there is a link to the author's website in its comments.

Modify favicon.htm to point to your icon

Edit favicon.htm in Notepad or your favorite HTML editor. If your custom piece folder is not called bbCustomizations, you will need to edit the first line accordingly so that the page can find the JavaScript library. Now edit the sixth line and replace the URL here with the location of your favicon file.

Add a reference to the file on your Admin Site

In Site Design, edit each of the Templates of the Interface you are using and create a new screen part for them. See the screenshot from the above ZIP file if you need an example screen part to help you. Since this is a script, no text will be visible on the page itself, so the dimensions of the screen part don't matter at all.

Do you use favicons on your main or ticketing websites? How has it reinforced your organization's image? Leave a note in the comments!

Is your website slowing down your online sales?

Nicholai Burton — Wed, 16 Apr 2008 21:07:00 GMT

Different research tells us that the average online shopper will wait between four and 10 seconds for a page to load before giving up. One decent article I’ve managed to find indicates that the number is much closer to four than 10. And US broadband penetration is currently in the 80% range (scheduled to hit 90% by mid-year), so keep in mind when designing your site that two out of every ten of your potential patrons are visiting you via dial-up.

So what can you do to make your Patron Edge Online site a little zippier? First, visit this page load tester to see how fast your site currently loads. It’s good to have a starting point so that you can gauge what techniques are most effective for you. I’ve included a few ideas to get you started, but a quick web search will pull up dozens more ways to make your site load faster without sacrificing quality. Come in before the box office opens one day, take a half hour and try a couple of the following:

Use CSS whenever possible. Putting your site design into the CSS file instead of using inline HTML style tags will improve load time, as the CSS is loaded once and then cached in the browser for the rest of your session. If you start with a main site for content management and then link into your PEO site, combine the two CSS files into one.
Optimize the images on your site. Excessive or oversized images are one of the biggest causes of a slow load time. JPEGs are the largest and slowest image files to load. GIFs are generally better, but if you can, I recommend putting your images in PNG format. PNG files tend to have the smallest footprint without sacrificing image quality. There are plenty of free image converters out there, many that don’t even require you to download any software.
For show images, don’t use the same file for the small image on PEO that you use for the medium image. Otherwise you are just hurting your load time when the default PEO page loads by downloading a bigger image that then gets scaled down in the browser.
If you are linking to a directory instead of a specific page, put a slash at the end of the link so the web server doesn’t have to try to figure that part out. http://mysite.org/tickets/ will load faster than http://mysite.org/tickets.

Other ideas to speed up your website? Please post them in the comments.

Share the (Print at Home) Love

Nicholai Burton — Mon, 14 Apr 2008 15:57:00 GMT

With our new release of Patron Edge Online version 3.33, we have a feature that allows you to export your print at home ticket designs from one PEO database and import them into another. This is really handy if you have a separate live and test environment and are tired of buying tickets in the live system over and over while tweaking your design. But it’s also an opportunity for those of you with a flair for design to show off your handiwork to other organizations. Here’s what to do:

On the Administration Site, go to Content, Site Design
Highlight the ticket and click Export on the toolbar
Click OK and then choose where you want to save it

Importing is just as easy. Just click the Import button, browse to the report file and click OK. Now start sharing!

Shooting designs back and forth on our web forum can spark creativity and get organizations thinking of new ways to connect with their audiences. Do you have a ticket design you’d love to show off? Leave a link in the comments or post your design in the PE forum!

Using Google Analytics to get more out of PEO

Nicholai Burton — Thu, 10 Apr 2008 17:17:00 GMT

Google has a powerful, free tool available, called Google Analytics, that will allow you to collect all kinds of aggregate data about your site's visitors. You can use this information to:

Track the geographic location of site visitors to plan where to spend your advertising dollars
Determine what page a visitor hits first on your site and how long he spends there
See what sites or search engines are referring patrons to you
Look for trends to see if parts of your site are confusing or cumbersome to visitors
Discover how many times a visitor comes to your site before making a purchase

I'm not a marketer or a webmaster, but I'm sure there are a hundred other uses you can come up with for this tool. There is a nice demo on their site here that walks you through what the tool can do and how it works. This probably leaves you with some questions. How much does it cost? How long will it take to implement? How do you actually make it happen?

How much does it cost?

According to the Google Analytics site, use of the service is free if you get less than five million (million!) pageviews per month.

How long will it take to get started?

Getting an account with Google Analytics takes a few minutes, and adding it into PEO only a little longer. I would plan for 30 minutes to an hour for the whole project, plus any time you spend playing with settings and setting up reports in your Google Analytics account.

How do I do it?

First, you need to sign up for an account. Once you sign up, you receive something called a Tracking Code. Hold on to this as we will need it again soon.
Download this file and place it in the bbCustomizations folder of your public site.
Edit line six of the file, replacing "UA-xxxx-x" with the Tracking Code you got in step one.
On the PEO Admin site, go into Site Design and edit all of the screens of the interface you are using. In the Include After field, enter bbCustomizations\GAnalytics.htm. This is the part that can take a little while, depending on how many screens you have.

And you're finished! That wasn't so difficult, was it? After you have this all set up in Patron Edge Online, you will definitely want to go back into your Google Analytics account and do some tweaking so that the data it captures for you is more accurate.

You have some opportunities to get really advanced with this if you'd like by tagging the URLs that you send out in your marketing campaigns. For example, tagging your email blasts with things like campaign information will help you determine which ones are most effective. My site is internal only, so I haven't been able to try tagging to verify it plays nicely with PEO, but let me know if you try it out and how well it works. How are you using analytical/statistical data to drive your mission? Leave a message in the comments.

Creating and linking to custom screens in PEO

Nicholai Burton — Sun, 06 Apr 2008 16:22:00 GMT

PEO is top-notch as far as its ticketing portion goes, but it’s also a pretty decent content management tool. Maybe you want to add some extra pages or maybe you even want to use PEO as the platform for your entire site and do all content management through the Administration Site. Doing this isn’t too difficult due to a tool we have called the screen loader.

Canned PEO screens have a lot of extra “stuff” that goes on in the background, so if you’ve ever added a screen to your site and it did not load or gave errors, it’s because this stuff is missing. To account for that, we use the screen loader. Here is how it works:

Create your my_new_screen.htm in an HTML editor and drop it into your site folder
On the Admin site, go to Site Design, Screens and create a new screen for your interface. Mine will be named My_Screen
Use the screen part location tool or drill into the screen to create a new screen part. The Type will be INCLUDE and the File will be my_new_screen.htm
Now when you want to link to this page, call it like this: http://tickets.mysite.org/public/load_screen.asp?screen=my_screen
If you’re linking to the custom screen from a non-PEO site, you will need to use the loader tool, as discussed in this post. Your link will look like: http://tickets.mysite.org/public/loader.asp?target=load_screen.asp?screen=my_screen

Now you have custom content on your PEO site without a lot of fuss (or paying a lot of money!). You don’t have to create your own ASP or HTML pages either. If you prefer, you can create a screen and then build HTML:Element screen parts for it using the designer in PEO. For this situation, there is no File Name for your screen or your screen parts, so just set this field to the same value as your Name field.

Have you created any custom screens? Do you use PEO as a platform for your entire site? Share your experiences in the comments.