iPad Web Design & SEO: First Looks

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: