Blog Stuff we're discovering, learning, reading, watching, enjoying...

Browser testing, or QA as technical people call it to clients, or indeed “total bane of my life” as they call it to each other, is a necessary evil of web development these days. As ever, I’ve been looking at streamlining this part of our development and delivery process, and in doing so have come across the following resources which I thought I’d share for future reference. None of the following are tested or rated. Some have been used a little, some have been used a lot. Some not at all.

• Multi Browser Viewer
  Windows-based software, with extensive range of multi-platform browsers.
• Browsershots
  Web-based service, with free (albeit slow) option.
• Remote Desktop / Real VNC / Jollys Fast VNC / Chicken of the VNC
  We currently have some old basic PC boxes with a variety of Windows browsers installed, and then use VNC or Remote Desktop to connect to them for our Macs. Great for testing whilst in the office.
• Cross Browser Testing
  Basically this is a remote version of the VNC approach, with a range of boxes ready for testers to connect to.
• Adobe BrowserLab
  Very comprehensive offering that integrates with CS5 Suite. Excellent to use and very thorough results.
• xBrowse
  New web-based service, with limited range of browsers but very fast and covers main browsers so great for quick “cover the main issues” testing.
• IE Netrenderer
  A bit limited but easy and quick for a bit of IE testing, and let’s face it, that’s mainly what we need.
• Litmus
  Email testing only apparently, though the August issue of .NET magazine seems to suggest it also supports web browser testing.
• Mailchimp
  Actually a mass mail sending service, but with an excellent “Inbox Inspector” option for a small fee.
• Email on Acid
  Email testing, including iPhone and Blackberry.

I have to confess, until I read this article I knew literally nothing about CSS transitions. I hadn’t even considered they were possible, despite becoming fairly used to using other CSS3 features and to enhance pages for browsers that support them [drop shadows, text shadows, rounded corners, etc]. Apparently part of the delay regarding CSS3 transitions being implemented was a debate regarding whether transitions are ’style’ [and therefore part of CSS] or ‘interaction’ [and therefore part of scripting].  To my mind, they are certainly just style additions - mainly just enhancing a hover state or reveal that remains functional regardless of the effect/style used. The examples provided demonstrate quite appealing enhancements such as soft reveals of a drop menu or subtle glows on hover states, though the demo moving an object [a spaceman] from point A to point B seems to stretch the “this is just a style” approach and feels less obviously applicable to most web pages. So, using a compatible browser such as Safari or Chrome, check out the CSS Transitions 101 article at Webdesigner Depot. In fact, it’s worth comparing the article in a non-supporting browser too, just to remind yourself of the experience without the transitions.

Those folks at Google continue to be pretty busy, although if you look closely it’s not hard to see much of their activity [Docs, Apps, Wave, OS, etc] coming together behind the common thread that is their web browser, Chrome. Chrome is a very fine browser already, despite it’s present shortcomings such as not being available [properly] for the Mac. However, one issue that Google face in their drive to offer everything the mass-market computer user needs through a humble browser is to educate people as to what exactly a browser is. Of course, we in web development [and to some extent our clients who run web and mobile sites] use multiple browsers and often understand the pros and cons of each, but to the average computer user a browser is at best a means of saving bookmarks and at worst is “The Internet”.

Google’s answer? Create a website that explains exactly what a browser is, how it’s role will increase in our day-to-day activity and, without too much disguise, why therefore you should choose Chrome for your browser.

Web usage has changed dramatically over the past couple of years, with even the average user now utilising web services alongside informational resources. As most of the major browsers have moved towards tabbed browsing, many web sessions now involve hopping between your ‘web service’ tabs such as rich email client, project management service, image manager, etc and other websites. Well, if you’ve ever found yourself thinking “I wish I could just run my web services as an application and separate them from this tabbed browser model”, you actually can. [Of course you always could just by running them in a separate browser window but that often results in even more confusion].

Fluid is an excellent little freeware app for Mac OS X that enables websites to be run as applications. The site is shown without the usual browser clutter around the edges and is presented as a standalone application in your App menu. The execution has been thought through excellently - such as web links to other sites being launched in your preferred browser, rather than the ‘app window’ losing the original app. For instance, I run the project management web service Basecamp as a Fluid app. This means that I can flick back and forth to it with ease, it never gets lost amongst other tabs in a browser, links to client sites/resources open appropriately in my browser, etc. Give it a try!

Looking forward to seeing whether the Adobe® BrowserLab cross browser testing solution works in real-time. Browsershots is an excellent tool for final browser checks before roll-out but tends to be a “last minute check” due to the time delay before seeing the results. BrowserLab could potentially fill this gap if it’s real time.

The lengthy beta of Skyfire [which apparently saw over one million downloads] has come to an end and Skyfire has moved to an official v.1.0 release. If you have a high-end Nokia [N or E Series] or a recent Windows Mobile phone [WM5 or 6] then Skyfire is certainly worth downloading and installing.

At a glance, the features are similar to the very capable Opera mobile browser. The big win for Skyfire however is that it supports Flash 10 content. This means that a wealth of previously unavailable content is now supported on mobile, not least of course Youtube [and similar video sites such as Vimeo]. Having only used the browser for a short time, my first impressions are that it is not as fast at rendering a page as Opera, nor is the rendered text as sharp. However, in general usage the browser performed excellently, and standard browser functionality such as automatically rotating to landscape when I tilt the device worked well. Furthermore, using Flash content worked like a dream. It would also be a dream for mobile operators too of course as, when not in wifi range, the Flash content would typically chomp happily through my data bundle.

All in all, Skyfire is a highly capable browser and brings my N95 mobile browser experience to a new level. Whilst not quite threatening the alround iPhone or Android browser experience just yet, it demonstrates that we can continue to expect a high quality mobile internet experience on non-touch screen phones for sometime to come.

Whilst it’s not usually an issue, sometimes the dotted outline that is applied to links in their active state [e.g. the point when they're clicked] looks visually untidy - especially if you’re also using lots of padding or text-indent tricks to hide HTML text. The following article about removing the dotted outline is a great summary of how to overwrite this behaviour whilst also maintaining accessibility [a key reason for the active state in the first place].

OK, so Sweden brought us IKEA but Norway knows how to deliver what we [as web developers] really want… the death of IE6! What started out as a series of Norwegian websites declaring war on IE 6 has begun to spread a lot further, even gaining support from Microsoft itself. Now there’s just the n million machines on backward corporate IT networks to crack.