How iPad Affects the Way we Design Websites?

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.

Resources:

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.

Resources:

A List Apart talks of Progressive Enhancement with CSS

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:

Conclusion

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

photos credited by Prakash Muniandy & sunuq

Tuhin

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. Tuhin has 1 posts at Inspired Mag & counting!

Comments

Preston February 9th

This is a great article. I would like to add my two cents as well by providing a link to this great discussion:

“Will the iPad change the way you design?”

http://graphicdesignblender.com/will-the-apple-ipad-change-how-you-design
Auré February 9th

Interesting article !
Codesquid February 9th

I wrote a very similar post on my blog recently! It’s good to see other people thinking about these issues too! You can check it out below!

Usable and Accessible web design for the iPad
Lush February 9th

Apple killed Flash!
C February 9th

I am sorry to rain on the parade, but why is this article relevant?

My question is why would we – as designers – change the way we design web sites for one particular computer? Perhaps Apple should consider how the iPad will render current web pages, rather than us making it better for its users (which will make up the smallest fraction of one percentile).
Jeff Foster February 10th

Good article, lame product. Oversize iPod touch!
Probly February 10th

iPad sucks, it doesn’t even have multitasking, why You should care to develop for such a platform?
Kuswanto February 10th

Lets start using Pushed state for all of the links and buttons
Googy February 10th

I just think its gonna be a huge waste of time designing for iPad.
ifudge February 10th

kekek lololol
no wai !
yes wai.
Sayrus February 10th

+1 with C !
Nut February 10th

“..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?”

WTF?
Alice February 10th

“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 don’t agree. Why does it always have to be black or white? It’s all about alternatives. HTML5 will never replace Flash.
Ross Hall February 10th

Whether you like the iPad or not is a bit irrelevant in this. If consumers latch onto it and start using it they will expect their favourite sites to keep up.

Better to think about it now than get caught out later.
fifi February 10th

Dont care about Ipad,if you dont have support for flash it is your problem not mine:))
BC February 10th

It’s simple enough to do a check on a browser to see if that user runs flash, if not then you can show a picture as an alternative. If you have some sort of important information or navigation in a flash movie then you are already way behind.

As for designing specifically for an iPad. I don’t see it happening anytime very soon, maybe in a half a year or so when they start to make it’s way into the market more. We as developers already have to check multiple browsers to make sure that they work properly, and I would have no problem making an iPad specific design if a client requests it, and pays for it.
Brendan February 10th

@Nut

Blue Lego = what shows when someone tries to view Flash on an iPad.
Jason Holland Design February 10th

I think I would wait to see if iPad gains enough traction before I start changing the way I design sites.
Web Design Maidstone February 10th

I’m going out on a limb here and am quite looking forward to the iPad, things change all the time… hopefully it will act as another nail in IE6… please, please let it be!
Jeeves February 11th

If an overpriced digital photo frame changes how you write for the web, it means you were doing it wrong, and still are.
Its Webkit. Thats all you need to know. Its not like you have to rewrite to cater for IE5.5 or anything, its nearly as standard-complient as they come, with two years backs standard resultion.
I’m just hoping its not going to spawn a ton of browser-sniffing and iPad-specific sites like the iPhail did.
If it looks good and works, let it look good and work. Don’t make it only look good and work IF a specific device is used.
Trent Walton February 11th

I don’t think this is an immediate shift / change. I think multitouch technology in general will gradually (buy maybe sooner than we thing) change the way we design web.
Trent Walton February 11th

*sorry – sooner than we THINK.
Gil February 11th

Some short sited designers here. If you’re a flash dev and don’t see the writing on the wall it’s your own fault. For the iPad haters, do you think this will be the only device of it’s type? Geesh, the desktop/laptop as primary browsing device will be the minority. The sooner fluid design, or more adaptable css are adopted the better off you will be.

Futureproof yourself.
Ryan Bollenbach February 11th

