I am sure it has happened to all of you. You are browsing a page and you see gibberish characters printed out, maybe where a vocal with tilde was supposed to be...

This is still a very common problem with certain types of printer and certainly with web pages.  This is most annoying if you are browsing non english pages and the author does not handle the special characters correctly.

To make special characters and accented letters show up on your pages, use a special set of codes called character entities, which you insert into your HTML code and which your browser will display as the corresponding symbols or characters you want.

The most common character entities have been collected by the International Organization for Standardization and compiled in an ISO Latin Alphabet table, which includes special characters, letters with diacritical marks (accents, umlauts, etc.), and scientific and currency symbols. The Latin-1 table contains 255 characters.

Of course, you don't want to learn the name or number of 255 special characters!  So, up until now, verifying and fixing the correct handling of Special Characters has been a painful and slow process.  With a new feature of our Online Web Optimization tool this is now a simple task.

When using our Silverlight interface, choose the "Replace Special Characters" task and you will:

- Fix malformed entities: XHTML entities should always begin with an & and end with a ; character. Some browsers render them even when they are not correctly defined, which leads to inconsistencies.

 The product is still in Beta but it is fully functional.  Tell us what you think.

By the way, if you like the features of the Online tool, don't be shy and try out the full featured Aggiorno products, the Visual Studio Add In version or the Standalone version. 

 Aggiorno Online is finally ... Online!  Well, at least in Beta!

 Today we are releasing parts of the Aggiorno functionality through a new web interface.  All you need to enjoy several of the web optimizations that Aggiorno provides is Silverlight 2.0.

 With Aggiorno Online all you need to do is provide some HTML/ASP/ASP.NET/XHTML... input through one of our 3 input methods: URL, File Upload or a Copy/Paste Text entry; choose the right optimization and its options and just execute it. 

 We are providing 6 Optimizations that we feel are super useful for web developers:

 - Fix Structural Errors: This optimization helps you find all the syntax errors that are present in a web page (invalid tag structure, unclosed tags, shuffled tags... avoid the tag soup!)

 - Fix Syntax Errors: This optimization helps you find all the syntax errors that are present in a web page (missing doctype declaration, wrong label case, wrong use of quotes, add entities, declare default values, remove duplicate attributes)

 - Fix Deprecated Elements: Find and fix depreacated elements in your web source code (CENTER, FONT, many other deprecated tags and attributes)

 - Add IE8 Compatibility flag: Add the IE8 Compatibility Flag to your pages

 - Generate Google Sitemap: This option allows for the generation of the Google sitemap, one of the newest additions to our SEO optimization series.

 - Generate ASP.NET sitemap: This option allows for the generation of the ASP.NET sitemap, an important input for many ASP.NET controls.

 We are using Silverlight so we can provide a rich interface, specially for our "explain" feature.  Aggiorno shows you all the changes that are happening to your source file (unlike many other WEB optimization tools) and you can analyze them before proceeding.

Enough said!  Please try it out and let us know what you think: http://www.aggiorno.com/Application.aspx

Your feedback is more than welcome!

Strategy summary

This article discusses a strategy for making your websites compatible with Internet Explorer 8, which is composed of the following steps:

1.       Code according to web standards

2.       Multi browser rendering testing

3.       Design adjustments and customizations for specific browsers

4.       Increase your efficiency with development tools

Internet Explorer 8.0 is close to be released

As the availability of IE8 increases and the installed base grows, more users will start visiting your web site with IE8.  These users could have updated their previous IE6 or IE7 versions, they could be trying Windows 7, hence Internet Explorer 8.  Whatever the reasons, the IE8 audience will grow for sure.

Problems can arise when users start viewing Internet content with new browsers, different from the ones they used to have.  Differences between browser versions can include minor changes like bug fixes or specific improvements.  Major changes can also have been made, for example general modifications in the layout and rendering engine, as is the case in IE7 and IE8.  These two versions included significant changes to the core rendering engine, especially IE8, for which the rendering engine was completely reprogrammed with special attention to the W3C standards.  The magnitude of the changes can produce rendering differences that surpass the ones observed in previous Internet Explorer updates.

Users that start browsing with IE8 and were using previous IE versions or other browsers could observe important differences like the following:

·         Web page design and layout issues

·         Web page behavior issues

·         Different support levels for W3C standards

