Responsive Design Principles

Test Scenarios

• Common Desktop (1920*1080)

• High resolution (usually 2k-4k) high size of text (200%).

  How to understand the size of text? e.g. if 1920 * 1200 screen has 200%, you could consider it as 810 * 600 resolution approximately.

• Laptop (surface book) 30002000 with 200% == 15001000 (remove top and bottom space) => 1500*750

• Mobile Device (low priority)

Design principles

• Mobile First Principle. Always consider small resolutions first (including large size of text) and then large resolutions (small size of text).

• It is always first priority to align components vertically than horizontally

• Take care of the boundary when scroll bar appears.

  Scroll bar means the content goes beyond the space assigned to it. So we should consider it as unexpected and then decide the solution.

• Always has a main section and at most one complementary section. The width of complementary section should less than 1/3 of main section.

• The sidebar (navbar) could be hidden when there is not enough horizontal space.

• Set a boundary that if the horizontal space is large enough, some vertical components could be set horizontally.

  Always be careful and tested when decide to put components horizontally.