Great read… initially I was an iPad hater but I’m warming up to the idea, I think it’ll be a fun tool.
Joshua Hill February 11th

Always glad to see Microsoft take another hit where it hurts, but I’m inclined to agree with C above. I don’t anticipate bending design to fit iPad’s perspective–rather, it’s up to iPad to display good design cleanly.
Rod Sutherland February 11th

The iPad is awesome! Particularly because it annoys certain geeks so much too: the ones who have no concept of good design and always think that more functionality is better. It will also make no difference to the way web pages are currently being designed as the browser now controls resizing issues with increasing effectiveness.
RC February 11th

As much I hate the idea of having to learn to develop to cater to this device (or the iphone) the fact remains: if your client wants to be able to view their website on this thing then we’re going to have to play this game if you want to get paid for your work.

I thought it was a pain in the arse to consider having to code and style web pages for the iphone a couple of years ago but now it pays the bills.
Johan Möller February 11th

Woudnt say the ipad will change anything but maybe the ipad together with a bunch of other tablets. I’m one of thoose who thinks the Ipad is a retarded device and i see no place for it on the market. But I bet all you Apple fanatics will make room.
Bogdan Pop February 11th

You should totally check out this article on hover events on mobile devices http://www.webia.info/articles/usability/the-change-is-here-hover-events-come-to-mobile-devices/

Yes, we don’t have hover events yet for mobile devices, but we will have them soon. And there’s going to be multi-hover not just one pointer.
Nick Robinson February 11th

There is no need to design specific pages for the iPad, it will show a fully rendered page view of any webpage, just as the iPhone does already
ben February 11th

Typical dribbling mac fanboy attitude that suggests this oversized iphone will have impact enough to change web design standards, and that this should be a given, and we should all fall into a line and design specially for this useless device.

Not going to happen. Get over Apple, there really not the saviours you all seem to think they are, they just cash in on you all liking what they tell you too like.

“Would you rather have a Blue Lego?”

Apple wont support flash because there scared people wont buy things from there stores, nothing more. So in answer to the blue lego question then yes, I would, as for most people it will still work fine. It amazes me that you honestly think one device not supporting flash is enough to kill it. Wake up, even if tablet browsing does take of, and other hardware emerges, any windows based versions will support flash, meaning it still has its place in web design.
Anthony Chaffey February 11th

I’m with most people here.

1. The iPad is using Webkit, as is the iPhone. I’ve never had to design a site specifically for the iPhone, if you’ve designed it properly it should work fine in the first place.
2. There are already a huge number of devices that make fluid widths tricky (mobile devices vs. widescreen TV’s). The iPad won’t make any difference here.
3. I always avoid using adaptive CSS techniques where possible, except for where IE6 isn’t playing ball.
4. Considering hover effects and making sure links are noticable without hovering over them is good design practice anyway.
5. 99% of internet users have Flash installed. Is anyone really going to drop Flash for the minute number of iPad users?

Rant over.
Long Nguyen February 11th

I’m with C. Besides, the iPad, just like the iPhone, scales the width of every website to fit the screen. Whether I decide that a website has a width of 500px, 960px, 1280px or fluid, it’s all the same for these devices.
xxdesmus February 11th

Designing for the iPad is the equivalent of designing for IE6 at this point.

It’s a (poorly designed) minuscule amount of market share. Wait 2 years to watch the iPad go the way of the Apple TV — if it doesn’t then you can consider designing sites specifically for it.
dan February 11th

Personally I think you’ll see more ipad branded web portals/sites built as native apps than web sites. GQ mag could of been a website, totally, why did they make an iphone version of it? Built in rev model, enhanced capability? A million other websites will follow suit. Dev for the browser experience is fine and all but more often than not you’re gonna see the rise of the website-gone-full-on-app. Everyone is gonna want their placement in the app store, its like the new browser.
Joomla Design Brisbane February 11th

