webmaster tIps

In my web­mas­ter / web pro­gram­mer daily rou­tines I am typ­i­cally going through client sites and opti­miz­ing them for per­for­mance.  The desired out­come of this is that we will improve the users expe­ri­ence.  This is impor­tant to our clients because the sites per­for­mance score may fac­tor in to where the  site shows up in search engine results.  Search engines, like Google,  have a vested inter­est in pro­vid­ing the best results to the search user. If the user uti­lizes the search engine and gets qual­ity / usable results they will con­tinue to use the search engine service.

A few things that might get a web­site into trou­ble in the usabil­ity zone include: Non– Opti­mized images, Non-optimized code, bro­ken links, miss­ing pages and gen­er­ally un-usable content.

IMAGES

Top of the list is Non opti­mized images. One of the more preva­lent things that can may cause a user to “bounce” or leave your site might be non-optimized images. Why?  They take too long to load on the page.  Although an image direct from a nice cam­era can look beau­ti­ful, It might take a long time to down­load. If some­one is wait­ing to see an image load they might stick around to view it.  Or they may move along to a faster load­ing site.    This can be very impor­tant regard­ing back­ground images or slider images that may take awhile to load.   So it can be in website’s best inter­est to get large images scaled down to screen ready for­mats.  If you want to show high qual­ity images then the ini­tial image should prob­a­bly be a thumb­nail low sized image.    How can you opti­mize images?   If you own a copy of Pho­to­shop you can use its excel­lent save for web feature.

Here is a link to get an old ver­sion of Pho­to­shop for free:

save for web

Down­load Pho­to­shop for Free

I per­son­ally use Pho­to­shop CS4 and it works just fine for most things. The link above is for Pho­to­shop CS2 – still great soft­ware. On a MAC you may need Rosetta type soft­ware if run­ning newer OS.

Most pho­tographs look decent using a jpeg for­mat at about 30%. Image size is a rel­a­tively broad con­cept. How­ever con­sider old desk­top screen sizes that include:

640×480

800×600

1024×768

save for web photohop

They go up from there, how­ever these sizes can give you an idea of what a screen image size should be.    And in gen­eral they dont need to be 2000px or more at 300 DPI. Web Images should be set to 72DPI as a stan­dard. If you have Pho­to­shop, then you should uti­lize the save for web fea­ture as noted in the graphic to the side. It auto­mat­i­cally sets the image to 72 DPI. You then can choose qual­ity set­tings etc.

 

After You ini­ti­ate the save for Web from the File Menu.

Using the drop­down (right­side –top ) > Choose file type. JPG -> Then choose Meduim (or adjust qual­ity man­u­ally with the slider). Press Save – and note the loca­tion! Use these opti­mized images on your site. They will usu­ally pass site opti­miza­tion check­ers easily.

I use JPG for almost all pho­tos. 25 – 45% is great for the web. The big­ger the dimen­sion – the more I compress/ reduce qual­ity to save file size.

NON– Opti­mized Code

This is some­thing a web coder will need to address. Wher­ever pos­si­ble it helps to opti­mize code. One of the more com­mon mis­takes in this area include inline styles. Styles are codes that tell the browser how to dis­play a font for exam­ple. They are inline when they apply only to a spe­cific ele­ment for exam­ple the above head­ing “Non-OPtimized Code”. The most effi­cient way to style any ele­ment on a web page is to exter­nal­ize the styling guides using an exter­nal CSS stylesheet. This way instead of styling jus this one ele­ment you might style any ele­ment, or all head­ers for exam­ple once. This can save on down­load time and com­bined with other opti­miza­tions it can improve over­all site per­for­mance. When you con­sider the amount of code that can be placed within any given page to style it, there can be seri­ous per­for­mance gains.

There are also inline javascript codes that can take up many lines on your pages code. These again can often be placed exter­nally. I have seen hun­dreds of lines of code on a sin­gle page ded­i­cated to CSS and javascript, and the effect is a slower load­ing page. Even with a fast con­nec­tion this can be cumbersome.

