Case Study: Why Even a Capable Do-It-Yourselfer Can Benefit From Hiring a Pro
Jeannine Bertrand, president of Innovative Virtual Creations, had a problem. She needed a clean, professional looking website to sell her products and services online, but like many small business owners starting out, she was on a budget. And, as her business grew, she wanted to be able to make her own changes and additions to her site. So, she signed up for a beginner class in HTML and went looking for a web design template that she could use to build her site herself.
Having found a template she liked, Jeannine set about planning her site and creating her content. Once she was ready, she fired up her html editor, loaded her template, and set to work plugging in her carefully crafted content. And that’s where her troubles began.
Pretty design, but…
Jeannine had chosen this attractive, clean-lined template, with a header area for her company’s logo and name, a left navigation menu with a dark blue background, and a basic footer. The template’s design was visually pleasing, but straightforward and simple — and its underlying structure should have been too.
Jeannine had a good basic understanding of HTML from the class she had taken, so she thought it would be an easy matter to customize the template for her own site. Unfortunately, Jeannine’s straightforward, simple design lacked an easy to use structure, and it was very difficult for her to find the right place in the source code to make the modifications she wanted to. Jeannine quickly grew frustrated at her inability to easily control the layout of the design, and that’s when she turned to us for help.
We asked Jeannine to send us a text file of her homepage’s source code. When we opened it to look for the source of her display problem, we were amazed. Jeannine’s simple, straightforward page had been built using more than 8,730 characters of convoluted, over-complicated code — no wonder she couldn’t find where to make her edits! We quickly found the source of the layout problem that had brought Jeannine to us in the first place, but in examining the code to find and fix the error, we noticed another problem. A very serious problem.
Look ma, no navigation!
The designers of the original template had relied heavily on background images for the site’s design – even for areas that were simple solid blocks of color. You may be thinking, “So what?” But take a look at the screenshot to the right. Because the template used white text for her links, and the background of the page was also white, anyone browsing Jeannine’s site with images turned off would have no way of knowing that there was more to her site than the homepage. They would be completely unable to navigate her site, and likely wouldn’t stick around long enough to know they were missing out on a great deal of valuable content. This is a major usability problem.
People who can’t browse can’t buy, and for an online business, that simply isn’t acceptable. When we discussed our findings with Jeannine, she instantly recognized the seriousness of this problem, and asked us to help.
From confusion to clarity in three easy steps
We decided to start by re-creating Jeannine’s design from scratch. We wanted to be sure that Jeannine would easily be able to edit her site without worrying about breaking the layout, so we kept the basic table structure, but reduced it to a single table instead of the 26 tables that originally made up Jeannine’s design.
Once we had the basic table structure set up, we began adding the site’s design elements back in. Using cascading style sheets (css), we were able to eliminate the background images, and replicate the original design’s layout while at the same time keeping the underlying code to a minimum.
Finally, we tested Jeannine’s new design in several different browsers to be sure it displayed consistently, and checked the code to be certain it was error free, and W3 compliant.
I can’t see a difference. Can you see a difference?
When we turned Jeannine’s homepage back over to her, we had reduced the code to 2,789 characters, and had cut the overall size and load time of her page in half! The source code was clean, simple, and easy to read, and aside from some small aesthetic changes, the resulting design was nearly indistinguishable from her original template. So how did we do? Judge for yourself.
New & Improved Homepage
|Total characters: 8,731||Total characters: 2,789|
|HTML size: 21K||HTML size: 3K|
|Total image size: 20K||Total image size: 18K|
|Total page size: 41K||Total page size: 21K|
|Page load time (56K connection):
|Page load time (56K connection):
|Good usability? No||Good usability? Yes|
|See the original source code.||See the new and improved source code.|