What Is Soapbox, and how does it affect my design work?

Non-Profit Soapbox is PICnet’s software as a service web solution designed especially for the non-profit community. It’s a content management system built on the Joomla! framework that allows the organization you’re working with to have a powerful, dynamic site that’s easy to update. As a content management system, Non-Profit Soapbox has some rules that it lives by. This document describes the most important of these. You should keep them in mind when designing the client’s site.

So how does the process work, and what do you need from me?

You hook us up with graphic templates. We convert them into CSS and a Joomla template. We’re looking for:

• A layered Photoshop .psd file that should include:
  • A home page design (be sure to include any rollover effect images as separate layers)
  • A standard subpage design (and again with the rollover effect stuff!)
  • Designs for any other pages that are significantly different than either the home page or subpage designs
• Any additional images that will be used on the other pages
• Files for all fonts used in the Photoshop document as well as a document listing of those font styles

Any particulars I should keep in mind while I’m designing?

Yep, a few. Most are just good web design practices. A couple are specifically related to Non-Profit Soapbox:

• All menu items must be text rather than images
• Use only web-safe fonts for all text
• Main body content always goes in the center of the page with modules (i.e., boxes of dynamic content) able to be placed around the main body content

Still a little foggy, you say? Let’s break it down a bit further:

Page Title and Main Content

This is the guts of the page where the main content of a given page is displayed. Some basics: the Page Title (About Charter Schools shown below) must be HTML text. Same goes for the main content text. Borders between the main content area and the module columns will be consistent for all pages.

The design for other heading tags (such as Charter School Landscape) and other text types should be designed for as well. We’ve got a sample typography sheet that gives you a sense of the various styling categories available to you.

Modules

A module is a container for content that goes around the outside of the main content area. Each module has a title that must be HTML text. The contents of a module can be text or an image or a combination of both. The title bar, edges and background can all be styled. Multiple modules can be stacked in various module areas around the main content section.

In the News is a special module that automatically displays the latest headlines from this site's news section.

Navigation

Navigation elements are a specific type of module. You can have a horizontal main menu or vertical main menu – or a combination of a horizontal main menu and a vertical sub menu as shown on Partners for Development. The horizontal menu can have drop downs if you choose. The vertical menu can be either a flyout menu or an expanding menu. The menu titles need to be HTML text but background images can be used as well.

Breadcrumbs

Want to make sure your end user can find their way back after they’ve explored your site? You can include breadcrumbs which appear between the top module section and the page title in the main content area. Like page and module titles and navigation items, they need to be HTML text and can include a divider image, like the Smart Campaign for ACCION example below. (Do we sound like a broken record with this HTML text thing yet?)

Search Module

A search function is another specific type of module. Interested in throwing one on the site and having a stylized submit button to the right or left of the input box, like the Government Accountability Project example below? Knock yourself out! Just make sure that you incorporate (all together now!) HTML text that will be included with the button.

Slideshow module

One incredibly flexible and customizable module that can be used as a powerful anchor for your design is the Soapbox Slideshow module.  With Soapbox Slideshow, clients can add and manage dynamic slideshows through their administrator. Slideshows include multiple slides with images, titles, captions, slide text, and a Read More hyperlink sending the end user to any page they choose. Any or all of these elements can be included in your designs - or excluded if your design doesn't call for them.

How about a little inspiration with examples of design and usage differences? Weatherize D.C.has a background image that anchors the slideshow with the images and text they manage appearing on top of that background.  Turtle Survival Network hides all the text and only shows images of turtles.  City Parks Alliance creates slides with a large, dominant image and text overlaid.  Museum Without Walls hides the navigation and randomly rotates images and text linking to different programs they run.

You got any examples of Non-Profit Soapbox sites for me to peek at?

Sure. Tons. We’ve reference several of above but will include links here:

http://www.turtlesurvival.org
http://www.nyccharterschools.org
http://www.weatherizedc.org
http://www.cityparksalliance.org
http://www.globalfundforwomen.org
http://www.mercysc.org

Are there exceptions to these rules?

Yep.  Definitely.  But there will be a trade off in terms of time required by us to template or the non-profit's ability to effectively and efficiently update their site.  Talk to us if you have something that runs counter these guidelines.

This overview is nice and everything but I’ve got a couple of other questions I need answered. How can that happen?

The non-profit that’s tapped your creative juices has one of our Project Managers working with them. That person can hook you up with answers – whether it’s about alternate file formats, the details we’ve outlined above, or whatever else happens to be on your mind. Call the organization or shoot them an email to find out who that person is - or, if you're contracting directly with us, hit us up!. We’ll be happy to help clarify things!

I’m done with the design. Now what?

Excellent! Now it’s our turn. Send the files over to the nonprofit that you’re working with and they’ll pass them on to us so we can do our thing. Thanks for the hard work! We look forward to seeing what you’ve got!