Posted on 1 Comment

Browser Testing

Yea there was Gopher and it was good.
Lo and behold, Mosaic!
And it was slow.
Veronica, Gopher, and I were the hare to the Mosaic tortoise.
But Mosaic was pretty.
And Netscape Navigator became standard.
Microsoft saw Mosaic was good and, like Netscape, based Internet Explorer upon Mosaic’s code.
But Microsoft was evil and the world loved Netscape.
Programmers knew code must work in Netscape and then maybe in Internet Explorer.
Microsoft released Internet Explorer 3 for W3C standards were good, and CSS was good, as long as Microsoft could have some of their own proprietary "standards."
Still Netscape dominated.
Enter Internet Explorer 4 and Browser War I was lost.
Now we tested for first for IE3, IE4, and then Netscape Navigator.
Internet Explorer 5 – meh.
Quirks mode – blah.
WML? No one will ever browse with their phone. WAP!
Internet Explorer 6 – WTH!
Mosaic beget Navigator beget Mozilla.
And geeks professed the end of Microsoft while normal people replied, "Firewhat?"
Internet Explorer 7 -FTW.
Now we tested for Internet Explorer at least version 7 and 6, Mozilla/Firefox, and maybe Navigator.
Oh, don’t forget to test with JavaScript enabled and disabled, delete your cookies, clear your cache but be ready to explain this to your end users, and don’t forget the magic reboot.
Internet Explorer 8 – is great?
Be sure to include conditional code for a special IE6 cascading style sheet.
What is Flock?
What is compatibility mode?
All hail Google’s Chrome!
What do you mean? Regular people use Macintosh computers!
Apple has a browser? Safari!
Browser War II.
The website looks different on your phone than your computer?
When you say your Internet enabled toaster prints the New York Times fine but my blog burns your toast, is all the bread blackened or just the crust?
And my website does not control the spooling on your Internet enabled toilet paper dispenser.
And if the ink is smearing on your butt, that just means you are wiping before reading the paper.

What is browser compatibility? Testing against this list.

Today I have a website that looks good in Internet Explorer 6, Firefox, and Internet Explorer 8. I have not been able to test it in Internet Explorer 7 but will be fixing that today. However, if I put Internet Explorer 8 into "compatibility view," my horizontal list based css driven navigation menu breaks. IE8 Compatibility Mode and IE7 are NOT the same thing! There are many differences between IE8 compatibility view and IE7. So today I’m playing with Internet Explorer’s Virtual Compatibility images.

Interesting, this browser history appeared in my feed today after I posted this.

Posted on Leave a comment

Today’s Technical Challenge

I like the semantic web. That means that when I create a website I use markup as its intended. We used to have to use tables to make elegant layouts. Browsers have matured and become more compliant to the HTML specification. Now tables can be used for tabular data; however, designers still have tools which cut and slice designs up into tables rather than using CSS. Tables have their place in HTML. Specifically, tables use be used for presenting tabular data but not for arranging graphics or chopped up pieces of images in the browser window.

Menus and navigation are lists semantically speaking. Of course, no one wants to see a menu with a bunch of dots beside it nor should ever menu be presented as a vertical list with indentions for submenus. Using CSS we can remove the bullets, turn the list horizontal, and make the submenus appear as submenus when the mouse rolls over the navigation. This works great in a browser and because of the semantic nature will present well in a pda, phone or other mobile device. However, the WYSIWYG editor in an email client wreaks havoc on the page. "Huh?" is the correct response because really web pages, particularly dynamic web pages, should not be sent by email. Instead a link to the web page should be sent. BUT Internet Explorer is kind enough to provide under its FILE menu (PAGE menu in IE7) an option to "Send Page by Email" which in theory will deliver an HTML email that is an exact representation of the web page.

In reality, in a specific case which has not been narrowed down yet, the CSS menu is rendered with conditional comments.

<!–[if !supportLists]–>o<!–[endif]–>

Obvious steps have been to make sure that IE is upgraded to IE7 and that the email client is updated. And to confirm that the email is being sent as HTML and not plain text. Aside from returning to a tabled design, what other options should be explored?