Fireworks MX & MX2004: Fun with Productivity - Part 1

Crawl fast before we run faster

Don't get mad if I told you the first place we're going to optimize your Fireworks habits is in your Properties panel. Yes, the Properties panel. You'd be surprised how fast you can design anything if you know how to count, well, I mean add and subtract. No heavy Mathematics, just know you'll have to track X, Y, Width, and Height coordinates of the stage and elements we design.

The particular area I'm talking about is the lower-left side of our Properties panel when an object is selected (size properties area highlighted below). I cannot stress enough how important this size/coordinates area is. Fireworks gives us perfect control for pixel-based sizes and position. The header, body, and footer are the most common elements of a web-page. Need your header to be 150px tall and 5px from the edge? Click in the coordinates area, edit the size & position, and you're done! No dragging or re-dragging. You'll reduce the need to zoom in, since you know your designs' coordinates! Pixels are easy to count; no fractions, no decimals.

Resizing & Repositioning multiple objects

Repositioning multiple objects at once is easy. Resizing multiple objects is a bit tricky, regardless if they are grouped or not. When trying to resize multiple vector objects, they end up getting an algorithm applied to them where Fireworks divides the added width or height by how many objects are selected (or grouped). The result will never be what you intended, unfortunately. Two ways around this, resize each object individually (with the Sub Select tool) or scale all objects together with the Scale tool. I find these to work best - even though I hate dragging handles being a Math geek.

Safe Sizes

Let me show you where we should handle things before jumping onto our computer. Did you already sketch (hand draw) your page layout? I hope so. Pre-design planning (sketching) will greatly aid your workflow, since it'll be your blueprint of the page layout and design. So what does sketching a design have to do with “safe sizes”? Well, do you know how many pixels your header will be? Side-content (“nuggets”) width? Do you know how tall your footer will end up being? If not, then you might need to start pulling out your ruler, er, I mean launch your calculator software.

Browser(s) Window(s) Size(s)

Let's briefly remember we work in pixels (px). The lowest common monitor resolutions is 800x600 pixels, and the next up is 1024x768 pixels. As a web-designer, stay familiar with these two sizes when planning web-page layouts. But there's a catch, those sizes are the whole screen, not what fits in a browser window. If you designed anything on the web exactly 800px wide, then you've probably seen a horizontal scrollbar appear in a browser. No two browsers are the same, in regards to layout and the viewing area. To mess with our heads even more is, no browser is entirely the same if on different Operating Systems. The worst culprits: Internet Explorer and Netscape on both Mac & Windows.

If you're a Dreamweaver user, then you may use (or noticed) the browser size options (bottom-right of each window in Design View).

Take notice, the monitor resolutions on the right side say, “(800x600, Maximized)” with some smaller sizes to the left(“760x420”). Like I said before, no two browsers have the same viewing area size and Macromedia was kind to incorporate “safe sizes” (since DW3) that work extremely well in any browser on any Operating System so far. If you don't have Dreamweaver then I'd take note of the safe sizes in the screenshot above, these are practically holy grails of safe sizes for web-page layouts!