Summer 2006 was busy. A rare, perfect strain of busy. With the help of motivated clients, I launched 6 websites, developed 4 WordPress plugins and embraced Subversion to track code changes.

I no longer program from scratch what others have perfected. I am a gatherer, an installer, a customizer. My process grew simpler. It should come as no surprise to those in the industry, that I rely heavily on free website engines such as WordPress combined with custom templates and plugins. By using free software, I can spend more time creating beautiful layouts, discussing client goals, researching cost-effective hosting and ensuring that updates are not a pain in the neck.

The benefits of this approach were so immediate, I feel compelled to share my notes about what works.

Planning

• Mockup Phase
  Use Fireworks, use pen and paper, gather content, talk alot to establish shared aesthetic language, discuss within boundaries of open source projects / hosted web apps to save cost
• Good Hosting
  Choose reliability and speed over cost and features. Always searching for that perfect host. Install roundcube for webmail.
• Backstage admin area
  WordPress, osCommerce, Drupal, Shopify, Django, Ruby on Rails
• Integrated Search
  WordPress, Yahoo, Google

Content

• Beautiful, unique character
  There is still no substitute for the emotional response to professional use of colors, space, author’s voice, multimedia and design elements, Embrace accordingly
• Easy image management
  Flickr, iPhoto-Flickr integration, WordPress, Auto-generated page icons
• No nerd needed
  Markdown Extra, Flickr Photo Albums, phpIcalendar, Custom WordPress plugins
• A bit of hi-fi
  Lightbox, SiFR-based typography, YouTube, Quicktime VR
• Accessibility constantly improving
  Alt tags for images, 508, Talkr, Alternative larger text, Hidden “skip to content” links, Video transcripts
• Cross-platform
  Looks great in IE 5.5+, Firefox, Opera (if possible) and Mac’s Safari, Degrades gracefully on older browsers

Structure

• Web craftmanship
  Nice typography, Effective writing, Simple URL’s, “Looking for Something” error page, robots.txt, Use 4 corners as natural areas of functionality, Use conventional interface elements to enhance usability, Favicon
• Contemporary code architecture
  XHTML and CSS-based, Use customized templates, RSS available, Microformats, Subversion controlled
• Secure
  Seperate development from deployment code, Input-filtering, XSS attack awareness, Daily backups, Strong passwords
• Reciprocal Development
  A proportional amount of custom code is contributed back to the open source projects that reduced client’s cost/time-to-market

A website is part newspaper, …

Often required to communicate the goings-on, while archiving past content and creating an intuitive yet beautiful experience, a contemporary website has many areas in which to fail. Perhaps the website represents only an individual, perhaps it represents an entire company. Both, on varying scales, must function like a newspaper, delivering recent news and establishing online credibility, and must do so within severe limits on typography, formatting, bandwidth and code. For many designers, these are new assumptions. So where do we turn to create the optimal web experience? For starters, the ephemeral nature of newspaper design is a good candidate for web translation because, as is often true for websites, newspaper development is distributed and continuous.

Fear not. With very few exceptions print layouts can be replicated online. However, these image-heavy sites, will be as hard to update as their prehistoric paper daddies. So it must follow, that contemporary website quality is based on how well the web developer chooses to build upon the web’s assumptions and within the web’s limits. In real terms, the design is not complete if it is hard to add content.

Therefore, web developers are responsible for knowing about new services that improve website management and integrate them appropriately. At minimum, site owners are empowered to update their text content. At best, site owners feel in complete control of picture-scaling, paragraph-styling, and page layout all while avoiding the majority of hand-coding. Newspapers call this workflow and your website needs it.

… part museum, …

Due to the web’s immediate affinity for delivering content regardless of age, a reasonable system of organizing your client’s content into a searchable archive is a responsibility not a feature.

Some clients will surely want to create some intentional mystery by diligently “cleaning house.” Question their intentions, but be open to the general idea while gearing up to preserve the high-grade older content. Having a well-curated archive is in your client’s best interest. As the global reliance on instant information continues to grow, each site must communicate the client’s present realities by organizing open access to their past. And it is an easy and reliable way to establish an initial level of trust. For the incessantly practical sitting in the cheap seats, however, a quick Alexa submission will satisfy this general notion, preserving some historical record for you automatically. Call it archiver-friendly.

… and part mountain climb.

Creating a solid backstage admin area makes updating less of a chore, allowing the website to function efficiently through sustained growth. Check.

But, with all the well-conceived templates in the world, browser-based editing, Flickr integration, new-fangled web engines and liberal use of Markdown in place, your well-built website remains unfinished until those responsible for the content walk through the updating process.

Adjustments will be made, new code will be written, but this is not a problem for technology alone. This can only be solved through real hands-on instruction, cheatsheets and an open phone policy when something goes wrong. Demonstrate how to create interior links, walk through image uploading and write down how to add pages. Be considerate of others that don’t speak the geek. A strong investment in education always yields the best results.

Did vs. Done

You probably noticed the self-promotional screenshots accompanying this essay. These are the best of my summer work. I am sure that you are just dying to see how well I practice what I preach, so here are some handy links…

From top to bottom:

• Factory People
• Rupert Neve
• Auger Down Records
• Art Palace
• Shaune Kolber
• Okay Mountain (not pictured, spring ‘06 launch)

As always hit the comments with your feedback and thoughtful criticism, but please bear in mind, this is my house.

tags: wordpress, webdevelopment, freesoftware, webdesign, php, archivers

Post Info

Discuss, Permalink, Discussion Feed

Friday, September 15th, 2006 at 9:37 pm

topic: tech, work