The Purpose and Importance of a DOCTYPE

Date November 8, 2010

doctypeRecently someone asked me what a DOCTYPE was. I paused for a moment and thought, “well, I know the DOCTYPE is the first thing at the top of every webpage, even before the HTML tag.” Quite honestly though, I had no idea what the purpose of it was. When I start coding a new page, I let Dreamweaver create a new blank document and generate whatever the default tags are. DOCTYPE was one of the ones it tosses in there for me. I figure, if this is a standard thing on webpages, I should know what it is, why it’s there and why it’s so important. Yes, DOCTYPE is important. Why do I know this? It’s on every page of every website, or at least it should be.

For example, the DOCTYPE on this website looks like this:
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

But What Does it All Mean?

Let’s break down what DOCTYPE means to try and make it easy. DOC means document. TYPE means type. Plainly put, the DOCTYPE declares what type of documentation (or rules) our HTML page is being displayed with.  If you don’t declare a DOCTYPE, the browser will assume you have no idea what you’re doing and will go into “fix-it” mode generally using the transitional ruleset as outlined below. The action is not the same from browser to browser. The unpredictability of that in and of itself should encourage you to not only use a DOCTYPE but also the proper DOCTYPE. If you’re paying attention that means there are different types of documentation, or sets of rules, that each website can be displayed using.

Strict DOCTYPE

The first of three types is the strict DOCTYPE. Any website with strict DOCTYPEs will tell the browser to follow the HTML rules as set by the W3C. For those of you not in the know, the World Wide Web Consortium is the lovely group that outlines and sets all the HTML standards that us developers should be following. That means that any website using using this DOCTYPE will not display deprecated items like the <font> tag (if you’re still using <font> I’ll ask that you please back away from the keyboard slowly, then call me for some consulting help).

Let’s say that you didn’t know what a DOCTYPE was and you never included it on your webpage, but then you also used <font> tags. I bet you had all kinds of trouble trying to figure out why the darn code you were using didn’t work. Well, if you don’t specify within the DOCTYPE tag which type you want it to use, then your browser is trained like a good little puppy to display your page using strict rules by default. You see, the strict DOCTYPE makes you stand up straight! Stomach in, chest out! It accepts no substitutes or less than what the rules call for.

Strict HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01//EN” “http://www.w3.org/TR/html4/strict.dtd”>

Strict XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Strict//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd”>

Transitional DOCTYPE

The transitional DOCTYPE is for those of us who are want a little bit of everything. For instance, you don’t want to stop using <font> tags (shame on you!) but you have moved onto trying out some of the newer rules. Basically, this DOCTYPE gives you greater flexibility and tells your browser it’s okay to use both current and deprecated tags.

Transitional HTML
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Transitional//EN” “http://www.w3.org/TR/html4/loose.dtd”>

Transitional XHTML
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Transitional//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd”>

Frameset DOCTYPE

If you were to use frames (which you shouldn’t), then the frameset DOCTYPE can be used. It will tell your browser to use the rules of the transitional DOCTYPE but also allow for frames. For the record: frames are bad for SEO, search engines, usability, bookmarking and it just plain looks bad.

HTML Frameset
<!DOCTYPE HTML PUBLIC “-//W3C//DTD HTML 4.01 Frameset//EN” “http://www.w3.org/TR/html4/frameset.dtd”>

XHTML Frameset
<!DOCTYPE html PUBLIC “-//W3C//DTD XHTML 1.0 Frameset//EN” “http://www.w3.org/TR/xhtml1/DTD/xhtml1-frameset.dtd”>

As you can see in my examples above, you can tell your browser through the DOCTYPE tag if your page was built in HTML or XHTML. It will also include a URL to the official W3C website. It points to the exact page where the rules for that DOCTYPE actually exist. You’re telling the browser, “this is the DOCTYPE that I want you to use and here’s the rules to support it.” That leaves zero questions, your browser has less to think about and will display your page quicker. As standards change, using these URLs will allow browsers to seemlessly support your HTML code even after the W3C posts new standards.

It’s important to keep up with what’s changing with the W3C. As they release new versions of HTML or XHTML, our DOCTYPE tags will need to change in order to maintain top standards. For example, with HTML 5 now making it’s way towards the mainstream, the tag you would use is <!DOCTYPE HTML>. Pretty simple and quite a bit different than current methods, however it’ll be the new standard!

Now remember, if you don’t follow the rules, your webpage just won’t work right. So with a little bit of practice, you’ll be able to keep that stomach in and your chest out. C’mon, show me what you can do!

Squeeze it! Squeeze it real good!

Date August 25, 2010

The year 2010 started out with a bang. I was laid off of my job on January 1. We all know how difficult the economy is right now and I have many associates who are unemployed and have been for some time now. It’s not easy to find a new job.

Having learned so much over the past few years, networking and meeting so many great connections, I came to the conclusion that I needed to start my own business. As it turns out, it was just the right move at just the right time.

I’d like to introduce to you my company, Fresh Squeezed Creative, and also my business partner Chris Vandeventer.

Through referrals from our contacts, we haven’t had to do a lick of advertising to remain busy and even successful. That said, we have been so busy that we haven’t even had time to create a website or a logo for ourselves. As a matter of fact, our website redirects to our Facebook page that includes a pretty full portfolio. All of our business has been generated via word-of-mouth marketing and social media. That’s when I knew I’d done something right.

