Thoughts on Design

The nice people at WebAssist.com are letting me try out their new CSS Menu Writer extension for Dreamweaver. I got a demonstration of it yesterday, and I’ve been putting it though it’s paces this morning.

It is exactly what the title would suggest, a CSS menu writer. Working through four tabbed menus, you can easily create fairly complex, and valid CSS menus. I’m very impressed with it so far. The extension works well, and is quite intuitive. The two most significant aspects I see, are that it uses no proprietary coding as far as I can see, and that I can create my own preset templates. This means that any menu I create using this should be editable by anyone with a knowledge of CSS, and that I can adapt the software to my own design style. This has the potential to be a very significant time saver for me. I’ll go into greater detail when I’ve had a few days to try it out.

A List Apart: Articles: They Shoot Browsers, Don’t They?

This is gobsmackingly audacious. Imagine a new version of Word that behaves exactly like the old version of Word unless the document it is processing contains a hidden instruction to unlock any new features. That’s what Microsoft is demanding that web developers implement. Unless you explicitly say otherwise, IE8 (and IE9 and IE10, ad infinitum) will behave exactly like IE7.

I’ve been following rumors about this feature for awhile. I thought they were going to turn out to be incorrect. It seems too audacious even for Microsoft. Forcing designers to use proprietary code in order or IE to work correctly? I can’t see how this won’t blow up in their faces in some way. It’s sure not going to earn them any good will.

We’ve all done it. You right click to correct the spelling of a word, and you add the misspelled word to your dictionary rather than correct it. Firefox makes it easy to add new words, but they don’t make it easy to remove them. Here’s how to do it.

I was putting together a list of resources that I regularly use for someone, and I thought it might be helpful for someone else.

Firefox Resources

• Web Developer - I use this for all purpose testing. Extremely helpful when checking CSS, but also good with images, forms, and other HTML elements.
• Firefox Accessibility Extension - I use this for evaluating 508 compliance on web sites and other HTML documents
• IE View - Lets you switch from Firefox to IE in a click. No need to find the page again in IE, just open your current Firefox page in IE.
• FoxView Let’s you open your current IE page in Firefox
• OperaViewOpens your current Firefox page in Opera
• IE TabOpens IE within a Firefox tab
• LinkChecker - Name says it all
• MeasureIt For finding dimensions of online content or space
• ColorZilla - Find the exact color you’re seeing in the browser.
• HTML Validator - A great validation tool for testing web pages.
• Fangs Screen Reader Emulator - Emulates a screen reader for testing 508 compliance and other usability factors.
• Split Browser - Open two pages in the same window.
• FireShot - A superb screenshot tool.
• Other hepful, non-design related extensions
  • All-in-One Gestures - Makes browsing easier.
  • Sage RSS Reader - A very nice RSS reader
  • Scribefire - Design as a blogging tool, it’s also helpful for just collecting links.

Resources for Internet Explorer

• Internet Explorer Developer Toolbar - There’s probably other useful IE resources, but that’s the only one I know.

Opera Browser - A resource all by itself. If you’re not familiar with it, it’s another high quality browser that’s useful to test pages in.

What type of image should I use online, JPG, GIF, or PNG? Simple question, but the obvious reply is another question. How are you going to use the image? One of my favorite quotations is Horatio Greenough’s “form follows function”. The function of an image should control the image’s file type. A few things to consider:

• Is it a large image?
• Is it a photograph, logo, line drawing, or simple graphic?
• Are there file size requirements?
• What color profile is required?
• Do you need to match image colors with any other object on the site?
• Are there subtle gradations of color?
• Are there large blocks of a single solid color
• Is transparency required?

Once these questions are answered, the file type required is much easier to determine. Some tasks can be accomplished by all three common web image file types, others by only one or two. The need for subtle color transitions for instance would rule out GIFs, while the need for transparency would rule out JPG. If you need both of those things together, a PNG file is the only real option. Look at the function required, and use that to control the file type choice.

JPG files are the best web solution for photographs, images with subtle variations of color, and images with large blocks of a single solid color. They also compress well, allowing for larger images to still have reasonable load times. They do not however, allow for transparency. This format also uses lossy compression, which means compression of the file causes loss of detail. The more compression, the more loss.

GIF files are very good for logos, allow transparency, and use a non-lossy form of compression. They also allow for animation of images. The downside of this is that they only allow for 256 colors, so color matching can be awkward. Due to the color limitations, GIFs also do not reflect subtle gradations of color well.

PNG files are a nice compromise between the two. They allow transparency, and can use up to 24-bit color. This allows them to use both the subtle color range of of the JPG, and the transparency of the GIF. In practice, I’ve actually had more luck with using PNGs for transparency than GIFs. Just as PNGs are better at subtle color gradations than GIFs, they also seem to be better at subtle gradations of transparency.

The key here is to look at the purpose of the image. File type follows function. 

I’ve been a fan of the PhotoShop Pattern Maker, but after that tutorial, I might have to give it a try. The use of it with the photo was interesting, but I loved the text pattern they created. I can see using some variation of this in print work.

I came across 53 Ultimate Tips For Better Photoshopping the other day. A very good list of PhotoShop shortcuts, both commonly known and not so well known. It is one of the more comprehensive lists like this that I’ve seen.

Scott Kelby has a great post about Photoshop vs. My Camera.

“Can’t you just take them out in Photoshop?” Yup, I could but I really hate doing that, so I just moved my camera to a spot where I could compose the frame without the wires being visible. That was much faster and easier—getting it right in the camera.”

People constantly underestimate the amount of work it takes to fix a photo in PhotoShop. Getting the photo right the first time is often much easier, and almost always gives you a better final product.

Creating a Stunning Old-World Look in Photoshop

Here are 30 Photoshop Secret Shortcuts.

“Well, what I mean by “secret” is that these shortcuts are not documented in the menus.”

h/t Adobe Photoshop Daily Tutorials