18. A page that looks like something

Unit C · A page somebody else can use

A page that looks like something

What we are making: the same page, but readable at arm's length on a phone. This is the session that makes your project look finished.

The four-second rule

Somebody walks past your device, glances at the screen for about four seconds, and walks on. In that time they should get one number, what it means, and how old it is. Anything else on the page is competing with those three things.

That is the whole of design for this year. The rest is typography.

The one session where you open the staple itself

Every other session you fill slots. Today you go into pageHead() and change the style block, because that is what it is there for — and it is the only part of the staple you ever edit.

The staple's style block. Change the numbers and the colours, not the shape.

1String style =

2 "<style>"

3 "body { font-family: sans-serif; text-align: center;"

4 " background: #16293D; color: white; }"

5 "h1 { font-size: 90px; margin: 40px 0 0 0; }"

6 "p { font-size: 22px; color: #9FB3C8; }"

7 "a { display: inline-block; padding: 18px 40px; margin: 10px;"

8 " font-size: 24px; background: #1F7A6F; color: white;"

9 " text-decoration: none; border-radius: 10px; }"

10 "</style>";

12String page = "<html><head>";

13page += "<meta name='viewport' content='width=device-width, initial-scale=1'>";

14page += style;

15page += "</head><body>";

16page += "<h1>" + String(t) + " C</h1>";

17page += "<p>living room, just now</p>";

18page += "</body></html>";

The one line that matters most

It is the viewport line. Without it a phone assumes your page was designed for a desktop monitor and shrinks the whole thing to fit — which is why your page has looked like a postage stamp until now. Add it and everything becomes readable instantly.

New words

CSSThe rules that say how a page looks, kept separate from what it says.

viewportThe line that tells a phone to use its own width.

pxPixels. 90px is a very big number on a phone screen, which is the point.

ContrastLight on dark, or dark on light. Grey on grey is neither.

Do it

Add the viewport line alone, first, and reload on a phone. Look at the difference.
Then add the style block.
Make the number bigger than feels sensible. Then bigger again.
Hold the phone at arm's length. If you have to lean in, it is too small.
Show it to somebody from another team from two metres away and ask what it says.

💡 Tip

The staple already calls pageHead() from every page you will ever build. That is why one change today changes all of them — including your project in May. Teams who instead paste the style into each page separately end up with five pages that look slightly different from each other, and no way to fix them all at once.

What you see	Why	What to do
It still looks tiny on a phone	The viewport line is missing or misspelled.	It goes in the head, before the style.
The style does nothing	The style block is in the body.	It belongs between `<head>` and `</head>`.
Quotes cause compile errors	Double quotes inside a C++ string.	Use single quotes in your HTML attributes. It is legal HTML.
Colours look fine on a laptop, awful on a phone	Phone screens are dimmer outdoors.	Test it where it will actually be used.

What you learned

One number, its meaning, its age. Everything else is decoration.
The viewport line is the difference between usable and unusable on a phone.
Write the style once, in a function, and reuse it all year.

Challenge optional — only if you finish early

Restyle your page so it is readable in bright sunlight, then test it outside.

17. A page that updates itself