Dec 28 2009

proofing your website on different browsers

Chances are that you have designed a website or two where your creativity pushed the limits of (specifically) Internet Explorer’s capacity to deal with it. I’ll bet that most web designers don’t use IE as their default browser. Being a Mac shop, I have struggled with a foolproof way to proof newly-minted websites in IE. I broke down and bought a used Windows laptop for that (sole) reason. It was less expensive than running Windows through Parallels on the Mac. Also, in that way I get to see the actual rendering of fonts and images at Windows screen resolutions. I am suspicious that using a Windows emulator on a Mac would not render the screen in the same way.

This method works well but Windows has a tendency to drop out of my network for no reason, especially if I have not been using it. When I need it the most it takes precious time to wade through the maze of Windows to find the one that allows changes to the IP addressing. When Internet access is finally restored I must install all of the system security and virus protection updates that I missed. I digress…

When it comes to proofing for IE I like IE Tester, which is a free utility from DebugBar. This utility permits live testing of the site in IE5 through IE8 in XP, Vista, and Windows 7 environments (you supply the OS). The nice thing about IE Tester is that the functionality of the site can be tested as well as the styling. If you’ve wondered whether the Javascript utility operates as intended, this is a good solution.

The one remaining problem is proofing on the other browsers that Windows supports. It means preserving archival versions of Firefox 2.0 or Opera 6.0. And there’s Chrome. I have not found an easy way to proof on earlier versions of browsers for either Mac or Windows.

That is until now. If you sometimes haunt the halls of Adobe Labs you may have heard of Adobe BrowserLab. If you have not, it is worth trying to get on board with their limited free preview.

This utility resides in “the cloud”, similar to Kuler (another worthwhile utility) so all you need to do is download a small app and use your Adobe registration to log in. BrowserLab renders screenshots of your site in Firefox 2.0, 3.0 and 3.5 on Windows XP and Mac OS X; Internet Explorer 6.X, 7.X, and 8.X on Windows XP; Safari 3.X and 4.X on Mac OS X; and Chrome 3.0 on Windows XP. This list will be updated as browsers are updated–soon I hope for Chrome on Mac OS X.

You access the utility from the Adobe BrowserLab website, provide your Adobe registration info (or sign up), choose the combination of browsers/OSs that you want to preview and feed it the URL of your site:

You can compare in a 2-up display or as an ‘onion skin’, showing two browsers superimposed, which is helpful for fine-tuning alignment. Also helpful is a ruler option to pinpoint an exact location.

The utility can also accessed through a Dreamweaver CS4 extension.

The most discouraging aspect of this otherwise very helpful utility is that it renders the page as a static screenshot. The dynamic functionality cannot be tested or compared. Still, I hope that Adobe continues to make this available, if not for free, at least as a low cost subscription.

Dec 27 2009

css techniques: text wrap around image

The challenge: I had designed a printed page layout with a different visual element on each page to help to break up rather long narrative. The client wanted this to be a template for her website, including the text-wrapped image. Below is a (different) page mock-up using a similar visual element in the lower left corner:

To make the page look similar to the printed version, the text to had to wrap around the image, not just squarely around an image with float:left styling. However, this is not as easy as it seems. I was familiar with the “sandbox’ technique, in which a series of sandbox DIVs is defined that block out the image so that the text can flow around them. This is cumbersome and a little time-consuming. However I stumbled upon a relatively simple technique that takes advantage of the <canvas> element.

By way of explanation, the <canvas> element “creates a fixed size drawing surface that exposes one or more ‘rendering contexts’, which are used to create and manipulate the content shown.” The term “rendering context” merely refers to either a 2D or (sometime in the future) a 3D image. To “draw” something, the <canvas> element is called by a script. In this case, Jacob Seidelin has developed a script, known as prettyfloat.js (download here).

Using this small script you simply give your image a CSS class of either “sandbag-left” or “sandbag-right”, depending on how your image should float. If the browser does not support <canvas> and image data access, a fallback mechanism simply sets the CSS float property to “left” or “right”, degrading to the old rectangular text wrap.

