Sign inRegisterCheck connection

Layout QA for a Three-Column Weather Page

Test a three-column weather layout—current, forecast, and webcam—for overflow, unit labels, and print. A public /test/ URL is a security smell.

Back to Cumulus weather software guides

/test/3column.php is the kind of URL a Cumulus operator left on a public host so a template could be eyeballed from work. The three panes it implied—current conditions, a forecast block, and a webcam—are still a common weather-site layout. This article is about layout quality assurance: overflow, unit labels that detach from their numbers, and print behavior. It is not a visual theme pitch, not a live dashboard, and not a debugger you should leave world-readable.

A public /test/ path is a security smell. It often dumps include paths, unpublished CSS, query parameters that pick a template file, or comments that name the station directory. Layout checks belong in a local browser, a screenshot fixture, or a print-to-PDF job you run on purpose. TNET does not rehost the historical PHP.

Historical context

Personal-weather websites in the Cumulus era typically packed three jobs onto one home view: what the logger says now, what a forecast product says later, and a still from a yard camera. Operators tested that packing with a dedicated page so they could stretch the window, switch units, and hit Print without disturbing the live index. Incoming links treated /test/3column.php as if it were the operational site. The restoration keeps the address as a methods page for the layout problem those links actually named.

Neighboring URLs answer different questions. A sample graph is about figure captions. A Nivo-style webcam slider is about timestamp order in a sequence. A mobile forecast view is about labeling forecast text so it cannot be mistaken for a thermometer. This URL is the three-pane packing problem.

Three columns are three evidence families

Layout QA fails scientifically when the three panes look like one observation.

Current conditions are observed values from the station packet or XML snapshot: temperature, humidity, pressure, rain, wind, and a clock. They need a unit on every quantity and a freshness bound. A stale “now” pane is not current weather.

Forecast is a forecast product: NWS text, a model field, or a Cumulus forecast phrase. It must not inherit the same chrome as the current pane. If both panes use the same large numeral style, a printout or a color-blind view collapses them into one story. Official warnings stay with the National Weather Service. TNET is not an official warning service.

Webcam is an image. A JPEG of the yard is not a calibrated sky observation and not a temperature. The webcam pipeline already states interval, stamp, and privacy. In a three-column test, the camera pane is a layout object: it must not shove the current pane off-screen, crop the unit off a pressure reading, or print as a black rectangle that hides the numbers beside it.

Mixing families on one unlabeled row is how a visitor cites a model phrase as “the station.” Layout QA exists to make the three families survive a narrow window, a screen reader, and a grayscale print.

Overflow is a data-quality failure

Overflow is not merely ugly. When a string does not fit, the part that vanishes is often the part that made the value usable.

Typical overflow on a three-column weather page:

  • Station name and location wrap onto a second line and push the temperature below the fold on a phone.
  • Dual units (21.4 °C / 70.5 °F) wrap so the Fahrenheit figure sits under the wrong label.
  • Pressure with unit and tendency (1013.2 hPa, rising) loses hPa or rising depending on which CSS overflow: hidden won.
  • METAR or synoptic lines in a sidebar are one long token. They overflow or they force the webcam column to zero width.
  • Webcam captions with camera ID plus ISO time are longer than the image is wide. The time is the scientifically useful part; it is also the part text-overflow: ellipsis usually cuts.

Test at widths that real visitors used: a 320-pixel phone, a 768-pixel tablet, a 1024-pixel laptop, and a 1920-pixel monitor with a large default font. Do not test only the operator’s desktop. If the template has a sticky header, test with a 200-percent browser zoom; unit suffixes are the first casualties.

Horizontal scroll on the current pane is a fail. Visitors who scroll sideways lose the forecast context that was supposed to sit beside the observation. A column that drops below the other two on a phone is acceptable only if the order remains current, then forecast, then webcam, and each pane keeps its heading.

Unit labels must travel with the number

A layout test that only checks “the number is visible” is incomplete. The unit is part of the observation.

Rules that belong in the QA script, whether that script is a human checklist or a screenshot diff:

  1. The unit sits in the same accessible name as the value (21.4 degrees Celsius), not as a decorative sibling that CSS can float into another column.
  2. Degree symbols do not render as ° or as a missing glyph. Encoding mistakes on historical ISO-8859-1 templates still show up when a UTF-8 page includes an old fragment.
  3. Rain mm versus in, pressure hPa versus inHg, and wind mph versus kt versus m/s are stated, not inferred from the operator’s country.
  4. A missing value is -- plus a still-visible unit, or a single missing token—not a blank cell that looks like zero.

Print and high-contrast modes are the honest test. Colors that encoded “metric versus imperial” disappear. If the only unit cue was a blue numeral, the printout is unlabeled. That is the same caption discipline the sample-graph page argues for figures; here it applies to HTML layout.

Print is a first-class layout, not an afterthought

Operators printed the three-column page for a logbook or a club meeting. @media print is therefore part of the weather product.

What to assert:

  • Page breaks do not split a value from its unit or a forecast paragraph from its “forecast” heading.
  • Background colors are not the only distinction between observed and forecast panes. Print often drops backgrounds. Use a text heading, not a tint.
  • Webcam ink. A full-page camera image can push the current pane onto page two, where it looks like a different product. Provide a print style that shrinks or omits the image and keeps the numbers.
  • Headers and URLs. A printed footer that shows /test/3column.php teaches later readers that the sheet was a sandbox. That is useful. A footer that shows only the pretty domain teaches them it was operational.

CSS Paged Media is the standards home for page size and breaks (W3C CSS Paged Media, last checked 13 August 2026). You do not need a perfect typesetting engine. You need a print stylesheet that preserves identity, units, and evidence family.

How to run layout QA without a public /test/ URL

Do not leave 3column.php on the public vhost. Patterns that stay off the open web:

  • Render the template locally against fixtures: a labeled current-conditions structure, a labeled forecast string, and a named webcam still that is not today’s sky. Fixtures are not current weather.
  • Capture screenshots at the widths above and diff them when CSS changes. A 2-pixel shift in a decorative rule is noise; a unit suffix leaving the pane is a failure.
  • Print to PDF in the same job. Assert that the PDF text layer still contains the unit strings and the word forecast.
  • Deny /test/ in the web server except on loopback if you must keep a visual page at all. A CLI or CI screenshot job is better, because it does not train the team to debug in production.

Query parameters that select a CSS file or an include path are especially unsafe on a public test URL. Layout QA does not need them.

What the historical URL should have made obvious

A three-column weather page is a packing of three different products. Overflow, detached units, and print collapse are how that packing lies. Theme galleries and color palettes are a different job. This address stays a QA article so the backlink still names the right problem.

TNET’s public research treats source identity, units, and freshness as quality controls—see data sources, quality controls, and methodology. Distinguishing observed conditions from forecast language is the same vocabulary as how the service works. The Cumulus hub lists the related historical pages. This /test/ URL is not a live layout lab.

Sources