Javascript Web Design

Client projects and tech blog posts about Javascript

FWCC Google Maps MashupThe Friends World Committee for Consultation unites Quakers of all stripes together in joint projects and dialog. It's Americas office has the most complete listing of U.S. and Canadian Friends Meetings and Churches and now has a map to prove it! This is a mash-up of the FWCC database with Google Maps.

Because of limitations of how many data points Google can show the countries have been divided into regions. The main access page is a screen shot of a Google Map with a old fashioned imagemap overlay that allows you to select the region you want to look at. Javascript goodness shadows the currently selected region.

See it live: www.fwccamericas.org/friends
Categories: Client Sites , Faith-Based , Nonprofit
Tags: Friends World Committee For Consultation, Fwcc, Google, Google Maps, Javascript, Quaker | 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
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
William Penn Charter School Media PagesOne element of a general social media consultancy project I've undertaken with Philadelphia's William Penn Charter school is a dynamic media page. They had collected a large number of photos, movies and podcast interviews, but the media page on their site was static and without pictures. I worked with them to come up with media policies and then built a media site that automatically displays the latest Flickr sets and Youtube videos, all laid out attractively with CSS. The Flickr part was complicated by the fact that Flickr doesn't produce feeds of sets and this required access to it's API and fairly extensive Yahoo Pipes manipulation. The original podcasts were just uploaded MP3 files and I worked to collect them together via Odeo (hosting) and Feedburner (feed publishing), which then provides RSS and iTunes support. The actual content for the page is collected together on the Martinkelley.com server and embedded into the Penn Charter media pages via javascript. Other work with Penn Charter includes Google Analytics and Dreamweaver support.

Update: PennCharter redesigned their website in August 2009 and the Media Page is unavailable.

Client Testimonial:

"Martin has worked for our school to integrate Web 2.0 technologies into our communication materials. Martin is highly-personable and his is an expert in current technological approaches. This is a hard match to find in consultants." April 30, 2009

Michael Moulton, Technology Director, William Penn Charter School.
Hired Martin as a IT Consultant in 2007, and hired Martin more than once.
Top qualities: Personable, Expert, High Integrity.

Categories: Client Sites , Educational
Tags: Analytics, Consultant, Css, Dreamweaver, Flickr, Javascript, Media, Odeo, Penn Charter, Podcasts, School, Yahoo, Youtube | Edit

Web Designer, Content Editor, SEO Specialist

See also: Print Resume, LinkedIn profile.

SKILLS

Consulting: Fifteen years of experience in nonprofit world. Much of this work consists of educating staff and leadership on effective use of online communication technologies. Current focus is on analytics, integrating social media, and helping nonprofits adopt content management systems.

Web Development: Proficiency in HTML, XHTML, PHP, CSS, PERL (CGI), MYSQL, Adobe Dreamweaver, Six Apart's Movable Type, Drupal, WordPress, t and related content management systems, along with Search Engine Optimization techniques and analytic tracking methods. Experience with various shopping cart backends for E-Commerce applications. Comfortable with Quark Xpress, Adobe Pagemaker, Adobe Photoshop, Joomla, and Javascript. Close follower of Web 2.0 developments.

Editing: Experience as Acquiring Editor for nonprofit publishing house; proficient at negotiations, copy editing, marketing.

Categories: Resume
Tags: Adobe, Analytics, Annual Reports, Bulk Email, Cheltenham High School, Consulting, Content Editor, Delicious, Dreamweaver, Drupal, Editor, Feedburner, Fellowship Of Reconciliation, Flickr, Friends General Conference, Friends Journal, Geography, Graphic Representations, Haddonfield, Internet Communications, Javascript, Joomla, New Society Publishers, Ning, Nonprofits, Nonviolence, Oreilly Media, Pagemaker, Pax Christi, Pennsylvania, Philadelphia, Philosophy, Photoshop, Quakerquaker, Raphael Webscapes, Resume, Search Engine Visibility, Seo, Six Apart, Social Media, Villanova, Villanova University, War Resisters League, Wordpress, World Game Institute, Wyncote | Edit
Martin Profile PictureMartin Kelley is a web designer in the Philadelphia area. Here's the story of his evolution from activist book editor to social media web guru!

Categories: Martin
Tags: Alternative Press, Book Editor, Economics, Editing, Email, History, Independent Bookstores, Journalism, Music, New Society Publishers, Peace Groups, Philadelphia, Pictures, Quaker, Small Business, Social Media, Typesetting, Web Design | 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

Hire Martin! I build sites and online promotion campaigns to your specs and budgets and can be your guide to social media marketing.

Also available: my resume, a brief biography, organizations I've worked with, speaking and workshop engagements, client recommendations and a portfolio of recent work:

Recent Entries

Recent Comments

Archives