Interesting stuff. Would you not have the site detect the browser and change the width to suit. Similar to iPhone? Good article!
Sean February 11th

Mobile traffic accounts for less than 1% of the traffic to the sites I am responsible for. This is not because we don’t design for mobile browsers, but because the audiences for these sites don’t use mobile browsers, at least not for our websites.

As such, you should only be devoting resources to designing for these types of platforms if that is how your audience is visiting your site. If not, tuck this article away in case things change in the future, and keep doing what you have always done.
Inspiring Pixel February 11th

Hello readers,
The response has been exactly what I expected.
Some short sighted comments, some great ones. Some rants and then some praise.
Will not add anything to the fire.
By the way the multi hover and push notification ideas are very interesting.
Chris Gibbins February 11th

Great article. It’s interesting how many (based on the comments so far) share the view that we shouldn’t design for just one device like the iPad. However, I think the important point to remember is that there will probably be many more touch-screen devices coming onto the market in the next couple of years and this is the reason why it’s so important to design sites for this (newish) family of devices. I wrote a similar article recently called Designed to be touched, on our RedEye blog.
andee February 11th

i don’t understand why designers should adapt to the Ipad.

i mean the website can have as many pixels as the original layout size is. it doesn’t even matter, we have zoom in/out options.

so Ipad should improve its usability for us. there’s no need for desiners to adapt to the Ipad
Jordan Walker February 11th

Not sure how this new product is going to play out.
Ben G February 11th

Nice article, whenever the iPad has a significant percentage of web browsers, then we will definitely need to be cognizant of designing specifically for it (like we did with the iPhone). But heck, who knows… maybe the iPad will end up being obsolete *GASP*

I don’t think it will, I’m just sayin…

Really enjoyed the article, thanks for sharing!
Jared White February 11th

The future of computing is mostly likely a combination of multi-touch and in-air gesture input, and as such the Web will be radically transformed. The iPad is simply a gateway to future UI concepts both from a hardware point-of-view as well as software. As a Web designer, I need, nay, must keep abreast of new UI developments because if I think I can just keep doing what I’m doing now, I’ll end up on the losing side.
James Drummond February 11th

The web is *entirely* designed to be interacted with using a keyboard and mouse (ok and smartphones) which haven’t really changed since 1984.

The iPad is the next step toward *much* greater interaction which I explore (ahem!) in my article The ipad is genius
Arli February 12th

how can it change ??

http://www.oarlus.eu

designed on july 09
published on 04 oct 09
still work in progress
Bobby Jack February 12th

Designing for the (increasing) percentage of people who cannot – or choose not to – access flash IS NOT THE SAME as dropping flash altogether.
ivan February 16th

just what the world needed – another useless blog for Apple fanboys to spread their stupid beliefs
Austin Clements February 16th

That is actually pretty hilarious, the idea that ‘Apple Fanboys’ are the ones making this blog.

The fact of the matter is Apple may or may not change the way millions of people view websites.

Any designer that ignores the possibility that they may be designing to accommodate a whole lot of iPads would be like a record label brushing off the iPod in 2001. Ignore it if you want to, but its always better to be prepared.

Great article.
Scott Thomas February 18th

While many web designers have already began to consider designing specifically for the iPad, it’s still common for many high street banks (and Sky TV in the UK) to completely ignore the Mac platform altogether.

I find it bizarre that Mac users (which account for 8-10% of all web visitors in the US) are still encountering websites that haven’t been designed to work on a Mac.

Nevermind the iPad, let’s consider designing for the Apple Mac first.
Sven February 19th

I already use the iPad Pro for a while now. Really nice to read the newspaper in the park, while walking the dog: http://www.page71.nl/blog/ipad_pro/
krdr March 15th

I’m owner of Nokia n96, which consumes all websites as-is, with flash and all other stuff. It have same browsing capabilities as n95, sold in more than 7 million units. Did ANYONE adapt their websites for n95?

