We see it all the time: a design in Figma looks perfect, but after implementation on mobile everything breaks, Lighthouse reports CLS of 0.5+, and the SEO specialist complains about incorrect heading hierarchy. Recently we took over a project where a missing <main> and improper alt attributes caused a 30% traffic loss. All this can be avoided by laying down correct semantics, modern CSS, and performance from the start.
We revamped an online store with a CLS of 50% down to a safe level. The original code had numerous absolute positions and lacked semantics. After implementing CSS Grid and Container Queries, metrics improved: LCP dropped from 4.2s to 1.8s, CLS from 0.45 to 0.03. Traffic grew by 15% within two weeks of relaunch. We've seen that quality layout pays off faster than it seems.
Why semantic markup matters — not a religion, but SEO
Browsers and search engines build an accessibility tree from HTML. Errors in semantics cost dearly: incorrect heading structure lowers rankings, missing <main> or <nav> breaks indexing. Using landmark elements like <header>, <footer>, <aside> improves screen reader navigation and gives Lighthouse bonuses. We always follow the recommendations of MDN Web Docs for semantic HTML.
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1.0"> <title>Page Title — Site Name</title> <meta name="description" content="..."> <link rel="preload" href="/fonts/inter.woff2" as="font" type="font/woff2" crossorigin> </head> <body> <header role="banner"> <nav aria-label="Main navigation" tabindex="0">...</nav> </header> <main id="main-content"> <article> <header><h1>Heading</h1></header> <section>...</section> </article> <aside aria-label="Additional">...</aside> </main> <footer>...</footer> </body> </html> Modern CSS: what we use
Our CSS stack solves tasks that used to require JavaScript. Compare: CSS Grid builds complex two-dimensional layouts in a few lines, while Flexbox is good for one-dimensional arrangements. In 9 out of 10 cases Grid is better than repeated float or display:table. Below is a comparison of approaches:
| Feature | CSS Grid | Flexbox |
|---|---|---|
| Direction | Two-dimensional (rows and columns) | One-dimensional (row or column) |
| Typical use | Grids, galleries, dashboards | Navbars, inline cards, centering |
| Old browser support | Modern (Edge 16+) | Modern (Edge 12+) |
CSS Custom Properties — our design system:
:root { --font-sans: 'Inter', system-ui, sans-serif; --space-md: 1rem; --color-accent: hsl(221 83% 53%); } How Container Queries change responsiveness
Container Queries allow a component to adapt to its container's width rather than the viewport. This is especially useful for reusable cards: the same card will display correctly in a narrow sidebar and in wide content. Learn more on MDN. This technique reduces the number of media queries by 30% and makes code more predictable. Here's how to implement Container Queries:
- Define the container:
container-type: inline-size; - Use
@container (min-width: 400px) { ... } - Nest styles inside the container.
Example of a card layout with Container Queries
.card-container { container-type: inline-size; } @container (min-width: 300px) { .card { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; } } How we achieve LCP ≤ 2.5s
We inline critical CSS in the head (about 2–3 KB), and load the rest asynchronously:
<style>/* critical */</style> <link rel="stylesheet" href="/css/main.css" media="print" onload="this.media='all'"> CSS Containment (contain: layout paint) isolates element repaints. We use will-change only for animated modals. Final metrics we guarantee:
| Metric | Target value |
|---|---|
| LCP | ≤ 2.5 s |
| CLS | < 0.1 |
| TBT | < 200 ms |
We guarantee these values for all projects. The cost is calculated individually based on layout complexity and number of pages. Request a preliminary consultation — get a commercial offer within one day.
How critical CSS reduces load time
Critical CSS is the styles needed to render the first screen. We inline them in the head, and load the rest asynchronously. This reduces FCP and LCP. In one project, we cut FCP from 3.2s to 1.1s just with critical CSS. We also use CSS Containment to isolate repaints. Result: smooth rendering without jumps.
Common layout mistakes
One frequent issue is missing width and height on images — this causes CLS when images load. Solution: set fixed dimensions in HTML or use the aspect-ratio CSS property. Another common mistake is forgetting overflow: hidden on containers with rounded corners (border-radius), causing content to leak. We always check for these.
What's included in our work
- Documentation: style guide for components.
- Deliverables: source files (Figma, code).
- Training: explanation of structure for developers.
- Support: warranty period after delivery.
We are a team with extensive layout experience and 20+ completed projects. We guarantee cross-browser compatibility in Chrome, Firefox, Safari, and Edge. Contact us — we'll evaluate your project within one day.
| Stage | Duration |
|---|---|
| Landing page (1 screen) | 0.5–1 day |
| Landing page (6–8 sections) | 1–2 days |
| Corporate site (5–10 pages) | 3–5 days |
| Online store (templates) | 5–8 days |
Pricing is individual. Get a consultation to discuss your project details.