We have a desktop web app which we wanted to extend to Tablet device. When we changed the layout to fit the tablet, the interface got cluttered and unusable. We are thinking of doing a different design to remove unwanted stuff and keep only those features which a tablet user generally uses. Is it better to have a separate UI for a tablet/mobile to provide a good UX?

  • Are you asking whether you should use one design for mobile and another for the tablet or do you mean one design for the desktop and one for mobile and tablet?
    – Michael
    May 16, 2012 at 11:18
  • @Michael it's the latter he means. One version for desktop and one for mobile/tablet. May 16, 2012 at 11:29
  • Then you provide the answer yourself, right? You already said, that the UI is "unusable" if simply transferred 1:1. Hence, you have to build a seperate one for those devices.
    – Michael
    May 16, 2012 at 11:33
  • @AndroidHustle you are correct
    – Shivanand
    May 16, 2012 at 12:34
  • 1
    @Michael If I design a separate site, I have to maintain 2 sites which is expensive. I wanted to check with the community how they are managing such issues.
    – Shivanand
    May 16, 2012 at 12:42

4 Answers 4


It's precisely because you only 'changed the layout' of your desktop app that your app seems cluttered and unusable on the tablet. It hasn't been designed for mobile - it was designed for desktop.

The fact is you can't just change the layout of a desktop app and expect that to transistion suddenly to different type of device with a different set of constraints, a different set of capabilities and with users that have a different set of behaviours and a different set of expectations.

You have to consider the bigger picture - the customer journey map that says how users arrive, use, engage, and leave your application on the tablet or mobile devices.

You have to design for the mobile experience, the use patterns, the location, the orientation, the sensors, and the decreased screen real estate - it's a completely different mindset than designing for desktop.

Maybe in some cases, especially where media is consumed rather than engaged with, it's acceptable to add a dozen lines of javascript to make the layout responsive, but for a web app that requires engagement, it's rarely the right option.

But as well as optimizing for the mobile device, you also have to be consistent with the desktop version. Yes they conflict sometimes, nobody is saying this stuff is easy.

Maybe one or two things are unlikely to be used in the mobile workflow, and they can be removed for tablet/mobile but in the process, ask yourself 'were they really needed in the first place'?.

Users who move between desktop and mobile versions may well be frustrated to find features missing on the mobile version so try not to remove features that do get used - sure, make them available, but don't make everything fight for space - be clever about the way the mobile experience is defined and designed.

In the process you may well learn something about your product that can feed back in to the desktop version. Designing within constraints really helps to focus on what is important. Look at the things you're considering removing, ask why was that feature ok to remove and not another, why was it there, who uses it, how does it get used? Question everything. Get user feedback.

You have to see the bigger picture when trying to provide what you might term a cross-channel experience - you're not designing for different users - it's the same user! It's not even really cross channel - it should be channel-less

Honestly I could go on for hours...In short - don't think of it as a different layout - think of it as a different experience.

  • 1
    Well, you should be reasonably consistent with the desktop version. Many times device conventions (panning instead of scrolling, no "hover" state) beat out your specific site's conventions.
    – Ben Brocka
    May 16, 2012 at 16:48
  • @Ben I am not clear by what you meant by "Many times device conventions (panning instead of scrolling, no "hover" state) beat out your specific site's conventions." Can you expand a bit with an example?
    – Shivanand
    May 17, 2012 at 5:57
  • 1
    @Shivanand I think Ben is covering my point where I said about optimizing & consistency are two conflicting things due to the constraints of mobile/tablet. Eg there is no hover state, so tooltips, auto zoom, auto dropdown, etc are not possible. There are different mechanisms for moving about the canvas or within certain areas of the canvas - on desktop you can have nested scrollable areas with independent scrollbars; on mobile you effectively have only one large scrollable area. There are alternative methods of interaction but this is the forced 'optimization at the expense of consistency'. May 17, 2012 at 6:32

In addition to mere layout problems, i.e. having much information on the screen that comes with transferring an application on to a device with a compromised screen size it also depends on the application you're developing and which user interactive controls it utilizes.

If the design pattern of an applications GUI heavily relies on desktop specific features (hovering, fine direct manipulation, multiple modal windows etc...) it will not work well for a hand held device, if at all.

If this is the case you would have to develop additional versions of the web app to have it accessible to hand held devices.


In my opinion, yes. It is better to develop different UI for mobile/tablet. Imagine a 1000px width information to be read in mobile device. As a user you would want minimal scroll when you are using handheld devices. The desktop design is built for larger resolutions. Therefore it is not a good idea to squeeze the same design into a smaller resolution device.

After all readability/usability is key in mobile UI development.

Here are some useful link you might want to read before considering my opinion.

Why Separate Mobile & Desktop Web Pages?

Responsive Web Design or Separate Mobile Site?


The majority of web sites/apps will greatly benefit having a UI designed specifically for a device. Since it's not practical to create a design for every device out there, my general rule would be to develop four designs: mobile (smartphone), small tablet (Kindle Fire), large tablet (iPad), and desktop.

I noticed in your comment above you discuss creating separate code bases for each site. This is unnecessary duplication. I recommend looking into responsive design or at least creating different stylesheets to target devices.

If you're unfamiliar with responsive design, I recommend reading the brief Wikipedia page and check out the references.

A great responsive example site is Food Sense. It has four different states, which you can easily view as you re-size your browser window.

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.