First, save the script with your project files (in this example to the same directory as the HTML file).

The image needs to be either .png or .gif to work properly, meaning it must have transparent pixels in which the text block will flow up next to the opaque pixels. To achieve this, the open the image in Photoshop, then:

  1. Open the Layers panel
  2. Double click on the Background layer to unlock it and make it available to transparency. This will now be labeled Layer 0.
  3. Create a new layer (Layer > New > Layer…) This will be a temporary layer on which you will draw a guide.
  4. Using the Polygonal Lassso tool, draw the guide leaving enough margin for the text:
  5. Using the Magic Wand tool, select the area to be made transparent
  6. IMPORTANT: Click on Layer 0 to make it the active layer
  7. Using the arrow keys on the keyboard, nudge the selected area 1 px to the right and 1 px up so there is no chance of a border of pixels along the straight edges
  8. Press the [delete] (or [Backspace]) key to erase the pixels:
  9. Save for Web & Devices using the PNG-24 preset

Now for the code:

In the <head> section of the HTML file, call the prettyfloat.js script:

<script src=”prettyfloat.js” type=”text/javascript”></script>

(Change the URL if you store your scripts in a separate directory)

The <body> section with just the wrapped text segment of the page is as follows:

<div class=”container”>
<div style=”position:relative; width:550px; height:450px;”> <img class=”sandbag-left” src=”flowers.png”>
<p>Lorem ipsum dolor sit amet, consectetuer adipiscing elit. Morbi commodo, ipsum sed pharetra gravida, orci magna rhoncus neque, id pulvinar odio lorem non turpis. Nullam sit amet enim. Suspendisse id velit vitae ligula volutpat condimentum. Aliquam erat volutpat. Sed quis velit. Nulla facilisi. Nulla libero. Vivamus pharetra posuere sapien. Nam consectetuer. Sed aliquam, nunc eget euismod ullamcorper, lectus nunc ullamcorper orci, fermentum bibendum enim nibh eget ipsum. Donec porttitor ligula eu dolor. Maecenas vitae nulla consequat libero cursus venenatis. Nam magna enim, accumsan eu, blandit sed, blandit a, eros.</p>
<p>Quisque facilisis erat a dui. Nam malesuada ornare dolor. Cras gravida, diam sit amet rhoncus ornare, erat elit consectetuer erat, id egestas pede nibh eget odio. Proin tincidunt, velit vel porta elementum, magna diam molestie sapien, non aliquet massa pede eu diam. Aliquam iaculis. Fusce et ipsum et nulla tristique facilisis. Donec eget sem sit amet ligula viverra gravida.</p>

A test of how this renders in different browsers (using Adobe BrowserLab–more about that later) reveals that Firefox 2.0 on Mac OS X looks as intentded:

Chrome on Windows XP renders properly:

However, as expected, IE7 on Windows XP does not, though the results are acceptable (sort of):

Most newer browsers now support the <canvas> element so this is really is a relatively painless way to achieve a layout that has the look of a printed page.

Dec 11 2009

composing html in mac

This is a quick tip to demonstrate how to use HTML content in Mac Mail. I assume that everyone is aware of the various admonitions against using HTML to compose email, however I only use this for a relatively small mailing list of people whose mail clients recognize my email address. The question of how to do this came up recently as I was preparing to send off my annual holiday greeting.

Unlike Thunderbird and Outlook (and probably Entourage), Mac Mail does not provide any straightforward mechanism for composing HTML messages. There may have been a script, but I think it had been separated from the program during the upgrade to Snow Leopard. Nevertheless, I have found an easy way to accomplish this.

1. Compose the message in the HTML editor of your choice. You can even use CSS and probably Javascripting, though I have not tried the latter.

2. Upload the HTML file and any associated files to your web server.

3. Using Safari, surf to your page.

4. Choose File > Mail Contents of This Page:


5. This will begin a new message in Mail with the HTML neatly included, just as you had intended.


Happy Holidays!