iPad Web Design & SEO: First Looks

by Ruud Hein January 27th, 2010 

Using standards-based web design your site can also display effortlessly on the iPad. First out of gate, you increase your reach and branding by giving iPad owners another destination.

ipad handheld tablet

The iPad introduces a new family of handheld devices.

More versatile than dedicated ereaders, more comfortable for e-content consumption than smart phones or PDA's and definitely less bulky and clumsy than a laptop or netbook.

It's also less personal than those devices; Apple sees this as something that lays around the house, used by family members.

But it's the content that can be sold and displayed that you should focus on.

iPad Content

ipad ebook

The iPad will be able to work with third party applications.

Existing iPhone and iPod Touch apps in the Apple App Store are compatible the same way apps for the iPhone carry over to the iPod Touch.

Big difference: the much larger screen.

Relying on your existing apps is probably not a good idea: you'll be the odd one out, looking all funky with your small screen app displayed large sized.

Much of the digital content that will be consumed on the iPad will be licensed (read: paid for) e-content.

Think of books, movies, TV, but also newspapers, magazines and comics.

Those latter three have never had a display platform the likes of the iPad; the probability of rekindled consumer love for these formats is a potential marketing asset for SEO clients.

Like the iPhone and iPod Touch, the iPad is able to display web pages.

iPad Reach & Branding Opportunity

While at a later stage you can do amazing branding using dedicated iPad apps and content, your "first out of gate" channels are the web, feeds and email.

ipad email widescreen landscape

These 3 bypass any Apple approval delays.

With each you should check as soon as possible how it looks, feels and operates on the iPad. Landscape email view as shown above changes what you can expect people see " and how they interact with it.

iPad Web Design

ipad web page landscape widescreen

The mantra of good web design, and by extension solid SEO recommendations, is: web sites are browser/device-independent.

That is: if you've done your homework, your website will work in anything ever invented to display HTML for consumption.

There is one exception to the rule: if you want to burn money. In that case you make multiple versions of your web site to target the hundreds of web browsers and web browsing devices.

So what does it take to make your web site iPad-ready and SEO friendly?

1. HTML-only fundament

Make a basic (X)HTML page that any browser from any era can display. <head>, <title>, <body>, <h1>, <p> structures. Don't bold, italicize or underline. <a href> for links. Don't think about, consider or use images at this stage yet.

With this in place you have a web site that will work anywhere, anytime. Anywhere Anytime. That includes a text-only browser from the early 1990's but also a beloved search engine like Google.

From here on you can only make things better.

2. Mark up your (X)HTML with CSS

Go through your structure and sections and add CSS classes and especially CSS ID's.

The CSS will help you to style your content and structure; give it color and dimensions.

Not only that " CSS ID's and structures are a great way to target very specific parts of your web page, something that will come in handy in the next step.

3. Add Unobtrusive JavaScript

This is where you'll add everything else; from JavaScript to Flash.

The key approach here is: "cool to add" vs. "need to have to display/use the page".

Tell your web designer to test for everything, to never expect and certainly never rely on.

Your web designer will thus write code that will first check if the browser can do what we want it to.

Two practical examples: menu's & Flash.

Menu: Because you've made the whole page in basic XHTML, your menu will always work " and if the browser can handle JavaScript, your script can turn that basic HTML menu into an animated mouse-over dropdown one.

Flash: because your page's JavaScript is responsible for inserting that Flash video (vs. just dropping it there anyway) and your JavaScript in turn checks if Flash is something this browser can handle, nothing goes wrong when an iPad, iPhone or iPod Touch user comes along.

iPad Web Design Tricks

The iPad will have you look at your web site together with your SEO, conversion and usability specialists as its portrait mode shows almost all of a web page " at once.

ipad web site page portrait mode

Its landscape mode has a more traditional "above the fold" view:

ipad web site page landscape view

The luscious, tactile display invites product photos, close-ups; put the product almost literally in the hands of the end user.

ipad books product photos

iPad SEO

Now that you have a cross-browser compliant web page, you have a page that can be shown anywhere, anytime.

Make it known to the world that your site can be displayed on their device.

People will be looking for anything that can help them enjoy their new iPad: be first out of gate.

Search Engine People provides time resistant recommendations for mobile web site experiences. Our forward looking recommendations have repeatedly been confirmed by later developments and enable our clients to access markets simply out of reach of their competition. Take a moment today to talk with a friendly expert.

Images courtesy of GDGT - The Social Gadget Site

Additional resources:

Ruud Hein

My paid passion at Search Engine People sees me applying my passions and knowledge to a wide array of problems, ones I usually experience as challenges. People who know me know I love coffee.

Ruud Hein

You May Also Like

9 Responses to “iPad Web Design & SEO: First Looks”

  1. I'm kind of hoping that straight up none of us will have to do anything about SEO for the iPad.

    From what Apple is saying it sounds like they've tried to design around existing technologies, just presenting it in a much more "human friendly" way.

    Can't wait to hear more from all the SEO guys and gals when this device really gets into people's hands.
    .-= Josh Kohlbach recently posted: Writing Techniques For Bricks & Mortar Business Websites =-.

  2. Very nice description about web design.I would like to use iPaid web design.

  3. Wendy says:

    For websites that get these kind of things, they can look great. I'm thinking about the sites that are optimised to run on smart phones. The css design allows it to optimise to the screen size.
    There are still loads of sites that don't look good on smart phones yet though and I suspect there will be a lot that don't look or work great on the iPad. And how long have we been able to browse the net on a phone.
    Still it will keep enterprising web agencies in business:)
    .-= Wendy recently posted: Response cached until Fri 29 @ 6:35 GMT (Refreshes in 23.72 Hours) =-.

  4. La Digue says:

    Now that is a great device. this will undoubtedly be useful to one and many. As we progress and leave years by, it's clear technology is becoming more and more advanced. After the iPhone and iPod, now it's the iPad. Good that Apple is showing it's worth in technological innovations.

  5. I'm hoping for some kind of special programming for the iPad, a bit like FBHTML, it would be interesting to see what could be done with the multi touch capabilities.
    .-= freebiejeebies recently posted: Free iPad =-.

  6. Mike says:

    I have always been an APple fanboy (and quite frankly, proud of it!) Even though this may the case, I have yet to see some sort of relevance for owning an iPad. I love the innovation that Apple bring to the table, but with this said, the iPad doesn't do anything for me. Maybe the iPad nano will?

  7. I find that owning an iPad has helped me to experience the internet in a whole new light. They're well and truly right when they say about literally holding the internet in your hands. It's a great feeling. Saying this, I have to agree with Wendy – sites don't seem optimised for smart phone viewing so maybe the technology made available to these phones should be more inline with the technology found in the iPad.
    web design cardiff

  8. Bought an iPad for my parents last week, for there travel to NZ so that they can email and Skype back etc. Very easy to use so easy that even my dad is emailing me off it and before i bought it he did not even know how to turn a computer on.

  9. Shonda Ernst says:

    Ipad is one of the best technologies ever invented! Steve Jobs is so genius. What Ipad is capable of is truly amazing. It has been part of my everyday life.