Content before chrome

The first responsive sketches for C62Y failed for a reason I kept trying to solve with CSS: the content had no declared hierarchy.

The equipment catalogue contained model names, categories, photographs, measurements, compatibility notes, availability, manuals, descriptions, and a growing set of specifications. The desktop design had enough width to give each field a box. On a narrow screen, those boxes had to form an order.

I kept asking which column should stack first. The better question was which information a person needed first and which relationships made a comparison useful.

Until the content could answer that, responsive layout was moving ambiguity around.

The old table was the hidden model

The source data had grown as a spreadsheet-shaped record. Every product occupied a row. Every property occupied a column. That shape was convenient for entry and quietly became the application’s information architecture.

The page rendered the columns in roughly their stored order. The comparison screen exposed more of them at once. Empty cells received a dash. Long values wrapped wherever the table allowed.

The model made several claims it did not mean to make:

• Every property was equally important because each had one column.
• Every product could be compared through the same fields.
• A missing value had one meaning.
• The stored order was a useful reading order.
• A short label was enough context for every value.

The wide desktop page softened those problems with spacing and visual grouping. The narrow page removed the spare width and made the missing structure obvious.

I could not responsibly hide half the columns on a phone because the data had never said which half was secondary. I could not turn each row into a card because the field names did not describe their role in a decision.

Before changing layout, I needed to change what the catalogue knew about its own content.

Identity, decision, and reference

I printed several product records and sorted their fields into three groups.

Identity answered what the item was:

• Manufacturer and model.
• Category and variant.
• Recognizable image.
• Short availability or lifecycle state.

Decision information helped distinguish plausible choices:

• The small set of category-specific specifications people actually compared.
• Compatibility constraints.
• The most consequential dimensions or capacities.
• A clear statement when two products were not directly comparable.

Reference information supported work after identification or selection:

• Full dimensions.
• Manuals and documents.
• Replacement parts.
• Secondary notes and less frequently used properties.

The groups were not universal truths about equipment. They were a working content model for this catalogue. Their value was that they explained why a field appeared and what should remain nearby.

The narrow page could now present identity, decision, and reference in sequence. The wide page could place identity beside decision details because both remained explicit regions. The comparison view could lead with the category’s decision fields and make the complete reference table available afterward.

The CSS became simpler because the content stopped asking presentation to invent priority.

Priority did not mean deletion

My first attempt at mobile hierarchy removed reference information from the narrow view. I called it progressive disclosure, but much of it was simply absence.

One testing scenario made the mistake clear. A person identifying a replacement part needed a reference dimension I had classified as secondary. On a desktop, it sat in the lower portion of the page. On the phone, the field did not exist.

Secondary in initial visual emphasis did not mean optional to the task.

I changed the design so reference information moved later and could be grouped into readable sections. The full values remained in the document. A local disclosure could reduce initial density when it preserved ordinary headings, links, and access without script.

This distinction became a durable rule: priority governs order and emphasis before it governs availability.

Deleting content based on viewport assumes the smaller device implies a smaller task. The catalogue’s field context suggested the opposite. A phone could be the device available beside the equipment, where obscure reference details mattered most.

The content model needed to support different moments without assigning intent to screen width.

Empty was not a value

The dash in an empty cell was doing too much work.

It could mean the specification did not apply to that product. It could mean the manufacturer had not supplied it. It could mean I had not yet entered or verified it. It could mean the value existed in an unprocessed document.

Those conditions had different consequences. “Not applicable” could support a decision. “Unknown” should lower confidence. “Not yet entered” was a catalogue-maintenance problem. Rendering all three as — made the table look consistent and the information less trustworthy.

I introduced explicit absence reasons in the normalized data:

value
unit
condition
source
absence: not-applicable | not-supplied | unverified

The interface did not print every internal label in every cell. It used concise language and a legend where appropriate. The important change was that it could no longer confuse an absent measurement with an inapplicable one accidentally.

The maintenance report used the distinctions more directly. Unverified and not-supplied values entered different review lists. Not-applicable values did not appear as missing work.

