open-services.net Website Redesign

As the web developer for the Open Services for Lifecycle Collaboration (OSLC) organization, I was able to craft and code a better-looking and more compelling experience for the website.

Challenges

  • Design, code, and manage a more engaging and professional website for a growing community
  • Convert static HTML pages to ExpressionEngine content management system
  • Write custom ExpressionEngine extensions and plugins for managing members and content
  • Create an intuitive content strategy – information architecture, editorial standards – to manage a technical community and a variety of connected content
  • Raise search engine ranking and increase overall site traffic

Tools

  • Adobe Photoshop
  • Coda
  • jQuery
  • Expression Engine
  • TextMate

When I joined the OSLC community team at IBM, the site looked like this:

Original version of the website for the OSLC community
click to embiggen
The OSLC website circa May 2011

My job was to make the site look more modern, engaging, and professional while also reorganizing the existing content.

Updated home page for open-services.net
click to embiggen
The updated open-services.net home page
Updated page with instructions to get involved with OSLC
click to embiggen
The "Participate" page

I was responsible for the latest design’s overall layout, theme, and art direction; I structured the site with search-engine friendly, accessible, and standards-compliant HTML5, wrote the CSS to implement the design, and coded the custom JavaScript to improve the experience of our visitors where I could.

The original site was static HTML pages. To support the site’s future growth, I migrated the content to a content management system; ExpressionEngine (EE) was an easy choice.

The little site has a surprising variety of interrelated content: working groups, contributing organizations, specifications, compatible software, legal agreements, tools, tutorials, news updates, resources. Because EE is designed to handle lots and lots of different types of content, capturing and reusing all that data came naturally. Meanwhile, the amazing add-on Playa makes it easy and user-friendly to create and display relationships between bits of information, and behind the scenes the Structure add-on makes everything much easier to manage.

With the basic redesign finished and an improved content structure in place, I also added a site forum, which involved creating a custom EE forum theme to match the current site and some custom EE extension work to let people write posts in the easy-to-use Markdown language.

Input for an ExpressionEngine forum that accepts the Markdown language
click to embiggen
Custom forum post editor with "Pagedown" Markdown editor

Later, I led the technical effort to change the site’s membership and access rules, an undertaking that required a custom EE Wiki theme and a handful of custom EE extensions for categorizing members, using Markdown language, and expanding the capabilities of the EE wiki software.

The page to edit a wiki article, with a custom wiki theme
click to embiggen
Custom wiki edit template, with Markdown language and other extensions

In addition to the main site, I’ve been responsible for creating a package of web assets for reuse on related projects like the Eclipse Lyo software development kit.

Screen capture of the homepage for the Eclipse Lyo SDK and Test Suite project
click to embiggen
Project home page for Eclipse Lyo SDK

All together, the site looks vastly more modern and professional, the content is well-connected and better organized, and the right tools are in place to build the community and the site going forward.

I couldn’t have done it without the help of others:

Am I doing it wrong?

Comments? I don’t do open comments. Life is too short.

If you have something to say, get in touch via .(JavaScript must be enabled to view this email address) or on Twitter.