The iPad was initially dismissed by many as a fad, but it’s since gone on to sell many millions of units, along with reinvigorating the tablet computing industry, once seen as a painfully small niche. Although Apple’s tablet currently dominates the market, manufacturers of Android devices and Microsoft (through its upcoming Windows 8) also fight hard to encourage more people to switch from traditional pointer-based systems to ones where content is manipulated by pawing at a piece of glass.
While long-term technology users see tablets as a dumbing down of computing, there’s no doubting tablets are more intuitive for many people. Direct interaction is an innate part of human instinct, and in being able to more directly interact with content, much of the potentially confusing abstraction within computing is removed.
However, this major change in user interaction in itself presents problems for website designers and developers, used to designing for the fine precision of a mouse pointer. Additionally, the new iPad introduced a high-res display, causing non-optimised website imagery to look blurry; it’s almost certain rivals will soon follow suit.
At some point down the line, the new iPad is the kind of device we will all be designing for, but our aim at .net is to prepare you for the future as soon as we can, and not when it’s too late. So we asked some leading designers and developers for essential advice for working with Apple’s new iPad from a website-creation standpoint, which by extension often provides insight into working with all touchscreen devices, regardless of who they’re made by.
1. Adapt to the Retina display
Although high-res displays have existed on smartphones for over a year, the relatively low-res nature of much website imagery is far more obvious on the larger screen of the new iPad. Said imagery is upscaled, to the point Reading Room senior interface developer Andy Smith says it looks “truly awful unless carefully dealt with”.
You might argue it’s unnecessary to pander to a single device from a single manufacturer, but ‘Retina’ displays will soon become commonplace, on other tablets and perhaps even laptops. Although there are moves within standards bodies to create a responsive image format, Smith reckons there are two existing techniques that can be utilised to make images look pin-sharp on high-res displays: “You can create double-size images and assign them as backgrounds, using CSS3 media queries to correctly size them. Alternatively, use JavaScript to present the correct image.”
Both options have their drawbacks, notably in having some users download more data than they should need to. Smith hopes such issues will soon be eradicated by detecting a device’s connection speed and optimising images accordingly.
In the meantime, designer Oli Studholme says it’s “time to rediscover the lost art of image optimisation”. He says images compress best if they’ve less detail, so see what detail you can lose: “Blur backgrounds to focus attention on the subject and make it easier to compress. Know your image types: avoid PNG-24, use JPEG for photographs, and use PNG-8 for anything you can squeeze down to under 256 colours.”
Further tips from Studholme include using ‘Save for Web’ when exporting from software to get smaller files, post-export compression using JPEGMini and using image sprites, icon fonts, and Base64-encoded embedded icons
Get the Creative Bloq Newsletter
Daily design news, reviews, how-tos and more, as picked by the editors.
2. Create imagery in vector format
If you’re working with bitmaps and suddenly have to support high-res displays, you’ll find yourself having to redraw everything. “So think vector and include vectors in your workflow as much as possible,” suggests designer and speaker Aral Balkan.
In working at 2x or higher resolutions when designing assets, you’ll find it easier to support any resolution, he says, adding that you could also automate your production process by using tools like ExtendScript in Photoshop or Layer Cake to output different resolutions of images.
3. Consider using the same site
With smartphones, it’s become commonplace for websites to offer a cut-down mobile experience, and this has often led to iPad and other tablet users being offered the same, despite the much larger screens on those devices. Raluca Budiu, user experience specialist for Nielsen Norman Group, suggests you should “consider whether you actually need a separate iPad site, or if you can get away by making some changes to your existing full site”.
Web sessions on iPads tend to be lengthy, the screen is fairly large, and Safari for iOS is a browser that’s pretty similar to its desktop cousin, and so this is sound advice, although there are caveats from a usability standpoint, not least as noted in the next tip.
4. Be mindful of orientation
Unless you’re a bit strange, you’ll only work with your laptop in landscape orientation, and the vast majority of PC monitors are also only designed to be used in that manner. But tablets such as the iPad are designed to be held in landscape or portrait, depending on the wishes of the user.
When it comes to websites, it is possible to amend how a website looks and works on switching orientation (see tip 5), but the more important advice here is to test thoroughly.
Because by default an iPad will attempt to intelligently resize a website to fit the viewport, there’s a danger of interface components and text becoming too small to easily view in portrait mode. Therefore, ensure you carefully test your sites in both landscape and portrait, and make optimisation adjustments accordingly.
5. Work with media queries
Designer Seb Green, who heads up Greenlight Computers, echoes Budiu by arguing anyone seriously wanting to support the iPad and other touchscreen devices should “forget the whole mobile website and desktop website argument,” which he dismisses bluntly as “rubbish”. He rallies against having multiple sets of code and content to maintain, and instead suggests delving into responsive web design, and having content that adjusts to the viewport.
“It’s common sense, and while it requires harder thinking for you, it provides a better experience for the user and is easier to maintain,” says Green. And while some holdout web designers argue media queries fail in older browsers, Green reckons that’s irrelevant: “We’re not aiming at them, we’re aiming at users of newer tablet devices and smartphones!” However, he points to JavaScript as a solution for anyone desperate to get media queries up and running in ageing browsers.
6. Test your breakpoints
Although Adobe Shadow provides a great way to sync testing across a PC and a number of devices, most designers will initially work on their PC and need a means of testing media query breakpoints accurately, rather than just dragging a browser window about.
Balkan says to “use tools like Remy Sharp’s Responsive.px to test your breakpoints and iWebInspector to debug your sites on the iOS simulator”.
7. Be aware of read/tap asymmetry
Budiu says: “Keep in mind that the iPad has a read-tap asymmetry: if you can read it, it doesn’t always mean you can tap it (reliably).” In other words, while text might be big enough to read, especially on the new high-res display, it might be too small as a touch target.
Heehaw Digital head of digital development Bryan Gullan says the size of navigation devices and controls is often overlooked when building sites for tablets: “When people have to zoom just to hit a tiny active area, it can be frustrating. Therefore, don’t build for the precision of a mouse pointer, but envisage every link being followed by the press of a large finger, where you can’t see precisely where you’re going to hit.”
Gullan adds that implementing such methodology isn’t only beneficial to tablet users, but also to those with impaired mobility: “Someone with an unsteady hand using a mouse will thank you for it!”
8. Kill hover tricks
“It sounds obvious, but I’ve seen people forget that there’s no hover state on the iPad,” says Mark Kirby, director at Brighton based digital agency Hatch. In part, it’s the screen size and ‘normal browser’ nature of tablets that can throw designers, leading to them coding alternative sites for smartphones, but forgetting to do so for larger touchscreens.
“One team I advised once designed a site where the entire navigation relied on hover, and it was completely unusable on an iPad,” says Green. “So you need to code alternative solutions and also realise that all visual cues relying on hover won’t appear to tablet users.” He suggests considering changing hover actions to clicks, enabling users to tap to make something occur, or for a menu to open and await a selection.
9. Be inventive with UX testing
Erin Jo Richey, user experience strategist at Flat Frog Design, tells us usability testing on the iPad doesn’t necessarily require a lot of expensive equipment: “To capture users’ interactions with iPad apps, I made a mobile usability sled by attaching an HD webcam to sturdy flexible wire and a clamp. The clamp mounts to the iPad, and the setup allows the user to hold the iPad more naturally than if the camera was mounted on a desk.”
Via a long cord, the camera feeds video to a testing computer, where it’s captured using screen-recording software such as Silverback or Morae. “The design isn’t perfect,” says Richey, “but it works well for recording gestures and interactions.”
10. Take care with bandwidth
We’ve already mentioned issues with Retina graphics potentially forcing larger data downloads for everyone, and it shouldn’t be forgotten that iPads and other tablets are inherently mobile devices, often being used on cellular networks.
Green wonders if the argument is becoming redundant: “Part of me thinks most tablet users are usually on a Wi-Fi connection: the bandwidth argument only has a leg to stand on when you’re on really slow 3G or Edge”.
However, until high-speed connections are ubiquitous, don’t make the assumption that iPad users visiting more desktop-oriented sites aren’t languishing on a slow connection, screaming at their device as data downloads painfully slowly. (Or, in short: optimise, always, for everyone.)
11. Be wary of limitations
On iOS, you only get one browser engine (whichever flavour of WebKit is baked into the current version of the installed OS), and while it’s reasonably standards compliant, you must be mindful of its flaws. First, it’s hampered a little by the power of the device: expecting desktop-like performance from a tablet when it comes to very advanced HTML5 apps is being a tad optimistic.
But also there are holes in support; for example, Mark Boas, writing for HTML5 Doctor, noted in a recent article about HTML audio that “not all browsers will play multiple audio elements simultaneously”. This is particularly problematic for games devs and “we see this issue with iOS and Blackberry devices”.
12. Don’t advertise your app
Apps are great. What’s not great is you banging on about them, blocking your users from getting to content. “Avoid the temptation of attempting to redirect iPad visitors to your website to download your iPad app by covering or replacing the site’s content with a huge advert,” advises Kirby, wisely.
“These adverts prevent the user from reading the content they came to see, requiring them to take an extra step to dismiss the advert and sometimes even redirecting them somewhere else when they do so, essentially breaking incoming links to your site.”
He recommends subtler promotion, such as by the use of in-content adverts for iPad users, or by using cookies to ensure blatant advertising only appears during the initial visit.
13. Create a Home screen icon
Although it doesn’t make a great deal of sense to do too much iPad-specific development, it’s worth spending a few minutes creating and uploading a Home screen icon. Safari for iOS can save bookmarks to a user’s Home screen, but if you don’t create an icon, you just get a thumbnail version of the web page, which usually looks awful.
Upload a PNG and link it to the web page and that will be used instead. Apple provides details on specifying multiple icons for different resolutions although you can also just upload a single, bigger PNG (say, at 512-by-512) and iOS will automatically scale it.
14. Change your visual language
Although tablets are increasingly popular, they’re still far from ubiquitous. However, they do hint at the future of computing, and so developer Cameron Koczon suggests you can use them as a means to reconsider how you design for everything: “With so many folks now experiencing the web through tablets and iPads, we’ve used this as an excuse to simplify visual language in our web apps, aiming at something decidedly more spartan and tappable: no hover states; icons instead of text; gesture-oriented animation. We’re aiming for as much parity between the web and tablet experience as possible.”
We ask Koczon if this approach has the potential to be detrimental to desktop users: “I don’t think so,” he responds. “Desktop apps are worth reexamining and touchscreen devices are an opportunity to do so. It also feels like the UI stuff we’re seeing with touch interfaces gives the user a whole lot more credit for figuring things out than most web apps do. It would be nice to bring that credit back into web apps.”
15. Bring back storytelling
Will Price, head of design at Heehaw Digital, also reckons designers should use the iPad and other tablets as an opportunity to reconsider aspects of the digital experience. He last year considered design implications relating to touchscreens and expected “more interaction, less clutter and more bite-sized information,” but he tells us touchscreens could have much wider-reaching implications for web design.
“I’m more interested in the impact for brands and digital communication,” says Price. “Gesture-based interfaces offer the chance to put storytelling back into the digital experienc: something that floats the boat of client and designer.”
Are you testing on the iPad (including the latest model) and optimising for the device? Have you created iPad-specific websites or web apps? Let us know in the comments.
