Preparing for Web Design on the Apple iPad
It has been a few weeks since Apple announced the iPad on January 27th. And whether you are excited or disappointed by the device, we need to be aware of the implications the device will have on Web design.
According to the official specifications from Apple, the iPad tablet will have a screen resolution of 1024 x 768 pixels. For years Web designers have monitored consumers migrating from smaller to larger displays. Now, the immediate reaction is that we need to once again design for a smaller screen.
There are three main points I’d like to make when considering how consumers may consume Web content while using the device:
- While in landscape mode the device will indeed have a traditional 1024 x 768 screen resolution, and by traditional I mean a resolution that Web designers are, and should be, very familiar with.
- In portrait mode the device will have a screen resolution of 768 x 1024. I anticipate this may be the most popular orientation while using the iPad because of how closely it resembles periodicals and books.
- Much like the iPhone, the iPad could be resolution independent because mobile Safari will auto-zoom in and out on Web pages. Essentially, the technology will adapt to the content and layout.
The usage of landscape vs. portrait mode will not be known for some months. If you intend to develop an iPad specific Web site I would recommend designing with a maximum width of 770 pixels. It will be familiar for designers because it is much like designing for 800 x 600 screen resolutions. Browser chrome may actually require a size smaller than 770 pixels, however the auto-zoom feature of mobile Safari should make-up the difference.
For Web designers and developers looking to take advantage of some HTML5 tags, the iPad could be a great device to begin testing with. Being a closed system you should be able to develop a wonderfully advanced site.
And if you follow the basic principles of Web design, understanding columns, elasticity and your content then you should be able to leverage your existing Web site’s resolution and prepare for the next generation of Web browsers and enhancements.
In my perfect world I would design a site optimized for 768 x 1024 and the Web site design would more closely mimic the layout seen in magazines combined with the interactive features of the Web.
If you haven’t seen the Sports Illustrated tablet demo by The Wonder Factory, then take a peek below. This is the future of the mobile Web on an iPad or other tablet device. In the short-term this may be accomplished with a custom application on the iPad platform, but in a few years it should (I hope) be the standard Web experience.
10 Comments
Mike
February 10, 2010I hope it doesn’t make too much of a difference when you are viewing websites on the iPad since it is going to be a pain in the ass since some sites already have their own configuration for IE6/IE7 and now are going to need one for the iPad.
Dennis Jenders
February 10, 2010I really don’t think it will be that big of a deal. Even if you don’t design around the device you know the auto-zoom will work nicely just like it does on the iPhone.
However, if you want to design FOR the iPad. Well, then I think it’s a pretty nice little platform to do so.
Thanks for reading and the reply!
Craig Kroeger
February 10, 2010One thing to consider is designing websites without roll-overs. But that’s really more about designing websites that work with iPhones and all the Android phones. I can’t see the iPad as more of a niche product so I wouldn’t spend too much time developing specific websites for it. Hell, if you’re going to do that, you might as well make an iPad app and get some cash out of the deal.
Looking at the Sports Illustrated tablet demo, all I have to say is TAKE KURT WARNER OUT OF YOUR FANTASY LINEUP! HE RETIRED!
Dennis Jenders
February 10, 2010Craig -
I love the comment about Kurt Warner more than anything. HA! He really shouldn’t be in anyone’s lineup…ever…ok, well maybe last year.
I agree that we’ll really need to think about roll-overs and hyperlinks. The whole addition of touch to our computing platforms really changes the way you interact with content, especially on the Web. Gone are the days of small 10×10 pixel icons for links, etc.
I’d agree, at the start you probably do not have a need to design for the device. However for those looking to take online news or magazines to the next level, I think you could do something amazing without an app. But you make a great point in saying that you may as well make a buck off it as well. Assuming of course that you have the content people would pay for. Which has been a barrier for most online news sources for years…although I am curious to see how the NY Times makes a go of it in the future.
Brian Doherty
February 10, 2010I am most excited about the continual rethinking of how we interact with data – mouse to tablet to touch to gesture and mashing up all of the above as well as the yet to be tried. We still cling to our old and familiar methods and metaphors – it’s human nature – when using new technologies. We can’t embrace the new without something familiar or known to ground everything.
I am excited for the day when tactile feedback enters the scene – when the touch screen touches back in a sense (the new – when a screen can be comprised of pixels that can elevate off of the surface – not the 2d pixel we know and love that merely emits color) where the ‘keyboard surface’ is able to morph into any control surface (a familiar, known thing) to do work (think mixer boards, rotary scrub wheels, virtual keyboards or self made controls).
Bring it on – portrait, landscape or z-scape.
Dennis Jenders
February 10, 2010Brian -
Great points. I think that is why Steve Jobs made it a point to call out the install base of 75 million units of Apple touch products (iPod and iPhone). It’s about getting the average consumer much more familiar with the new way of interacting with a computer. The iPhone has made such a difference in the cell phone market in less than three years, imagine what the iPad could do.
I think tactile feedback is closer than we think. Whether it’s pulses or a raised surface, we will see it in a few years. Similar touch devices already have this (thinking touch screen DVD units for cars). Once we have the ability to have a z-index, no matter how shallow, things will be really different. Then with glass surfaces and 3D interactions that create a z-index (think Minority Report) we will really be in a whole new world!
Can’t wait!
Codesquid
February 11, 2010Thanks for your comments on my article over at codesquid, Dennis! This is a good article, it’s good to see that there are other people thinking about these issues!
Dennis Jenders
February 11, 2010You are welcome. I really look forward to seeing how the consumer decides to use the device. Will it be portrait vs. landscape? Will the designer add the iPad to an already long list of specific layouts for browsers and devices? Will we see more applications than Web sites designed for the device.
Time will tell. Thanks for the comment back!
Sean
February 11, 2010Interesting point about the hover, we (Jim and I) have dealt with that in the past on a touch screen app. Really all you would need to do is switch your Hover states to OnMouseDown/OnMouseUp with JQuery when you detect an iPad. Even though it will be quick, it’s great to show an indication that you pressed that link/area.
Should have Mike work on that and put out a plug-in
Dennis Jenders
February 12, 2010Sean -
That is a really nice solution. Seems like it would be a pretty elegant implementation as well if written smartly. We should get Mike on that immediately!
D.