Template Web Design

Client projects and tech blog posts about Template

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
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
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
Cornerstone FellowshipCornerstone is a relatively new church plant in Smithville, Atlantic County, New Jersey. They're site is a simple design built in Movable Type using off-the-shelf templates to keep the budget down. The most exciting part of the site is the podcast sermons and the ability to ask Bible questions and make prayer requests from the homepage. I'm most happy to see the church using the site and updating it regularly!

Pastor Fred Schwenger also has a new local connection: he and a partner have just opened Superior Automotive here in Hammonton at 880 S White Horse Pike! 

Visit: CornerstoneFellowshipOnline.com
Categories: Client Sites , Faith-Based , Local , Movable Type
Tags: Automotive, Bible, Church, Galloway, Hammonton, Movable Type, Mp3, New Jersey, Podcasts, Sermons, Smithville, South Jersey | Edit

I'm working on an international site built in Movable Type and including statements in multiple languages, including "Right to Left" languages like Arabic and Hebrew.

I was pleasantly surprised when I cut-and-pasted an Arabic text from MS Word into Movable Type and found the letters looking good both in the MT entry box and the resultant post. I didn't realize just how powerful UTF-8 encoding is and how well MT supports it throughout the system. Still, the output wasn't correct, as it wasn't displayed in right-to-left fashion. I needed to figure out the CSS for this kind of output and an easy way to allow the client to set this without forcing them into coding.

Using the highly-recommended Rightfields Plugin I added a checkbox field for posts that should be displayed in RTL. Here's a screenshot:

RightFields has an IF function that we can use to set a new DIV with our RTL style. Here's the coding in the MT template, stuck in just after the "entry-body" div:

<MTExtraFields>
<MTIfExtraField field="RTL">
<div class="rtl-display">
</MTIfExtraField>

Note: you'll also have to add similar code to close the div at the end of the passage.

Finally, as best as I can determine, this is the proper CSS designation for RTF display (Microsoft has a good webpage on this). It works in Firefox, IE7 and IE6.

.rtl-display p {direction:rtl;text-align:justified;text-align:justify;}

I'd be happy to get any feedback or corrections to this. I'm a typical 'Merican whose foreign language skills don't go far past a dozen phrases lifted from Sesame Street and long-ago French classes. Arabic and Hebrew typesetting are quite unfamiliar terrain.

Categories: Movable Type
Tags: Fashion, Hebrew, Highly Recommended, Languages, Movable Type, Ms Word, Pleasantly Surprised, Resultant, Rtl, Screenshot, Wikipedia | Edit
Every web designer under the sun talks about search engine optimization (SEO), but it amazes me to see how often basic principles are ignored. I'm in-between jobs right now, which means I'm spending a lot of time looking at potential employers' websites. I've decided to start a series of posts on SEO myths and realities that will talk about designing for maximum visibility.

I'm not going to focus on any of the underhanded tricks to fool search engines into listing an inappropriate page. Google hates this kind of tactic and so do I. You get visits for having good content. Good search rankings are based on good content and the best way to boost your content is to present your page in a way that lets both humans and search engines find the content they want. Part one is on website analysis and tracking.

Don't assume that your website is easy to navigate. One of the neatest things about the web is that we have instant feedback on use. With just a little tracking we can see what pages people are looking at, how they're finding our site and what they're doing once they're here.

Javascript Trackers:

My most advanced sites are currently using four different tracking methods. Most utilize javascript "bugs," tiny snippets of code that send individual results to an advanced software tracking system. I put the code inside a Moveable Type "Modules Template" which is automatically imported to all pages. Installing a new system is as easy as cutting-and-pasting the javascript into the Template and rebuilding the site.

AXS Visitors Tracking System
This software installs on your server but don't let that scare you: this is one of the easiest installations I've ever seen. AXS gives you great charts of usage: you can narrow it specific pages on your site, or even particular search engines or search phrases.

There's also a option to view the lastest traffic by visitor. I love watching this! You can see how individuals are using the site and where they're navigating. I've been able to identify different types of visitors this way and understand the complexity of the audience.

It doesn't seem like AXS is not being developed anymore. The latest stable version came out over two years go, which is a shame.

HitTail
This service watches search-engine links and makes recommendations for new keywords. I wrote about this service yesterday in Blogging for the Long Tail.

Reeferss.com
This is a simple simple bit of software. Like every other tracking system it keeps track of referrers: search engines and websites that bring traffic to your site. But unlike the others that's all it does. Why care then? It provides a real-time RSS feed of these visitors. I bring the feed into my "Netvibes" page (a customized start page, see below) and scan the results multiple times a day.

Google Analytics
The internet's gatekeeper bought the Urchin analytics company in April 2005 and relaunched the product as Google Analytics shortly thereafter. This is becoming an essential tracker. It's free and it's powerful, though I haven't been as impressed by it as others have. See its Wiki page for more.

Internet Trackers:

It's easy to find out what people are saying about you online.

Technorati
This service tracks blogs but you don't need to have a blog to use it, for Technorati will tell you where blogs are linking. Give it your URLs (or those of your competitors!) and you'll know whenever a blogger puts in a link to you. You can also give it keywords and find out when a blog uses them.

Google Blog Search
Google can also let you follow blog references or keyword mentions on the blogs. Google will also track beyond blogs of course. Type "site:www.yourdomain.com" into the main Google search page and you'll see who's linking to your site (or to the competition). There are lots of other services that track blogs and mentions--Sphere, Bloglines, etc. They all have different strengths so try them and see what you think.

Feedburner
The best RSS massager has always focused on ways to track your RSS feed. They've recently introduced page tracking software too. It looks great but I just installed it this week. I still have to see if it's as good as Feedburner's other offerings.

Keeping on top of this flow of data:

It's easy to get overwhelmed by all of this information. Most of the tracking services provide RSS feeds (See The Wonders of RSS Feeds for an intro). I use Netvibes, a customized start page, to pull these all together into a single page that I can scan every morning. Here's a screenshot of part of my Netvibes tracking page--the full page currently shows fourteen tracking feeds on one screen:

So why is tracking important to SEO?

With tracking you find out what people are looking for on the internet. This helps you create pages and services that people will want to find. You might be surprised to see what they're already finding on your site. Some examples:

  • Analyzing one site, I noticed that few pages I thought were obscure were bringing in high Google traffic. I looked at these pages again and realized they did a good job of describing the company's mission. I consequently redesigned the site homepage to feature them and I made sure that those pages contained direct links to its most important services.
  • When I started work for another client I looked at their site and suspected that they're most important articles were not being seen--visitors had to click through about four times to get to them. Six months of tracking confirmed my hunch and gave me the hard data to convince the executive director that we made some small modifications to the design. Having this strong content linked right off the homepage helped bring in Google traffic.
Categories: Analytics , Beyond SEO
Tags: Design, Google, Maximum Visibility, Myths And Realities, Search Engine Optimization, Seo | 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