How are sites adapting to cater for iPad (or other tablets)?

17 Jan 2012 - 6:15am
2 years ago
9 replies
2149 reads
netwiz
2010

Quite aside from developing apps - or webapps, iPads are accounting for a significant and growing proportion of traffic to websites through the browser. To optimise a site for both what you might call PC web and for tablets, there's more to it than just offering alternatives to Flash.

For example, 'clickable' areas should be defined as larger than normal to account for 'fat fingers'; text size should be reviewed; sites should define input fields as e.g. 'search' or 'email address' so that the appropriate keyboard displays on the device.

I'd be interested to know what other rules people can think of. Also, does anyone know of sites that have actually been modified or re-designed to take account of these requirements?

thanks

Nick Gassman
UX http://ba.com

Comments

18 Jan 2012 - 7:19am
Jeffrey Morgan
2012

Designs that reveal information when users hover their mouse cursor over interactive elements need to be rethought because fingers can't hover.

17 Jan 2012 - 8:14am
Simon North
2007

I'm slowly building up a gallery of interesting websites adapted for tablets.Not specifically because I was looking for rules on tablet adaptions, but more because I was interested in seeing how HTML5 was being adopted. Faced with Apple's refusal to support Flash, and Adobe's decision to shift their focus away from Flash to HTML5, it seemed natural that a lot would be governed by what is possible in HTML5 (such as gestures).

I think 'fat fingers' is actually based on old ideas (clickable links), when in fact we should be thinking much more in terms of 'swipe and wipe'. A result of this is a change in orientation from the vertical (scroll) to horizontal (swipe). You can see the general trend appearing already, but there are some very interesting variations in approach : MTV (www.mtv.com/touch), using horizontal & vertical panels, Alice radio 97@3 (radioalice.radio.com), which uses swipe, flip and a nice approach to menus, and ESPN which is based on a block panel structure.

Simon.

Quintiq.

17 Jan 2012 - 12:06pm
Matt Nish-Lapidus
2007

I highly recommend reading the book Responsive Web Design (http://www.abookapart.com/products/responsive-web-design). It's a great primer on designing and building for the web on all devices.

18 Jan 2012 - 7:29am
netwiz
2010

Can anyone point me in the direction of information on how to apply responsive design to functional pages? All of the examples that I've seen so far (as also with fluid design, and adaptive design) have been applied to content pages. I'm not sure it makes much sense to apply responsive design to pages on a site if you can't then use the functions on the site - such as booking a flight.

Functional pages are typically dependent on relative layout and spacing, and shuffling elements around and re-sizing them will often just break it for the user, and would at least require an additional burden of usability testing. So my view at present, which can be changed with evidence, is that responsive design just isn't appropriate for a site like ba.com.

Are there any examples of major sites implementing responsive design throughout the site? What are the development overheads? Is there any evidence that it leads to improved conversions, or satisfaction, versus other approaches?

As a side note, I don't know why it's called 'responsive design', as 'adaptive design' seems a better term for it. It's just a personal thing.

thanks

Nick Gassman
UX http://ba.com

18 Jan 2012 - 8:49am
Matt Nish-Lapidus
2007

Responsive Design is one method of building web sites and apps that work accross many screen sizes.. so the real question your asking is do sites like ba.com need to offer complete mobile functionality. That's a complex question and needs to be answered on a per-project basis, but with the crazy growth in mobile internet usage I'd say it's becoming a reqirement to have at least the essentials available to mobile browsers. Forms are easy to handle, but need to be broken up in a different way. This can be handled using smart CSS and JS in the presentation layer.

Responsive design isn't just about moving elements around on the screen, it can be used to present a compeltely different layout/UI to each screen size. If the site is coded well the underlying HTML should work for many different presentation layouts by changing the CSS (and possibly JS). Responsive Design offers a set of techniques for dealing with style sheet switching and designing for multiple screen sizes at once. This is a huge step up from building multiple sites for each platform from a workflow perspective, as well as from the end user's perspective. For the person using the site it means that they don't end up stuck in a mobile version when they email themselves (or others) a link to a page from their phone... It means that they will get a size optimized experience for any screen no matter what device it is because the site doens't rely on device or browser detection to determine the presentation... 

IMO, this approach, regardless of specific techniques, is appropriate for anything that runs in a browser these days. If you thought it was hard to design for compatibility between Safari, IE, FireFox, and other desktop browsers now we throw a handful of new mobile browsers into the mix, and a completely unpredictable screen size. Techniques like Response have emerged to handle this new situation. They aren't perfect, but it's a major step in the right direction.

The biggest site using Responsive techniquest (that I know of) is http://www.bostonglobe.com/ ... It's still a very new technique, so big corporate sites aren't using it yet, but in time they will. You'll see it on a lot of startup and personal sites at first, then it will start showing up in bigger places. All new web business that we take on is using this (or similar) technique because our clients, big and small, are realizing that mobile is an integral part of the web and just getting bigger.

18 Jan 2012 - 12:39pm
netwiz
2010

Thanks Matt, that's a very useful reply.

I guess I'm still of a view that it still remains to be seen how cost effective this approach is for any given functional page, but I think from your post I would be inclined to give it more consideration.

thanks

Nick Gassman
UX http://ba.com

18 Jan 2012 - 1:17pm
Matt Nish-Lapidus
2007

Glad to head that! In my experience it's no harder/more expensive to design responsive than to do more "traditional" alternate versions for mobile etc. From a development perspective responsive is far cheaper because it only requires changes to the CSS, the underlying site only needs to be built once.

19 Jan 2012 - 7:31am
Simon North
2007

I think the Boston Globe site is nice; it resizes downwards very well (though it fails completely when you scale it up to 2 or 3 monitors, but perhaps that was too much to ask). It resizes very nicely on a iPad and handles a change in orientation nicely. It also includes some provisions for tablet users in the way that the Magazine inlay can be pulled horizontally for new content. The affordances are a bit lost though as all the other panels have the same visual clues, but none of the behavior except for Columnists, which has a different visual clue. This inconsistency is a little frustrating and/or disappointing. 

Responsive design (and Boston Globe) is great but, I contend, still old news. It doesn't exploit the extra interaction. Please take a look at the Alice@97.3 site on an iPad and you'll see what I mean.

Simon North.

Quintiq.

19 Jan 2012 - 9:11am
Matt Nish-Lapidus
2007

I agree with you about the Boston Globe completely. It's a great start, but could go further to being truly touch friendly on top of how well it adapts to screen sizes.

However, I don't think Responsive Design as a technique is "old news".. what you're talking about it also adding touch specific interactions where they are needed. This is somethign that could easily be accomodated with Responsive techniques and some well constructed Javascript. Responsive is still my favourite way of adapting layout and UI elements for different screens, however it's really just a presentation layer method. Pair that with some smart JS to handle new interactions based on device (or assumptions based on size) and you've got a complete solution.

Syndicate content Get the feed