Using Adobe's BrowserLab

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.

Onion Skin View allows you to overlay to different browser renderings to compare the differences. Here, Safari 4 and IE 6 are rendered in Onion Skin mode.

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.

The rule of thirds, the golden section and web design

I somehow missed this post two weeks ago by Jason Santa Maria (@jasonsantamaria) on the difficulties of applying classic design principles to the web. I never thought about how difficult these principles are to apply within the framework of interactive design. It’s another adjustment that print designers need to take into consideration when working on the web.

For a long time we’ve been looking at web design through the lens of print design, and while some of the traditional design practices can make the jump to the screen, some cannot. The screen brings with it different kinds of challenges for visual design, some of which occur exclusively in interactive media.

A great read… Go over and check it out. And in general, just check out his personal site. His commitment to art directing each post is fabulous. (Especially this post…)

Quick reflections on the AIGA South Carolina's Web Design Panel

I had the privilege of moderating the AIGA South Carolina Web Panel discussion a few weeks ago. The panel featured a number of local web designers and developers - Gene Crawford and Jay Berry from Period Three; Matthew Smith from Squared Eye; Jason Beaird, Greg Lunn and Ken Seals from Cyberwoven; and AIGA SC Vice President and hired gun James Miller.

We had a really fascinating discussion about trends in web design and how web designers work. A few quick reflections:

Continuing education. The web is constantly changing. And for web designers, that means that they need to keep up with the most current techniques and methods. Most use internet resources to keep up with new concepts and the web design industry has essentially created a virtual cooperative to share information online.

Personally, I think this commitment to continued learning and sharing is one of the most fascinating parts of the web development community. I feel like the online print design resources are focused mainly on inspiration. The web community has managed to merge the inspiration element with technical knowledge and information on best practices. There really seems to be a dedication to improving the quality of the industry as a whole.

Side projects. Pretty much everyone on the panel has a side project. Matthew has Pattern Tap. Gene and Jay have Unmatched Style. Jason has Publix for Pennies. As I look around at other established web professionals, they all seem to have developed side projects as well. The goals for these side projects are very rarely profit. These projects are essentially client-less projects that allow for exploration and experimentation. A chance to use the skills that you have learned to contribute back to the community in some way.

(Honestly, we really don’t have an equivalent to these side projects in the print design world. The printing process is so expensive, you really need to have some sort of client to foot the production bill… Our closest parallel is probably working pro bono.)

IE6 sucks. Really, if you are still using Internet Explorer 6, upgrade now. Firefox and Safari are fine options. And free…

Client relationships. In the print world, client relationships are often simple transactional affairs. There is a project beginning and a project end - usually resulting in a deliverable of some sort. In the web world, you have to find a way to deal with the ongoing maintenance of the site and other issues like hosting and email. With web work especially, a good contract is vitally important.

The panelists were going to pool a number of resources and publish them online. I’ll link to them as soon as the list goes live.