So I’m done playing around with the layout of the site. My Sketchbook B identity has changed typefaces – switching from eternal work-in-progress Addison to available-now-on-Fontstruct Power Grid. I also massively simplified the layout, added a new Archives page and redesigned the Fonts page.
While messing around with the site, I used Adobe’s BrowserLab periodically to check and see how things rendered. I figured I’d highlight a little about what BrowserLab can do…
What is BrowserLab?
BrowserLab is a web application from Adobe Labs. Basically, you give BrowserLab a web address and it returns screenshots from various web browsers so you can see how it renders. Right now, BrowserLab will show you screen grabs from Safari 3 and 4, Firefox 2 and 3 and IE 6, 7 and 8. (I don’t use Dreamweaver much, but BrowserLab also has a Dreamweaver-plugin that allows for testing local content.)
You can view the screen grabs in 1-up or 2-up modes. There is also an “onion skinning” feature that allows you to overlay two browser renderings to compare the difference. A ruler with guides allows you to take measurements. And you can zoom in and take a closer look.
The main limitation to this approach is that you are only looking at a screenshot. Rollovers and interactive elements can’t really be tested with the online version of BrowserLab.
As someone who uses a Mac and doesn’t have a PC around for testing, being able to check layout in different browsers is helpful. (As an aside, I would imagine that most professional web developers already have a set up to allow them to test sites on Mac and PCs on a variety of browsers. So this is probably going to be most useful for freelancers, hobbyists and small in-house teams.)
To sign up for BrowserLab and try it out, head over to the Adobe Labs website and sign up for an account. Note that they aren’t always accepting new accounts, but as of the posting date, they are.