iPad Mini and the adaptive design issues involved

The iPad mini has arrived in time for Christmas and it is going to be hot (have you seen one?). This is going to add all sorts of new issues into the boiling pot for web designers around the world because the most popular task done on an iPad is browsing the web and you can bet that will be what the mini iPad will be used for. On top of this there is the new Kindle HD – which is basically a tablet – and the Google Nexus 7.

These devices are sporting a new screen size not as big as the iPad and not as small as a mobile but different enough to make the marketing department stop and think.

The aim of every serious player on the web is you need to be adaptive and meet demands of visitors using any device. If you run a website whose revenues are directly linked to the quality of the experience they provide to customers (i.e. e-commerce, multi-channel retailers or media companies) then you must be adaptive and you must starting now.

The iPad mini may be the device that tips the market. A standard desktop site just won’t work acceptably on a 7in iPad Mini screen. A 12px font will be unreadable; normal buttons will not be clickable and clumsy and form inputs will drive people mad with frustration.

So here is a check list

  • Make your text bigger and more readability, we suggest at least 14 px.
  • Add more padding – increase padding and line-height of densely improves touch accuracy. Pay special attention to form elements such as dropdowns, picklists, checkboxes etc.
  • Design flexibility – use design elements that can move around and adapt to the full range of tablet screen sizes – from 600px to 1000px wide.
  • Remove fixing page widths.
  • Remove all mouse hover interactions.
  • Avoid “position: fixed” design elements – they slow down rendering.
  • Cut down on HTTP requests as this will slow performance. Think about all those links to Facebook, Twitter and Google + that will add more load and slow everything down.
  • Optimize your images – you should be doing this anyway. Many of these tablets have (or will have) fantastic high-definition displays but do not be tempted to deliver high quality image as default it will reduce the user experience. Serve the right quality images when requested.
  • Optimize scripts and styles – keep them as compact as possible.

So now is the time to move to responsive and adaptive designs and keep ahead in the market.

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out /  Change )

Google photo

You are commenting using your Google account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s