Standard Issue Non-Conforming Web

Taking risks is an artist’s stock in trade. As our colleague, Wendy Arnold pointed out, making mistakes is part of the learning process. Many of those mistakes are really happy accidents, adaptations  we should embrace because they work.

So you would think I am comfortable never really knowing what the websites I design will look like. If you design websites or web apps you know what I mean. Every browser, every platform, every combination of the two, adds a different and sometimes unexpected nuance to a design.

You could use the validator provided by W3C, but I have yet to make a single page without mistakes.

I mean what does this mean?

Line 507, Column 661: end tag for "p" omitted, but OMITTAG NO was specified.

…bmit" value="GO" id="sbutt2" /></form>  

You may have neglected to close an element, or perhaps you meant to "self-close" an element, that is, ending it with "/>" instead of ">".

Or this?

Line 507, Column 230: start tag was here.

…,width=550,height=520');return true"><p><input type="text" value="Enter your   

 (In both cases- the mistakes are from our homepage are in  the code provided by Feedburner. There’s plenty more if you want to check it out- some alt tags i can fix because they related to images but the ones related to thumbnails or  regard images ending in 290×290 are rendered by plugins I would even begin to know how to edit to fix these issues.)

I thought I was a huge idiot, an embarrassment to my chosen profession, which in fact I may be. BUT I found solace reading Joel Spolsky’s post on web standards at David Alison’s suggestion.

To quote Mr. Spolsky:

"DOCTYPE is a myth."

Well that’s just brilliant. Assuming he is correct, and he probably is since he is a succesful software developer, the W3C standards are so convulated you would have thought they had been written by lawyers. Therefore, different browsers interpret your webpages differently.

If you want to know the "WHY?", read Mr. Spolsky’s article. If you want to see what your website will probably look like in various combinations of browser or, platform, and plug-ins, I suggest using one of the online services that will provide screenshots of anywebpage as rendered in different browsers/platform mixes.

 

1. browsershots.org

Brought to you by Johann C. Rocholl, browsershots.org will provide you images at the requested screen size for download. Each image is named by browser and platform (something like msie-8.0-windows.png) for reference. I was immediately able to notice that IE 5.5 and IE 6 broke the webpage and I had some safari/mac issues to resolve as well.

I have reduced the image size and dropped them into a jpg side by side for quick-glance comparison :

 

2. Netrenderer

This service is somewhat unique in that it  adds another dimension to the comparison. (I will just quote them cause I can’t do any better):

This web rendering tool is ideally suited for web designers working on Apple iMac and Linux workstations. It allows to verify web designs natively on all popular Internet Explorer versions, without the need to set aside several physical or virtual Microsoft Windows PCs just for that purpose.

A unique Mixed Overlay and Difference Mode helps to identify even subtle positioning discrepancies between IE6 and IE7 by adding or subtracting both images and displaying the result. Screenshot images are always 100% original size and a ruler marks maximum usable viewing widths on 800×600 and 1024×768 displays, taking into account the browser scrollbar.

 

You can easily see examples in the following images.

This is a MIXED OVERLAY of digitalapplejuice.com rendered in IE 6 and IE 7. See the shift of the text and images:

 

This is a DIFFERENCE MODE of BAGUA9.com rendered in IE 6 and IE 7. The shift is plainly visible:

 

 

You’ll notice of course that netRenderer shows our site looking "OK" - contradicting what the screenshots from browsershots.org show.

To me, desiging for the web  is like going to Vegas- you go with the odds but in the end, no one beats the house. I have made changes to the CSS and tweaked thumbnail sizes.

Mostly we try to make sure that our MACvisitors see this as close to what we had intended as possible. If you see this page as totally broken and can take a screenshot, email it to us JUICE AT DIGITALAPPLEJUICE DOT COM. Please include your browser, version and platform as well.

 

As of this moment- Wednesday, June 18th 6:22pm CST- we look like this:

 

I think I will have to start from scratch. Maybe the new homepage layout I am working on will render better.