One of the main areas that were changed in IE7 and especially in IE8 is stricter adherence to W3C standards.  A high percentage of the required workarounds for previous versions of IE are no longer necessary, allowing web developers and designers to spend less time on browser customization and more time on the actual design and development.

Multi browser rendering testing

The first step in the strategy to accomplish cross-browser compatibility, including IE8, is to write your code following the W3C standards and the industry best practices.  There are plenty of resources in Internet about the subject and every hour invested in reviewing this documentation and adopting the practices will yield higher quality code, improved maintainability and understandability, better possibilities for cross-browser compatibility, and even better ranking in search engines.

The second step in this strategy is to test every representative page of your web site in all the browsers used by your intended audience.  Web site testing could be a complex process, including the following phases:

·         Visual validation of rendered pages:  Inspection of the different web page elements and their visual characteristics and layout is performed.  You should perform at least this type of testing for all your web sites, considering static pages and page templates.

·         Dynamic behavior validation:  All forms for user input and dynamic results should be verified.  Inspection of the rendered elements is performed.

·         User-browser interaction verification:  Users can change different settings in their browsers, for example font size, window size, among others.  The tested web site should continue working when the user changes browser settings.

It is recommended that at least the visual validation of rendered web pages is performed.  This step is especially important when dealing with legacy code whose adherece to web standards is unknown.  There are tools that can help in this process, for example online services for rendered web page image generation.

These web page pictures can be generated in order to let you see how is your web page rendered in a wide variety of web browsers and operating systems.  This information is essential for the third step in this strategy, which is to make all necessary design adjustments and customizations for specific browsers.

One possible approach for cross browser testing is to install different virtual machines with the necessary browser and operating system combinations.  This allows for low level control of the environment, automated tests and user interaction.  Nevertheless this approach could require considerable setup and maintenance time.

Another approach includes the usage of an online service to generate images of web pages as displayed in different browsers.  The following list provides general information about the most popular web sites for this purpose:

·         Browsershots (browsershots.org)

This is an open source project that gives web designer the ability to observe their web pages in a collection of browsers.  The user can change the browser’s resolution and color depth, also the host operating system and settings for Java, JavaScript and Flash.  There is a palette of nearly 70 browser and operating system combinations, including different versions of popular browsers.  Some browsers can have long queues of users waiting for the service, in this case, the service for the specific browser will be blocked.  

·         Browsercam (www.browsercam.com)

This is a service that offers a monthly subscription as well as a trial version.  There is a palette of nearly 45 browser and operating system combinations.  There are also remote access sessions for JavaScript testing.  A new addition to the services includes mobile device and PDA screen capture.

      ·         Browsrcamp (www.browsrcamp.com)

Browsrcamp allows users to test their websites in all the browsers available in the Mac platform, which are 11 in total.  The web page picture size as well as the quality can be selected by the user.

      ·         litmus (litmusapp.com) 

This is a high availability service with a useful combination of cross browser and cross email client testing.  It provides a free trial account, a day pass and monthly subscriptions.

·         CrossBrowserTesting.com

This service allows website designers to test their websites across 65 different browser and operating system combinations.  CrossBrowserTesting gives user access to instances of virtual machines; it is possible to test AJAX and Javascript as well as the page visual elements.

Windows 7 Beta with IE8 was recently added to the available platforms.

The third step in the strategy is making all the necessary design adjustments and customizations for specific browsers.  There is extensive documentation in the web about browser hacks and techniques to solve browser rendering differences; one usual workaround is to selectively apply CSS rules to different web page elements.

Thanks to the new IE8 compatibility meta tag it is possible to achieve low-level, page-by-page control over the rendering mode used to display a web page.  For more information about the specific meta tag values and the reasons behind it see How to make my web pages Internet Explorer 8 compatible. Page-by-page control is extremely important when testing a whole web site and suddenly you find that some pages were intended to be rendered by IE7 or previous.  A first step in the journey to web standards is to include the appropriate meta tag in the problematic pages and continue the manual adjustments following a list of prioritized web pages.  After a couple of iterations the whole website will hopefully be standards compliant and then the compatibility meta tags could be carefully removed.  After removing the meta tags, the web pages should be retested.

The task of adding the compatibility meta tags is automated by the tool Aggiorno IE8 Compatibility Wizard.  It takes into account different situations that could make a manual process fail, for example legacy code handling, several files in several nested directories and requirements to preserve file formatting.

