The iPad is, in many ways, a web developer’s dream. 

You are designing for one screen resolution (a relatively high 1024x768) and browser in mind, compared to the countless combinations possible in traditional Web design.

The iPad’s Safari browser is standards compliant with support for most of the latest web technologies including HTML5 and CSS3. The much documented lack of support for Flash frees you from this platform and encourages the creation of innovative alternatives.    

As great as all of this sounds, we have come across some obstacles with the device during the project.

Fingers lack the precision of a mouse cursor, so buttons must be increased in size and it’s best to avoid text links. In addition, mouse driven events are not possible, meaning no tooltips and hover effects.

As the iPad is a portable device and users are free to rotate it, you need to design for both landscape and portrait views. This is an interesting challenge, do you design a layout that will adapt to either viewport or provide an alternative layout for each? 

The pixel density of an iPad is greater than your monitor as all those pixels are packed into a 9.7” screen. All visuals and fonts will appear smaller on the iPad than they do in your design and wireframing software.

In traditional web design, scrolling (to an extent) is not an issue and you are free to let content flow past the fold. To maintain an App-like feel, we are containing our content within a single screen. In order to achieve this innovative design choices have to be made. 

Overall, we’ve enjoyed designing for the iPad and are really pleased with the wireframes and designs we’ve developed so far.