My Love Affair with Code
Beginning – 1994
I had my first exposure to the internet while working as a contractor at Baldwin Wallace Collage and it fascinated me. I acquired a rudimentary editor and browser and began learning what made this Internet ‘thing’ work. Through study and practice I became skilled in HTML production. Later at Bowne & Co. I would answer code questions and help one of my colleagues. When he was asked to start the Internet Services Department, I signed on to help build that department. We worked on many projects that helped our clients to distribute financial information through the internet, most notably Roadway, Cleveland City Bond issues, and an internet version of the Gap Inc. annual report.
Upgrading my skills
I maintained and built my skills by following the W3C and their educational site w3schools.com. I learned CSS and built two demonstration sites based on this technology. The result of these sites helped me earn a position in the Cleveland Clinic.
Cleveland Clinic
Converting to CSS-based Site
There were two designers hired when I joined the Clinic, we both agreed that the site needed major upgrades. The homepage was dated and hard to change or update, most of the site was built using tables and there was no standard for text and far too dependent on images.
Unfortunately, there was no budget to redevelop the site either. So any improvements we made had to be on the back of some other initiative.
Incremental Changes
The first contribution I made to the website was to create a site-wide style sheet and used that to add a print style sheet to the Online Medical Reference (Disease Management) section. The information was easy to read on a computer screen, but did not make the transition to printed paper well. After capturing all of the styles used for the Disease Management pages, I spent an afternoon writing a CSS file to apply the current styles we were using and added a separate sheet specifically for printing the pages as legibly as possible.
Once the demonstration was reviewed and authorized by our manager, I spent a few days applying the style sheets to the entire section. This made future enhancements and branding changes in the future easier and more cost-effective because the foundation was started with this project. Making a print style sheet made this resource less expensive (less paper) and more useful (more readable and legible).
Search Engine Optimization
Another change I implemented was to install Google Analytics on clevelandclinicmeded.com website. It is a good way to monitor site traffic and usage, and to see if there are places where users ‘get lost’. This knowledge is useful to find and fix problems.
The traffic to our site and especially Disease Management took a huge hit when Google released their Panda rule set. Most of the paths for the Chapters were abbreviations or contractions – and did not register well under the new rules. So I was tasked to figure a way to make our site more amenable to the new rules. We needed to do two things: 1) make the folders organizing the content more like real words, use ‘index’ (index.htm) pages for content, and 2) add ‘meta’ tags to every page to give Google index a way to categorize our site content. This required a complete re-architecting of the Disease Management section. The heart of SEO is having your content properly identified with terms that your audience will use to seek that content. So we changed the folder names to give a better indication of what type of content was available.
Once the changes were complete, the URL went from old link: /diseasemanagement/hematology/hgf/hgf.htm to the new link of /medical-publications/diseasemanagement/hematology/hematopoietic-growth-factors/index.htm. This made the link more relevant to anyone looking for this topic. It also made it easier for more search terms to ‘find’ this content. Subsequently, we saw all of our previous traffic return within two months and kept increasing thereafter.
Upgrade to CSS 2 – Content containers not table cells
One of the demonstrated skills that help be get employed in this department was the ability to code and design web pages using CSS. Our physician director’s pet project was an online medical resource called the Disease Management Project. This information was later published in a book called Current Clinical Medicine. The way the website was structured, there was no easy way to print the pages from a browser. Our director, and other physicians, liked printing out the content for patients and their family to help them understand their condition. Unfortunately, the way the pages were initially structured made that difficult.
Achieving this required changing the page structure from a table-based structure to an HTML 4.1 / CSS 2 structure – while maintaining the look and feel that our audience expected (Figure). The text and headings were standardized at this time too. This was accomplished by building a series of CSS files – one for the page structure site-wide and a series of CSS files for the requirements of each individual section of the site. Once the style sheets were defined, our team began to recreate every page using the style sheets and template pages we built. After the conversion was completed, we tested and QA’d every page on the test server before migrating the upgraded site to the live server. Following this process, the only tables found on the entire site were for content – tables for data relating to the topic in a disease management chapter, or relating to information in a text-based Continuing Medical Education (CME) activity.
HTML 5 + CSS 3 – Responsive Website
As mobile devices became more and more a part of our audience, we decided to make the site accommodate these visitors with responsive site construction. We were most of the way there. Due to the high volume of work in our department had at the time, we brought in a freelance developer to help build the CSS for a responsive site. Working with him, I was able to design and develop new base code that defined the site. Once the stylesheets were done, I worked to convert the ASP based pages on our webcast index pages. Once complete, we did a complete QA and prepared the site for migration.
The effort we invested in this project is still operational years later and has been built on by others.