The fourth step in this strategy is to always keep improving.  Cross browser compatibility is a long term goal that will always continue to change as new browsers and new technologies are released to the audience of our web sites.  This could be an overwhelming task and consumes resources that could be necessary for other goals like web site accessibility, design, SEO, among many others.  In situations like this it is always advisable to get help from automated tools that can increase our development efficiency.  Aggiorno, a tool made by Artinsoft (www.artinsoft.com) was designed and built with the always changing web development environment in mind, giving you a significant advantage in the cross browser compatibility field as well as in many others.

Laurent Bugnion, Microsoft MVP, was recently interviewed during edition 26 of the popular show Herding Code.  The initial focus of the interview was on the transition between SilverLight and WPF; Laurent explained how to approach the transition both from a learning perspective and from a practical hands on perspective.  Then they discussed Silverlight offline and which scenarios are interesting and then moved to a discussion between WPF or WinForms; very interesting perspective. At 44:07 in the podcast Aggiorno was mentioned as a tool that is able to understand really bad HTML and then can help to easily clean it up all integrated with Visual Studio.

 This week, Herding Code Edition 27 broadcasted a show named "What Every Web Developer Needs To Know" where Aggiorno is reviewed in depth.  Below I have extracted a few comments that caught my attention from the podcast, but I strongly suggest you listen to the complete show.

It looks like many web developers do not really understand even basic HTML. It is very important for web developers to know HTML so that they are not creating a mess in their pages.  Writing good markup is even important for intranet not only for outward customer facing apps.  If you write good markup your chances of improved cross-browser compatibility is a lot higher, there is a big maintenance improvement (lower cost!!!), better search engine optimization, faster rendering, savings in bandwidth and it even improves the ability of designers and developers to work on the same document thanks to the separation between style and content.

A lot of time web professional spend time to make it render but do not really think about usability.  It is really important to clarify what does it mean to have a web page DONE.  Does it render on multiple browsers?  Is it usable? Is it secure?  These factors make a difference in terms of the quality of the final product.

What tools are key in the web development space? Firebug, a good text editor,  a good wyswyg editor, W3C HTML validation and Aggiorno a refactoring tool for HTML (Re-Sharper for HTML??); Aggiorno is a much better tool for editing HTML.  Beyond Find & Replace.  Aggiorno helps with semantization of HTML and separation between content and style, the validation and fixing of poorly written background and in general it increases the productivity of the HTML editor. Additionally, Aggiorno is an extensible platform and many more cool features will come out in the near future.

As for my take from the podcast, Aggiorno is pictured as a really interesting tool for the web professional that needs to create and maintain markup (any web professional should be able to do it).  Additionally, Aggiorno Standalone includes all the power of Aggiorno together with a full HTML editor (both text and visual) providing a lot of power in just one integrated tool.

On the other hand, the podcast also goes over the need for web developers to know regular expressions.  They agree they are useful, but they also agree that they can easily become cumbersome.  Aggiorno, with its Smart Search and Replace feature, really helps you here.  You can now write patterns that understand your HTML markup and are very powerful and easier to use than a regex.

Try Aggiorno today and let us know if you agree with the guys from Herding Code!

Things are moving fast at Aggiorno.  We didn't even make a big splash when we launched V1.0 and it is already 1.2!  But what is really screaming fast now is Aggiorno itself. 

In the past few weeks we have concentrated on three themes:

1) Improved Performance: In version 1.2, that you can try now, the performance of the product is a completely different thing -- for the better!  If you are now applying Aggiorno on small and medium size files the response time is almost immediate.  If you had been using Aggiorno's previous versions I am sure you will note the difference.  The performance effort is tied to our goal of making Aggiorno part of the everyday workflow for web developers.  Even if most of the version 1.x features are related to making pages web standards compliant, this is just the first step, we need to create a common base of source code upon which we can start performing more Aggiorno magic.  Very soon we will be launching additional features that web developers will find super useful in everyday tasks and not only when you are having your "standardization after thought"!

2) Internet Explorer 8 aggiornings: In version 1.2 we have also included 2 new aggiornings related to Internet Explorer 8.  The first one is about the effortless introduction of the IE8 compatibility flag in all the pages of your web site.  The best way to make your pages IE8 compatible is to make them web standards compliant.  However, we know that this requires some effort (a lot less if you use Aggiorno!) and while you are working on it you can simply introduce an IE8 compatibility flag in your source code and "snap" your pages become compatible.  The second aggiorning in the IE8 wave is about taking advantage of a new feature of Internet Explorer 8: web slices.  Web slices are segments of a page that can be treated separately from the rest of a page.  You need to tell the browser that a portion of your code is sliceable, here is where Aggiorno helps you.  You only need to select the portion of code that needs to become a slice, give it a name and Aggiorno does the rest.  It generates all the required markup depending on the section of the code that you have picked.

