Markup

Advocates of web standards and structured data (microdata), we recognized the importance of paying particular attention to the markup of the IHA's practitioners bio's as they were rich with different types of information.

As well as adhering to the usual good practice of using semantic markup, we also used schema.org to ensure we presented microdata to search engines since:

Search engines benefit greatly from direct access to this structured data because it allows search engines to understand the information on web pages and provide more relevant results to users. wikipedia / Microdata

As well as schema.org we also used Google's structured data testing tool to check we had well formed content.

UX automatic readability

Our design allows IHA's editors to compose content either with one or two columns.

To ensure optimized readability, regardless of editor choices, the styling that vELVET (our CMF) applies varies depending upon whether the copy is on a two column or one column page. This allows us to ensure the number of characters across a line delivers great readability in all conditions.

Here, both two columns and one have a comfortable number of characters per line (the one column layout automatically gains a larger font size to ensure this happens).

Both examples avoid the painful un-readability of the Amazon example:

Render text not image

IHA had their own logo before we came on board and early on we recognized the opportunity to replace part of their logo, specifically their tag line, with real HTML copy styled to accurately mimic that part of the image.

The result was improved readability (copy always renders better than an image) and since it was copy we were able to manipulate it with style rules for an alternate presentation on mobile devices.

Member management system

In order to help the IHA manage their own resources we created a custom member management system.

One member is given a member management permission and when they login they can see and use the member management pages.

Designing a bespoke member management system for our client was an important part of the project and we created all the core functions using the native API provided by our CMF, vELVET. These included:

• member management overview page
• membership page
  • create members (auto invites)
  • re-invite
  • assign additional rights
  • suspend / unsuspend
• member login
• password management.

This custom approach allowed us to keep the interfaces simple—only containing the controls our client needed.

Working with the native API (as opposed to a collection of plugins) ensured clean and efficient code, independant (and not at the mercy) of third parties.

vELVET

vELVET is our custom, friendly, end-user focused presentation of ProcessWire, a powerful open source CMS with an exceptionally strong foundation.

Custom logins

We leveraged ProcessWire 'roles' within vELVET and designed a custom view for each class of member, making learning curves gentle.

Help

We wrote over 3,000 words of original help, carefully structured and interlinked so our client's members, blog authors, authors and member-manager could dip in to quickly learn how to use their website with ease.

Search engine & human optimization

For this site, vELVET, our CMS, provided a number of search engine (Google, Bing, etc) and human optimization aids.

Meta description tag

We designed vELVET so it would take the first 160 characters or so of body copy and automatically use it for the contents of the meta description tag for a page, a good starting point.

But some clients are prepared to invest a little time polishing what will usually be the description of their page in Google and other SEs, so we also provide an 'SEO summary' field where a human can hand craft a description—vELVET intelligently uses the hand written description if one is present.

In addition we also detect if a logged in user has 'editor' rights to a page and if they do and the page has no manual SEO summary and too little copy to provide 160 characters of auto generated meta description then we alert them: