Don’t do that – When graphics collide

So in today’s edition of “Don’t do that” we look at a technical implementation issue that leads to a kind of silly mistake. The Website we are looking at is Bioedit, a service that provides editing and proofreading services to medical researchers. (BTW, don’t think I am not intimidated by taking on editors knowing my fondness for typos.) The site is a lovely one with a fresh and vibrant color palette but it has a bit of an issue.

Like many sites, BioEdit has a revolving image as the focal point on the main page. The images in that slider are fixed width (meaning they stay the same size no matter how big the browser is set).  Other elements of the site such as the login box are fluid, meaning they move as the browser is set at different sizes.  Sounds esoteric and complicated right?  Why does this matter?  Well, check out what happens with this combination.

When I visit their site and the slider shifts to the second picture I see a lovely red headed women completely covered by a login box.  Now if I stretch my browser a bit (I have an external monitor that is huge so I can do that) I can clearly see her face. Here is the thing though, on my primary MacBook Pro 15 inch monitor (a pretty common size), we have the box over face issue.

I am betting that whoever designed this image has an enormous monitor and hasn’t opened the site on a smaller browser to see the impact.  So what do we learn? Always look at your site on browsers of all different sizes. If an element’s design looks silly at any common size, it isn’t the right design.

~e