Categories Web Design

Client projects and tech blog posts about Categories

Elisabeth Olver ArtistElisabeth is a painter and artist who specializes in original acrylic paintings and giclee prints of nature and South Jersey beach scenes. Her existing site was attractive, but it didn't have online ordering and she wasn't able to update it herself.

We put together a features list and then went through a round of concept screenshots which I built in Adobe Fireworks and Photoshop (you can see our work here!). Design in hand, I built a customized Movable Type site. A specialized template allows her to enter information about the each piece: medium, theme, price and the URL to it's image (most of which are hosted on Flickr). Movable Type pulls these together into various category and individual art pages, with automatically-generated Paypal "Buy" buttons for available pieces. We stressed search-engine visibility so there are many categories and they all cross-link with each painting.

Visit: Elisabeth Olver
Categories: Client Sites , Custom Design , Journalists & Artists , Movable Type , Small Business
Tags: Acrylic, Art, Artists, Beach, Concept Screenshots, Customized Templates, Fireworks, Flickr, Giclee, Movable Type, Nature, Online Ordering, Paintings, Paypal, Photoshop, Search Engine Visibility, South Jersey | 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
AmyOutlaw.orgThis is a fairly standard Movable Type blog for a Friend (Quaker) based in the West-Philly neighborhood of Philadelphia, PA. The most unusual element is that the client wanted two separate blogs: one meant for daily posts and the other for more weekly posts (it's all set up in MT via categories). This also shows the use of Slidoo for a photo banner head. The pictures are all pulled from a particular set of her Flickr account. Visit site.
Categories: Client Sites , Custom Design , Journalists & Artists , Movable Type
Tags: Categories, Flickr, Movable Type | Edit
It's not necessary to develop your own Web 2.0 software infrastructure to create an independent Web 2.0-powered community online. It's far simpler to set a standard for your community to use on exisiting networks and then to use Yahoo Pipes to pull it together.

I decided on about a dozen categories to use with my DIY blog aggregator (QuakerQuaker). I only want to pull in posts that are being generated for my site by community members so we use a community identifier, a unique prefix that isn't likely to be used by others.

This post will show you how to pull in tagged feeds from three sources: the Del.icio.us social bookmarking system, the Flickr photo sharing site and Google Blog Search.

Step 1: Pick a community designator

I've been using the community name followed by a dot. The prefix goes in front of category description to make a set of unique tags for the aggregator. When someone wants to add something for the site they tag it with this "community.category" tag. In my example, when someone wants to list a new Quaker blog they use "quaker.blog", "quaker" being the community name, "blog" being the category name for the "New Blogs" page.

Step 2: Collect the community prefix and category name in Pipes

You begin by going into Pipes and pulling over two text inputs: one for the community prefix, the other for the specific category.

Step 3: Construct these into tags

Now use the "String Concatenation" module to turn this into the "community.category" model. The community input goes into the top slot, a dot is the second slot and the category input goes into the last slot.

Now, when you have a tag in Flickr with a dot in it, Flickr automatically removes it in the resultant RSS feed. So with Flickr you want your tag to be "communitycategory" without a dot. Simple enough: just pull another "String Concatenation" module onto your Pipes work space. It should look the same except that it won't have the middle slot with the dot.

Step 4: Turn these tags into RSS URLs

Pull three "URLBuilder" modules into Pipes, one for each of the services we're going to query. For the Base, use the non-tag specific part of the URL that each service uses for its RSS feeds. Here they are:

Del.icio.ushttp://del.icio.us/rss/tag
Flickrhttp://api.flickr.com/services/feeds
Google Blog Searchhttp://blogsearch.google.com

Under path elements, put the correct tag: for Del.icio.us and Google it should be the community.category tag, for Flickr the dot-less communitycategory tag.

Step 5: Fetch and Dedupe

Fetch is the Pipes module that pulls in URLs and outputs RSS feeds. It can also combine them. Send each URLBuilder output into the same Fetch routine.

Since it's possible that you'll might have duplicate posts, use the "Unique" module to deduplicate entries by URL. Through a little trial and error I've determined that in cases of duplicates, feeds lower in the Fetch list trump those higher. In the actual Pipe powering my aggregator I pull a second Del.icio.us feed: my own. I have that as the last entry in the Fetch list so that I can personally override every other input.

Step 6: Sort by Date

With experimentation it seems like Pipes orders the output entries by descending date, which is probably what you want. But I want to show how Pipes can work with "dc" data, the "Dublin Core" model that allows you to extend standard RSS feeds (see yesterday's post for more on this).

Google Blog Search and Del.icio.us feeds use the "dc:date" field to record the time when the post was made. Flickr uses "dc:date.Taken" to pass on the photograph's metadata about when it was taken. Pipes' "Rename" module lets you copy both fields into one you create (I've simply used "date"), which you can then run through its "Sort" module. Again, it's a moot point since Pipes seems to do this automatically. But it's good to know how to manipulate and rename "dc" data if only because many PHP parsers have trouble laying it out on a webpage.

Update: it's all moot: according to a ZDNet blog, "Pipes now automatically appends a pubDate tag to any RSS feed that has any of the other allowable date tags." This is nice: no need to hack the date every time you want to make a Pipe!

Step 7: Output

The final step for any Pipe is the "Pipe Output" module.

In action

You can see this published Pipe here, and copy and play with it yourself. The result lets you build an RSS feed based on the two inputs.

Categories: Practical 2.0 , RSS Syndication
Tags: Category Description, Delicious, Flickr, Google, Photo Sharing, Social Bookmarking, Yahoo | Edit
Whenever I talk with fellow web designers, the issue of "SEO" invariably comes up. That's techie slang for "search engine optimization," of course, that black science of making sure Google lists your site higher than your competitors. Over the years a small army of shady characters have tried to game the search engine results.

I've always thought such tricks were pathetic and bound to lose over the long term. Search engines want to feature good sites. It's in their best interest to make sure the sites listed are the ones people want to see. A search engine that returns unsatisfactory results quickly becomes a has-been in the search engine competition. So as soon as a site such as Google notices some new SEO trick is skewing the rankings they tweak their secret search algorithm to fix the SEO loophole.

Just Give Google the Content It Loves

In theory it's easy to make Google, Yahoo, MSN and the other big search engines happy: give potential visitors site they'll want to visit. Forget the tricks and spend your time putting together an amazing site. Search engines like text, so write, write, write.

I'm looking to join a web design house, which means I've been interviewing with slick web developers lately and whenever they ask me the best way to increase SEO for their clients, I tell them to start a blog. They look at me like I'm an idiot but it's absolutely true: two blog posts a week will end up being over 100 pages of pure content. All of these sites full of Flash animation get you nowhere with Google.

Just a note that any kind of text-rich web system can achieve many of the same results--blogs are just the easiest way yet to get content on your site.

Presenting What You Already Have: Blog your Water Cooler Chat

When I talk to people about starting a corporate blog they quickly start telling me how much work it will be. Bah and Humbug--your company's life is probably already filled with bloggable material!

I used to work in a bookstore where I did most of the customer service, much of it by email. About two or three times a week I'd get a particularly intriguing query and would spend a little time researching an answer (mostly by looking through the indexes of our books and searching the arcane sites of our niche). This research didn't always pan out to a book sale, but it marked our bookstore as a place to get answers and gave us a competitive advantage over Amazon and its ilk. Each of my email answers could have easily been reformatted to become a blog post. By the end of a year, I'm sure the volume coming from these obscure searches would be quite high (see yesterday's Long Tail Strategy post on the HitTail blog for an account of how attention to search engine's one-hit-wonders helped achieve a widespread keyword dominance).

Whenever something new happens that breaks you out of your routine, think about whether it's bloggable. At the bookstore, a new book would come in and we'd spend ten minutes talking about it. That conversation reached half-a-dozen people at most. In that same ten minutes we could have written up a blog post saying much the same thing.

Last Spring a controversial article appeared in the local newspaper that tangentially involved my employer. That morning my workmates gathered together in the reception area for the better part of an hour trading opinions and wisecracks. After about five minutes of this, I slipped back to my office and wrote my opinions and wisecracks down into my blog. I hit post and came back to the reception area--to find my workmates still blathering on, natch. My post reached hundreds and took no more time out of the work day than the reception pontifications.

Humans are social animals. We're always blogging. It's just that most of the time we're doing it verbally around the water cooler with three other people. Learn to type it in and you've got yourself a high-volume blog that will add invaluable content and SEO magic to your site.

Mix up your content: Tag Your Site

Lastly, a point to webmasters: it usually pays to think about ways to re-package your content. My most recently experience of this was tagifying my personal blog over at "QuakerRanter.org." Every time I post there a Movable Type plugin fishes out the key words in the article and lists them afterwards as tags. These tags are all linked in such a way that results send the term through the site's search engine to give back an on-the-fly index page of all the posts where I've used that term.

Tags are like categories except they pick up everything we talk about (when we use them aggressively at least, and especially when we automate them). We don't necessarily know the categories that our potential audience might be searching for and tagifying our sites increases our keyword outreach exponentially. My personal blog has 239 entries but 3,860 pages according to Google. It's the parsed out and re-packaged content that accounts for all of this extra volume. This doesn't increase traffic by that nearly that much, but last month about 30% of my Google visits came from these tag indexes. More on the mechanics of this on my post about the tagging.

Categories: Beyond SEO
Tags: Google Yahoo, Loophole, Search Algorithm, Search Engine Optimization, Search Engine Results, Search Engines, Seo, Yahoo | 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

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