How iPad Affects the Way we Design Websites?

Categories Web Design

The iPad has received mixed reviews. While the geeks (people like you and me) have looked at it with disdain for being “just” what we expected, the media publishing industry (read print media) has seen it as the salvation they had been waiting for. Whether the iPad is able to change the world or not, is not the issue of this article. But the fact of the matter is that it is here and sooner or later we need to learn to design the web keeping it in our minds. So what are the things we need to consider?

Fluid Width Design

The iPad has no RIGHT way of viewing websites. That means you can view it either in landscape or in the portrait mode. But for the designer that means two completely different layouts for which to design. It is for this specific reason that the iPad highlights the need for smart fluid width design. Using a smart combination of CSS and Javascript the User Experience can be made to improve drastically.


Adaptive CSS

It is time for designers to get their skills together for designing for the iPad is going to be a roller coaster. While Fluid layouts are the best bet, but there are many instances where we just cannot use them. In such cases, we need to look beyond them to the basic styling.

A prominent option would be to use multiple CSS styles for different configurations and devices. Another is going for an adaptive content that changes according to the screen resolution.


There is NO Fold: Vertical or Horizontal

The iPad establishes one thing for certain. The website need not look the same on every platform. We have gone on to include Style Sheets for iPhone to include mobile devices, now we need to include them for iPad to keep in view the No Fold Policy.

In Portrait mode a very good portion of the website can be seen at one go. At the same time in the landscape mode the touch interface makes it very natural to browse sites that display content horizontally.


Further Reading:

Links and Hover Effects

Primary method of user interaction with the iPad is and will be the fingers. The users will interact with our websites using fingers. So all those brilliant hover effects that were favorable for pointer-based devices, will be a hurdle in user experience on the iPad.

Also the links can no longer be concealed in a text and left for the user to dexterously click upon it. We might want to resize the links so that the user experience does not suffer.

Flash & HTML5

While the world has been divided over Apple’s stand on doing away with Flash, we need to understand that the step in the direction has already been taken. With Google openly adopting HTML5 for Youtube, it is only a beginning of the things to come with HTML5.

As designers we need to understand this paradigm shift and devote our efforts in not only learning about HTML5 but at the same time doing away with Flash. I understand that is a bold statement to make. But answer this:

“Would you rather have a Blue Lego?”

Further Reading:


While a lot of hidden points can be further raised 9 (Issues like typography, and webkit) I think the article serves as a good and sufficient point for the discussion to begin. I would love to hear your views on how exactly Apple’s iPad changes the way we design websites.

About Inspiring Pixel (Author’s Blog)

Inspiring Pixel is, as they like to call it, a design steroid that boosts your creativity and gives you inspiration besides removing the inhibitions and ignorance that cloud your true art. For those looking for a more traditional approach, it’s a web design and inspiration blog that aims to give your daily needed dose of creativity. IP aims to be a leading pioneer of web and graphic design in times to come, but more than anything they wish to make it matter while they’re out there. So follow Inspiring Pixel on Twitter and subscribe to the RSS feed

Tuhin is a young designer from India who is also the founder of Inspiring Pixel. He is a lover of beauty be it in art, web or his beloved cuppa of coffee. He enjoys watching ManUtd play and worships Led Zeppelin. Catch his nonsense whimsical ideologies @tuhinkumar.