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?
-
3yes (meaning that on a tablet, people will be using both, so you have to account for both equally)– DA01Commented Aug 1, 2012 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?)– ZeldaCommented Aug 1, 2012 at 20:59
Add a comment
|
5 Answers
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.
answered Feb 12, 2013 at 12:25
-
I asked a question recently about whether rotating the device should zoom or re-trigger the media queries that has some useful answers: ux.stackexchange.com/questions/24255/…– JonW ♦Commented Feb 12, 2013 at 12:29
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. Commented May 28, 2013 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!! :-)