Bro­ken Links and Miss­ing pages.

Bro­ken links and Miss­ing pages can be hard to detect at times. Take a sit­u­a­tion with a recent client where they changed from a sta­tic web­site to a CMS. While the client gained the abil­ity to add pages at will, they didn’t notice that many of the old pages names changed. This can have a neg­a­tive affect of Search Engine Per­for­mance. Why? Search engines may index your pages for their search results. If when a user goes to one of these pages that are indexed or oth­er­wise linked to and they get a “Page not Found Error”. Your search Engine Rank­ing is sure to suf­fer. The cure for this would be to setup Redi­rec­tion. For exam­ple in the case the old page was named /red-widget.html/ and the new name is just /red-widget/ . You would redi­rect red-widget.html/ to /red-widget/ . This can be done on Apache based servers using a file called:  .htac­cess .    The .htac­cess file is avail­able on Apache based servers only (and in some cases it is locked down/unavailable). Most web hosts these day do uti­lize Apache based servers. My guess is because it is open source (free). It is also based on a linux oper­at­ing sys­tem, so its pretty sta­ble. You can find the .htac­cess file in your web root of your FTP directory.

htacces

 

Using a 301 Redi­rect com­mand in the .htac­cess file.  It would look sim­i­lar to this:

 

RewriteEngine On

Redi­rect 301 /pagename.html  http://www.domain.com/pagename/

 

The first line may already be declared if the file exists

Con­tent

Con­tent is really impor­tant. Bot­tom Line.   The gen­eral infor­ma­tion about you or your com­pany is stan­dard and should be well thought out.   One thing that is very impor­tant in cre­at­ing your con­tent is that it be unique and rel­e­vant.   Why is unique impor­tant?   Sources at google sug­gest that  if another site has the same con­tent as yours,  your site can get pushed down in search results.  Typ­i­cally the bet­ter site will stand out and the other could get pushed down­ward.   Rel­e­vance is impor­tant and can be explained like this.   If a user is look­ing for  red wid­gets, and you sell red wid­gets, your site should have con­tent rel­e­vant to that.  Pretty simple.

How­ever there are other fac­tors that could con­tribute to bring­ing in more rel­e­vant traf­fic. Unless you are the only one in your indus­try it can make a huge dif­fer­ence in your over­all traf­fic if you have qual­ity con­tent beyond what is stan­dard to offer.   This con­tent should pro­vide util­ity to the poten­tial viewer. For exam­ple if one were are try­ing to learn more about a red-widget. Then you might pro­vide Pho­tos, arti­cles answer­ing com­mon ques­tions about red-widgets and other resources. If you have a good resource then it is more likely to get linked to and found.   I could go on and on about con­tent.  I just wanted to pro­vide a few tips on the matter.

About the author

 I’ve started design­ing web­sites while at Uni­ver­sity of Hous­ton dur­ing my first Pho­to­shop 3.1 expe­ri­ence in 1996 on a Mac­in­tosh com­puter. I built my own com­put­ers (Win­dows PCs) with the help of a friend and have been dig­i­tally involved ever since. I am both Win­dows and PC lit­er­ate but grav­i­tate toward OSX. I’ve grad­u­ally got­ten back to my roots as a tac­tile artist / designer by work­ing more with tra­di­tional medi­ums like draw­ing, paint­ing, and mixed media.

I've started designing websites while at University of Houston during my first Photoshop 3.1 experience in 1996 on a Macintosh computer. I built my own computers (Windows PCs) with the help of a friend and have been digitally involved ever since. I am both Windows and PC literate but gravitate toward OSX. I've gradually gotten back to my roots as a tactile artist / designer by working more with traditional mediums like drawing, painting, and mixed media.

Leave a Reply

*

captcha *

Anti-Spam Quiz:

UA-7731317-2