Testing CSS + FSS

Jacob Farber jacob.farber.work at gmail.com
Tue Jan 27 19:06:09 UTC 2009

This is, of course, a huge problem for doing CSS comparisons.

At the moment, I figured we have no choice but to make a separate wireframe
overlay for each browser/OS configuration, and use that as a reference. The
wireframes should be almost identical, but we need to ensure we're not
dealing with a browser quirk as opposed to an actual bug.
As an aside to address the second point, I will be the first to admit the
FSS CSS is not a pixel perfect system (nor does it try to be) but rather a
very helpful sibling to UI Options, doing what it can for assisting in
layout, text and color manipulation. So, in the end, we leave the
perfect-pixel-pushing to the OCD designer/developers who will tweak what
they need :)
On Tue, Jan 27, 2009 at 1:54 PM, Eli Cochran <eli at media.berkeley.edu> wrote:

> I think that this is an excellent approach. It unfortunately still involves
> someone eyeballing it. (I understand that with some effort we could devise a
> system that did this auto-magically, but I'm not sure it is worth it.)
> I have a concern.
> We all know that every rendering engine has it's own quirks and while
> cross-browser pixel perfect designs are do-able, they take extra effort and
> often browser specific code or hacks. In many cases, especially web
> applications, an acceptable strategy is to accept that some variation will
> occur and as long as the page is usable and esthetically consistent on that
> browser then it's OK, even if it doesn't agree with some other browser.
> The overlay approach should also be paired with a policy that outlines what
> is an "acceptable variation" between browsers.
> <huge generalization>One of the advantage of the Web 2.0 esthetic of
> "less-visual-design" is that it has much more room for variations between
> rendering engines.</huge generalization>
> - Eli
> On Jan 27, 2009, at 10:31 AM, Jacob Farber wrote:
> Hi Everyone,
> The past while it has become more and more pressing that FSS has some form
> of testing. Through some research and long discussions it has become evident
> that this is not going to be easy. Some ideas bounced around were automated
> image comparisons and programmatic CSS parsing but no solution was feasable
> within our time-constraints and nothing completely removed the need for
> someone to just open a page and see if it "just looked right".
> On that note, Justin and I were thinking perhaps a wireframe overlay on top
> of special test page would suffice for now. The wireframe would look
> something like an outline like Adobe Illustrators "outline" mode, and it
> would layer itself on top of the test page content. If the wireframe and the
> content beneath it didnt match up perfectly, you would know something is
> broken right away and bug could be logged. To complement this test page, a
> series of smaller pages would be available to test very specific chunks of
> the FSS CSS. This second part would help us pinpoint where specific problems
> lie.
> Any thoughts or ideas?
> Thanks
> Jacob
> --
> Jacob Farber
> University of Toronto - ATRC
> Tel: (416) 946-3002
> www.fluidproject.org
> . . . . . . . . . . .  .  .   .    .      .         .              .
>              .
> Eli Cochran
> user interaction developer
> ETS, UC Berkeley

Jacob Farber
University of Toronto - ATRC
Tel: (416) 946-3002
-------------- next part --------------
An HTML attachment was scrubbed...
URL: <http://fluidproject.org/pipermail/fluid-work/attachments/20090127/7ca81b31/attachment.html>

More information about the fluid-work mailing list