This was my first clear experience of an interface improving because the data model learned to express uncertainty rather than because the design concealed it better.

A measurement was not only a number and unit. Two products could publish similar values under different test conditions. A tidy comparison row could imply equivalence the sources did not support.

I extended important measurements with an optional condition and source reference. The comparison table displayed a small marker when conditions differed and offered the exact notes nearby.

I resisted converting every specification into one canonical unit during import without preserving the source. Normalization helped comparison, but the catalogue retained original value, unit, and source wording. The displayed converted value could then be checked.

Rounding policy became explicit. A conversion that created several decimal places suggested precision the original did not have. Category-specific display rules preserved useful precision without turning source data into false exactness.

This work added complexity to the content pipeline and removed ambiguity from the interface. It also showed that “structured content” is not merely content split into fields. The structure has to preserve the claims and limitations a field carries.

Category-specific decisions

The original catalogue applied one specification order to every category. The result was technically consistent and practically strange. A field central to one category appeared beside irrelevant rows in another.

I created category definitions that named their decision properties and display order. A product still retained its complete reference data, but the initial summary reflected how that category was compared.

A category definition also declared compatibility relationships and unit conventions. The comparison tool could warn when selected products belonged to categories that did not support one meaningful shared table.

The first version tried to find a universal set of “top specifications.” It produced fields generic enough to be unhelpful. Category-specific structure accepted some repetition and made each comparison more coherent.

This was an early lesson about abstraction. Shared storage shape did not require shared product meaning. The catalogue could normalize identity and measurement mechanics while allowing each category to define what mattered.

Later design-system work would encounter the same problem in components: two things that look alike can still own different domain behavior.

On the fixed desktop page, visual boxes provided most of the grouping. As the layout changed, headings had to carry more of that structure.

I added explicit section labels for decision and reference information, even when the wide layout made the grouping visually obvious. The narrow page and document outline then retained the same hierarchy.

Heading text was written as content, not generated from database column names. max_operating_load became a phrase a person could understand, with unit and condition handled separately.

I checked the page with CSS removed and used the document outline as a crude diagnostic. The goal was not to make the unstyled page beautiful. It was to verify that the sequence and labels still explained the catalogue.

The exercise found an important mistake: related products appeared under a heading level that made them children of the last reference subsection. Visually they were a separate card. Structurally they belonged to the product page as a peer region.

Responsive design made semantic structure visible because layout could no longer be trusted to remain the same. The fix benefited every presentation, including nonvisual navigation and later syndication.

Summary text was not the first paragraph

I initially reused the first paragraph of each product description as its list summary. Some began with history, some with technical context, and some with a sentence that only made sense after the heading. Truncating them at a character count produced fragments.

I added a dedicated summary field with a clear job: identify the product’s distinguishing use or constraint in one or two sentences without duplicating the model name already shown.

The detail description could then develop context without serving every list and metadata surface. The summary appeared in search results, category lists, and comparison selection.

This was not an invitation to duplicate all content manually. It was recognition that a summary is authored for a different reading context, not a mechanically shortened body.

Validation flagged a summary that merely repeated the title or began with vague language shared by many products. It warned rather than blocking publication because quality judgment remained human.

The change later informed how I wrote article descriptions for this site: a description should add the article’s specific question, not restate its title.

Source information belonged near the value

The catalogue had one sources page listing product sheets and manufacturer sites. It established general provenance and made an individual value difficult to verify.

I attached source references at the product and measurement levels where needed. The interface kept them quiet in ordinary reading and available beside the claim they supported.

A source record included title, publisher label, document date when known, path or URL, retrieval date, and notes about extraction. Imported values retained the source record ID.

If a source changed, I could identify which products and values depended on it. An update did not silently rewrite history; the catalogue’s source note recorded the new revision and the value review.

This was modest provenance, not an academic citation system. It improved maintenance and made uncertainty explainable. The useful idea was already visible: evidence worked best when lineage attached to a specific claim, not when a pile of links appeared at the end.

Once the data model had real distinctions, the import could report where source material did not fit.

