Cms Web Design

Client projects and tech blog posts about Cms

Discover Thyself featuring the Discern-o-Matic QuizDiscover Thyself is a "discernment" site for Quaker teens. Sponsored by Earlham College, it features resources, videos and the all-new "Discer-o-Matic Quiz."

The design is all original. We went through six rounds of the concept design mockups made up on Adobe Fireworks. Because the site is built on WordPress used as a CMS, Earlham College staff was able to add and arrange content even before the design coding began. The site uses the excellent Thematic theme, a blank template that allows for quite sophisticated designs using Action Hooks and complete CSS markup.

The most exciting element of the site is the "Discern-o-Matic" quiz, which takes users through a series of questions. At the end the questions are reorganized and presented to the user to help them understand what it is they want to do. The quiz is powered using the open-source LimeSurvey. Results are outputted via a custom PHP script that polls the LimeSurvey database and outputs in a nicely-worded and formatted WordPress results page. The templates for Lime Survey were altered to mimick the look of the rest of the site; the average user won't notice the pass-off from WordPress to Lime Survey and back to WordPress.

In hopes the quiz might go viral, individual results are saved on a unique URL. Users are invited to share their results page via Facebook.

Visit Site: http://www.discoverthyself.org
Categories: Client Sites , Educational , Facebook , Faith-Based , LimeSurvey , Nonprofit , WordPress
Tags: Wordpress Limesurvey "Earlham College" Discernment Quaker School "High School" Quiz Viral Facebook | Edit
Office Managers Guide to Best Cleaning ServiceA local client from Tabernacle in Burlington County came to me with an interesting project. He's owned a commercial cleaning company for a number of years and has heard his share of horror stories about the cleaning services clients hired before finding him! This experience led him to write a PDF e-book about how to hire the right cleaning service. What a great idea and a what a useful book this is for small business owners.

The site's on a bit of a budget so it's a simple design, with colors and general look-and-feel borrowed from a site the client likes. Simple editing comes via CushyCMS. When customers click to buy, they are sent to Paypal for the actual transaction and then forwarded to E-Junkie, which provides the automated and integrated PDF download.

Visit the site: Office Manager's Guide to Hiring the Best Cleaning Service
Categories: Client Sites , Custom Design , Local , Small Business
Tags: Book, Budget, Cleaning, Commericial, Cushycms, E-Junkie, Office, Paypal, Pdf, Small Business, South Jersey, Tabernacle | Edit
Alliance CemeteryI was hired to redesign the website of a cemetery that represents a fascinating slice of South Jersey history. In the 1880s, a group of Jews escaped Russian pogroms, came to America and started a "return to the soil" movement that led to the establishment of an agricultural colony in the small Salem County crossroads of Norma, New Jersey. Before long they established Alliance Cemetery.

The new Alliance website highlights the entrance gate. The cemetery has hired a surveying company to do a detailed map of the plots and we hope to add this in with a Google Maps mash-up when the data becomes available. A detailed history and photos are also in the works.

The design is hand-coded from scratch and is probably the most tasteful design of my portfolio. The pages themselves are editable by the client using CushyCMS and the Directions page has an integrated Google Map.

Visit: AllianceCemetery.com
Categories: Client Sites , Faith-Based , Local , Nonprofit
Tags: Cemetery, Design, Google Maps, History, Jewish, Norma, Photos, Salem County, South Jersey, Vineland | Edit
This Quaker meeting sits along Philadelphia's Main Line suburbs and is making special efforts at outreach. They wanted a design refresh that would allow the heads of committees direct access to their section of the websites. With multiple log-ins and high content needs, we went with the Drupal content management system, which has become the CMS of choice for many non-profits.

The design is built from scratch with obvious nods to the Facebook look-and-feel: we wanted something that would seem both familiar and fresh to the young professional crowd that is this meeting's most obvious target audience.

