WaltPad

Announcement

Baby. Having. We. Are.

More on this as it develops. :)

(We’re very excited.)

The Spot

Gruber:

I’ve been working here at TechCrunch’s SOMA office all afternoon and evening, and I must say, they truly get the shittiest AT&T reception I’ve ever seen, even by San Francisco standards. Place is like a Faraday cage.

TechCrunch is at 410 Townsend which is right next to the spot at the San Francisco Caltrain station where all of the tracks merge. Any iPhone user who rides the train on a regular basis can attest to the fact that that exact location seems to be a huge AT&T dead zone.

I’ve only used AT&T’s “Mark the Spot” app to mark one spot.

Epic 4th Street Water Main Fail

4th and Bryant, 5 minutes ago:

Someone nicked the wrong pipe.

More from...

• Sippey
• Mie

Springfield Punx

Springfield Punx:

A great collection of characters all Simpson-ized. :)

I Am The Internet

Stephen Collins:

Click it. :)

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 the iPhone 4 Retina Display with CSS3 Media Queries

Four years ago, (eight months before the original iPhone was announced) Dave Hyatt wrote about high DPI web sites on the Surfin’ Safari blog:

One area of Web design that is going to become more important in the coming years is high DPI. For those of us working on WebKit, this will also become an issue for WebKit applications and for Dashboard widgets.

The future is now.

The “Retina Display” of the iPhone 4 doubles the pixel density we’re used to seeing on handheld devices and thus drastically improves the sharpness of text on the web. But what about images? In order to preserve the design of existing websites, images are automatically pixel-doubled. And this creates a schism between “device pixels” and “CSS pixels”.

John Gruber’s “Why 960 × 640”:

I don’t think that MobileSafari will be able to continue mapping the “px” unit to physical display pixels, because the disparity between the physical pixel size of old and new iPhones is going to be enormous.

Dave Hyatt again:

Most Web site authors have traditionally thought of a CSS pixel as a device pixel. However as we enter this new high DPI world where the entire UI may be magnified, a CSS pixel can end up being multiple pixels on screen.

For example if I set a zoom magnifcation of 2x, then 1 CSS pixel would actually be represented by a 2×2 square of device pixels.

This is exactly what’s happening on the iPhone 4.

So the question for web developers becomes, how do I update my website’s images with higher resolution versions for high DPI devices? Or better yet, how do I do all that in a way that degrades gracefully?

Apple’s Safari Web Content Guide has long recommended using CSS3 media queries to conditionally include stylesheets for specific device widths. But Hyatt’s post mentions a new feature, device-pixel-ratio, for targeting specific pixel densities.

I tried that new feature out by adding this line to my little mobile website:

<link
    rel="stylesheet"
    type="text/css"
    href="/css/retina.css"
    media="only screen and (-webkit-min-device-pixel-ratio: 2)"
/>

This tells browsers to include “retina.css” only if the device pixel ratio is 2 or higher. (The feature seems to only be available via the -webkit extension for now.)

The “retina.css” file overrides the background images of some of my site’s graphics with higher resolution versions and uses the background-size property to set the correct CSS pixel dimensions. (I use Komodo Media’s Social Network Icon Pack and Mark James’ Silk icons for many of the graphics.)

High DPI devices represent an exciting opportunity for web developers to do some amazing things and this example only barely scratches the surface.

Update: I've updated my app to include the media query CSS inline in the main stylesheet.

iPhone 4 Review

My new iPhone arrived a couple days early. It’s very thin. It’s very fast. And the screen is absolutely incredible. :)

• The back feels like glass. (Which it is.) It’s smoother. Feels more like the original iPhone than the 3G and 3GS.

• The whole thing feels warmer. (Because it’s thinner?)

• The pixels on the display I use at work look comically large now.

• The Camera app can take photos and shoot video using the front-facing camera. (Which now seems obvious.)

• Activation was a breeze.

• I wonder if it’s possible to write an app that could take pictures or shoot video in both directions at the same time. That would be interesting.

• I’m writing this bullet in the TypePad mobile web app. Stuff like the text, CSS gradients, and rounded corners all scale beautifully. The images need to be remastered obviously so I’ll look into that. It’s also interesting that the Canvas-generated graph didn’t scale but it must have specific dimensions which are being resized, like a graphic.

• Safari seems to do a better job of keeping pages in memory. Hooray for more RAM!

• A couple of people have said it feels heavier but it seems the same to me.

• The “Retina Display” is going to be fantastic when it inevitably comes to the iPad. :)

• The app store really needs a “Retina”-ready page for listing HD apps.

• It definitely runs warmer than previous iPhones. Not uncomfortable, but noticeable.

Maddow for Real President

If only...

iPhone 4

It wasn’t easy, but I pre-ordered a new phone yesterday. Unlike last time, this wasn't a difficult decision. Don’t judge me! :)