The new iPad Mini presents another set of problems for websites looking to appeal to mobile /tablet users, as it's a new screen size between iPad and smartphone.
Having been released in time for Christmas, it's likely to sell like hotcakes, so the number of potential users means companies need to consider how they will adapt their websites for the device.
It's a challenge, since existing mobile or desktop sites won't necessarily adapt well to the screen size. It may be too small for desktop, yet too large for mobile sites.
I've been speaking to James Sherrett from Mobify, who has some suggestions on early best practices for iPad Mini design...
James outlines some of the design challenges Apple has presented with this new device:
The major challenge of delivering websites on the iPad Mini is that most websites are not 'adaptive' or 'responsive.' Most websites continue to be built for desktop screens, fixed locations and mouse / keyboard inputs.
The future-proof solution is an adaptive approach that ensures your website flexes to fit all devices and includes techniques from responsive design.
The desktop site is not enough
While most e-commerce sites work reasonably well on the standard iPad, and retailers have been experiencing high conversion rates from tablets, the iPad Mini presents a new challenge.
According to James:
Touch inputs, links, buttons, menus, search boxes, will be a big challenge because of the smaller sized targets and lower tolerances for missed targets. The fat finger problem is made worse. For reading and browsing, the size of the text and images on the screen are challenges, especially for an aging population.
With both touch inputs and reading and browsing with on-page elements smaller on an iPad Mini it will affect how designers and developers deliver their websites to the device, and any other 7" tablet.
So, the desktop site will not be the best solution. Sure, it will work better on iPad Mini than iPhone, but it will be a challenge to browse and buy from an e-commerce site without too much effort.
As a sticking plaster, Mobify recommends sizing up an existing mobile website to fit the Mini screen, ands suggests this will work better then shrinking a tablet site to fit.
Tablet design guidelines
- Bigger text.
- Better padding.
- Removed hovers.
- Content fluidity.
- Banished Flash.
- Faster positioning.
According to James, retailers need to see how the iPad Mini will work in conjunction with other devices:
I think retailers need to be looking at the big picture and see the iPad Mini as another step towards the multi-screen world. Already Google reports that “90% of people move between devices to accomplish a goal, whether that’s on smartphones, PCs, tablets or TV.
The two big-picture changes going on right now are the huge increase in mobile website usage (smartphones and tablets) and the huge increase in the diversity of devices using the web (screen size, screen resolutions, input / output types, connection speeds and more). These two trends are going to continue for the next three years, at least. So retailers need to have strategies and technology to keep up. An adaptive website is the cornerstone.
As a general rule, tablets (those the size of the iPad at least) have been a lean-back device, used primarily at home in the evenings.
According to a Google survey from March 2011, people are generally using their tablets at home. 82% said they primarily used their tablet device at home, followed by 11% on the move, and 7% at work.
The new iPad Mini is likely to change that since it's that little bit easier to slip into a pocket or handbag. Thus, we will see these devices being used in a wider range of situations, including when shopping.
This greater mobility will provide opportunities for targeted marketing based on the user's location. For example, stores offering wi-fi will be able to provide extra information, special offers etc for users of the device.
James also thinks that the new device will be more personal:
One of the main distinguishing characteristics between mobile and tablet usage is that mobile is very much a personal device: one smartphone for one person. Tablets tend to be shared more frequently and there is often one iPad for the household. I think the iPad Mini will tend to be a more personal device.
Due in part to its greater portability, it's likely that more people will use public wi-fi and 3G networks to access the web. Therefore its performance will be closer to that of a smartphone.
Speed and performance is a vital success factor for mobile commerce, so companies will need to be aware of the constraints.
- Cut down on HTTP requests.
- Optimise your images.
- Manage scripts and styles.
- Choose CSS transitions.
The need for adaptive design
Mobify believes that adaptive design will be all important, for this and other devices.
According to Brad Frost in a recent presentation:
Responsive web design by definition is defined as fluid grids, flexible media and media queries. However, it’s part of a much broader adaptive philosophy/strategy. Because the term has grown in popularity, it should come to define all that goes into crafting multi-device web experiences.
As James points out, responsive design is just one element of an overall adaptive approach:
According to James:
The addition of the iPad Mini and its projected sales success makes the need for a fully adaptive approach more critical than ever before. Now is the time to start investing in an approach that’s future friendly.