November 2009 Newsletter
**** The 4specs Perspective
You may not agree with all of our thoughts in this newsletter. Our newsletters go to small companies with 4-5 employees and a simple product offering and to companies above $500 million in sales with thousands of products. These newsletters are intended to have you think about your website and how to develop and maintain the site over time. If you disagree, think about why you disagree. Let me know and we can discuss your perspective.
Save a Copy Before You Start
As you start, save a copy of the website - to a CD, memory stick or as a zipped file. This is just in case.
This month we will go over the first steps in cleaning up your website and to start on simple search engine optimization.
The Google Search Engine Optimization Starter Guide is a good starting spot.
[link no longer works]
The first step is to tell browsers what type of code is used in the document. While the XHTML variation was used on many websites, including 4specs, several months ago the XHTML path was abandoned and work was focused on HTML 5. I expect that it will be 4-5 years before HTML 5 is adopted and for most building product websites the difference between HTML 4.01 and 5 will not warrant changing the code even after HTML 5 is adopted. For simplicity, I recommend the transitional DOCTYPE and not the strict, as it makes getting the pages to validate somewhat simpler.
Dreamweaver will convert the code on a page and place the correct DOCTYPE on the page. The key stokes in Dreamweaver CS4 are File > Convert > HTML 4.01 Transitional. I suggest you also clean up the html code using the Command > Cleanup HTML.
I typically work in Dreamweaver in a Split Code/Design view. This permits me to view the code as well as the image. I also have the properties inspector at the bottom of the page and the Window > Files open on the right side. In the Edit > Preferences > Code Format set your code indent. I work with a flush left to make copying of html code easier. You may prefer an indent of 2 until you are familiar with your website's code.
Next apply source formatting to the page Command > Apply Source Formatting This will format all the code to make it easier to work with in the next examples.
The content type meta tag using iso-8859-1 tells the users browser this page is in American English. There are other options and I think this is the most common. Add this to your html head area if it is not there just under the Title tag. See just below.
Your Page Title and Description are Very Important
To understand where we are heading, look over the first 6 lines of html code for our glass countertops page and the resulting Google search listing:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Glass Countertops Design Information</title>
<meta name="Description" content="For glass countertops products and design information, includes commercial, custom and cast glass countertops.">
I highlighted in yellow the html title and description lines. Google used these words in the search engine results. A careful choice of words and key words significantly improve the likelyhood of a Google user coming to your site.
Each page on your website should have a unique title and a unique description. In the glass countertops example above, you can see the importance of the title and description. I recommend your company name in the title and using several of your important key words. You will want to go to your Google Analytics and see the key words actually used to get to the specific page. When I checked our key words used to get to the glass countertops page a month ago, I added the words commercial, custom and cast glass to the description as they were words used to find the 4specs page. I see that I could have added more words to the title and description and still have them displayed in Google.
If you are working with a content management system or using php or asp processing on the page, you will need to learn how to apply these suggestions to your system.
You can eliminate all the other meta tags - other than title, description and content-type. Examples to eliminate are
<meta NAME="ROBOTS" CONTENT="INDEX,FOLLOW">
<meta NAME="revisit-after" content="1_days">
<meta name="author" ...
<meta name="keywords" ...
<meta name="Generator" ...
The robots standard is to visit the page from time to time and you do not need to tell the robot to index and follow. The revisit-after meta-tag is not used at all. More about this in a few months.
You will want to update the title and description on all the pages in your website. After doing a few pages, this will go much faster.
Do Your Pages Validate?
Last month we recommended downloading Firefox and the HTML Validator add on. Save your web page and view the page using Firefox. Look at the lower right side of the browser and you will see the HTML Validator results. Do not be discouraged by a lot of errors. Look at them and start to understand what is causing them. Over time you will get all the errors corrected. It took me a year to get the 1,000+ pages on 4specs to validate.
Image Optimization - make the images load faster
Next we want to start on some image optimization. Opening Photoshop (CS4 or Elements), open the key images used on your home page and any images used throughout your website. Use the commands File > Save for the Web and see how the image looks at different qualities. Typically logos will be best saved as a gif or png and photos saved as a jpg. Almost all of the 4specs showcase listing images with a photograph are saved as a jpg - medium or 30% quality. I am generally saving-for-the-web logos as png 8's as better than a gif.
For this work use the same file name when you save - if you change the file type - say gif to png, you will need to change the name of the image file on every page. For starters, keep the same file type. Check to see how much smaller the new image is. This will speed up every ones viewing of your website. Later on when changing images, save with a new name to avoid caching problems of a user seeing an older image.
About a year ago I was unhappy with the appearance of our 4specs.com logo as a gif. I spent most of a weekend working on the logo. I needed to save the image with transparency - so the proper grey background would be seen - and It looked great as a png 24 with transparency. After many hours trying to understand why png 24's were not a recommended solution, I realized that Internet Explorer 6.0 rendered the 4specs png's transparency with a darker grey background than the base page. I finally decided to let the IE 6.0 users see a darker background and the 90% of the users with IE7+, Firefox and Safari see a better looking logo. I recommend staying away from png 24's until you understand the problem as it applies to your images.
Modularize Your Headers and Footers
The last step this month is to look at modularizing your heads and footers. A new website may be designed using a template system in Dreamweaver. As 4specs was done in FrontPage for many years, I was accustomed to using html includes and used that system when I switched to DreamWeaver. I expect that converting an existing site to use html includes will be simpler than rebuilding every page as a template.
The concept is to use the same header and footer on every page - probably excluding the home page. You may also have a standard left side navigation that can be converted to a module. This will make future updating of the standard modules a snap as Dreamweaver will save the changed module on every applicable page.
Select a relatively standard page. Attempt to get the header and footer to completely validate. You do not want to have the same error appear on each page if you can avoid it. With the Window > Files view open, select the assets tab. In the code view, select the header code and click the plus sign at the bottom of the Window > Files area. This will save the code as an asset. Repeat for the footer and any left side includes.
You can now add this modular code to every page on your site and delete the existing code. If you were using server-time includes, now is a good time to convert the server-time includes to assets used as a design-time include. Be sure your Google Analytics code is in the footer asset - don't forget to put the Google Analytics code on the home page.
Upload the revised pages and check to be sure there are no problems.
Note that we have not done any redesign of your pages or website, just cleaned up the pages and prepared for major changes in the future.
Questions and comments are always appreciated.
--------------------------------------
Colin Gilboy
Publisher - 4specs
Contact us