I'm designing a responsive website for my master degree thesis. It's my first experience in this field, so I'm wondering, when I'm designing for tablets I have to consider the portrait or the landscape view first?

  • 3
    yes (meaning that on a tablet, people will be using both, so you have to account for both equally)
    – DA01
    Aug 1 '12 at 18:06
  • Not sure what you mean by "first". Responsive means it should work well on both. Do you mean should you work top-down (single column and add as width goes up) vs bottom up (start with the "widest" layout and narrow down to the one column layout?)
    – Ben Brocka
    Aug 1 '12 at 20:59

Good question!

First: ask yourself, if users will view your website rather in landscape mode or in portrait mode?

Secondly: as DA01 mentioned in the comment, users will use both, landscape and portrait. Best solution would be (if possible) to design your website that it more or less looks the same in both view modes. This means, that all functions and visibilities are the same.

Suggestion: try to go through page by page and ask yourself, how the page should look in portrait and how in landscape mode. Sketch them simultaneously.

If you first sketch only portrait or only landscape you might find out later that you may have to change things again. Otherwise, if you do it simultaneously, it will be much easier as you see challenges right away and it will help you make it attractive for both view modes.


I think both. While portrait is more convenient in some cases (it's easier to consume content that is less wide, especially when it's text), landscape is more learned (all the history of TV, cinema, etc.), natural (our sight is more "horizontally oriented" for perceiving landscapes, and what is on the ground), and in some cases turning landscape gives a "boost" for text sizes, which makes the content easier to consume again. So, pros and cons.

However, you can refer to this question: Are there any statistics on what orientation people prefer to hold tablets at? which gives a pretty nice statistical info, which leads to a conclusion that landscape should be more important.

Another thought: if you have a website that is created for landscape, turning the device portrait will make the content smaller (including text, of course if you don't provide alternative layout). In the same time, turning portrait content to landscape will increase the readability of the text, but some elements will go below the fold.

But anyway - I think both.



You won't ever know in which orientation your viewers will be using their device (or even if it is a device which can be rotated) so don't pigeon-hole your design by designing it to fit a specific device context.

Design something that works as well as possible for all devices and then tweak to prevent anything looking 'broken' if required.

  • I would give this more than +1 if I could - it's the best advice. May 28 '13 at 20:24

To some degree, this is your prerogative and of course it depends on what the app is going to be doing. If you are presenting stuff (eg text) that's meant to be read, the landscape view might be better to concentrate on.

You might ask your users what they want and need?


The thing about responsive, at least in my experience, is that you’ll have problems if you single out a specific screen size (or sizes) in your design process. By thinking in fixed widths, even if you’re designing up several flat visuals for different sizes, you’re not considering the hundreds of other screen widths that lie in between the ones you’ve selected.

If you don’t think about the big picture in your design process, you might encounter several issues when you come to implementation. It’s a mistake I had to make several times before changing the way I approached responsive sites!

My recommended approach nowadays is to think about your look-and-feel as a ‘style-tile’. Remove the actual page layout from the equation and suss out the overarching visual direction separately. See http://styletil.es/ for more about this.

When putting together your page layout, your best bet is to do so in the browser. This allows you to see how content will scale and wrap across all screen widths. Don’t worry if you’re not a code-whiz (I’m certainly not!)… Frameworks like http://foundation.zurb.com/ have made responsive prototyping really easy for non-developers.

Best of luck in your thesis!! :-)

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

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