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.