Building Your WordPress Website with iPad in Mind

Last week I looked at how you can build a WordPress website on your iPad. This week I am doing it the other way. How can you make your website look good on an iPad? Arguably, I could be looking at all sorts of tablets. I could be a little more encompassing and look at Android as well. However, the iPad’s market share makes it the device to be adapting to right now. Check out the market share for Q10 2010:

graph showing iPad share of iPad market at 90%Data from business insider

 

In fact, the iPad has become so popular that it the number of iPad users now surpasses the number of Linux users.

graph showing iPad with higher market share than LinuxSource: Pingdom

This is extremely impressive for a device that has only been around for just over a year and it’s likely that we’ll see the iPad’s dominance strengthen.

Last year I took a look at how you could get your WordPress website looking great on an iPhone, now it’s time to take a look at how you can get it looking fantastic on an iPad. iPad users interact with their devices quite differently to how desktop and laptop users interact with theirs. The absence of a mouse, the absence of Flash and the iPad’s portability all affect how the iPad is used. Let’s take a look at some of the factors and see how you can get your WordPress website working great on your iPad.

Transform Your Site

Onswipe

When it comes to the Native Apps vs Web Apps debate in relation to content delivery I’m firmly on the side of web apps. I don’t think it’s necessary to produce a native app for a blog or magazine when an RSS feed  can easily be pulled into an App like Flipboard. It seems like a bit of a waste of money to develop your own app simply for content delivery.

The need for Native Apps has diminished even further for WordPress users with the Onswipe Plugin.  Check out the video:

Onswipe founder Jason Baptiste’s slogan is “Apps are bullshit” and he’s right to make that claim when you consider how easy it is to turn your WordPress website into a web app that can rival any of the major iPad content applications. Here’s how my blog looks when it’s been Onswiped:

Onswipe Features

  • Accelerometer aware content
  • Homescreen icon
  • Loading screen
  • Cover image
  • Integrated WordPress comments
  • Built in sharing and social media

The only downside to Onswipe is that it’s easy to recognise a site that is using it and WordPress sites are becoming homogenous when viewed on mobile devices. It’d be nice to see some new Onswipe themes coming on to the market.

Responsive Themes

Flexible WordPress Theme

Responsive design is one of the more recent buzzes in web design but rather than just being a fad it’s a solution to an emergent problem.  The ways that people are browsing the web has transformed in the past few years – mobile browsers, smart phones, tablets, netbooks, big screens, small screens, low-res, high-res, even using Kindles or games consoles. Some devices can easily switch from portrait mode to landscape – like the iPad and iPhone. It’s difficult to know how to get your site looking great across as many mediums as possible.

Responsive design, put simple, is design in which the website responds to the medium in which it is viewed in. It uses a mixture of CSS3 media queries, fluid layouts and scripts that reformat the webpage according to your device – a website can look great in on an iPhone, and iPad or a high resolution screen. To read more about the principles behind responsive web design check out these great articles:

If you’re a WordPress Theme designer you can take these elements and integrate them into your theme. But what if you’re not a designer? Are there any WordPress themes that are built with responsive design?

Yes! Of course! But not as many as you would think. You can check out my post with 10 Free Responsive WordPress Themes.

Serving up a Different Stylesheet

If you don’t want to use a responsive theme, or don’t feel that you are comfortable designing with fluid layouts, you could use only different stylesheets when someone visits from an iPad. We’re all pretty familiar already with using mobile switchers that serve up a mobile version of the site when visiting from iPad. The problem with these is that, while serving up an optimized version of the site which is great for mobile, they can look pretty crappy on an iPad. Check out mine:

Not great, right? Good for an iPhone but not for an iPad.

You could use a plugin like Stylesheet per page to achieve this or you could do this yourself. You can achieve the required effect by using either media queries or by having a different stylesheet specifically for your devices. You can check out this article for a discussion on the benefits of each.

Design Elements to Be Aware of on iPad

Fingers

fingers on iPad

The way that most people interact with their iPad is using fingers (or perhaps styli). This has an effect on a couple of different design elements that you might have on your website.  A finger is much less precise than a mouse.  As a lowest common denominator I use my father-in-law with his massive sausage fingers and his failure to use a mobile phone correctly because of the tiny keys.

Keep in mind that there is not just one standard pointing device but that there is as many different kinds of pointing devices as there are fingers in the world.

Hover

You know that nice menu that you have that drops down when a mouse pointer hovers over it? This isn’t going to work the way that you want on the iPad. Why? Because there’s nothing that hovers. Seriously, hover your finger over your iPad and see if you can get that menu to dropdown – I dare you. In order to get your submenu appear the person has to tap on the top level, rather than roll-over. This means a different, and more annoying, user experience.

Navigation size

wordpress navigationThe size of your navigation can seriously affect your visitor’s experience.  You only need to log into the WordPress backend via an iPad to see what the problem is. The menu links are too close together so you have to zoom in to be able to click the one that you want.

Think about my poor father in law with his massive fingers. He visits a website with small navigation buttons on an iPad and he keeps end up hitting the link beside the one he wants. Knowing my father-in-law he’ll chunter away and the iPad might end up broken into pieces on the floor at the other side of the room. You don’t want to be responsible for broken iPads, do you? Keep your buttons at around 20px x 20px, ensuring there is adequate padding around the element.

No Flash

No Flash imageA few years ago, when I first got my iPhone, it annoyed me that I couldn’t view Flash on it. But reflecting back on that now, I realise that this has rarely, if ever, proved to be a hindrance to me.  The use of Flash on mainstream websites has been on the decline. I feel a bit sorry for Flash. Because Steve Jobs hates it so much it’s getting killed off.  It’s a sad story.

Popular sites are starting to use HTML5 instead of Flash. This makes the browsing experience even better for iPad users. As WordPress website designers and owners, the use of Flash design elements or plugins is out for the future if you want to make sure your site works perfectly on an iPad. Sarah has written a post about HTML5 players that should help you to find the right one.

Final Tips

  • Photographs and Video – Take advantage of the fact that a whole video or photograph looks fantastic on an iPad. If you’ve got a photography website you could think about including full size image galleries that really show off your work.
  • Typography – get your typography right. Too small and your user will have to zoom in. Too big and there won’t be enough words on the screen.
  • Contrast – The iPad screen is very bright. I frequently turn down the brightness because my eyes start to hurt. Instead of using black on white for your text, try a light grey or muted background with a dark grey for the text.
  • Test! Even if you don’t have an iPad yourself you can test using iPad Peek.

Further Reading