Hosting Traps to be Aware of

One of my students sent me a link to an excellent article on things to be aware of when purchasing a web hosting server package. Here are some highlights from Jason Faulkner’s article:

  • Be cautious on paying for your own dedicated server
  • Be skeptical of the claim “Our Data Center Is Top Notch”
    • Cisco router and firewall (I have a Linksys – a division of Cisco – home router with a built in firewall).
    • 100 mb backbone (all my equipment and NICs are 100 mb capable), but you would probably see gigabit backbone instead.
    • Backup power supply (pick any consumer level battery backup).
    • Climate controlled environment (we have heating and air conditioning).
    • [insert a stock photo of row of server racks here which I paid $20 for the rights to use.]
      Granted this is a very absurd example, but you get the idea of how easy it is to stretch the truth.
  • Avoid The “Free” Domain Registration With Hosting Package
    If there is nothing else you take from this article, remember this: Never let your hosting provider register your domain name for you as part of a hosting deal. Often times you can purchase a hosting package which includes free domain name registration and renewal as long as you remain a customer. While this may seem appealing, it is the worst thing you can do because your hosting provider, not you, owns the domain. This may not sound like a big deal, but as soon as you want to move hosting providers, guess who controls your domain? Not you. Worse yet, there is absolutely nothing you can do to get control over your domain unless the current owner (the hosting provider) transfers it to you.
  • Be Aware of “Unlimited Bandwidth and Storage”
  • Less Than $5 Per Month Hosting: As the adage goes… you always get what you pay for. Putting it bluntly, if you are paying $3 per month for hosting, you are only going to get $3 worth.
  • Beware of the claim ” 99.99% Up-Time Guarantee”
    If you do the math, 99.99% up-time means the server is only unavailable 4 minutes and 22 seconds per month (53 minutes an entire year).
  • Don’t trust the offer of “100% Free Hosting”
    bandwidth is not free. Make sure you read the fine print in any agreement claiming this as most likely there are ads embedded somewhere in your site, or the hosting package is so limited that it is virtually worthless.
    1. Go out to Jason Faulkner’s article for all the details.

      Thanks Pat for the great tip.

Which way is up? The USB Dance.

USB plugs with "right-side up" markedI’m forever doing the USB dance. Each time I start to insert a USB device I flip it back and forth wondering which way is up. I was complaining out loud during a meeting the other day. "Why don’t USB manufacturers use two different colors of plastic or a large symbol that we can feel?" I asked everyone. Someone pointed out that there is the USB symbol, but it is so small and I shouldn’t have to put my glasses on to figure out which side of a plug goes up.

I got an idea later that day and went and got a bottle of my wife’s fingernail polish. Here’s a shot showing how I marked the "up side" of each of my USB plugs. And, now a week later I’m pleased to report that this has made my life just a little smoother.

Now, if we could only get architects to design doors so you could tell by looking if you should be pushing or pulling… Instead of fingernail polish everyone has to put up signs telling us to push or pull. That’s great until you are in a country where you don’t know the language. Why not just design things properly so their use is obvious? Push or Pull ?

We shouldn’t have to resort to fingernail polish and push/pull signs.

Page Layout with CSS

3ColLayout.jpgUsing CSS for Page Layout

Back in the old days, people had to use tables to position things on a web page. Often tables inside of tables inside of tables were required to get the right effect. Needless to say, this added a lot of extra markup tags to every web page, making it difficult to maintain.

Then, along came SEO – Search Engine Optimization. Web programmers and designers discovered that search engines were using the keywords listed in the title and the main heading (h1 element) of each page to calculate a ratio between key words and number of characters on the page. Having all those table tags greatly reduced the SEO ratio and pages that used table layout received a much lower SEO rating.

Here is a tutorial showing how to layout out a page with a two-column or three-column layout using CSS. This moves all of the styling and layout tags out of the SEO equation, leaving more undiluted text on the page. You can use these layouts as a starting point of your page design without having to build everything from scratch.

Technorati :

What should I charge?

What should I charge? This question comes up a lot.

Here’s are some pieces to the puzzle that might help determine what to charge a customer. Each one has to work with the others.

  • What is your time worth?
  • How fast are you?
  • Do you want the business relationship to be long term or short term?
  • What is the current market rate?
  • How much experience do you have?

What is your time worth?

