I've done a few iPhone apps at work, and I've always resorted to using some bitmap version of an inaccurate iPhone 4 display. A lot of them have notches out of place, their border radiuses are off, or they don't have the right sensor for revised white model. There's lots of Photoshop versions out there yet none for Fireworks, so I spent some time last night working up templates:

It's entirely vector based, and inside are two pages - for both Retina and Normal. I'll probably redo them again when the iPhone 5 gets announced in a couple of months.

→ Download the Fireworks .png

The fine folks at Dribbble liked my Growl concept, so I went ahead and made one.

Some design notes:

The alert size is fixed since I'm using a background image. I tried to make it with CSS3 but getting the gradient to blend with the 1px inset border, and getting the triangle to work with the shadow proved extremely difficult and the result didn't look as nice as the concept.

I've also made them a tad more opaque, improving readability on various backgrounds. You can adjust transparency in Growl anyway.

One modification I'd like to make is the use of text-overflow: ellipsis-lastline; however that value isn't in webkit yet. It'd be a nice solution to cutting off the text in mid sentence.

→ Download Morning & Evening.zip

Franklin Gothic looks great

I love some of the sans-serif typefaces on offer through Typekit, such as Dagny, Proxima Nova, Meta, Ratio and Enzo. I've found that Typekit doesn't offer that many realist typefaces, so I looked around for alternative services like Webtype and Fontspring. To much surprise Fontspring were offering Franklin Gothic FS for $22, with web fonts included. I implemented them on a punt, and I think it makes copy look brilliant. 

Firefox 4 doesn't like cross-site web font embedding

When you embed fonts in CSS, Firefox 4 will try and retrieve the .woff version. However, if they aren't loading from the same domain it will refuse to use them, unless you tinker with your site headers. Dave has some solutions here. I found success through including the following in my .htaccess file:

1. <FilesMatch "\.(ttf|otf|eot|woff)$">

2. <IfModule mod_headers.c>    

3.     Header set Access-Control-Allow-Origin "http://yourdomain.com"

4. </IfModule>

5. </FilesMatch>

CSS3 background stretching is slow

Getting the background image to fill the browser window is a trivial task in CSS3, achieved by using the background-size: cover; property. Unfortunately it made scrolling quite slow, at least in Chrome and Safari on OSX. The fastest solution I've found is to use a jQuery equivalent, backstretch.js by Scott Robbin.

People are friendly

I've received a number of emails and tweets while building my mini-profile and blog, many of them offering fantastic feedback and kind words. Thanks guys!

You can make your UI elements look more interesting by imitating real-life buttons and switches. I've played with this concept, creating a layered .png in Fireworks made entirely from vectors.

I've mainly used three circles to achieve this look, which are listed from bottom to top:

1. Background: This is your base circle, and you should apply a Cone Gradient to obtain the different shades of silver. If you're coming from Photoshop, the Cone Gradient isn't exactly the same as Angle Gradient - it only covers half the circle and then repeats itself.
2. Lighting: This circle makes the center of the button seem darkest. This uses a Contour Gradient, all set to white, but becomes semi-transparent in the center. This is set to Overlay to blend with the background.
3. Brushed Metal: To nail the manufactured look, fill this circle with >200 Noise, and then apply maximum Radial Blur to it. You'll notice you've got pretty good spirals now. Set this to Overlay too, and adjust the transparency as you see fit.

The great thing about this technique is it scales perfectly - you're not using patterns so you won't see any pixelisation or poor resampling. Load it up in Fireworks to see for yourself!

→ Download the Fireworks .png