Writing

The iPhone and Web Design

When Steve Jobs introduced the iPhone, he presented it as three revolutionary products. The crowd goes wild as he says the first was a “Widescreen iPod with Touch Controls”, then the insane cheers come as he says the next is a “Revolutionary Mobile Phone”. But, when Steve states with the same enthusiasm as the previous two that the third product is a “Breakthrough Internet communications device”, there are a few obligatory hoots and hollers. It’s amusing that this third feature that seemed so quickly disregarded is what led to Apple’s success and transformed industries.

Now that it has been five years since the iPhone first sold, there are many looking back at how the device disrupted the phone industry. Earlier I linked to Jack Kirk’s evaluation of RIM over the years since the iPhone debuted. I think John Gruber said it best in his article “The iPhone and Disruption: Five Years In”:

The iPhone is not and never was a phone. It is a pocket-sized computer that obviates the phone. The iPhone is to cell phones what the Mac was to typewriters.

To paraphrase: The iPhone isn’t a phone. The iPhone is a computer in your pocket with always-on Internet access. This device has changed, significantly, the Web industry.

Safari

During Steve’s demo of the iPhone in 2007 he launched Safari1 and what loaded was a full website, not some cheap, slimmed-down version of the site with after-thought written all over the design. No, in this demo the iPhone loaded in real-time and displayed the full New York Times homepage. Apple built in great features to navigate around a webpage’s content including a double-tap zoom which detected html containers and zoomed to fit the content.

When June hit and the iPhone’s sale date was just weeks out, Apple launched a new design of their website. I quickly noticed the size of the navigation items in the header. These were much larger. When I had the opportunity to try out an iPhone sometime later, I understood. Apple had created a larger target area for fingers to hit. In fact this navigation was fairly useable without zooming in. It seemed to me that even then Apple knew websites would have to be optimized for a good iPhone web experience.

Mobile Website Version

As the iPhone’s popularity grew, especially following the release of the iPhone 3G, it was very obvious that mobile was a selling point for design shops. In part, mobile was a new buzz word that marketers could use to up sell their services, but it was also a very important and practical feature to consider. However, the approaches taken to deliver a “mobile-friendly” site often sacrificed content and usability.

When Apple introduced the iPhone, they supplied it with a browser fully capable of delivering websites as-is. Instead the approach of web shops was to create a mobile-catered experience, a belief that still has a foothold in the industry today. This method only served content that the author thought the audience would need while on a mobile phone. Often a subdomain redirect was implemented and so the mobile version was a separate site with its own stylesheets and markup.

As I had seen happen often, these mobile versions were also highly inspired by what Apple was designing. Many of these mobile versions implemented the same drill-down experienced in Apple’s Settings and Music apps found on the iPhone. The method made sense and Apple encouraged it. In fact, Apple’s original answer to developing for the iPhone was what they called Web Clips2. Essentially Web Clips allowed iPhone users to save websites to their home screen. Apple had a gallery of Web Clip apps as well as a developer library to help create a native app-like experience.

Flash

The iPhone predates what we know as HTML5 and CSS3. When the iPhone debuted, most of the specs of the modern web standards were still drafts and dreams. To build a multimedia rich website at the time, there was truly only one solution, Adobe Flash. With Flash we had our videos playing around the world on YouTube and our underground indie music blaring on MySpace. Flash, it was believed, was essential to creating a rich web experience at the time. As a web designer, Flash was used to have custom fonts display on a site3 or to give a bit of subtle animation to certain elements of the site. At that time, I had seen Flash for many years as the future of the web4.

Apple’s decision to exclude Flash from the iPhone was initially taken as foolishness, but as time went on arrogance. Adobe took this exclusion personally and it led to a bitter battle of words. Apple’s continued stance that Flash performance on mobile phones was unsatisfactory, culminated in Steve Jobs writing “Thoughts on Flash”. As time went on the battle waned and now Adobe is discontinuing development of the Flash Player for mobiles.

Flash was a solution to a problem the standards-based web couldn’t offer. Animation, interactivity, rich multimedia from within a browser. For many years Flash gave designers and developers an additional level of interactivity. In the end though, the iPhone didn’t kill or cripple Flash, HTML5 and CSS3 did. The iPhone just helped strengthen HTML5 and CSS3.

Responsive Web Design

We are now in the midst of the next wave of change in the web industry. The mobile web approached has matured into Responsive Web Design (RWD). RWD the use of fluid grids and CSS media queries to tailor a design to a screen width. Web design has come to this point only because of the change caused by Apple’s iOS devices. Without the iPhone, Android wouldn’t be where it is currently in the marketplace. In the last five years so many varying screen sizes have come into existence in large part due to Apple’s competitors.

RWD may very well be the web industry’s iPhone. The new thing that disrupts how we do our work.

  1. Simply labeled “Web”.

  2. Of course when native app development for the iPhone became a reality, every one complained that it was a closed system.

  3. @font-face didn’t exist yet.

  4. Arrogant fool.