Content Management Web Design

Client projects and tech blog posts about Content Management

Tract Association of FriendsThe Tract Association is venerable Quaker publisher dating back to the early part of the Nineteenth Century. They had a website but wanted a new one built with a content management system that would allow for easier editing. The new site is built in WordPress. Befitting the organization's ethos, the site is relatively plain but there's a lot going on underneath the surface.

Many people use the site to print out copies of the tracts. There's a special print stylesheet--created by the template designer and customized by me--that means print-outs of these pages will be very clean and uncluttered, perfect for personal photocopying. Many of the tracts are also available as PDFs through Scribd and there's a interface in the WordPress dashboard to allow embedding of these in the sidebar.

Categories: Client Sites , Faith-Based , WordPress | Edit
Martin Profile Picture Many Friends will know me from my active involvement in the Quaker world. I've been dubbed the "Quaker Blogfather" for my Quaker Ranter (site) blog and my work in pulling together QuakerQuaker (site), an online magazine and blogging community with over five hundred members and 10,000 visitors a month. I am also a frequent Quaker workshop leader and published writer.

I started building websites in 1995 with an award-winning Nonviolence.org hub site and was a social media pioneer when I redesigned its homepage to a blog format three years later. Before going independent as MartinKelley.com in 2006, I served on the staff of Friends General Conference (site) for eight years, where I worked in the FGC Quaker bookstore and built the Quakerfinder, FGC Gathering and youth ministry sites. I also worked for Friends Journal (site) for two years, putting select articles from their Quaker magazine online every month. Since then I've been privileged to work with Quaker organizations such as Friends World Committee for Consultation (site), Friends Council on Education (site) and Haverford Friends Meeting (site). I've done some exciting media work with the Philadelphia Penn Charter School (site) and built personal sites for well known Friends. I bring our testimony of integrity to every business transaction and when I address topics such as search engine optimization or pricing philosophy, I try to do so from a Friends perspective.

Web Design Specialties:


Categories: quaker | 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
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
A site put together by two consultants to the natural food industry. All pages were editable by a Movable Type powered content management system. A notable feature was a e-commerce subscription function with private log-in pages. This consultancy business was closed in May 2008 and the site was taken down.
Categories: Client Sites , Custom Design , Movable Type , Small Business
Tags: Consultant, Log-In, Movabletype, Natural Foods, Pdfs, Private | Edit
RSS feeds are the lingua franca of the modern internet, the glue that binds together the hundreds of services that make up "Web 2.0." The term stands for "Really Simple Syndication" and can be thought of as a machine-code table of contents to a website. An RSS feed for a blog will typically list the last dozen-or-so articles, with the title, date, summary and content all laid out in special fields. Once you have a website's RSS feed you can syndicate, or re-publish, its contents by email, RSS reader or as a sidebar on another website. This post will show you a ridiculously easy way to "roll your own" RSS feed without having to worry about your website's content platform.

Just about every native Web 2.0 applications comes built-in with multiple RSS feeds. But in the real world, websites are built using an almost-infinite number of content management systems and web development software programs. Sometimes a single website will use different programs for putting its contents online and sometimes a single organization spreads its functions over multiple domains.

Step 1: Make it Del.icio.us

To begin, sign up with Del.icio.us, the popular "social bookmarking" web service (similar services can be easily adapted to work). Then add a "post to Del.icio.us" button to your browser's toolbar following the instructions here. Now whenever you put new content up on your site, go that new page, click on your "post to Del.icio.us" button and fill out a good title and description. Choose a tag to use. A tag is simply a category and you can make it whatever you want but "mysites" or your business name will be the easiest to remember. Hit save and you've started an RSS feed.

How? Well, Del.icio.us turns each tag into a RSS feed. You can see it in all its machine code glory at del.icio.us/rss/username/mysites (replacing "username" with your username and "mysites" with whatever tag you chose).

Now you could just advertise that Del.icio.us RSS feed to your audience but there are a few problems doing this. One is that Del.icio.us accounts are usually personal. If your webmaster leaves, then your published RSS feed will need to change. Not a good scenario, especially since you won't even be able to tell who's still using that old feed. Before you advertise your feed you should "future proof" it by running it through Feedburner.