Visit: Haverfordfriendsmeeting.org
Categories: Client Sites , Custom Design , Drupal , Faith-Based , Nonprofit
Tags: Church, Content Management System, Design, Drupal, Facebook, Friends, Haverford, Philadelphia, Professional, Web | Edit
Daretown School Home - Daretown SchoolThe mission of the Salem County Special Services School District, a regional educational service agency, is to provide high quality, cost-effective programs and services to the schools and districts of Salem County and Cumberland County, New Jersey. This site built with what are for me fairly generic tools: Movable Type as CMS, with Flickr intergration. The design style sheet was built from scratch using CSS.

Visit: Scsssd.org
Categories: Client Sites , Educational , Local , Nonprofit
Tags: Cumberland County, Education, Flickr, Movable Type, New Jersey, Salem County, School, School District, South Jersey, Woodstown | Edit
Web 2.0 tools have changed the boundary lines between techies and program staff in many nonprofits over the past few years. At least, they should have, though I know of various organizations that haven't made the conceptual leap to the new roles.

OLD SCHOOL: Webmaster

Let me explain by talking about my own changing work role. Even a few years ago, I was a paid staff webmaster. You could divide my work into two large categories. The first was techie: I managed server accounts, set up required databases, designed sites. I got into the HTML code, the PHP, the Javascript, CSS, etc.

The other was content: when program-oriented staff had new material they wanted on the website they would email it to me or walk it over. I would put in my work queue, where it might sit for weeks if it wasn't an organizational priority. When it came time to add the material I would boot up Dreamweaver, a relatively expensive program that was only accessible from my laptop and I would put the material onto the website. Needless to say, with a process like this some parts of the website never got very much attention.

At some point I start sneaking in a content management system for frequently-changed pages. This seemed very hackish and not good at first but over time I realized it greatly speeded up my turn-around time for basic text content. But the organizations I worked for still relied on the old model, where staff give the webmaster content to put up.

NEW SCHOOL: Web Developer

Nowadays I'm a web developer, a freelancer with an ever changing list of clients. I typically spend about a month putting together a site based on a content management (like this) or automatic feed system (like I did for Philadelphia's William Penn Charter School). I do a certain amount of training and while I might add a little content for testing purposes, I step back at the end of the process to let the client put the material up themselves. I'm available for questions but I'm surprised about how rarely I'm called.

Here's two examples. Steadyfootsteps is a blog by an American physical therapist in Vietnam. When we started, she didn't even have a digital camera! I gave her advice on cameras, started her on a Flickr account, set up a fairly generic Movable Type blog with some custom design elements and answered all the questions she had along the way. She went to town. She's put tons of pictures and embedded Youtube videos right in posts. Here's a non-techie who has contributed a lot to the web's content!

Penn Charter is a school that was already on Flickr and Youtube but wanted to display the content on their website in an attractive way. I pulled together all the magic of feeds and javascripts to have a media page that showcases the newest material.

They're very different sites, but in neither instance does the client contact me to add content. They rely on easy-to-use Web 2.0 services: no specialized HTML knowledge required.

NEW TOOLS, OLD MODEL

I got an email not so long ago from an old boss who manages a monthly magazine. Her site has been radically rebuilt over the years. Dreamweaver is out and content management is in. They use Drupal, which my friend Thomas T. of the Philadelphia Cultural Alliance tells me won the recent popularity contest among nonprofit techies. This is great, a definite step forward, but what confused me is that my old boss was asking me whether I would be interested in returning to my old job (the successor who oversaw the Drupal upgrade is leaving).

They still have a webmaster? They still want to funnel website material through a single person? Every staffperson there is adept at computers. If a physical therapist can figure out Flickr and Movable Type and Youtube, why can't professional print designers and editors?

My hourly rate ranges from two to five times what she'd be likely to pay, so I turned her down. But I did ask why she wanted a webmaster. Now that they're on Drupal it seems to me that they'd be better off switching from the webmaster to the web developer staffing model: hire me as a freelance consultant to do troubleshooting, staff training and the occassional special project but have the regular fulltime staff do the bulk of the content management. I'd think you'd end up with a site that's more lively and updated and that the cost would about the same, despite my higher hourly rates.

