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:
- Smashing Magazine talks of Fluid vs Elastic vs Fixed Layouts
- Smashing Magazine gives smart fixes for Fluid Layouts
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:
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 | supported by the excellent catalog printing services at PsPrint
We can now use an Ipad to view coverage from a security camera installed in our house. Working parents can be rest assured that their children are safe at home by logging onto a remote server that is connected to their wireless security camera.
Each of the 69 premium WordPress themes from Elegant Themes comes expertly coded in valid XHTML and CSS, and all are made compatible with the latest version of WordPres. Eeach template performs flawlessly in each of the most widely used browsers to ensure maximum functionality. Furthermore, all sidebars are made widget ready for your convenience.
- Cross-browser compatibility guaranteed
- Intuitive theme options page gives you control
- A focus on support and community
- Frequent theme additions and upgrades
krdr March 15, 2010
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 7, 2010
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 7, 2010
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 7, 2010
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 9, 2010
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 21, 2010
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 13, 2010
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 19, 2010
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 1, 2010
This post is featured on 40 iPad tools, tips for designer
vivid1 June 17, 2010
If Adobe was smart, then they would simply add the ability to export to HTML5 right out of flash. Problem solved.
Brent July 9, 2010
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 26, 2010
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 :)
kailash September 24, 2010
Well, I just got my first web project that needs to be specifically designed for the iPad, so I’m gonna be googling a lot of these articles.
Parrothead October 15, 2010
I see the iPad as a consumption device.
Desktops were geared to production and most folks who buy them use maybe 10% of the device capacity. They surf for tickets, check email and share photos on facebook.
That’s what the iPad does very well, and what most folks buy a computer for. It’s just one of who knows how many more consumption devices, most if not all of them wireless, with varying screen sizes and service plans.
I think Web design will require different techniques for mobile devices with emphasis on bigger buttons, slimmer forms, no hover, fast loading, low overhead themes. Animations will need to be light, with video offerings optional (unlimited data plans are going the way of the dodo).
BTW, if you think the waters are getting murky now, wait until we have to deal with a Microsoft iPad clone with IE9 as the browser. The Horror!!!
Bob November 13, 2010
When Tim Berners-Lee developed the web, he rightly understood that if it was going to scale, and content be portable to different devices (at the time, accessible from different operating systems, now different devices) it couldn’t be tied to a particular ‘user agent’. The beauty (and at times, frustration) of the web is exactly that. He leaned in the direction of reach, over the richness of any particular user agent. As it turns out, it was a good bet.
Of course, even though the web has continued to evolve towards further reach – to include phones, TVs, and etc., it has also dug deeper into the richness of user experience (HTML 5 being one of it’s latest iterations) mostly by standardizing current non-web techniques to incorporate innovations into it’s domain. Regardless of one’s opinion of the iPad, it clearly an example of the type of innovation in richness preferred by a sizable part of the user population. The question isn’t so much ‘should we include it as part of our development objectives’… Obviously it is. The choice is really how will devices like the iPad be incorporated. Writing apps, while sacrificing reach for richness, is clearly a profitable niche for some. This is not unusual. On the contrary, it’s the norm (see flash, for another example).
I believe that this post is useful for developers in identifying some of the issues raised by the iPad form factor. The variety of comments regarding it speak to how, not whether, these issues will be addressed. In particular, some will address them by continuing the best practices and standards of web development, gaining reach (and some richness) in the process for their clients. Others will dive into the other extreme to develop apps in Apple’s Objective-C to optimize (iPad) experience at the expense of reach and web standards. Most, I believe, will arrive at a ‘business as usual’ strategic compromise where, because they used web best practices, will be able to continue their hybrid approach of simply tweaking some CSS, applying some HTML5 functionality, and/or supplementing with a written app.
As to those without a strategy of adaptation, nor tactic of incorporating ipads into their particular development domain, either their present client base currently, or will not include those who use ipads, or, to paraphrase an old adage: those stating that something can’t (or shouldn’t) be done, are usually interrupted by someone else who is doing it.
msfan December 27, 2010
Ben
When the folks in Redmond drop Flash support bet you jump for joy since M$ did the right thing!
energy saving lamp February 15, 2011
Shanghai Britech Industrial Company Ltd., founded in 1996 of Shanghai in China. Britech Company Limited is a manufacturer and supplier of energy saving lamp, tungsten halogen lamps, and LED light bulbs etc… Our primary lamp products include:
Glasgow Web Developer April 17, 2011
Good point from C.
Unplanned KIng April 18, 2011
Nice article…………very beneficial
Tyler April 21, 2011
Great article. Fluid websites are the way to go.
Mercadder April 22, 2011
I am using a nice WordPress plugin
http://mercadder.com/2011/01/14/plugin-wptouch-para-ipad/
Emma July 16, 2011
Hi, I’d like to get some feedback on HTML Egg, it’s a web designer App made for the iPhone and iPad. The App supports WYSIWYG, so there’s no need for coding.
Thanks!
Tonychan September 15, 2011
I believe that this post is useful for developers in identifying some of the issues raised by the iPad form factor. The variety of comments regarding it speak to how, not whether, these issues will be addressed. In particular, some will address them by continuing the best practices and standards of web development, gaining reach (and some richness) in the process for their clients. Others will dive into the other extreme to develop apps in Apple’s Objective-C to optimize (iPad) experience at the expense of reach and web standards. Most, I believe, will arrive at a ‘business as usual’ strategic compromise where, because they used web best practices, will be able to continue their hybrid approach of simply tweaking some CSS, applying some HTML5 functionality, and/or supplementing with a written app.
ivylee September 24, 2011
If Adobe was smart, then they would simply add the ability to export to HTML5 right out of flash. Problem solved.
hellokitty September 30, 2011
It is the real time for designers to develop their skills for designing webs and apps for the iPad. This article definately helps and provides informative sources for the developers. However, ipad is simply a bigger version of iphone, which can be more convenient than mac books or other laptops for its lightness. However, ipad is an another device that people can simply use and carry around. As a designer, it seems to know more transferable skills and knowledge for designing and developing iPad and iPhone apps. I am a still learner but I can’t wait to see continuing the standards of web development and how it is going to bring a change as time goes.
Carbon Brush October 17, 2011
Great article. Fluid websites are the way to go.
Tery October 21, 2011
Future is in tablets and smart phones or their symbiosis. Even today, some websites are created exclusively for the iPad, and this trend will become stronger and stronger.
Morgan & Me Creative October 25, 2011
Agree with Terry, the future is with tablets and phones. As web designers, we should be prepared for this wave of change.
procab December 5, 2011
Hi
Our first release iPad version http://www.procab.ch/ipad
Enjoy
Rumble January 11, 2012
We design, develop and market in luxury markets: our figures show an exponential rise in visitors by ipad. Not even mobile devises – ipad. Thanks for this post.
Key Tags January 13, 2012
Pretty soon we’ll be seeing posts like ‘how design has changed to adapt to the holographic screen.’ Oh yeah, waiting for that day :D
Cincinnati web design February 2, 2012
Its really funny to see some of these comments from two years ago. Lets see if the iPad gains traction. Well case proven, the ipad is the most widely adapted tablet on the market. I agree with this article and then some. Check us out, we only create ipad friendly websites, and FLASH is not missed! -T
Lee Croxon February 8, 2012
On a personal note I feel the time has come to expand on the way we build and develop websites, iPad and iPhone are jsut two of the modern day ” here to stay ” mediums we now have to work with when planning and designing websites. Lets not forget the vast range of Android smart phones now on the market.
roger February 26, 2012
The ipad hates javascript. The ipad killed my webdesign career.
roger February 26, 2012
The iPad is I.E. 2002 reincarnated.
Brent March 7, 2012
Is the title of this article a question or a statement? either remove the question mark or rephrase it as a question. Just because the web is informal doesn’t mean we have to abandon grammar and punctuation.
Manila Photobooth March 12, 2012
So it’s final. The dimension should be 1028×768?
Creative Heroes March 23, 2012
Have a look at our website http://gluddle.com
It’s touch enabled and optimized for iOS devices but also works on regular browsers!
Have a great day – Creative Heroes
Flash developer April 18, 2012
If you use swfobject when embedding your flash it does not show a blue Lego piece it shows the alternate content u choose to display. Perfect for these little gadgets like iPads. I won’t be going backwards to accommodate trends.