Gary Ames is currently Executive Director of Behavior Analysis & Therapy, a psychological consulting firm in Bala Cynwyd, PA, USA, but in the past 30 years he has done everything from teaching to executive coaching. He has accumulated a lot of knowledge in that time. Though he no longer practices executive coaching as a profession, he does like sharing his previously acquired knowledge with acquaintances, and does this by directing them to his personal website.
Gary contacted me when he learned that his personal website, in addition to several other web properties he owned, no longer functioned as originally designed.
The original goal of this project was to get his personal website working again, which was affected by technical issues like broken links and unreachable databases, refresh some of the site's content, which had grown outdated, and give the site's design an update while maintaining the familiarity of the layout and navigation.
Additionally, Gary desired a simplified, consolidated domain management experience. So, along with getting his personal site working again and giving it a facelift, we decided to transfer all of his domain registrations and hosting services to one provider and move the site's content from a propriety content management system to the more easily maintained and user-friendly WordPress.
The project, originally estimated to take three or four months to complete, took nearly double that. But in the end—after re-creating a corrupted database, nearly losing several domains due to registration expiration, battling with hosting companies over lost login credentials and numerous other minor obstacles—the site was re-born with a refreshed look and, most importantly, updated and accessible content.
Gary's personal site has and continues to be structured in the form of a book. Each chapter focuses on one part of executing a successful job search and contains several lessons, or posts, with each lesson building on top of the knowledge gained from prior lessons.
The previous site design made it easy to jump from one piece of content to the next with its ever-present menu navigation, however, it did not convey to the user this idea of a structured progression well.
In the re-design we made several enhancements to the site to help guide the user through the site's ideal flow. We gave the site's menu navigation chapter numbers, an idea re-enforced by large headers found on every page; we made the initial landing page for the site Chapter One's index page, as opposed to the About page; and we added smart buttons to the bottom of each post to guide the user on to the next lesson.
The menu navigation boldly displays each chapter's name and on hover reveals the chapter's number with a smooth
transition created by a combination of
:before pseudo-element manipulation.
The About and Contact list elements feature scalable vector icons from the
Font Awesome toolkit. The menu is
positioned to always be visible on the top-left corner of the screen for devices with larger displays and designed to be
accessible only when needed on smaller screen displays, to help maintain the site's content hierarchy across all
devices. On smaller screen devices, clicking on the Menu hyperlink slides the menu navigation in from the left where
it's hidden off-screen until needed.
On every page the first text seen is the chapter number. It, too, is bold in display, and uses a couple dozen layers
text-shadow to achieve the 3-D look. These are not images, but fully accessible
In WordPress, the chapter number is maintained through a custom field specified for each post. For the category pages, because each chapter will contain only posts associated with one chapter, to get the chapter number to display on the top of the page we wrote a simple query that finds the first post's custom field (the chapter number) and injects it into the top of the page.
In addition to this query, there was a bunch of other logic required to make sure that category descriptions, post descriptions and all the other metadata displayed correctly, making this site's code—the parts written in PHP—quite interesting. See more on GitHub.