Cloak that Feed

Go to Feedburner.com. Right there on the homepage they invite you to type in a URL. Enter your Del.icio.us feed's address and sign up for a Feedburner account. In the field next to feed address give it some sensible name relating to your company or site, let's say "mycompany" for our example. You'll now have a new RSS feed at feeds.feedburner.com/mycompany. Now you're in business: this is the feed you advertise to the world. If you ever need to change the source RSS feed you can do that from within Feedburner and no one need know.

The default title of your Feedburner feed will still show it's Del.icio.us roots (and the webmaster's username). To clear that out, go into Feedburner's "Optimize" tab and turn on the "Title/Description Burner," filling it out with a title and description that better matches your feed's purpose. For an example of all this in action, the Del.icio.us feed that powers my tech link blog and its Feedburner "cloak" can be found here:

Get that Feed out there

Under Feedburner's "Publicize" tag there are lots of neat features to republish your feed yourself. First off is the "Chicklet chooser" which will give you that ubiquitous RSS feed icon to let visitors know you've entered the 21st Century. Their "Buzz Boost" feature lets you create a snippet of code for your homepage that will list the latest additions. "Email subscriptions" lets your audience sign up for automatic emails whenever you add something to your site.

Final Thoughts

RSS feeds are great ways of communicating exciting news to your audiences. If you're lucky, important bloggers in your audience will subscribe to your feed and spread your news to their networks. Creating a feed through a bookmarking service allows you to add any page on any site regardless of its underlying structure.

Categories: Practical 2.0 , RSS Syndication
Tags: Binds, Content, Content Management System, Email, Glue, Infinite Number, Lingua Franca, Native Web, Real World, Really Simple Syndication, Ridiculously, Rss Reader, Web | Edit
Interesting article over the Moveabletype blog. Anil Dash interviews George Johnson Jr of Hyperlocal Media, who's using MT as a content system to build hyperlocal community sites that can compete against local newspapers (see their very-cool looking BuffaloRising site).

Here's some of what Johnson has to say:

Distribution, content creation, and the ability to more easily compete with established local players online... blogging is perfect for that. I mean a blog is chronologically arranged, in columns, divided by categories and changes (in many cases) everyday. That's the broad definition of a newspaper, right? A blog is so much more than that, but the basic structure lends itself very well to developing an online competitor for newspapers.

It was three years ago that I followed Brad Choate's instructions for using Moveable Type as a whole-site content management system. What started as an experiment became a way of life for me. The MT interface lends itself so well to content management that I'm now using it for my non-techie clients: Quakersong.org and Quakeryouth.org are both put together by MT and I've been surprised that there's been almost no learning curve for the client's adoption of this software.

Given this, it seems odd that the kids at Moveable Type haven't taken MT in this direction (even more surprising since they hired Brad himself a few years ago!). I see a big market in my niche sites for this sort of functionality and three years later I'm still having to tweak templates to get this to work. Anil, what's up? If Drupal had better documentation and smoother installation it would have been the brawn behind MartinKelley.com.

It would be fun to follow Until Monday's example and create a hyperlocal site (hint hint to VW if she's reading this). Of course, locality is not just geographically-based anymore. Quakerquaker.org is a local portal of a different kind. I'm a big believer that the hyperlocality of niche and geographic sites are the cutting edge in the next-wave of the social web.

There's a lot of pioneering to be done in this regards. The net has a lot of power to take down culture monopolies by confronting old boy networks and business-as-usual thinking with innovative social networks that harness the talents of the outsiders. The smart newspapers, magazines, churches and cultural organizations will come on board and leap-frog themselves to twenty-first century relevance. Too many of the Philadelphia (and/or) Quaker institutions I know respond to change by shuffling job titles and putting blinders up against recognizing the ever-narrower demographic they serve.

Categories: Drupal , Practical 2.0
Tags: Blog, Blogging, Content, Content Management System, Local Newspapers, Local Players, Movable, Moveable Type | 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