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!

One of the most frustrating and time consuming tasks a web developer must endure is making a site cross browser compatible. No wonder why there are so many people talking about the lack of standardization among the web browsers, specially the IEx family.

As you may already know there is a variety of online rendering services: like Browsershots or Litmus. Most of these services provide a way to render your page in different browser versions running on several operating systems, and sometimes it’s possible to test your pages in different resolutions too.   Here at Artinsoft we believe that the approach taken by these services provides a lot of value, but we think that they fall short on helping the developer to trace the source of the problem.

Because of the problem described above we came up with our own cross browser compatibility checker browser oriented service codenamed BrowserCheckr.  You can think of this service as a complement to the rendering services. It’s similar to Dreamweaver’s BCC in the sense that we analyze the page and search for potential rendering problems, then, we give a report that point out the elements that may have problems in certain browser(s) and provide documentation of what is the problem and how can it be fixed.

In the near future we also expect to provide a way to help to fix the problems found. We are brainstorming it so feel free to share your ideas about it with us.

For the time being what we have is a prototype that showcases the user experience and makes a basic detection of 6 of the most common IE6 bugs:

·         The margin size is doubled.

·         min-height and min-width are not supported in IE6

·         The escaping floats problem  .

·         Centering using margin-left and margin-right set to auto

·         The stairs effect in menus using ul/li.

·         The inherited margin problem.

We will really appreciate it, if you take a moment to check our prototype. We are working hard to keep improving BrowserCheckr to help keep you site looking great in all the browsers. Please visit BrowserCheckr and leave a comment. Only with your continuous feedback we can get a powerful tool for you.

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.