Responsive layout

[masakudamatsu]

Side margin increases by 1.5 times at 480px (= 320px x 1.5)

• A wider screen demands a wider whitespace on the sides
• To relate the width of side margins to the typographic elements, initially the space between lines and then the space between paragraphs.

Column width stops expanding at 33em (518.062px if base font size is 16px)

• To achieve the "optimal" measure (number of characters per line) of 66 (assuming one character width is 0.5em on average) (source: Elements of Typographic Style, cited in http://webtypography.net/2.1.2)
• Indeed, 33em wide paragraphs look great, ensuring the number of words to be around 12 per line so the reader needs to chunk words into a group of 3-4 up to the comfort limit of 4 times.
• "our eyes scan a line, pausing momentarily to record groups of three or four words. Studies have found that a reader can make three or four such pauses on a line before it becomes tiring."--Ilene Strizver

Side margin further increases by 1.5 times at 720px (= 480px x 1.5)

• Relevant only when the user sets the base font size to be 24px
• Otherwise, the max-width: 33em is binding, making side margins irrelevant.

Base font-size increases by (21/18) at 728px

• See the comment below for the rationale.

Two column layout from 799px

• The Control Panel has the fixed width of (320 - 2 between-line space length for mobile) (21/18) + 2 * between-paragraph space length for desktop (for side margins). To fix the width, we set flex: 0 0 ${controlPanelWidth}px for the control panel, flex: 0 0 ${sideMargin}px for the SpacerHorizontal to be placed in between.
• The left-hand side column has the same initial width and flexes up to 33em + side margins
• The rightmost side margin of between-paragraph space is added, because the Control Panel has a different background color
• The breakpoint of 799px is derived as 2 * Control Panel width + between-paragraph space length for desktop

Side margin increases by 1.5 times at 1080px (=720px x 1.5)

• Now it equals to the space between sections

Landing Page

• Set max-width: 700px for the logo and the description
• Let them right-aligned when the screen width exceeds 700px
• But the buttons are left-aligned with the logo and the description
• For this purpose, we wrap the main section with RightAligner (which sets the max-width) and then with a flex box (which right-aligns the RightAligner.

[masakudamatsu]

Breakpoint for base font-size

It should be the threshold for tablet devices, not laptops.

• Medium.com switches the font-size from 18px to 21px at 728px
• While we hold a smartphone with one hand, which allows us to see the screen at a very short distance, we hold a tablet with two hands. With two arms, a comfortable position implies the screen will be at some distance from eyes.
• Thus, the base font-size should be enlarged for tablet devices.
• cf. Small tablets like Nexus 7 are 600px wide. Judging from this video, we can hold it with one hand. So we don't need a larger font-size.

The reason why we have set x-height to match with medium.com is to take advantage of the user's familiarity to letter size. If so, we should also follow the breakpoint for font-size.

So we set 728px.

[masakudamatsu]

For very large screens, we delegate the task to issue #204