A person out of high school working at a burger shop will put a lower price on his or her time than a professional manager that is making big bucks. Be careful not to undersell the value of your time.

How fast are you?

You have to realistically look at how fast your can create web pages or write a program. It takes a new student a much longer time to figure out a basic CSS design than a seasoned, five-year CSS expert. And, the expert will have several templates ready and waiting so he or she can create a basic site in minutes. Literally.

Even something as simple as typing speed plays into this figure. Let’s say you can only tap out 30 words per minute on a good day. And, that’s using English words. It might drop down to 15 words a minute when you start typing code…

Now compare your output to another person who is able to type code at 60 wpm or higher. Who will be the most productive? The 60 wpm will be able to generate four web pages or more for every one the 15 wpm typist can write. If you have your skill set down (CSS, XHTML, design, some JavaScript) and have a few web site templates in your personal library that you can build from you will be able to finish normal tasks much quicker than someone that doesn’t. The faster you are the more you can charge. Time is money for both you and your client.

Do you want the business relationship to be long term or short term?

This will help you determine how to charge. If you want this to develop into a long term relationship you may want to charge a flat rate for a set number of pages. Later additions and changes could be billed at an hourly rate. A common error though is to charge to little in order to “buy the business”. After awhile you will find yourself doing lots work and the first question, “What am I worth?” will be nagging at you. It’s always harder to raise rates later than to bill a little higher in the beginning.

Should you charge by the hour or by the project? A short job is usually best by the hour. Longer projects could be billed by a flat rate. Also, if you are newer to the business of web site programming and design you might want to charge a flat rate for a set number of pages.

What is the current market rate?

This is the question that most people are really asking. But, these numbers are only valuable if they seen in context with the other questions listed here. Most professional agencies charge between $100 – $200/hour. A complete, professional website normally runs $1,500 on up depending on how complex it is. The keyword here is professional. Also, keep in mind that these rates are what the agency charges, not what the web programmer gets paid. The agency or company has to pay salaries, utilities, and rent out of this money as well as show a profit.

I usually recommend to people just breaking into the market to charge between $15 – $50/hour depending on their skill level. Once they are established they can charge the higher rate. Established could be roughly defined as a person that has at least 10-15 working web sites that they maintain.

How much experience do you have?

As you continue to work in the field and learn more skills and techniques you will be able to charge more. Experienced people have built up a toolbox of code and techniques that allow them to build and maintain sites/programs quickly and easily. Also, a web developer/programmer that can build a shopping cart or a web page that can be maintained by the customer without needing a programmer is a lot more valuable than one that can only create static web pages that simply display information.

If you can think of better ways to do the routine things quicker and easier you will be even more valuable. For example, one of my students started work at a web design company and put together a framework of code that allowed him to created complex web sites very quickly. Each web site had the same basic structure, but by adding different graphics and modifying the CSS code he was able to create unique sites in an hour or so (once he had the framework built.) All the other employees took several weeks to accomplish the same amount of work.

Technorati : , , : , ,

Accessible Web Pages, Lawyers, and SEO

ada.gifAccessible Web Pages. Imagine having your computer read the text of your page to you with the monitor off. You have no mouse. All navigation has to be done using the keyboard. How accessible is your web page?

This is how the blind and search engine spiders “read” your web pages.

Two factors are bringing accessibility to the forefront. First is the realization that search engine spiders are blind. The second is the recent ruling that Target, a private company, can be sued for not having an accessible web site.

Search Engines are Blind – Blind people cannot see graphics, Flash presentations, or colors on a web page. When a blind person browses the Web they listen to the page using software such as JAWS which read the text and convert it to speech. (Earle Harrison from Triumph Technologies demonstrated this during one of my Web Programming I classes.) Search engines are the same. They do not care about how pretty a page looks or how many graphics it has. All a search engine spider wants to know are (1) what are the key words and (2) what ratio is the ratio of keywords to the overall text of a web page. It turns out that creating accessible web pages increased SEO (Search Engine Optimization). By moving all those color, font, and table tags out of the <body> element and into the CSS Style section, you not only make the page easier for JAWS to read, but you increase the ratio of keywords to content.

Private companies can be sued for not having accessible web sites. A recent ruling by the courts states that:

