Visually, the website looked as if it had been designed over 10 years ago. Black background, dark gray body, bold white type. Also, the images took too long to load, and I noticed that several of his links were not active.
I won't go into ALL the gory details, but once I saw his site's mark up code, I was shocked. There was absolutely no META data on any of his pages! Search engines, like Google, use this information when adding pages to their search index list. So when you type “Apple computer” on Google’s search box, Google goes through its list of websites, and uses that META data to show you all the websites that are related to that phrase. Joe’s website had none of this coding. How were robots and spiders supposed to help determine his page ranking without these extremely vital codes?
Down and Dirty
A few days later, I meet Joe at his office to discuss my findings. After reviewing all his web files, it became VERY clear that his website was a print designer's first attempt at web design and construction. Joe's website only had 6 pages, one of which was never completed. However there was about 50 .HTML files in his server; some dating back 2 years. Some of the images used were saved at resolution of 300 dpi (Great for printing! Horrible for web design.) and sized at 800 x 600 pixels. Quite an over kill, since all static web pages should use images at 72 dpi, sized to 300x400 pixels, on average. His image file sizes were over 3x what is actually needed for this kind of website. No wonder his photos took so long to load.
Whoever created his website, also did not understand how to use DIV tags and style margins. The previous designer used tables (much like in Excel) as spacers to place all objects where he saw fit. He also used individual tables for each paragraph of body text, instead of creating cells.
Finally, I also had to break the news to Joe about his site’s lack of META adata, and why it's so important for search engines.
To help Joe better understand about robots and spiders sifting through this website, I re-created his home page using .PHP, proper DIV tags, 2 include commands and a CSS style sheet. What does all this mean? Well, .PHP coding is just another language for writing/constructing websites. DIV tags produce the same effect as tables, but without unnecessary codes. The include command works similar to links on a web page, but for web coding. Say I’m building a website with 30 pages. Instead of writing the code for the main menu, on each individual page, I’ll create a “link,” this being the include command, to the file the contains the code for the main menu. This code is saved separately from all the other pages. So when Joe decides that he wants to switch the order of his menu, I won’t have to do it 30 times. I’ll do it once, save it, and the change will show up on every page. (Voila!) CSS coding works much the same way, but for styling text, borders, backgrounds, etc.
The results? What took the previous "web designers" 146 lines of code to create, I accomplished in 35. (Below are images of the two codes, for all to compare.)
So what's going to happen with Joe's website? After showing him how inefficient (and ineffective) his web pages are, he signed up for a total website redesign. His new site will grow from 6 pages, to approximately 25.
Keep following my blog for further updates on "Joe's" new website. Also, look for my follow up article on website construction, where I’ll discuss why I prefer to use .PHP coding, DIV tags, include commands and CSS style sheets, in more detail.
-Pete C.
Brainwerx Design