So there you have it. My newest endeavor with my new business partner. Right now we’re working primarily with smaller to mid-size businesses on website development, social media and marketing strategy. Do you know someone who needs a website or advice on how to use Twitter or Facebook to help market their business? Give them our website: FreshSqueezedCreative.com! We’d love to help!

An HTML Footer Include Made Easy

Date August 3, 2010

Someone asked me a question about HTML includes recently.

I want to make changes to the footer on one page and make it change across all of my pages. How do I do this?

Well, it’s pretty simple. Here’s a quick tutorial.

  1. Create a new HTML page with empty code. If your editor inserts code automatically, delete it.
  2. Go to your original HTML page where you have your existing footer. Cut the code (Edit->Cut). Paste (Edit->Paste) it into the new HTML file you created. Save it as footer.html into the root directory (wherever your index.html is located.
  3. Now we want to insert the code that includes the newly created footer on the page. This is called an HTML Include. Go back to your original HTML page. In place of where you originally had the footer code, you’re going to insert this code:
    <!–#include file=”footer.html”–>
  4. Save your file.
  5. Upload both files to your server and everything should work perfectly.

For all other existing pages of your website, you’ll need to go and delete its current footer and add in the HTML Include footer code. If you’re using a program like Dreamweaver or Microsoft Visual Web Developer you can do a Find and Replace of the entire solution to make it quick and easy.

You can also do the same thing for your header, a sidebar or anything else that repeats throughout your site.

Any questions?

Business Owners: What Not to Do with a Bad Yelp Review

Date April 7, 2010

Yelp Business Owner Response

In January I reviewed a local restaurant on Yelp (an easy way to find, review and talk about what’s great – and not so great, in your area). I admit, I wasn’t too thrilled with the service at the time of writing my review. We waited for over a half an hour just for initial service, and in my opinion that goes far beyond ridiculous. So with my review, I laid out the facts. You can see it here, if you like. The business owner logged in today, April, and responded directly to my review with the comment you see above.

This business owner was obviously angry but also doesn’t seem to understand how reviews work. You have to start with good service and good product in order to get a positive response and good reviews. Not everyone is going to have a good experience, or even the same experience. This owner’s comment on my review has only reinforced my service complaints.

If you own a business and someone gives you a bad review, don’t react. You need to respond. Here’s what you need to do. Take a step back and calm down. Once you have your head on straight, take some time to think about what it is this person is really saying in this review. While some people can exaggerate an experience, there’s likely some truth within what this person has written. Take their complaint and see what you can do to improve your product or service for your next patron. At that point, I’d recommend extending a coupon to the person who wrote the review and ask them to come in for an improved experience.

What it comes down to is this, you don’t want to lose customers. Someone can have a bad experience, and as an owner you’re in the business of service. So work on the best customer service that you can. If something went wrong, make it right. Invite the patron back once you’ve got your ducks in order. Make sure to give them a reason to come (discount) and start a conversation that shows you care.

Doing all of this can help to create a raving fan of your business, rather than a lost customer and a review that turns others away from your business. If the owner whose business I reviewed had done this, I’d have gone back to Yelp and written an update saying something along the lines of what they did and “Hey things have changed! I love it now! You should all go!” But no, I’m left with a bad taste in my mouth about this restaurant. Prior to today I still ordered carry out. With this lovely response from the owner, I will no longer be a patron of any kind.

Remember, respond and don’t react.

A Contest and a Podcast

Date March 30, 2010

Gram Loves Dancing with the Stars

I know I’m not the best at writing for myself very frequently, but I thought I should come back over here and share a bit of what’s been going on in my world. Aside from clients consistently keeping me busy (thank you, you rock), I’ve been doing some things for myself that are just plain fun. And we all need a little fun in our lives, don’t we? I’m even learning quite a bit, bonus!

I’ve Got a Little Sumthin’ For Ya

In preparation for a new business that I’m starting, I launched a website and campaign to get others to Help Us Name Our Business. The concept was simple, yet rushed. The plan was that within less than a week to have a name for this business. All a participant needed to do was email, comment, write on a wall or @us on twitter with their name idea. That entered them into the contest to win a Kodak Zi8 HD Video Camera. We had over 200 people participate. Starting from nothing surrounding this project, that’s a pretty significant number of participants. All of this was accomplished via social media: blog, email, Twitter and Facebook. Submissions came in from more than 7 different countries. Interesting to note is that most of our submissions were given through Facebook. That shows the power of friend suggestions over disconnected marketing on Twitter.

Make a Little Noise, Do a Little Dance…

It’s been a couple of years since I’ve ventured into the land of producing podcasts. Last week that all changed. I decided to take the amazing relationship that my grandmother and I have and share it with the world. I’ve called the show Gram Loves Dancing with the Stars. Obviously, we talk about Dancing with the Stars. The show is about 20 minutes long and gram gets saucy about all kinds of things on the show from the boobs and hair to the dresses and the dancing. We have a flowing intro to the show and a moving exit. Right now our focus is on Facebook, iTunes and the website. I’m experimenting a bit with some different ways to get the word out about the show. I didn’t want a venture that felt like work, so this is my little bit of fun each week and a simple idea to play around with some different marketing strategies. I’ll keep you posted on what I’m doing and how it’s working. In the meantime, if you like Dancing with the Stars, you should listen. It’s free, it’s easy to listen to and, if I do say so myself, it’s rather entertaining.