U.S. District Court for the Northern District of California ruled yesterday that a retailer may be sued if its website is inaccessible to the blind. The ruling was issued in a case brought by the National Federation of the Blind against Target Corp. The suit charges that Target’s website is inaccessible to the blind and therefore violates the Americans with Disabilities Act (ADA), the California Unruh Civil Rights Act, and the California Disabled Persons Act.

Up until this ruling only government agencies were held accountable to Section 508 of the ADA. Now everyone must be aware of the ramifications of excluding non-visual browsers from their site. This especially involves JavaScript tools such as AJAX as well as Flash.

The key is to create a web page that has layered options. The basic web page should contain all essential information. All essential information in the graphics should be also represented as plain text either in the alt=” ” attribute or as part of the text of the page (preferably both). The next layer would be CSS which will take the plain-text page and make it more readable and interesting to visual browsers. And finally, the multimedia layer which includes Flash, movies, and slide shows which should be thought of as the “frosting on the cake”. Not essential, but nice to have for all the folks that like lots of sugar. Any essential information presented in this layer should already be included in the text of the page. By building your pages in this manner everyone will have access to the key information of the page, your client will get a higher SEO, and you can sleep at night knowing you won’t have to be dealing with a lawsuit based on inaccessible web pages.

A short aside. A mouseless world really sank in when I offered Earle Harrison, a person who is blind, a mouse pad as a thank you for presenting to my class. He very graciously declined, reminding me that he doesn’t use a mouse pad. He doesn’t even use a mouse because he cannot see the cursor… Even Earle could see the light bulb go on over my head as it all clicked into place.

Technorati : :
Ice Rocket :
Buzznet :

Preloading Images using CSS

Here’s an interesting CSS technique that Gil Hanson uses to pre-load images onto his website. He uses the first few moments a person is looking at his page for the first time to quickly download all the images to his site.

In his CSS at the top of the page he creates the following CSS class selector:

.hiddenPic { display:none; }

at the bottom of the page he loads up all the images used on his website including the class selector as one of the attributes of the <img /> element.

<img src=”image/gil_bw.jpg” alt=”B&W of Gil” class=”hiddenPic” />
This causes all the images to be loaded into memory, but not displayed because of the class assignment. Then, when the user goes to another web page in the site, the pictures display immediately, because they have already been downloaded. This is a great way to handle images with graphic intensive sites.

You can see this code in action on his resume at As the page loads keep your eye on the status bar at the bottom of the browser. You’ll see all those files quickly and quietly downloading behind the scene.

Technorati : :
Ice Rocket :
Buzznet :

Write Your CSS Code in Style

CSS (Cascading Style Sheet) coding is gaining a lot of popularity. And, because it is often edited you should think about writing your code with a bit of style. This will help prevent errors and typos from creeping in and make your code much easier to decipher and update anytime in the future.

I’ve started adopting a three-column layout for my CSS code. Here’s a sample styling my <p> element and a header id selector.


(Click on the image for a larger view.)

At the top of each element block I add a comment describing what this will do. For the standard XHTML elements this isn’t necessary, but it is really critical for any custom id or class selectors you create.

In the first column I list the element (in pink) then the attributes. I’m always consistent with the curly braces putting the opening one right after the element going down two lines and typing in the closing one right away, so I don’t forget it.

In the middle column I list the value, lining them all up with each other. I use spaces to do this because tabs will expand and contract on other computers making a mess of things.

In the third column I add comments describing what each item does. This has saved me hours of work. It makes quick work to track down a specific item when making minor changes. This is especially true if you are smart in your commenting. Instead of stating the obvious, describe any weirdness that may be happening or how this attribute relates to the others. I pretend that whoever will be reading this is the future has only the basic knowledge of CSS.

Follow these guidelines for some very stylish CSS code. It will make you look very professional as well as making your web programming future a lot less stressful.

Technorati : :
Ice Rocket :
Buzznet :

Use CSS to add page breaks

Here’s how you can use CSS to insert page breaks in your web pages for printing.

I often print a web page to a PDF file in order to keep all the graphics and layout together. I’ll often do this with my own pages for presentation handouts.

In my CSS file I add the following class definition:

.pageBreak { page-break-before: always; }

To use this I simply add a DIV tag where ever I want the printer to start a new page:

<div class="pageBreak">
<p> </p>

Keep in mind that this CSS class is only triggered in the printing of a document. It won’t affect how the page appears in the user’s browser window.

Technorati : :
Ice Rocket :