I've heard enough stories of places where secretaries have come out of the shadows to embrace content management and have helped transform websites. I'm the son of a former secretary so I know that they're often the smartest employees at any firm (if you walk into an office looking for the expert on advanced Excel features you'll surely find them sitting right there behind the receptionist desk).


FINALLY: WHAT'S UP WITH DRUPAL?

I'm trying to join the bandwagon and use Drupal for a upcoming site that will have about a dozen editors. But there's no built-in WYSIWYG editor, no little formatting icons. Sure, I myself could easily hand-code the HTML and make it look nice. But I don't want to do that. And it's unrealistic to think I'm going to teach a dozen overworked secretaries how to write in HTML. The interface needs to work more or less like Microsoft Word (as it does in Movable Type, CushyCMS, Google Docs, etc.)

Most Drupal sites I see seems from the outside like they're still old school: staff webmaster through whom most content funnels. Is this right? Because if so, this is really just an institutionalization of the content hack I did six years ago. Can anyone point me to lively, active Drupal sites whose content is being directly added by non-techie office staff? If so, how is it set up?
Categories: Drupal , Practical 2.0 , Web Design
Tags: Css, Dreamweaver, Drupal, Flickr, Javascript, Movable Type, Penn Charter, Philadelphia, Php, School, Web 2.0, Web Developer, Youtube | Edit
Quakersong.orgWebsite for Peter Blood & Annie Patterson, musicians most well known for their insanely-popular songbook Rise Up Singing. They sell books and tapes on the site (e-commerce handled ably and simply by Paypal) and they also have lots of high-quality content including a lot of hard-to-find Pete Seeger CDs. Movable Type is used as a content management system (CMS).

Technologies: Movable Type, Paypal. Visit Site.
Categories: Client Sites , Faith-Based , Journalists & Artists , Small Business
Tags: Movable Type, Music, Paypal, Pete Seeger, Peter Blood, Rise Up Singing | Edit
An early description of my using the Movable Type blogging platform as a content management system (CMS) for an entire website. I've used these techniques to build websites which clients can easily manipulate and update.

Inspired by Doing Your Whole Site with MT on Brad Choate's site, I started experimenting today with putting the whole Nonviolence.org site into Movable Type. At first I thought it was just a trial experiment but I'm hooked. I especially love how much cleaner the entry for the links page now looks and I might actually be inspired to keep it up to date more now. (I've also integrated Choate's MT-Textile which makes a big difference in keeping entries clean of HMTL garbage, and the semi-related SmartyPants which makes the site more typographically elegant with easy M-dashes and curly quotes).

So here's what I'm doing: there are three Movable Type blogs interacting with one another (not including this personal blog):

  • One is the more-or-less standard one that is powering the main homepage blog of Nonviolence.org.
  • The second I call "NV:Static" which holds my static pages, much as Brad outlines. I put my desired URL path into the Title field (i.e., "info/index") and then put the page's real title into the Keywords field (i.e., "About Nonviolence.org") and have that give the data for the title field and the first headline of the page. It might seem backwards to use Title for URL and then use Keywords for Title, but this means that when I'm in MT looking to edit a particular file, it will be the URL paths that are listed.
  • The third blog is my "NV:Design Elements." This contains the block of graphics on the top and left of every page. I know I'll have to redesign this all soon and I can do it from wherever. This blog outputs to HTML. All the other pages on the site are PHP and its a simple include to pull the top and left bars into each PHP page.

Oh yes, I'm also thinking of incorporating guest blogs in the near future and all of these elements should make that much easier.

Here's another site to check out, about how someone integrated Movable Type into their church website using some interesting techniques.

Categories: MartinKelley.com , Movable Type
Tags: Blogging, Content Management System, Love, Movable Type, Nonviolence, Quotes | Edit

Search

As Seen In

EBook

Shortcut cover
Web 2.0 Mash-Ups & Niche Aggregators (O'Reilly Media, 2008, $9.95): Order here.

Social Networks

Other Sites

Archives