When Steve Jobs went on stage in January to present the iPad, I remember commenting on it in the forums and thinking the same thing as almost everyone in the industry: "This is nothing more than a giant iPod Touch." It seemed like an expensive whim with no real utility for a technical person. However, a friend traveling to New York brought me one of the first Wi-Fi models in early May, getting ahead of the official launch in Spain, and I've been tinkering with it daily for a month.

I have to admit I've had to eat my words, albeit with some nuance.

The Weight of the Device and the End of Flash

Physically, it's a solid block of aluminum and glass. It weighs much more than it looks (almost 700 grams), which makes reading in bed while holding it with one hand a surefire recipe for dropping it on your face and breaking your nose. But the 9.7-inch IPS screen is spectacular.

However, the first thing you do as a web developer isn't playing games; it's opening Safari and loading your own pages. And this is where the technical controversy of the year begins: the total absence of support for Adobe Flash.

The community is divided. On one hand, Apple published that famous "Thoughts on Flash" manifesto, declaring it dead. On the other, clients keep asking for animated banners, video players, and Flash menus. Browsing the net with the iPad, you find gray holes with a broken Lego icon everywhere. Entire sites are unnavigable. And my opinion is clear: DEATH TO FLASH.

But this is forcing a massive change. YouTube is already serving H.264 video directly to the browser if it detects an iOS device, and suddenly, we're all looking at the new HTML5 tags (<video>, <canvas>).

Adapting Our Websites: CSS3 Media Queries

Another thing is that Safari on the iPad loads desktop websites and scales them down to fit the screen. It works well, but if you want to provide a native experience where buttons are large enough for fingers, you have to adapt your design.

It makes no sense to build a parallel site (the typical m.yoursite.com); the future lies in adapting the same page. This is where CSS3 Media Queries come in, and although they are still a bit raw in some browsers, they work wonderfully in WebKit.

I've been tweaking my blog's stylesheet so that, if it detects the iPad's vertical resolution, it reorganizes the menu. The code is as simple as this:

/* Estilos por defecto para monitores grandes */
#sidebar {
    float: left;
    width: 250px;
}
#contenido {
    margin-left: 270px;
}

/* Regla mágica para el iPad en modo retrato */
@media only screen and (max-device-width: 1024px) and (orientation: portrait) {
    #sidebar {
        float: none;
        width: 100%;
        display: block;
        margin-bottom: 20px;
    }
    #contenido {
        margin-left: 0;
    }

    /* Agrandamos enlaces para que no haya 'dedazos' */
    a.boton {
        padding: 15px 20px;
        font-size: 110%;
    }
}

It's fascinating. With four lines of CSS, you completely change the DOM's visual structure without touching a single line of PHP.

Will it Replace Laptops?

I'd say no. The operating system (iPhone OS 3.2) doesn't have real multitasking. If I'm writing an email, I can't put it in the background to look up a fact in the browser without the app freezing. Besides, typing on a glass screen lacks the tactile feedback necessary for writing code, no matter how much they try to sell us Bluetooth keyboards.

The iPad is, as of today, the ultimate device for consuming information: reading documents or websites while sitting on the couch (it's amazing for this!), checking RSS feeds, or watching videos. But to create content or program, I still need my heavy laptop. Even so, I think this touch interface is going to force us to rethink how we design web interfaces from now on. The mouse is no longer the sole king.