Portrait & Landscape layouts - What is the UX guidelines for making two distinct layouts i.e. where the layouts will be significantly different from each other.

  • What does it mean when you say - 'the layouts will be significantly different from each other'?
    – Ren
    Oct 31, 2019 at 11:11

1 Answer 1


You could take a look at the Material Design Guidelines and how Responsive Layouts are approached.

A layout can be divided into columns based on the screen width. Material design splits the layout into 4-column, 8-column, and 12-column grids. The content on your page should be displayed based on these columns. Breakpoints can be used to determine the number of columns based on your screens width.

A layout can be split into UI regions. The UI regions should be organized depending on the breakpoints. An UI region could be a content area or the side navigation. You can i.e use collapsible UI regions for smaller screen widths, whilst displaying it permanently on a larger screen.

You can also have a look at Component Behavior in the Material Design Guidelines. This chapter describes how components behave between breakpoints and also shows some responsive patterns.

To answer your question:

If you design your layout responsively then switching the layout mode should be included automatically.

If your building web-pages with HTML you could have a look at bootstrap which could help you out a lot with building responsive layouts.

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