3) Ability to invoke Aggiorno in more contexts: In previous version of Aggiorno you could apply aggiornings on files, group of files or portion of code.  Many of the early adopters asked to be able to apply Aggiorno on solutions or projects or folders.  Well, this is now possible.  If you want to apply a specific Aggiorno on a complete web site you just need to select it and go.  You still have the ability to review all the changes for every file before committing the results.

In addition to all the new features, Aggiorno now no longer requires Visual Studio to run.  If your machine does not have Visual Studio installed the Aggiorno isntaller will detect it and download a few additional dependencies and install.  The stand alone version is based on the Visual Studio Isolated Shell technology which allows us to deploy all the Aggiorno functionality as well as an IDE for web developers.  The IDE that Aggiorno deploys is fully functional and has most of the functionality that Visual Studio 2008 offers to web developers.  This is another feature that many of you have requested and it is now available.

We're eager to listen for your feedback.  Please let us know what you think.

Everybody (at least all of us interested in web development) has been following and chatting about Chrome, the new browser from Google.

I personally care about how web pages will render in Chrome versus other browsers.  I looked at the Google Chrome FAQ for developers and found this explanation about rendering differences:

"

9. My site renders differently in Google Chrome than in Internet Explorer

Google Chrome uses a different rendering engine than Internet Explorer, so may display web pages differently. Apple Safari uses the same rendering engine as Google Chrome (WebKit) and should display pages the same way.

• If your site isn't rendering properly in any browser, make sure your HTML and CSS are valid by testing them at http://validator.w3.org/.
• If your site doesn't render properly in Google Chrome or Apple Safari, file a bug at webkit.org as described at http://webkit.org/quality/reporting.html.
• If your site renders properly in Apple Safari but not in Google Chrome, please file a bug against Google Chrome at http://code.google.com/p/chromium/issues/list.

"

I have some observations regarding the above statement:

1) There are 17 entries in the FAQ for developers and 6% is devoted to cross browser compatibility.  To me this is a huge percentage and it means that the number of pages that actually render differently in Chrome is probably very high.  -- Well... if about half of Fortune 500 companies have syntax errors on their home pages, what can you expect??  

2) Up until today the market share for a Safari (webkit) based browser is still low and therefore a rendering difference might not have been that important depending on your audience.  -- still... shame on you for not writing cross browser compatible code!  Or.. was it your fault?? (this is a discussion for a different post).

3) Google has the potential of altering market share numbers for browser utilization (we'll see how Google can change this in the next few months). -- This means that you should at least add Chrome or Safari as one of your test environments!

4) Once more, web standards and page validation are endorsed by a large Internet player (GOOGLE!!) as the way to fix the browser compatibility problem.  -- So... do you think web standards are important or not??

If you read some of my other posts in this blog you will find that I am building a practical argument in favor of web standards.  I am not advocating for web standards from a theoretical point of view but from a very pragmatic one.  If your code is web standards compliant or at least if your code validates your are on your way to solve many many potential problems around cross browser compatibility, search engine optimization, accessibility, performance, etc.  Web standards are a guide that you should follow in your daily coding.

aggiorno can simplify dramatically how you can make your page standards compliant with many of its aggiornings that are there to clean up the web without taking a toll on developers productivity.  How come we still have some many SYNTAX errors on our pages?  How do we expect browsers to behave consistently if we are not consistent in the use of the language and if browsers have to " guess" our intentions?  Let's standardize our pages! Let's use aggiorno to help us in this endeavor.

References:

Web Standards and SEO

Accessibility and Web Standards

Even the gurus sometime slip...

Clean HTML: why not??

PS: of course I am biased but I truly believe aggiorno is a superb product!  Why wait?  Try aggiorno out.  It has two modes of operation: as a stand alone web tool that includes a sophisticated XHTML/HTML editor and as an add-in for Visual Studio 2005/2008.

