MYP Design Responsive and Mobile Design Notes

One Site, Every Screen, No Second Version

1. Responsive design means one set of HTML and CSS that rearranges itself to fit anything from a 360px phone to a 1920px monitor.
2. Most web traffic now arrives on phones, so a layout that only works at 1280px fails the majority of visitors.
3. The old answer was a separate mobile site at m.example.com, which meant building everything twice and watching the two copies drift apart.
4. The content stays identical across every width; only the arrangement, the sizes and the spacing change.
5. Responsive covers a laptop window dragged narrow and a tablet turned sideways, not just phones.

The Viewport Tag Is the Line Everything Depends On

1. Left alone, a phone pretends to be about 980px wide and then shrinks the whole page to fit, so your careful layout arrives tiny.
2. <meta name="viewport" content="width=device-width, initial-scale=1"> goes in the head and stops that.
3. width=device-width tells the CSS to treat a 390px phone as 390px wide rather than 980px.
4. initial-scale=1 opens the page at normal zoom instead of zoomed out.
5. Never add user-scalable=no, because it stops a person with low vision pinching to zoom in on your text.

Relative Units Let the Layout Breathe

1. A width in px is the same on every screen, while a width in % is measured against the parent, so it flexes as the parent does.
2. rem is a multiple of the root font size, normally 16px, so 1.5rem is 24px and it grows if the user raises their default text size.
3. em is a multiple of the element's own font size, which makes it right for padding inside a button that should grow with its label.
4. vw and vh are percentages of the viewport, so font-size: 5vw is 18px on a 360px phone and 64px on a 1280px screen.
5. Setting max-width: 65ch on body text stops a paragraph running to 200 characters a line on a wide monitor, which nobody can read comfortably.
6. Build the layout from percentages and fr units, and save px for hairline borders and small fixed details.

Images Have to Shrink Too

1. img { max-width: 100%; height: auto; } is the single rule that stops a 2000px photo bursting out of a 360px phone and forcing sideways scrolling.
2. max-width lets the picture shrink but never stretches it past its real size, where it would go soft and blocky.
3. height: auto keeps the aspect ratio, so faces stay the right shape as the width changes.
4. The srcset attribute offers the browser several sizes of the same photo, so a phone downloads the 600px file and a desktop takes the 1600px one.
5. object-fit: cover crops an image to fill a fixed box rather than squashing it, which is what a card thumbnail needs.

Media Queries Change the Rules at a Width

1. A media query wraps a block of CSS in a condition, and that condition is usually the width of the viewport.
2. @media (min-width: 600px) { } applies the rules inside only when the screen is at least 600px across.
3. The width at which you change the layout is called a breakpoint.
4. Pick breakpoints where your own content starts to look wrong, found by dragging the window slowly, rather than copying a list of phone model sizes that changes every year.
5. Two or three breakpoints handle almost any school project, and ten is a sign the layout is too fragile.
6. Media queries can test more than width, and @media (prefers-reduced-motion: reduce) lets you switch off animation for people who feel sick watching it.

Mobile First Means Writing the Small Layout First

1. Mobile first means your ordinary CSS, the part outside any media query, describes the narrow layout.
2. Each media query then adds what a wider screen makes possible, which is why they all use min-width.
3. The narrow version is normally one column, full width images and stacked navigation, so it is also the easiest thing to write.
4. Starting wide and stripping things away with max-width leaves an old phone downloading and working through every desktop rule it will never use.
5. It forces a real decision about what matters, because only so much fits above the fold on a 360px screen.
   1. Deciding what that narrow layout should show first, and how the menu collapses, is a wireframing job covered in the interface design articles.

Fingers Are Blunt: Touch Targets and Real Testing

1. A fingertip covers roughly 9mm of screen, so make anything tappable at least 44 by 44 CSS pixels.
2. Padding on a link grows the target without making the text bigger, which is usually the fix for a cramped menu.
3. Leave at least 8px of space between two targets so a thumb cannot hit both at once.
4. Touchscreens have no hover, so anything hidden behind :hover needs a tap version or it is invisible on a phone.
5. Test at 360px, 768px and 1280px as a minimum, using the device toolbar in developer tools.
6. Then test on a borrowed phone, because the simulator cannot show you the on screen keyboard covering half your form.
7. Screenshots at three widths, annotated with what you changed and why, make solid testing evidence for Criterion D.