Let us take a look at a simple page, and how Microsoft disregards any standards for clean, proper code.

This is not to necessarily bash Microsoft. It is simply to show you the reason so many techies and geeks and designers recommend not using Microsoft for website design.

Here is a simple page:

Using Dreamweaver or any other 'real' HTML/Website design program

Web Display

Here’s a simple, basic HTML editor that will give you clean code (versus any Microsoft product adding extra junk)

 

http://www.nvu.com/index.php

 

It’s Open Source, so it’s free. Though you might be able to make a donation if you like it. If they don’t take donations, I do. :)

Code Display

<p>Here’s a simple, basic HTML editor that 
will give you clean code
(versus any Microsoft product adding extra junk)</p>
<p> </p>
<p><a href="http://www.nvu.com/index.php">
http://www.nvu.com/index.php</a></p>
<p> </p>
<p>It’s Open Source, so it’s free.
Though you might be able to make a donation if you like it.
If they don’t take donations, I do. :)</p>

Using Microsoft Word for web editing

This is using a simple cut/paste from a Word document to an HTML page. If you are using Word to write your Blog, and then copy/pasting onto the website, this is what you are pasting.

Web Display

Here’s a simple, basic HTML editor that will give you clean code (versus any Microsoft product adding extra junk)

http://www.nvu.com/index.php

It’s Open Source, so it’s free. Though you might be able to make a donation if you like it. If they don’t take donations, I do. J

Almost Looks the same, but...

Code Display

<div class="Section1"> 
<p class="MsoNormal">Here’s a simple, basic HTML editor that
will give you clean code
(versus any Microsoft product adding extra junk)
<o:p></o:p></p> <p class="MsoNormal">
<o:p> </o:p></p>

<p class="MsoNormal">
<a href="http://www.nvu.com/index.php">
http://www.nvu.com/index.php</a><o:p></o:p></p>

<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal">It’s Open Source, so it’s free.
Though you might be able
to make a donation if you like it. If they don’t take donations, I do.

<span style="font-family: Wingdings;">J</span><o:p></o:p></p>

<p class="MsoNormal"><o:p> </o:p></p>
<p class="MsoNormal"><o:p> </o:p></p>
</div>

Non-standard HTML Code

So, what is class="MsoNormal" and why is it on my web page?
What is <o:p> </o:p> ? Good old Microsoft.

Oops, that smiley. Hmmmm, I hope everyone has the Wingdings font so they don't just see a 'J'. On the web, there is a reason we don't use special fonts. We want to make sure everyone has the font. Think about your iphone, do you think that has Wingdings installed?

And why the special div with no real formatting? If you use Word for html, then you don't really know what a 'div' is, so why should you care? Well, ignore it then. But ask yourself why Microsoft code is so much bigger and bloated.

Character Count

  • Clean HTML: 664 characters
  • Word Code: 356 characters
  • Clean Code using proper smiley graphic: 472 characters (with smiley)

Even if we add that smiley graphic, the clean code is 30% smaller in size. Is that important? Maybe not for a simple small page, but what if the page was larger, or the website had a lot of little pages.

30% off

Do you shop for sales? 30% off sounds great. Maybe on $1 it's only 30 cents, but on $1,000 it is a $300 savings.

Now think of your iphone and any other web device that connects on a slightly slow connection. Think of those who, yes, are still on dial-up. Do you think they want to wait 30 percent longer for your page? If you page is 100k in size with clean code, and it takes a minute to download, do you think they will wait another 30 seconds? Would you?

Size and Cleanliness Matters

Size matters, especially in code. Besides the incompatibility of the odd, unusually code of Microsoft, you are also risking strange displays in different browsers. And Google is also starting to penalize poorly written websites.

Do yourself a favor and break the habit of using Microsoft products for everything. Use the right tools for the job. Graphics? Not Word Art. Email? Not Word. Why Microsoft allows Outlook and Mail to default to Word for editing is beyond me. Here's an idea... writing email, write in the email program.

Designing a website? Just editing a web page? Use a web editor. Just because you are familiar with Word doesn't mean you should use it for everything. If you feel that for some reason you must use Microsoft, you can try their new web design program where they finally started using standards. Not FrontPage! Microsoft even stopped selling that thing since they knew it created bad code.

Keep it clean. Use the right tools.