Let’s see if iPad get traction, then we will speak
Jportfolio April 7th

As technology continues to grow in mainstream use, I become more and more concerned and passionate about visual creativity. Why as designers do we have to bend to technology. Artists have lead the way in directing the viewer on how to view their artwork, design for print or web is still art. Designers need to take a stand and dictate how the web will be viewed. I see this as options for how my viewer sees my site, landscape or portrait. Too many variables and functionality are killing creativity, and increasing ADD and people’s attention span. Does anybody sit still and admire they way something looks visually with out having to click anymore?
Nicole Foster April 7th

I’m personally not going to design differently for the iPad. It’s rendering capabilities are good enough to view sites as they are (besides flash ones, which I say thank god, I hate flash).

I actually wrote a small opinion piece on my blog/tumblr about not bothering with designing for the iPad. In short, I believe since the normal resolution for the iPad is 1024×768, just design for that (as you should already) and it should render properly.
Gonzo the Great April 7th

the iPad is only for consuming content, not creating it ..! How can you, no camera, no USB, no flash …?

It’s a no-brainer to design things for such a gadget, an exploded iPhone ..?

Don’t misunderstand me, I love the concept and design of the iPad, but I’m NOT going to change the way I design … as we know gagdet are for now, not for the future!

Cheers & Ciao …
Ben Gross April 9th

Thanks Tuhin, this was useful, I put it in the references for my article “Preparing Your Site for the iPad” .http://www.messagingnews.com/onmessage/ben-gross/preparing-your-site-ipad
Danny April 21st

I don’t think it’s my choice to like or dislike the iPad. It really depends on what the consumer is using. If the majority of my readers start using iPads, then I will need to support them or risk losing readers.
McNeil Johnston May 13th

There’s another important dimension here: If you’re a WORKING web designer, it’s all well and good to take a moral stance on whether or not you think it’s valid to design for the iPad, but when your CLIENT orders you to do it or they’ll hire someone who will, your moral imperatives tend to evaporate rather quickly, don’t they?
obsidiantears83 May 19th

Thanks for a great discussion. I am designing a webpage off the back end of our current website, and need to tweak it for the iPad. We are creating an app for the iPad and they need to be able to access the FAQ’s from our website. Turns out our website is a few pixels too wide so when it is resized on the iPad, the text is too small. Now I get to go off and fiddle with some css. Thanks for mentioning these issues

I do think the iPad is quite gimicky, I doubt I would buy one myself beause I couldnt see myself writing docs in Notes, or using it for photos etc, and it isnt really suitable to the serious reader. But I do love gagdets so I still got a buzz playing with them. Some people have disparaged this article, but the thing to think of is not will the iPad take over the world, but how will it influence the way future computers/phones/devices are designed. I personally will continue to use my Omnia to access websites when I am not using my desktop.
Garmahis June 1st

This post is featured on 40 iPad tools, tips for designer
vivid1 June 17th

If Adobe was smart, then they would simply add the ability to export to HTML5 right out of flash. Problem solved.
Brent July 9th

Hey Inspiredm.com,

Great article! Would welcome you guys to join our iPad Facebook group (Channel iPad) and post links to any articles you write related to the iPad.

http://www.facebook.com/channelipad#!/group.php?gid=305845618071&v=wall

Channel iPad is a Facebook community for designers, developers and companies creating content, sites or applications for the Apple iPad.

Hope to see some posts in our group to your content!

>> b
Pritam Pebam August 26th

I think the problem is not with ‘loving’ ipad or ‘hating’ it, whether it supporting flash or HTML5!! Apple somehow came up with the product, and did it so without flash, now it’s upon use, the designers to design apps or websites or whatever it is, for users using it, however large or small the number maybe.
Whether flash is supported or not, we give our best push to give the best UI and Ux no matter what or how we use them.
that’s how i honestly think