Stefan Hayden

Alt + Shift + Ctrl + K

Browsershots: a quick review

One of the hard parts of web design is conditioning yourself to out put code that works in all browsers. I don’t know how many people can code web sites with out needing to check to see if the code actually works, but I am not one of those people. Searching the internet for solutions there are services to check how your page looks in other browsers but they are all rather expensive for little college graduates like me.

The other solution that some subscribe to is called the “Avoid the Cutting Edge” approach. For the most part I am appalled by this approach as I can not think of any other industry that advocates staying away from new and better ways of doing business. I feel an “Understand the Cutting Edge” is a better outlook to have. It’s important to know what the new technologies can do. Yet no matter how fancy a new feature might be if it does not work in the dominant browser (currently IE) then the feature is dead in the water. Though I am waiting for the “Killer App” that will propel Firefox to the forefront. Some where out there is an idea that can’t run on IE and if implemented for everyone else the mass exodus of IE would begin.

Until that killer app comes I will continue to push IE as far as it will go and will need all the help I can get checking to make sure my web pages work in every browser with out spending a fortune. A long time coming some one has finally started an open source project that let you see your site in different browsers.

Browsershots
works by letting you submit a URL and it renders out PNGs of what it looks like in different browsers. I’m unclear exactly how it works but from what I surmise it has a central server that dishes out jobs to people who are running the scrip on their computer similar to how Seti@Home works. I downloaded the script and tried to see if I could figure out how to run it off my dreamhost account but did not have any luck. The project is still in it’s baby stages, though it has already handled some very large hits from del.icio.us and the like. When you submit your link it gets put in a pool and it renders out PNGs which you view on their site. This is a very public way of testing websites and would especially be a problem for larger projects that need to be kept secret. It would be nice if there was an easier way to run it privately, which it says it can do but it is not documented well enough for me to figure it out. Perhaps it could use a wiki for documentation to help speed the writing up as I would love to run my own version.

While it tells you the stats that the PNG was rendered with next to the image it does nothing to help you with any display problems you might have. Perhaps it might be a pipe dream but it would be amazing if it pointed out likely problems that different browsers will have with the code (XHTML, javascript, CSS) that you have written. I ran in to my own error as I got the error shown below and can’t figure out why. I get it for both my site and the one I’m working on. Let me know if you figure the problem out because as of right now I’m stumped.

my stange error

2 Comments
Gravatar

Thanks for the review. You are right, private screenshots are not possible because we don’t have user management with passwords yet.

The problem with IE that you mention occurs frequently when the HTML or XHTML has invalid syntax. For example, tags that are unclosed or improperly nested. Run your code through http://validator.w3.org/ to see if this could be the case.

Cheers, Johann

Gravatar

Yes the first time I ran my project through there was a couple of invalid characters. I fixed them and tried to run it back through Browsershots, but I couldn’t tell if it re-rendered the images or not as a new instance of images did not come up and the old set of images did not seem changed. That seem to be more of a usability problem of the site but with so much raw functionality there I’m sure usability will be coming in the future. I should run it through again today to see if there is a difference. thanks for the help!

Feed Icon Comment Feed

Post a Comment