“It’s finally here, a mobile app that texts you when you’re near a discount!”.

And now marketers can advertise straight into the most private part of your person: your pants.

Awesome. Who needs flying cars, anyways?

An incredible use of CSS3 to recreate the iPhone & iPad icons without using a single image file:

The weather icon has several rays of light shooting from behind the sun. Each one of these rays is actually a long rectangle with a gradient that fades to transparent on either end. I used -webkit-transform:rotate to rotate each rectangle to a different angle. The same effect was used for the iTunes icon.

[Obviously, not IE friendly.]

Fireworks is absolutely the best piece of software you can use to design interactive projects. Just one of the (many, many reasons which I hope to cover here eventually) is the Fireworks “Library” palette.

The Library holds an unlimited amount of frequently used design elements. (If you’ve ever worked in Flash, you’re probably all-too-familiar with the symbol library).

For example: let’s say you’re working on a new website. Regardless of the style of the website, there are common browser elements that are required for most layouts:

• buttons
• checkboxes
• radio buttons

Instead of redrawing the same element every time you need it, Fireworks has a built-in library of symbols containing default HTML elements.

Need a checkbox? Just drag it from the library into your project:

1. Open your library and find the element you need
2. Drag it from the library palette onto your art board
3. That’s it! No more redrawing, setting the correct bezel and shadows, lining the text up just right, etc.

What if you’re working on an iPhone app instead? Fireworks Libraries to the rescue!

1. Open your library and find the element you need
2. Drag it from the library palette onto your art board
3. In this case, I need to change the direction and the text. No big deal.

That’s it!

Using library items is also VERY handy for custom items that appear multiple times in a project. I keep a “site header” and a “site footer” in my library for mock-ups where I need them present, but don’t need to spend the time redrawing them.

If you’re working on a mobile app, save yourself hours of frustration and start with these mobile layout templates for iPhone, Android, HTC Touch and WebOS. Obviously, they’ll help you stay in that OS’s style and create a more polished looking app.

In my experience, they also let you figure out when certain things (that made a heck of a lot of sense in your hand-sketches) won’t work at all.

[BONUS: Here's a vector-based iPhone toolkit for Adobe Fireworks from Metaspark. It's great if you're a Fireworks junkie.]