4

When designing responsive layouts I tend to do 2 sets of wireframes. I design for both mobile and desktop and assume that the iPad will adopt the same layout as the desktop due to size. ( this is if the function of the iPad site isn't dissimilar from desktop). Is this a correct assumption to make? Should I be putting more thought into the iPad layout and be designing separate wireframes for this platform? (even though the iPad site won't do anything different from the desktop).

The other question I had is shouldn't I align the iPad design more to the mobile as the interactions are the same? Despite more real estate to play with on the iPad. Does designing mobile first do this for you anyway?

2
  • What do you mean by "assume"? You choose whether they will be the same.
    – JohnGB
    Mar 29, 2013 at 16:25
  • As in I never sit down and work out what the iPad design will be. As iPad enables you to view a full web page I use the same design as the desktop but I'm not sure if this is correct. Then thinking about it if I am going to align the iPad design with something shouldnt it be mobile as they have similar interactions. Hope this makes sense? I'm questioning my approach ..
    – Reloaded
    Mar 29, 2013 at 16:28

4 Answers 4

3

When it comes to design and layout, you have physical dimensions and orientation. In CSS orientation is determined by the height to width ratio of the display. If the browser window is taller than it is wide, portrait is assumed (a monitor placed in a vertical orientation). If the browser window is wider than it is tall, landscape is assumed (most monitors in their normal orientation).

With the marketplace for tablet devices going well beyond the defined dimensions of the iPad (1024 by 768), versus something like the iPad mini (still 1024 by 768, but in a smaller physical size), versus all the variations possible with Android and other platforms...I would say it depends. You may want to consider researching target audience, user, etc. and not fall into the trap of assuming, just because you, the CEO, and the client have an iPad that all tablets are created equal.

There are other consideration beyond those of layout/design and size. With a tablet (mobile in general), the same assumptions regarding bandwidth should probably not be used. So, if your desktop design has 5 main HTTP requests to load CSS and JS files, and the page in question has 100 images between UI and content...you should probably design a different experience. Further, JS animations, for example, are dramatically slower/sketchy on many mobile devices; so, you may wish to design different interactive qualities.

A final design consideration - incorporating the information above - would be to design with the lowest possibility/capability in mind.

You can, generally speaking, divide handheld devices into 3 categories - small (most Blackberries, for example), medium (iPhone/iPod touch sizes), and large (some of the more recent Android devices). (Where you determine the cut-off to be is kind of up to you, and when exactly a handheld device becomes a tablet is, again, up to you, but there are sites out there with information on common sizes.) Also, chances are, these devices will access the site via a data connection over a cellular network.

You can, generally speaking, divide tablet devices into 2 categories - small (iPad Mini, Kindle Fire, etc) and medium (iPad, and others). After something becomes around 13" or more I tend to classify it as a monitor...but, that's just me...the main point is these devices are self-contained in that the display and the guts are one unit - unlike a laptop or e-book. These devices, will probably connect via WiFi; however, can also connect via cellular data networks - which should be a consideration when looking at the difference between the overall UX storyboards and wireframes you put together for desktop, tablet, and handheld.

Desktop, can also be divided into small (e-book), medium (most laptops), and large (monitors of a size roughly 19" or more) - you may even consider extra-large (projectors and televisions).

To hopefully wrap this up. From a physical space perspective - you can align the desktop and tablet experiences; however, you should take into consideration three fundamental differences: (1) the possible slower bandwidth compared to most desktops connected with WiFi or land-lined somehow, (2) the different input device being used (the bold button on Stack forms, for example, is ill-suited to the finger as an input device - it's too small and placed too close to the other buttons), and (3) the hardware differences such as processors and RAM. You will also want to take into consideration the rest of your storyboards - for example, opacity changes and animations in general are very expensive; so, you may have a heavily animated (what we commonly hear as "interactive" from customers or, probably more what they are searching for "engaging") desktop experience - but, on a tablet, you will kill the person's battery, run the very weak processor (in relative comparison) pretty heavy, and have to increase development time to allow for the generation of CSS3 transitions over JavaScript animations. Also, consider environment: handheld devices are generally used for rapid access to what you are looking for, not leisurely surfing the web (unless no other alternative is available); tablets are more of a hybrid; and desktops, laptops, and the like are more apt to be leisurely capable (so it's kind of okay to have an animation that takes 5 seconds - or loops over and over).

4

If you're talking just about resolution and not the interaction, then you can consider the iPad/Top range android tablets as desktops, since they have enough resolution to fit the content in a single view.

But, when thinking of interaction you have to differentiate into desktop (mouse+keyboard) vs mobile (touch+gesture).

3

I find that for most situations the following are 4 layouts are sufficient:

  • Smartphone portrait
  • Smartphone landscape
  • Tablet portrait
  • Tablet landscape

The exact dimensions that you use for each may vary a bit, but that is rarely an issue as you are really just choosing the boundary dimensions between the various layouts.

For most applications, what works for a larger (about 10 - 11 inch) tablet will work fine for a desktop layout. Desktop interactions don't always work on tablets (hover in particular), but tablet interactions usually work well on desktops. So I haven't found much reason to change the interactions between tablet and desktop simply by designing for touch interactions in the first place.

3
  • Thank you for your answer John. I'm slightly worried as I've never before done a set of wireframes for mobile landscape view :-/
    – Reloaded
    Mar 29, 2013 at 16:36
  • Does the landscape layout differ greatly, that it requires a separate design?
    – Reloaded
    Mar 29, 2013 at 16:41
  • @Reloaded It really depends on your design. Some designs work well when using the same layout for portrait and landscape. It's not a hard and fast rule, just something that you may need to do.
    – JohnGB
    Mar 29, 2013 at 17:04
2

The current consensual best practice (it changes) is to not design with a set of device sizes in mind, but to focus on layouts that work well for the content, that is make the content look nicely laid out at any width. It's simply prone to obsolescence to focus popular device sizes as we're getting new devices all the time.

For testing, I gradually narrow my browser and try to have the content always be nicely laid out, and when I pick breakpoints I give no heed to potential device widths.

Of course this method won't work if you decide to put substantially different content on a tablet/phone than a desktop.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.