DEV Community: Benjamin Olsen

Turn an Oxygen service-site starter into four connected pages

Benjamin Olsen — Sat, 17 Oct 2026 10:47:33 +0000

A starter layout can give you a useful visual structure while still leaving important website work undone.

For a small service business, I would begin with Home, Services, About and Contact. A visitor should understand the offer, inspect who is behind it and find a working way to enquire.

Here is the adaptation workflow for the free Oxygen service-site kit I maintain.

Use an empty staging site first

Back up the destination before importing. The kit uses a native Design Set with shared selectors. In the Oxygen versions previously tested for this kit, importing Selectors replaced the destination selector set. Importing into an established site can therefore affect existing designs.

The layouts are imported individually. This is not an automatic site installer and does not configure a working contact form or payments.

The historical report covers Oxygen 6.2.0-beta.9 and 6.2 RC1. It is not a new complete import test on every later version. Oxygen Classic is outside this kit's supported workflow.

Give each page one job

Page	Question it should answer
Home	What do you do, and who is it for?
Services	What work is included, and what happens next?
About	Who will the customer work with?
Contact	How can someone start a useful conversation?

Replace fictional claims with statements you can support. A polished template does not make an invented case study real.

Import page bodies and shared templates separately

Create the four WordPress pages. On an empty page, connect the Design Set through Oxygen's library workflow and select the matching Service Website Kit layout. Follow the access page's import instructions, including the selector warning.

Import the header and footer as their own Oxygen templates. Check their display conditions so another matching template does not produce a second header or footer.

The four page layouts form the page bodies. A page-body import does not also install the navigation around it.

The example business and its services are fictional.

Replace destinations as well as labels

A menu can say “Contact” while still pointing at an example preview URL. Follow every navigation item and call to action on the saved frontend pages.

If your slugs differ from the imported examples, choose the real WordPress page in the link control. Set the actual homepage under Settings → Reading when the project is ready.

Replace the hello@example.com placeholder. If you add a form, send a real test enquiry and confirm that it arrives at the intended inbox before describing the contact route as working.

Check your content, not just the starter

Try the final service names, a long heading and a narrow viewport. Check keyboard navigation, visible focus and browser zoom. Shared classes affect every element using them, so review other pages after a class change.

Keep a short handover record: which pages were checked, which links were followed and whether the contact test was received. Record remaining work instead of marking the whole site ready because an import succeeded.

The free kit and access instructions explain import scope and known limitations. Start with the empty staging copy, adapt one page, then repeat the workflow across the other three.

Disclosure: I maintain the linked tool or kit. This article was prepared with AI assistance. Practical checks are identified separately from illustrative examples; verify the result in your own project.

Stress-test a card with longer content before adding breakpoints

Benjamin Olsen — Sat, 17 Oct 2026 10:47:21 +0000

A card that fits “Design” may fail when its title becomes “Website design for international service businesses.”

Before adding another breakpoint, change the content. Longer headings, translated labels and a missing image can reveal assumptions that resizing the viewport alone will miss.

Start with a deliberately fragile component

Paste this into a static HTML preview or a local file:

<style>
  * { box-sizing: border-box; }
  body { margin: 0; padding: 16px; font: 16px/1.5 system-ui; }
  .card { width: 420px; border: 1px solid #777; padding: 20px; }
  h2 { margin-block: 0 12px; }
</style>
<article class="card">
  <h2>Design</h2>
  <p>A practical service for your next website project.</p>
  <a href="#">Read more</a>
</article>

At a 375px viewport, the page has only 343px after its two 16px gutters. A 420px card cannot fit. This follows from the example's dimensions; it is not a new measured test result.

A smaller font would hide the wrong problem. The card itself is wider than the available space.

Fix the constraint you found

Replace the card rule:

.card {
  inline-size: 100%;
  max-inline-size: 420px;
  border: 1px solid #777;
  padding: 20px;
}

Then test a long title and a longer link label. Avoid a fixed card height unless the design has a clear reason for one and an explicit strategy for overflowing content.

The width change makes this example fit the available inline space. It does not prove that a larger component with images or nested grids has no other problems.

Compare the same content at three widths

I use 375, 768 and 1200px as a quick comparison set. At each width, inspect:

Whether anything extends beyond the content area.
Whether text overlaps or clips, even without a horizontal scrollbar.
Whether longer labels wrap in a useful way.
Whether hiding an image leaves an awkward gap or removes needed information.

These are starting points. Your project may need narrower or intermediate checks too.

Keep automated overflow results in their lane

On 17 October 2026, the built-in example in my Responsive Content Tester was checked with its Long translation preset. It rendered all three comparison widths and reported no horizontal overflow at any of them.

That result applies to that example. It says nothing about the deliberately fragile card above until you run it, and it does not certify clipping, readability or accessibility.

Try content variations

I maintain the free Responsive Content Tester. Paste HTML with inline CSS, apply the longer-content preset, compare Original and With tests, then run the three-width comparison.

The preview blocks scripts and external files and does not fetch a live website URL. It is useful for a static layout experiment, not for reproducing an application's complete runtime or testing another browser engine.

After the experiment, apply the relevant change in your actual project and test the saved page again. The preview helps identify a question; the real page provides the final context.

A passing contrast ratio is the start of a button check

Benjamin Olsen — Sat, 17 Oct 2026 10:47:08 +0000

A button can pass a color-contrast calculation and still be difficult to use.

The calculation answers a narrow question: how much luminance contrast exists between the specified foreground and background colors? It does not tell you whether the control has a useful label, visible focus or enough space when text grows.

Here is a small workflow for keeping those checks separate.

Begin with a known pair

Use black text on white as a sanity check:

Text:       #000000
Background: #ffffff
Contrast:   21:1

The current version of my checker returned 21.000:1 for this pair. That is a known example, not a claim that the whole tool or your website has passed an accessibility audit.

Now enter the exact colors used by your button. Do not estimate them from a screenshot if the CSS values are available.

The W3C explanation of minimum contrast describes AA requirements for text: generally 4.5:1, or 3:1 for qualifying large text. Large text means at least 18pt, or 14pt bold—approximately 24 CSS px or 18.67 CSS px respectively. A small button label does not qualify simply because its font looks bold.

Check the states you render

Create a short record before changing colors:

State	Text color	Background	Other check
Default	Actual CSS value	Actual CSS value	Label is readable
Hover	Actual CSS value	Actual CSS value	Label remains readable
Keyboard focus	Actual CSS value	Actual CSS value	Focus is visible

If hover changes the background, check the new pair. If it changes opacity, the rendered result depends on what is behind it; an opaque HEX-pair calculation is no longer the complete picture.

Keep focus visible without relying on hover. This gives a starting point to inspect:

.action {
  color: #000;
  background: #fff;
  padding: 0.75rem 1rem;
  border: 2px solid currentColor;
}

.action:focus-visible {
  outline: 3px solid #000;
  outline-offset: 3px;
}

The outline still needs to be checked against the actual surrounding surface. This snippet is not a universal focus-indicator solution.

Add the non-color checks

Use Tab to reach the control and confirm that focus is visible. Activate it using the expected keyboard interaction for its element type. Increase text size and inspect wrapping. Read the label out of context: “Send project enquiry” communicates more than “Click here.”

Use a button for an action and a link for navigation. A good color pair cannot repair the wrong interaction semantics.

Record what passed

Write “text/background pair passes AA normal-text contrast,” rather than “button is accessible.” The narrower statement tells the next person which question was actually answered.

I maintain the free Color Contrast Checker. It compares solid, opaque sRGB colors and previews the pair. Images, gradients, transparency, keyboard behavior and the rest of the page need their own review.

Build a fluid heading from two sizes and two viewport widths

Benjamin Olsen — Sat, 17 Oct 2026 10:45:12 +0000

You do not need a different font-size rule at every breakpoint to make a heading grow with the viewport. Choose its two acceptable sizes and the range over which it should grow.

For this example, a service-page heading should be 28px at 375px and 44px at 1280px. Those are design decisions for this example, not universal typography rules.

Calculate the middle expression

The size increases by 16px across a 905px viewport range:

slope = (44 - 28) / (1280 - 375)
      = 16 / 905
      ≈ 0.01767956

Because 1vw is one hundredth of the viewport width, the viewport term becomes approximately 1.767956vw.

Subtract its contribution at the small viewport to find the constant:

28 - (0.01767956 × 375) ≈ 21.370166px

With a 16px root size, the bounds are 1.75rem and 2.75rem. The constant is approximately 1.335635rem:

.service-heading {
  font-size: clamp(1.75rem, 1.335635rem + 1.767956vw, 2.75rem);
  line-height: 1.15;
  max-inline-size: 22ch;
}

In MDN's definition of clamp(), the three positions are the lower bound, preferred expression and upper bound. The middle expression can grow while the bounds keep the result within the chosen range.

Check more than the endpoints

At a 16px root size, the rounded expression should produce approximately:

Viewport	Font size
320px	28px, held by the minimum
375px	28px
768px	34.95px
1280px	44px
1440px	44px, held by the maximum

These values are calculated from the expression. The Section heading preset in my generator was also checked with the 375–1280px range. This is not physical-device testing.

Make wrapping visible

Try both headings:

Website design
Website design for service businesses with growing teams

The second may wrap into several lines. If it collides with a fixed-height container, the font-size formula is not necessarily the problem. Inspect the container's height, width and spacing too.

The 22ch line-length limit is a starting point. Change it when your actual font and content need something different.

Check text resizing in the real layout

The 28px and 44px values assume a 16px root size. A different root changes the REM terms. Zoom and text-resizing preferences can expose clipping or unexpected wrapping.

Keep the root size consistent with your project, then test larger text and zoom on the actual page. A smooth formula can still live inside a layout that cannot grow.

I maintain the free CSS Clamp Generator. Use its Section heading preset, preview common widths and copy the expression, or use the calculation above directly. The useful part is choosing and checking the bounds deliberately.

Review an internal-link suggestion before it becomes a task

Benjamin Olsen — Sat, 17 Oct 2026 10:44:28 +0000

An internal-link suggestion is useful only when you can explain why a reader should follow it.

Here is a small example you can reproduce with a spreadsheet. Three pages are enough to expose a common mistake: treating topic similarity as permission to add a link anywhere.

Start with an inventory, not a list of keywords

Use three fictional pages:

Page	Topic	Already links to
/design/ — Website design	Web design	/cost/
/cost/ — Website project cost	Web design	Nothing
/privacy/ — Privacy policy	Legal	Nothing

The design page explains a website project. The cost page discusses planning its budget. The privacy page explains personal data.

There is already a design → cost link. That does not mean the reverse connection exists. It also does not mean every page mentioning a website belongs in the same linking plan.

Review one possible connection

A useful candidate is:

Source: /cost/
Destination: /design/
Anchor: website design
Placement: the paragraph explaining which design work the budget includes

The shared subject gives us a reason to inspect the candidate. The paragraph supplies the reason to add it: a reader comparing costs may need to understand the work included.

Before accepting it, ask:

Does the destination answer the question raised by this paragraph?
Would the sentence still read naturally without the link?
Does the anchor describe the destination?
Is the connection already present in the actual page?

Do not add a privacy → design link just to make the inventory more connected. Legal text is not automatically a useful route into a service explanation.

Write an actionable task

“Add more internal links” leaves the implementation to someone else's guesswork. Save the source, destination, anchor and placement note together:

source,target,anchor,status,note
/cost/,/design/,website design,planned,Link where the paragraph explains the design work included

This simplified CSV is a suggested handover format, not a claim that every tool imports these exact columns. Keep the status honest: planned means the link is still absent from the website.

After editing the site, follow the link on the saved frontend page and re-read its surrounding sentence. Only then mark implementation complete.

Try the worked example

I maintain the free Internal Link Planner. Its three-page example includes the input inventory and an exported one-task plan.

The planner uses page information you supply. It does not crawl your website or publish links for you. Review its match evidence, adjust the anchor and export the tasks you actually intend to implement. Browser-saved work also needs an export if you want a portable copy.

For a first run, aim for one defensible task. Can someone implement it without guessing where the link belongs?

Why page 2 repeats the same posts in an Oxygen loop

Benjamin Olsen — Sat, 17 Oct 2026 09:37:37 +0000

A pagination link can change the URL while leaving the cards exactly as they were. That happened in a private Oxygen 6.2.0-beta.9 test: a static Text query returned six posts on page 1, and clicking page 2 repeated those same six posts.

Switching that example to Custom → Edit Query returned the correct seventh post. Here is the small test and the settings used, so you can check the result in your own project.

Make page 2 easy to verify

Create seven published posts in a private test category called Loop guide demo. Use different titles, manual excerpts and publication dates. Seven is intentional: six matching posts would not leave anything for a second page.

Create a Component for one card. Bind its heading to Post Title, its excerpt to Post Excerpt and its Read guide URL to Post Permalink. Keep the fields in the current-post context, rather than selecting one fixed article. The loop supplies the current item when the Component is repeated.

On a normal page, add Post Loop Builder. In Content → Repeated Block, select the card Component and use article as the repeated item's tag.

Use the visual Custom query

Open Content → Query → Custom → Edit Query and enter:

Source: Post Types; Include: Posts.
Posts per page: 6.
Total posts and Offset: leave both blank.
Condition: Has Taxonomy → is one of → Loop guide demo, from Categories.
Order By: Date; Order: Descending; Date: All.
Ignore sticky posts: enabled. Ignore current post: off for this normal-page example.

Apply the query. Under Content → Pagination, choose Numbers and keep Filter Bar disabled for this recipe. Save, then open the saved frontend.

Do not set Total posts to 6 when you expect seven results across two pages. That cap would remove the extra result you need to test pagination.

Verify the content, not only the address

The first page should contain the six newest matching posts. Click 2 below the grid and compare the cards.

In this fixture the seventh post was CSS spacing basics. Selecting 1 returned to the six newer cards. Two Read guide links were also followed, and each destination heading matched the selected card.

If every card links to one article, inspect the Component's URL binding before changing the query. A literal destination stays the same for every repetition.

Check an empty category and smaller screens

Create a simple empty-state Component containing “No guides in this category yet.” Select it under Content → Repeated Block → Advanced → When Empty. On a separate test copy of the page, change the query condition to a category without any posts. The expected result is the message, with no cards or page-number links.

The tested Grid layout used three items per row on Desktop, two at Tablet Portrait, and one at Phone Landscape, with a 24px gap. The card supplied its own inner padding, so the loop's Post padding was set to 0px on every side.

Those responsive overrides applied at 1023px and 767px in this installation. Check the breakpoints configured on your own site. Confirm that longer titles fit and that the saved frontend does not scroll horizontally at phone widths.

Keep the scope of the fix clear

This is a normal-page custom query. An archive's primary loop should preserve its inherited main query instead of copying these category-specific settings.

The fixture used native Oxygen elements and Components prepared programmatically. The Query Builder settings were inspected and saved in the editor, and the frontend was tested at 390, 820, 1440 and 1920px. The local editor canvas remained blank, so the full manual construction workflow was not verified. This is a tested workaround for this fixture and version, not a claim that every Text query or every Oxygen release behaves the same way.

Original recipe with query screenshot and full test notes.

This article was prepared with AI assistance from the documented test example.

One Oxygen template, different page content

Benjamin Olsen — Sat, 17 Oct 2026 09:36:17 +0000

Two service pages can share an introduction strip and a contact section without sharing every sentence. In Oxygen 6, Template Content Area supplies the place where each page's own layout appears inside that shared frame.

The useful distinction is where you make an edit. Shared wording belongs in the template. A service's own heading, description and images belong in the individual page.

Start with two deliberately different pages

Use a private test website and create Web design and Website maintenance. Give each page a different H1 and a short description. Make the difference obvious enough that repeated content would be easy to spot.

Next, create a template for Pages under Oxygen → Templates. Name it Service pages and restrict its conditions to those two test pages. Limiting the test keeps a shared change from unexpectedly reaching the rest of your website.

Build the parts that should repeat in that template: for example, a service strip above the content and a next-step section below it. If separate header and footer templates already supply the navigation, keep those there.

Add the page-specific region

While editing the template, find Template Content Area in the Add panel's Dynamic category. Place one between the shared sections, then save the template.

Open Web design as an individual page in Oxygen. Its own elements belong in the content area supplied by the template. Repeat this with Website maintenance, using that page's different content. You do not type both services' descriptions into the Template Content Area settings.

Choose the HTML structure deliberately. If the surrounding template already provides a main landmark, use a div or section for the content region instead of adding another nested main element.

Check the saved result

These screenshots show fictional test pages. The blue areas belong to their common template; the white region contains each page's own content.

The private frontend test changed the shared strip to “Shared service page layout”. That wording changed on both pages, while their individual headings stayed different. An unrelated About page stayed outside the template's conditions.

Try the same small test in your project. Open both frontend URLs, change one shared sentence, save, and compare again. Then inspect a phone width with a longer heading. A successful editor preview alone does not establish the final result.

Three quick diagnoses

If both pages show the same description, check whether it was added to the shared template. Move the unique copy into the individual pages.
If a page is blank, confirm the matching template contains Template Content Area and the page has saved Oxygen content of its own.
If the shared frame is missing, check the template's location, conditions and priority against that exact page URL.

A Design Set serves a different purpose: it imports saved layouts. Importing one does not automatically decide which template applies to your pages.

The source example was checked on 16 October 2026 with Oxygen 6.2.0-beta.9 and WordPress 7.1.3 at 390px and 1440px in desktop Chromium. It was a native-element and frontend check, not a full manual test of every editor control or all versions.

Original walkthrough, test scope and official references.

This article was prepared with AI assistance from the documented test example.