In the past few months there has been a lot of debate on the web about the support that Internet Explorer 8 provides to web standards.  Chris Wilson has an excellent post debating the motivation behind the final decision of providing an opt-in flag to indicate IE8 that it should behave in NON-standard compliant mode. 

This is why we created aggiorno express for IE8 to help you solve the problem... but let's start from the beginning... 

When Microsoft first though of IE8 the idea was to provide a fully web standard compliant browser but they were facing a dilemma.  Should the new Internet Explorer be backward compatible with IE7 or should it force the adoption of web standards?  To many of us the answer is quite straightforward, let's enforce standards!  However this is not that easy when you have such a large installed base as Microsoft has.  Microsoft had already receive quite a bit of heat when launching IE7 for breaking compatibility with IE6 and therefore causing many pages to render incorrectly.  The initial decision from Microsoft was to leave IE8 by default compatible with IE7, i.e: NON standard compliant!  If a web developer new its pages were standard compliant they would need to insert a special flag to tell so to the browser.  This initial decision was eventually reversed by Microsoft (with lots of applause from the standards community) and now IE8 by default runs in standards mode. 

However, what happens to the many pages that were "optimized" (some people would say "hacked") to run well with IE7? Microsoft included a compatibility mode in IE8. At the user level there is a compatibility toggle button that can be selected.  So, if a page renders incorrectly the user can switch modes and try to render it as Internet Explorer 7 would have. But what if as a web developer I want to make sure that my pages render well in IE8 without the need of a user action? There are 2 possibilities.

1) The best thing you can do with your pages is to make them standards compliant. This will not only help you with IE8 but also with other browsers such as Firefox, Safari, etc.  In the long term this is the best solution to solve cross browser compatibility issues.  (a long discussion on the value of standards with respect to SEO, accessibility, etc. can be found in the references below).

2) Microsoft has introduced a new meta tag recognized by IE8 to provide additional information to the browser beyond the DOCTYPE.  This meta tag tells the browser if it should interpret the page emulating other versions of Internet Explorer. The flag has 5 possible values:

a) <meta http-equiv="X-UA-Compatible" content="IE-5" />: The page will be rendered in quirks mode.

b) <meta http-equiv="X-UA-Compatible" content="IE-7" />: The page will be rendered in IE7 standards mode even if no DOCTYPE is present.

c) <meta http-equiv="X-UA-Compatible" content="IE-EmulateIE7" />: The page will be rendered as IE7 does.  This is the preferred compatibility mode.

d) <meta http-equiv="X-UA-Compatible" content="IE-8" />: This is the default IE8 and the most standards compliant mode.

e) <meta http-equiv="X-UA-Compatible" content="IE-edge" />: This prepares the page to render with any future IE version, always using the latest rendering engine.

The compatibility tag can be added as part of the server's HTTP header or as part of the HEAD for each page.  If you have access to the server and if you want to use the same tag on all the pages, then adding the flag to the server's header is the cheapest solution.  However, if you do not have access to the server and if you are transitioning to a more standard support for your pages you should add the appropriate meta tag to each page.

In order to add the flag to each page you can either write some sort of (complicated) regular expression to perform the task or you can download a free version of aggiorno express that automates this task for you.

But why does ArtinSoft care about browser compatibility?  Well, aggiorno is all about incrementing web developers productivity by encapsulating knowledge and allowing its application in the most automatic possible way.  aggiorno version 1 is mostly about cleaning up the web and helping web developers into the time consuming task of making web pages validate and standards compliant.  The next minor release of aggiorno (soon, very soon) will also help you add the IE compatibility flag and take advantage of the a new concept in IE8 called web slices (more on this feature in a later post).  In the mean time, we also wanted to support our customers with a free tool that allows for the incorporation of the compatibility flag in batch mode thus saving you time and making the transition to IE8 as simple as possible while you (using aggiorno!) make sure your pages are standards compliant!

References:

- Clean, crisp, accessible HTML - why not?

- Web Site Validation:The Fundamentals

- Accessibility Checklist and Web Standards

- Web Standards and Search Engine Optimization (SEO) -- Does Google care about the quality of your markup?

- Defining Document Compatibility (MSDN documentation for IE8)

After many (too many?) months of work and a very successful beta program aggiorno 1.0 has finally released.  With aggiorno, web developers easily make their ASP.NET and HTML sites compliant with the latest web standards, using the latest technology trends suggested by industry experts.  Beyond these features that are the focus of version 1 (cleaning up the web!), aggiorno is a platform to deliver encapsulated executable knowledge right in the hands of the web developer immediately providing increased productivity and business value.