The report listed:

• Unknown units.
• Duplicate manufacturer and model combinations.
• Values outside a plausible category range.
• Missing identity fields.
• Unrecognized category properties.
• Conflicting source values.
• Absence without a reason.

At first I treated the report as a cleanup queue. It became a way to inspect the model itself. If many legitimate source values failed the same rule, the rule could be wrong. If every product needed an escape hatch for one property, the category definition was incomplete.

I fixed ambiguity in source data or the model instead of adding template conditions. A template should communicate known states. It should not become the final place where the catalogue guesses what malformed content meant.

This separation made responsive rendering more dependable. The page did not have to measure and adapt around arbitrary strings whose structure changed from record to record.

Once categories and content groups were explicit, navigation could reflect real structure rather than the desktop column layout.

The primary catalogue navigation used categories and task entry points. Product pages exposed local links to decision details, reference information, manuals, and related items. On narrow screens, the local links could become a compact list without merging into the site navigation.

The first design had put every link into one large left rail because there was room. It mixed global location, category browsing, and page sections. Collapsing that rail on a phone produced a long menu with no clear levels.

Content modeling separated those responsibilities before the responsive navigation work began. Each navigation region could then choose a presentation suited to its scope.

The improvement did not come from a better menu component. It came from knowing which relationships the links represented.

Search became less literal

The old search indexed the rendered page text. It could find an exact model name and returned noisy matches for common units and navigation labels.

The normalized model allowed weighted fields. Identity terms mattered strongly. Category and summary supported broader discovery. Reference notes remained searchable with lower weight. Absence labels and repeated chrome did not dominate results.

Search results could show model, category, summary, and the field that matched. A hit in a manual reference looked different from a hit in the product identity.

I did not build sophisticated search ranking in 2012. The important change was that search consumed the same explicit content structure as the page instead of scraping presentation.

That reduced a form of accidental coupling. Changing a heading or moving a reference section no longer changed what the catalogue considered the product’s identity.

The narrow page forced a decision because width no longer allowed every field equal visual space. The failure was useful. It exposed that the desktop page had hidden missing product decisions inside a generous grid.

After the content model changed, several layout questions answered themselves:

• Identity appeared first because it was a named group.
• Decision fields formed the summary because categories declared them.
• Reference information moved later without disappearing.
• Missing values could explain their meaning.
• Comparisons could warn when conditions differed.
• Search and navigation could use semantic fields instead of rendered order.

CSS still mattered. Typography, spacing, line length, table behavior, and media queries determined whether the structure was readable. They no longer had to invent the structure.

The project changed my sequence of work. Before drawing a dense page, I began asking what each piece of content was for, what it depended on, and what uncertainty it carried.

Content before chrome, not content without craft

Prioritizing content did not mean producing an unstyled database dump. It made visual craft more specific.

I could use stronger type for identity because identity had a declared role. I could make reference information quieter without making it inaccessible. I could align comparable measurements and let narrative notes follow a different rhythm. I could design an absence state that matched its consequence.

The visual hierarchy stopped being an arrangement imposed on anonymous fields. It became an expression of the content model.

That relationship made the design more resilient. When another product added a long compatibility note, the page knew it belonged to decision information. When an image was missing, identity remained. When a viewport narrowed, the reading order already existed.

C62Y taught me that responsive work begins before the media query. A layout can adapt only as well as the content can explain itself.

That conclusion also limited later embellishment. A badge, icon, or abbreviated label had to point back to a state already present in the content model. Presentation could summarize meaning; it could not become the only place meaning existed. When a visual treatment disappeared in print, search, or an unstyled document, the underlying distinction remained available.

I did not complete the model once and freeze it. New source material continued to expose wrong categories and missing conditions. The difference was that those changes now happened in an explicit layer with validation and history, rather than as one more exception in a template. Content architecture became maintained product code.

The next problem would test the same principle in navigation: one semantic set of destinations needed to survive desktop placement, compact touch presentation, keyboard use, and script failure without becoming a second mobile copy.