How the iPad Influences Web Design

I’ve written about the iPad before and what a revolutionary device I think it is. It is the computer you use more like a book. Now if I could only have one computer, it would be a laptop, a very powerful laptop, because that can do it all. But I don’t have to choose only one. I have several computers of all kinds and configurations and each has its own job in my world. The iPad, that’s the one on the night stand next to my bed. That’s the one I cuddle up in my easy chair to read or to surf or to just explore the digital horizons.

You can read my earlier review here or my analysis of the new iPad 2 here.

The impact of the iPad on our daily, “computer” lives is becoming much larger than I had originally imagined. It is interesting how a really old idea — tablet computers have been around for a while, typically as laptops that had touch screens and fancy hinges allowing them to be held like a book, and yet Apple with its usual flawless and exciting implementation has captured the mind share of America yet again. As competitors rush to match the Apple product, much as they rushed to match the iPhone, the iPad still seems to be out in front. Remember when Chrysler invented the mini-van? The other manufacturers were quick to follow and copy, yet Chrysler always seemed a step ahead. Why buy a first gen Ford or Chevy van when Chrysler has the next generation van. I think they’ve kept that advantage right through today, even though their vehicles were plagued with quality problems and transmission failures.

Seems the same with Apple. The new iPad 2 is slimmer and faster and slicker, yet the price remains the same. Only time will tell if the competition, primarily from the Google Android, will be able to catch up and pass the front runner. Now my perspective on the iPad is from a long experience with the internet and the world wide web. I first got on the internet, cheatham@vnet.ibm.com, in 1985. I used the internet to email and coordinate with the couple of hundred university faculty who taught in the IBM University Level Computer Science program that I managed. It was so easy to communicate with electronic mail and we were soon sending attachments, statements, travel documents, and billing via electronics, and I never went back to the fax machine.

I would use my internet access to go to primarily text based destinations such as RSS feeds and bulletin boards. I was soon using AOL for home use and enjoying the idea that a computer was a connection to a much larger world. Then, in 1994, with the advent of IBM’s new OS/2 Warp and its excellent for its time web browser, I discovered the world wide web with its graphic wonders. Soon I had a new laptop running MS Windows NT and the new Netscape Browser, and I never looked back. Whether I was coordinating with other developers, downloading needed information and documentation, or just checking a stock price, the web  became part of my daily life.

Recently that has grown to managing all my business transactions, investments, bank accounts, bills and statements on-line, and I even use the web for the ultimate backup storing important files on the Amazon servers, wherever they may be. I would access from work on a ThinkPad connected to a keyboard and big display, and from home on a variety of machines. I even had access while traveling and visiting coffee shops like the one I’m in right now. The web has truly transformed technology, work, and the way we live our lives with terms like FaceBook, Twitter, and blogs entering the general vocabulary and psyche.

During all my time and involvement with the web, I was never very interested in web site design. Sure I learned HTML, but only because I have a thirst for knowledge and want to know all the technology that is out there to a deep technical level. Besides, it was quite a lot like the IBM GML that I had worked with in book design for some time. However, I know many people who jumped on the web site design bandwagon. Some had real technical knowledge and artistic skills, and some were just trying to catch the latest wave and earn a living. A lot of fakers out there among that bunch, but also a lot of very creative people. I’m so amazed with what I’ve seen done with tools like Adobe Flex and the merging of interfaces, computer programs and applications, and the web. All our modern machines have web access and browser interfaces as part of the multi-platform, it’s the easiest and best way to go design methodology.

Legacy systems have grown graphic user interfaces via the web and data is now at everyone’s fingertips. I could spend all day just talking about Wikipedia. I’m an encyclopedia “reader.” That means I used to pick up our family copy of the World Book, volume “D,” and just start reading it as a novel. I find all information and knowledge areas fascinating from data processing to dog training to deltas and deicers. (I told you I was in the “D” volume.)

What is surprising is how the iPad and its cousins are starting to change the very way we develop software and its look and feel. This is reminiscent of the original metamorphous that made web browsers and html part of all computer interfaces. Now look how the iPad is changing the very look of today’s web. A recent article on the University of Denver web site led me to consider the further impact of the iPad and copy-cats on the underlying design of web pages.

Especially for those who are less technical in their background, but are deep into the business (or hobby) of web site design, even those using pre-made templates like Wordsmith, here is my view of the changes and the impact of those changes on web site design.

