Desktop Shrapnel

iOS 4 Web App Home Screen Icon Bug →

iOS 4 has an annoying bug for web app developers. If you use the apple-mobile-web-app-capable feature to indicate that your site should launch as it’s own app rather than open in Safari, the OS creates a low-resolution version of your apple-touch-icon on the home screen:

The app on the right uses apple-mobile-web-app-capable. The app on the left doesn’t. They were both generated from the same image.

Targeting various iOS devices with media queries

Today, I came across quite the conundrum; all Apple devices running iOS 4 return the same user-agent, regardless of it being an iPhone 3G, 3GS or iPhone4.

This created a problem—last week I created an array of pixel-perfect icons for the Campaign Monitor mobile application, and instead of using a single, large image for the webclip icon that shows on the users screen, I wanted to make use of my individually tweaked icons: 57px square for the iPhone 3G and 3GS, 72px for the iPad, and 114px for the iPhone4.

After finding out that the user-agent is the same for all devices running iOS 4, I went about searching for ways to individually target the devices, without much success, until I thought back to an article I was reading yesterday on A List Apart which discussed the use of media queries to load different stylesheets for different resolutions and devices.

After a little bit of trial and error, I put together three simple lines of code which targets each individual device according to the DPI of their screens—163dpi for the iPhone 3G and 3GS, 132dpi for the iPad and a whopping 326dpi for the iPhone4.

Here is the code I used:

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 163dpi)" href="/iOS-57.png" />

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 132dpi)" href="/iOS-72.png" />

<link rel="apple-touch-icon-precomposed" media="screen 
and (resolution: 326dpi)" href="/iOS-114.png" />

Now, a little note here: I used apple-touch-icon-precomposed because I didn’t want the device in question to add the default gloss on top of my icon. For those that do want the extra effects that the OS throws on top of webclip icons, simply use “apple-touch-icon” instead.

For more info on media queries, do check out the A List Apart article, and for an excellent example of media queries in use, take a peek at Jon Hicks’ new journal for a truly superb execution of media queries. 

Der Mensch als Industriepalast [Man as Industrial Palace] (by Henning Lederer)

My Top 5 Artists (Week Ending 2010-6-20) →

1. Eels (32)
2. The Beatles (29)
3. The Cinematic Orchestra (25)
4. The Flashbulb (19)
5. Balmorhea (18)

Imported from Last.fm Tumblr by JoeLaz

0to255 — Perfect for hovers, borders, gradients, and more. →

Awesome little tool created by Shaun Chapman to find variations of colours. Simply whack in a hex code or generate a random colour to view stepped variations (lighter and darker). Perfect for hovers, borders and gradients. Winrar.

HTML5 presentation →

Great little slideshow created with HTML5/CSS/JS showcasing creative ways to use these newer technologies.

Trent Walton: Trimming the fat →

The last version of this site lasted just under a year. That may seem like a short amount of time until you consider how quickly things change on the web.

@font-face usage has been fortified by services like Typekit & Fontdeck, CSS3 & HTML5 are popping up everywhere, and with the release of the iPad, multi-touch technology is drastically changing web design.  My goal has been to cut out the extra divs, widgets and doodads so browsing is more fun for you and posting is less work for me.

Modernizr: JS library for progressive enrichment →

Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Modernizr uses feature detection to test the current browser against upcoming features like rgba(), border-radius, CSS Transitions and many more. These are currently being implemented across browsers and with Modernizr you can start using them right now, with an easy way to control the fallbacks for browsers that don’t yet support them.

View high resolution

Download Lobster font. Impallari.com

Hoefler & Frere-Jones: "The Murderer Wore Serifs" →

None of these strangenesses prepared me for learning this morning that in The Scarpetta Factor, a crime novel by Patricia Cornwell, there is a plot point that revolves around our Gotham typeface. The font first makes an appearance on page 400, when it’s name-checked by an FBI document specialist during the delivery of an expert opinion, but it returns on page 415 for a two-page discussion about the typography of a suspicious package. “Gotham is popular,” says the computer-whiz niece of our sleuth, Dr. Kay Scarpetta. “It’s supposed to suggest all the right things if you want to influence someone into taking you or your product or a political candidate or maybe some type of research seriously.” Our clients have always known as much; we can only assume that one of them is the murderer. —JH