The web slices you create depend on the subtlety of your graphic design and how the final blocks in your HTML layout will interact. Therefore selecting web slices is an art in its own right and that task is better left to the person in charge of creating the HTML template.

You will now learn about the rectangular slice tool  in your Adobe Fireworks (CS3, CS4). You will later have the opportunity to compare it to the Photoshop slice tool in another upcoming post.

The screen capture above reveal the  slice tools located in the “Web” category of your Fireworks’ tools panel. With your slice tool “in hand“, you can just select the area of the canvas you would like to convert into a web slice with a simple click-drag-and-release.

A web slice can be easily spotted in the canvas by its green overlay. Once a new slice is created, you can see its properties – dimensions and position – as shown by the screen capture of the “Properties” panel below.

Fireworks automatically name each new slice created. However you are better off renaming your web slice (e.g. top_chair) to something that will make more sense during the HTML design stage.
You can also edit the width and height (W, H) of the current slice to modify its dimensions.  The X and Y values define the position of the slice in the canvas. You can changes those coordinates by just typing new values. You can also use your keyboard arrows in to change those values at 1pixel at a time.

The “Type” property let you choose between foreground and background image. A second drop-down list to select the slice file format (GIF, JPEG or PNG) and its compression. In the screenshot above,  ”JPEG- Better Quality” means a compression ratio of 80% in a JPEG file format.

For for each new slice created  Fireworks adds  a new layer under “Web Layer” folder as shown in the image on the left.

Just like  regular layers in your canvas, you can reorder web layers by just dragging one above or below another. You can also hide a given web slice by just clicking on the “eye icon” in front of its layer. To reveal a hidden slice, just click the empty space reserved for the eye icon of that layer.

The slice name defined in the properties panel is the same as the name of the web layer. By renaming the web layer you are renaming the web slice as well.

You can lock all or just a selected layer by clicking on that layer’s lock box  in the  column right next to the “eye  icon”. A locked layer shows the lock icon and the corresponding layer and web slice  can no longer be modified until it’s unlocked again.

Locking web layer is a safe way to avoid accidentally modifying that slice properties. You can lock all web layers at once by clicking the lock box left of the “Web Layer” folder icon.

Compared to Photoshop or Illustrator web slicing, Fireworks slice tool is more intuitive, easier to use  and packs all the functions you need for slicing and dicing in one spot. In a fast pace web production environment, Fireworks slice tool is a tremendous time saver.

It’s up to the web designer/developer to make sure the web site displays or degrades gracefully on all major web browsers: Firefox, Opera, Chrome, Safari and Internet Explorer (IE6, IE7, IE8). Reaching that goal seems daunting if not impossible.

How can one make all those web browsers get along?

For years now web developers have been pointing the accusatory finger to Internet Explorer: J’ACCUSE!!

Well, a few years back Netscape 4 was sitting on the trial bench, accused of slowing down the web. These days, all eyes are on IE6 . Internet Explorer 6 does not support most of the new HTML & CSS features which take web page design to the next level: CSS round corners, PNG graphics, and the CSS :hover pseudo-selector is limited to the anchor tag.

Those are just a few of the potholes along a winding road. The need to make websites display well on all major browsers, despite all the shortfalls mentioned earlier, puts a brake on how far a web designer/developer can push the envelope. More and more time is spent on a given project tweaking and “hacking the code” to be compatible with IE6 and others. And that “my friends” can not only be a real nightmare for the web designer, it’s a big impediment to the evolution of the web.

Since you will have to include IE6 anyway in the list a web browsers to check your website again, here are a few nuggets to save you tremendous web development time and frustration. At any stage in your web design process (HTML/CSS):

• Avoid applying padding to main CSS layout containers (div tags) at all cost
• Use margins in the nested container to simulate the left and right padding on the closest parent container.
• Wrap the text in paragraph (<p>) tags to which you applying margins to achieve the padding.
• IE6 doubles the margin of the floated element on the direction of the floating (left or right)
• Always specify a width of any floated HTML element
• Apply both the float and inline display properties to list items of your horizontal navigation
• If you must hack, create a separate CSS style sheet where you would group all the styles aimed at IE6 and use the Internet Explorer’s conditional comments.

At the end of the day/project, web development is all about matching the capabilities of the end-user’s web browser. It’s less about the artistic talent of the graphic artist or the programming skills of the web programmer.

“This web site is best viewed in web browser X or Y” is just an excuse to avoid spending extra time checking your design compatibility with other major web browsers. It might seem cost effective at first but it does not make business sense: you are loosing potential customers user web browsers different than your target browser.

All you need is to preview your site design at crucial steps during the web development process to fix potential problems early on. In the end you will achieve a design that will accurately display your website on all major web browsers. It may also be time to target smartphones as well.

IE6 is still here and breathing. We just have to deal with it.

1. Always start with picture dimensions (w, h) greater than your target size
2. Set the image resolution between 72 and 96 pixels/inch
3. Crop the image to only keep the area needed to convey your message
4. Resize the cropped image to reduce the dimensions to the minimum while maintaining the proportion between width and height
5. Choose the appropriate export file format: PNG, JPEG or GIF
6. Select the right compression ratio/color range

To put it in simple terms, you need to find the right balance between the quality and file size.
If you must do some corrections such as removing blemished or creating smoother edges, do it on the original image (before resizing it) .

I have seen websites using a 500kb (kilo bytes) picture they shrunk by just setting the desired with and height in the HTML image tag (<img src=”path-to-image” with=”300″ height=”250″ />).
That trick does not reduce the file size of that image and in most case the picture displayed is less sharp than what it should be. You have not only a degradation in the picture quality but a waste of bandwidth and web hosting storage. No wonder that page took so00 long to download.

To give you an idea, a raw picture resized to of 300 x 250 pixels and well optimized should be in the range 5 to 10 kb depending on how rich in colors that image is.

I have also come across web pages where some picture are “bloated” to dimensions greater than the actual width and height. Of course a few pixels adjusted never hurt and are barely noticeable: it solves a presentation issue and saves you some time.

However a change of an image’s dimension (width or height) from 150 pixels to 200 pixels would catch the eye and obviously degraded the visual appeal of that image.

If you follow the 6 key points listed above, you will get a crisp image with a small file size.