A designed website can look finished and still be invisible. Search engines and AI crawlers do not open the Figma file. They read the HTML that arrives on the first request: the weight of the images, the order of the headings, and whether the words sit in the document or behind a click.
In Saudi Arabia, Google still handles about 96 percent of search. That is not an argument for tricks. It is an argument for a page a machine can extract a clear answer from. Fluids Design ships static HTML for that reason. The visual system and the crawlable document are the same object. We do not publish invented traffic.
Why do type size and heading order change what search understands?
Search and accessibility read the heading outline, not the type scale. One H1 names the page. H2s divide the argument. H3s sit inside those sections. Style a 64-pixel line as a div because it looks like a title, and crawlers get a page with no title. Jump from H1 to H4 to match a smaller size, and the outline lies.
Pick heading levels for structure, then size them with the type scale. Large display type can still be a paragraph if it is atmosphere. Small type can still be an H2 if it starts a section. One subject, one H1, then a clean descent.
How do image weight and lazy-loading decide whether the page gets a chance?
A designed page often loses before a sentence is parsed. The largest paint — usually the hero — should happen in 2.5 seconds or less on a real phone. Layout should not jump. Never lazy-load that first image. Give every image width and height. Ship WebP or AVIF. Crop and compress in the design, not as a late engineering pass.
A lighter page is not a style preference. It is whether a mid-range phone on a 4G session can read the first screen. Weight is a design decision. We will cut a motion if it costs the first contentful moment.
What happens when the site is client-side only?
If the HTML that arrives is an empty shell and the words appear only after JavaScript runs, many crawlers never see the words. Google can render JavaScript later, on a queue. AI crawlers often do not execute JavaScript at all. A client-only marketing site is a brochure those systems cannot quote.
Static HTML is the design that can be cited. Motion can still run. It should enhance a document that already exists, not invent the document after load. If you cannot view-source the headline, the page is not finished.
Why does accordion-gated copy disappear from answers?
Accordions keep a viewport tidy. They also hide the answer. Put the answer in the open document, in the first sentences of the section. A native disclosure is fine when the text is already in the HTML. It should not be the only place the answer exists. We keep questions on the FAQ in the document, not in a script.
How do internal links tell crawlers what the studio actually does?
Three to five descriptive internal links, early, tell the system which pages belong together. Design that survives the build is the argument for files engineers can ship. What a design system is for is the argument for tokens that last past the first release. Isolated essays do not build a topic.
The proof is also the pages themselves. Sites we designed are shown as they shipped — not as invented tiles. And a way to talk to a human: hello@fluids.studio.
What should a studio specify so design and SEO stay the same job?
Write the heading outline before the type scale. Specify image budgets with the art direction. Keep the hero in the first HTML response. Prefer static HTML over a client-only shell. Frame those constraints in week one — see how a design project runs. A site that cannot be read cannot be found.
- One H1; heading levels follow the argument, not the type size.
- Hero in the first HTML response; never lazy-loaded.
- Images as WebP or AVIF, with reserved dimensions and real alt text.
- Copy in the open document, not only inside an accordion or a client-rendered shell.
- Three to five descriptive internal links to the pages that define the studio.