Responsive designs allow websites to adapt to different screen sizes and display types. However, some designers suggest that a responsive design should also adapt to orientation changes.

a good responsive design will still adapt when transitioning from portrait to landscape on any device!

Source: Jake Rocheleau

In addition to designing for both landscape and portrait (and enabling those orientations to possibly switch in an instant upon page load), we must consider the hundreds of different screen sizes.

Source: Kayla Knight

However, I'm slightly concerned that a design changing when the user rotates their device could be confusing. Users frequently rotate their devices to get a better look at some content. If the design changed suddenly, would we not be getting in the user's way?

So my question is are there any benefits to adapating to orientation? If a design does adapt to orientation, what is the best way to do that?


1 Answer 1


A well thought-out and executed responsive design takes advantage of the screen size. It doesn't hide content on viewport change; it simply uses the available space to better display that content. What we're seeing with the proliferation of Bootstrap and other frameworks is generally not inline with this thinking, and rather design for certain viewports as opposed to all viewports.

Responsive design should adapt to whatever the viewport is regardless of orientation.

Statements such as:

Users frequently rotate their devices to get a better look at some content..

Seem unqualified. Do you have research or user data that supports this? Why would a user rotate their device to get a better look at content? Is it because the normal orientation isn't meeting their expectations?

  • 1
    By 'get a better look at content', I was specifically think of viewing images which are already in landscape, since you could 'view more' of the image in landscape mode.
    – Brendon
    Jul 25, 2013 at 15:06

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