Congratulations to the aggiorno team for all the hard work!

Version 1 is a demonstration that with hard work and support from the community not only a great product can be built but it is also possible to coin a new concept in the software development world: aggiorning. aggiornings are a bit like refactorings but their goal is to make transformations that add value to the business.  aggiornings are wisdom capsules that traverse your code and makes it faster, better, more standard...you name it! and aggiorno supports the creation, execution and delivery of new aggiornings.  Let me give you ashort example, just like Roger Johansson shows one of the most common validation mistakes in a site is the lack of alternate description for images.  In my opinion the reason why this happens is due to the fact that looking for each of the images in a site and adding the right description is a very time consuming task.  However aggiorno has an aggiorning devoted exactly to this task, I am sure you will find it most useful.

aggiorno works as a stand alone tool that comes complete with an XHTML editor, and it can also be integrated as an add-in to Visual Studio 2005/2008.

The focus of version 1 is about cleaning up the web.  Soon after we started conceptualizing aggiorno we realized that too many web pages were not valid or bluntly syntactically incorrect.  With some research it was clear that helping web developers make their pages standard compliant was the best first step in realizing the vision of aggiorno of becoming a true knowledge manipulation platform.  More sophisticated aggiornings require pages that are clean, so let's begin the cleaning of the web! and you'll be discovering the full power of aggiorno when we'll deliver more capsules through our subscription model.

Your feedback is very important.  If you have suggestions for new aggiornings or would like to tweak the existing ones please let us know.  For now, go try aggiorno and immediately increase your productivity!

As web users and web developers we are constantly attributing human qualities to the different actors of the Internet.  In my mind Google has always been the sexy, out of reach girl that we're constantly trying to impress.  When courting a girl there is a well defined protocol that needs to be respected.  You have to be polite, tactful, respectful (... it seems I am listening to my mom...), in any case there are rules that need be followed when your are trying to impress a girl and these rules go well beyond appearances.

As web developers we tend to forget some of the rules that need to be followed to make our sites more findable, more accessible, more secure, more maintainable... we typically only care about how do our pages look like in the common browsers without paying to much attention to the inner details.  You can have great content but if your markup sucks you will have issues when trying to conquer important actors like Google.

Last week I wrote a post on how the lack of use of web standards can affect your SEO efforts.  Lot's of small details that can really turn Google off.

At Aggiorno, the team is on a death march towards the release of V1.0 (soon... very soon...) and we need to relief some stress and at the same time try to educate more about the importance of good markup, the importance of following web standards on our daily work.  We came up with a video called "Get a Chance at Google" that enacts an encounter between a very content intensive web site with ... some issues...

Take a look at the video and share it if you like it.  Also, let us know what you think and if you have more ideas so this can become its own series!

Enjoy!

There are many discussions on the Web regarding the merits of using Web standards. And typical of all discussions, there are two sides.

The argument against using Web standards can be explained with two words: who cares? If the browsers render the code correctly then mission accomplished.

The argument in favor of using Web standards claims that using cleaner code results in improved cross browser compatibility and lower maintenance costs.

I believe there is an important point that should be addressed much more emphatically. What does Google do when it encounters nonstandard compliant HTML? Does it affect your search rankings? We can’t ignore that search engine bots are "users" of our sites and they are not necessarily as tolerant with our markup as normal browsers. An SEO expert gave me the best trick to understand what Google sees and what it doesn't see while going through a page. The process goes like this:

• Open the page you want to evaluate in your favorite browser
• Click Select All
• Click Copy
• Open Notepad
• Click Paste

Whatever gets printed in Notepad is what Google is indexing.

Now that you’re in on that trick, let’s look at some examples of how wrong HTML can affect the results of your search.

Missing Alternate Descriptions

Here’s the first example of how following standards can improve your interaction with Google. Google is "blind.” Google only sees the text that is embedded in your page. That means no images, no java script, and no animations. Providing an alternate description for non-textual information (alt attribute in XHTML) is a part of following standards. Not including an alternate description means you are missing an opportunity to provide information to Google. ALT descriptions, as they relate to Web standards, affect search rankings!

Wrong Or Missing DOCTYPE