The iPad is a more intimate way to interact as now you can lounge with the computer rather than having to sit at a table to work with it. This technology change has turned the world of website designers upside down. It has led the web designers to rethink design tactics. The gestures: pinch and swipe, the viewing options, the vivid colors all lead to new views of a web page. Designers have started creating specifically for the iPad because it seems undeniable that the device will hold strong position in the future. To give a more positive user experience web designs and layouts must be more compatible to the iPad.

iPad features: what web designers should consider?

Let’s consider what actually iPad comprises that’s forcing the designers to change the way they design.

The iPad has two modes:

• Landscape
• Portrait

By mode, it means the way you can view your website using the iPad. So either you can view it in landscape or portrait mode.

The device is perfectly simple. It has no keyboard, no mouse. So how are the users going to interact? The primary tool interact with is your fingers. The users will use their fingers to navigate on the iPad.

The question here is: Why are these features bothering the designers so much?

With the iPad, users do not need to follow the standardized and defined ways of viewing and interacting with websites. They can zoom in and out the website pages as it suits them and can view the websites in either of the two modes. In order to make websites accessible as well as usable on the iPad (having two different viewing modes) a designer needs to create two different layouts for the website. This requires a website to be developed in smart fluid width design. The web page should sense which way it is being viewed, and present the material accordingly, in either portrait or landscape format.

The iPad does not support flash. If you want your website to contain animations and videos it has to be designed in HTML5 because websites designed in this language are easily viewed in iPad. HTML5 has all the elements that were previously found only in Adobe Flash. Since Apple has stubbornly refused to support Flash with the iOS, this will accelerate the acceptance of HTML5.

As users will use their fingers to navigate the website, hover effects that are only suited to pointer based devices are useless for iPads. For a smooth user experience with iPads, the hover effects must be removed. The links in a website can also no longer be concealed in text and need to be re sized. The tip of the finger is not as precise a pointing device as a mouse, and this needs to be taken into account in the web page design. (This lack saddens me because I think hover effects and fly-over help were really quick and efficient assistance for people who weren’t sure what the little icons mean.)

The iPad can be used in different locations. It is the ultimate cordless device. You don't need a table or even a chair to use. You can use it anywhere indoors or outdoors according to your choice. This brings some disadvantages like the ipad’s screen is glossy and it reflects light. This hinders user’s interaction with the content that is displayed on the website. Successful use of an iPad out of doors is more problematic than just the design of the web page. For now, users must seek out shade to successfully browse the web out of doors and in the sun.

Here are some examples where web iPadfication is already going on:  The new design of Twitter is very close in look and feel to an iPad application. Additional in-line links and media support is possible with the iPad version. With the iPad influenced Twitter more columns can be displayed and their sizes adjusted.

Another example is Apple’s Me.com webmail interface and Apple’s MobileMe calendar, both which are modeled after apps on the iPad.

Even the editorial page of New York Times has changed in a way influenced by the iPad interface. The updated version of New York Times opinion page was developed keeping in mind iPad friendliness. The columns can be easily selected using finger and stories are organized in grids to make it easier for the users to access the page. Now the other big change on the Times website, the addition of a subscription charge, was not driven by the iPad design. I'll save discussion of how to monetize the web for another note.

Recommendations: what steps the designers should take to keep up with iPad?

The future of web browsing lies in these computerized tablets. I have discussed how the device affects the way websites are designed and built. So I suggest the following for web site designers.

Use JavaScript and Cascading Style Sheets (CSS) in combination which will provide the users a rich experience using the iPad. There are some situations where the web developer cannot accommodate the needs of the user using just a fluid width design. In such cases the designer should use multiple CSS for different devices and device configurations.

Designers should avoid using complex designs rather than create interactive and intuitive designs as the future of website design is shaped by iPads. The fingers don't work the same as the mouse, but powerful swipe commands are available. Support for these multi-finger commands must be built into the web browser and the web site must support commands to scroll by page or to jump to the top or bottom of the web page document.

Finally, produce adaptable websites. Designers should design the website in such a way that it is accessible on desktop PCs, tablets and other mobile devices. It means that the website should be adaptable to multiple platforms and should not look the same. Web page designs need to be aware and adapt to the size and type of display being used by the viewer.

You should keep in mind that with this new website design focus for the iPad you are not reinventing the wheel rather you are enhancing the usability of your site for the iPad device. Therefore, don’t forget to have quality content, maintain keyword placement and keep fighting for your website rankings. Creating web pages that view well on the iPad is actually easy compared to designing for smart phone access. The future will be web sites viewed on 61” TV screens, high resolution computer displays, iPads, and iPhones too. The future starts now. Climb on board. Don’t be left at the station.

Originally written on April 6, 2011.