TULUS.studio

Context

TULUS is a web development and SEO studio in Bandung. Its own site is the first thing a possible client sees, and the only piece of work it can show without asking anyone’s permission.

Problem

A studio site usually proves taste. It rarely proves engineering, and it almost never proves SEO, because the parts that matter to a search engine are the parts a visitor cannot see. Saying “semantic, fast, accessible” on a slow page built from anonymous boxes is the normal state of the trade.

Constraints

• Nothing on the site may be invented: no client counts, no years, no ratings, no promised rankings.
• The proof has to work without a mouse, without motion, and without scripts for the content itself.
• The interaction may not make the page slow. Whatever it costs is loaded only when it is used.
• The site must not resemble Laras, the studio we work with. Different paper, different voice.

Approach

Show both realities of a page. Surface is what people see. Structure is what a browser and a search engine read. Structure is not a second picture drawn for effect: it is the same document, read at that moment — element boxes measured from the live page, names taken from the real tags and attributes, speed taken from the visitor’s own browser. Where a number cannot be read, the page says Not measured.

Design

Warm paper and ink for the surface; one cool light for structure, which appears only where structure is being shown. Two type systems: a grotesk for names and anything a machine reads, a serif for sentences said to people. One recurring mark, a ring — a full stop you can see through — which is also the lens at rest.

The title on the home page is sized from the grid rather than from the window: the word NOTHING is exactly as wide as eight of the twelve columns, at every width. The structure view shows it.

Development

Static pages, generated ahead of time. The style sheet is written by hand and travels inside each page, so nothing blocks the first paint. There is no framework running in the browser.

The structure view is one sheet of light blended so that each colour channel keeps whichever value is lighter: ink becomes light, paper becomes glass, and the text stays text — selectable and readable. It costs the browser compositing only; the page is not copied and not repainted. The notation over it is drawn from getBoundingClientRect on the real elements.

None of it is in the way of the page. The code for the structure view is fetched after the page has loaded, while the browser is idle, and nothing is measured or drawn until the switch is reached for. The notation is then drawn one section at a time, for the part of the page you are looking at and the parts about to come into view. A section you never reach is never drawn. The inspector is fetched when it is opened. A visitor who has asked their browser to save data gets none of it until they press the switch.

SEO

• One h1 per page, headings in order, landmarks named.
• Every page has its own title, description and canonical address; addresses have one spelling.
• A sitemap that lists exactly the pages meant to be found, and a robots.txt that points to it.
• Structured data for what the pages actually are: Organization, WebSite, WebPage, BreadcrumbList, Service, Article. No review or rating markup, because there are none. No local-business markup until there is an address and opening hours to put in it.
• The content is in the HTML. A crawler that runs no scripts reads every word a visitor does.

Performance

The numbers are in the table below and on the page itself: switch any page to Structure and it reports what your own browser measured on this visit.

One of them has its own article. When a web font arrives late, the text is set twice and the page can move. We measured that movement on four pages with and without a fix, and wrote down what the fix is and what it cost.

Results

Two things a client cares about most — being found, and receiving enquiries — cannot be reported for a site that has just been built. They are listed as not measured, and will be filled in with dates when there is something true to say.

Lessons

• Take things away. The lens first followed the cursor with a soft delay and carried four tick marks. Both read as decoration. It now follows the pointer exactly and is a plain ring.
• One name, one meaning. In the first prototype the lens opened over every part of the page. The cause was one attribute name used for two different things. The fix was a rename; the lesson is older than the web.
• Draw only what is looked at. The first version drew the notation for the whole page as soon as the browser was idle. It was one long task, and it doubled the number of elements in the page for visitors who never asked to see it. The second drew only what was on screen, but still ahead of time, and on a slowed-down phone that preparation alone held one service page up for a third of a second in three runs of five. Now only the code is fetched ahead of time. The notation is prepared when the switch is reached for, and drawn a section at a time once it is pressed.
• A note must not cover what it describes. On a phone held sideways, the structure view wrote the address of a link across the next line of the paragraph. We had looked at dozens of pictures of that view and not seen it. A check that compares every note with every line of text then found the same fault on seven of the first eight pages it was shown. A note now takes the first free place beside what it names, and is left out where there is none.
• An instrument has to be able to fail. One run of our own measurement printed a perfect zero for the version of a page we knew was worse. The machine had been busy and there had been nothing to measure. The script now says so instead of printing a number.
• Measure in the open. A table that says “Not measured” looks weaker than one full of numbers. We think it is the stronger of the two, because every other line in it can then be believed.