DOCTYPE tells the browser what kind of markup to expect. Is it HTML? Is it XHTML? No DOCTYPE? Then Google simply makes a guess and not necessarily an educated one. The last thing you need is for Google (or any browser for that matter) to guess how to interpret your source code. Chris Maunder from The Code Project has an excellent example of how Google gets confused if you specify a certain DOCTYPE and then write code of a different standard,. In certain cases Google simply stops indexing the page and it assumes it is a 404 Page Not Found error. The example that Chris shows reflects how a simple miss-closed tag (ultimately a missing "/") can avoid the indexing of a page. Syntax correctness, which is enforced by using Web standards, is important if you want Google to index your page!

UPDATE: In general this is the tag soup problem. To fix it, make sure your Web site validates according to a standard like XHTML transitional.

Lacking Or Incorrect Use Of Entities

Ahh... entities... Isn't it painful to follow the Web standards rule set and escape every special character? Well it might be painful, but Google reacts to non-escaped characters in very peculiar ways. Let's first look at the most obvious one. If you write in a foreign language that requires characters with an accent, the search results may vary depending on how you code your information with entities.

Second, there are issues with escaped versus unescaped characters in URLs. This WebMasterWorld article is an example of how wrong entities usage can cause confusion.

Third, when you use scripting to generate markup, the way in which you write your script can also confuse Google as Chris Maunder explains. If you try to generate code without escaping the right characters you can get in trouble. Web standards enforce the proper use of entities. That’s just another reason to follow them and avoid search engine confusion.

Missing Required Page Elements

There are a number of page attributes that are either required or recommended by Web standards that can definitely increase or decrease your page rank. One of the suggestions that many SEO experts offer is to make sure a page contains at least the following attributes:

vh1: Every page should have one and only one h1. This tag should be used to express the main idea described on the page. In general, heading tags should not be used only for styling, but also to semantically mark the content in the page. Google pays special attention to h1 content when indexing.

title: Every page should have one and only one title. The title should be related to h1. Google looks at the relationship between h1 and title when indexing.

meta tags: Every page should have a number of meta attributes (description, keywords, etc.). Google takes these keywords into account while indexing and they also provide semantic information about the page. When properly used, these tags improve the user experience.

Web standards are a constant reminder of proper usage and this is one time that being proper is in the best interest of your search rankings.

The Separation Of Style and Content

Web standards teach you about separation between content and style, which is an incredibly useful practice in regard to improving maintainability. It also clearly has some advantages with respect to Google behavior. The first one is bandwidth savings. If your styling information is in a separate css file, since Google does not care about style, then it will now crawl it and therefore you will not be spending bandwidth in this manner. But in addition to bandwidth savings (which can be major for high trafficked sites), there is a limit to the size of a page that is indexed by search engines. So if your page is not "polluted" by styling, then it can have more content! Additionally, this is a way to avoid confusing Google if your style contains syntax errors.

UPDATE: Avoid HTML tables as a mechanism to layout the information on a table. This should be done using style markup (CSS).

Unmarked Text: No Semantics

Many times Web developers simply copy and paste text into a Web page. The resulting markup is basically text separated with BRs. As of today, I do not believe search engines penalize this behavior.In the future, it will be more important to make sure every piece of text contains as many semantics as possible. For now, the minimum semantic that a piece of text should contain is basic HTML markup like P, UL, Hx, etc. This information can help search engines understand the priority and context of the content. Plus, unmarked text is hard to style and maintain anyway.

UPDATE: There are some newer standards like microformats that can add semantic information to a page without effecting information rendering. Even if it is not clear how microformats affect search results now, presumably they will be important in the near future.

Conclusions

Hopefully it is clear that failing to follow Web standards can have a detrimental impact on your search results! Why not provide Google with the best information to index a page? Why risk Google not indexing a page at all because of syntax errors in the markup? Looking good in a browser isn’t enough these days if you want a successful Web site.

It is true that you can avoid most of the mistakes shown here without completely following Web standards, but they are useful as a guideline and as good programming rules. Next time you look at your page,let Aggiornotake over all the time-consuming tasks necessary to make a page XHTML compliant.

UPDATE: Aarron Walter just published a helpful findability strategy checklist that has sections on markup and server and client side code.

Aggiorno promotes Web standards by eliminating a lot of the tedious work that is required to validate a page. That improves the relationship between your site and search engines.

Use Aggiorno to:

Find missing alternate descriptions  

Make your code structure XHTML compliant

Convert special characters into appropriate entities

Help you with contentand style separation

Help you with text semantication