saiokko

saiokko brings together three services that often sit apart. Editorial Strategy establishes what a business should say and who it needs to reach. The Content Engine turns that direction into an ongoing publishing programme. Account Based Marketing applies the same research to specific buyers and accounts.

The website needed to make those distinctions understandable without making the services feel disconnected. Someone arriving with a production problem should be able to find the Content Engine, while someone who needs direction should understand where Editorial Strategy fits. Both need a clear route from the offer to examples of the work and a conversation about their project.

There was also a longer-term requirement. Articles and case studies would become a substantial part of the website, explaining the methods behind the services and giving prospective clients evidence to assess. The design and implementation had to support that growing body of material alongside a distinctive first impression.

The mark connects quotation marks with an abstract S. The reference to language makes sense for a business built around research and content, while the resulting symbol works on its own at small sizes.

Soft curves, folded paper and illustrated characters bring warmth to a service that can otherwise feel abstract. The same shapes carry into the logo animation, making the relationship between the quotation and the symbol visible.

Green introduces Editorial Strategy, brown identifies the Content Engine and rust red belongs to Account Based Marketing. Those colours repeat on the dedicated service pages, keeping the connection visible as someone moves deeper into the offer.

Blue gives comparisons a separate role. Plum identifies project evidence, and purple identifies editorial guidance. Cream paper, consistent typography and restrained orange accents hold the site together. Headings, labels and illustrations carry the same distinctions, so meaning never depends on colour alone.

The brain represents research and editorial direction. The printing machine represents an ongoing production programme. The target represents relevance to specific accounts and buyers.

Each character has its own silhouette but shares the same linework, cream fill and expressive limbs. They make the offer easier to recognise across service introductions, navigation and dedicated pages.

The homepage introduces the business through a sequence of focused sections. Each service has space for its own explanation and character, followed by the approach, project examples and editorial material. Dedicated service pages provide more detail without putting every explanation into the homepage.

Articles and case studies use a reading layout suited to longer material. Descriptive headings use natural casing and a lighter weight. A table of contents supports movement between sections, and related content provides a route to another article or project. On mobile, the compact contents control identifies the current section while leaving room for the text.

The responsive work considers both reading and recognition. Section headings follow a consistent rhythm, while the main hero retains its prominence. Thumbnails align with their card copy, illustrations retain their proportions, and longer titles can wrap without taking over the screen. The aim is to carry the identity into smaller layouts while keeping the content comfortable to use.

The site uses Astro to generate static HTML before deployment. This fits a website where much of the experience consists of reading service information, articles and project stories. The content arrives as page markup, with JavaScript used for behaviours such as navigation, section changes and animation.

Articles and case studies share a typed content structure containing titles, summaries, authors, dates, artwork and chapters. Chapters can include references, tables and supporting examples. Shared templates turn that material into listings, cards and reading pages, so adding a publication does not require designing a new page from scratch.

The current publishing workflow keeps that content in TypeScript files and rebuilds the site when it changes. Sanity schemas have been prepared for a future editing workflow, but the CMS is not connected to the rendered publications. This separates the structure already delivered from the next stage of making publishing easier for editors.

The implementation also includes reusable navigation and publication components, locally hosted fonts, AVIF publication artwork, page metadata, canonical links, structured data and a sitemap. These provide a consistent foundation as the library grows. A larger editorial operation will also need a verified preview, review and publishing workflow, with navigation and build times reviewed as the volume increases.

The site initially downloaded illustrations from closed menus, included service artwork in the homepage response and placed a full-screen animation before the content. The optimisation work addressed those costs without removing the illustrated identity.

Hidden navigation images now load on demand. Service artwork is stored in cacheable SVG files and its animation starts when the relevant section opens. Inactive sections skip rendering while the current screen stays responsive. The folded-paper and grain textures were reduced from roughly 234 KB to 39 KB combined.

The quotation-to-logo animation now runs inside the header. The page is readable and navigation works while it plays. Its morphing code loads after the first paint and is skipped for repeat visits and reduced-motion preferences.

Two consecutive mobile Lighthouse runs against saiokko.com on 25 September 2026 scored 100 and 98, compared with 81 in the initial live measurement. Largest contentful paint was 1.4 and 2.3 seconds, with no layout shift. These are Lighthouse 13.5 lab tests using the standard simulated mobile profile, not real-user Core Web Vitals. The scores vary between runs, so production monitoring remains part of the work.

The accessibility work addressed how the site behaves as well as how it looks. Navigation supports keyboard use and focus restoration. Reduced-motion preferences receive a simpler stacked homepage and reduced animation. The underlying service content remains available without JavaScript.

Contrast was reviewed alongside the colour system. The ABM colour was darkened to improve text contrast, while headings and labels continue to communicate the meaning carried by each theme. Reflow, enlarged text, increased text spacing and forced-colour presentations were also checked during development.

The September 12 review recorded no detected automated WCAG A/AA rule violations across 15 sampled page and interface states. It also documented browser checks for navigation, reading controls and mobile layouts. That is scoped test evidence, not a claim of complete accessibility: screen-reader sessions and physical-device testing remain necessary parts of the evaluation.

The delivered website gives saiokko a recognisable identity, distinct service destinations and shared layouts for publishing articles and case studies. The colour system connects the brand to navigation, the characters make the services identifiable, and the content structure provides room to explain the work in depth.

The project also established a technical foundation that can be refined as publishing becomes more frequent. Its next stage is to complete the editorial workflow and evaluate the live experience with production measurements and further accessibility testing. Commercial results will need to be assessed through actual enquiry, engagement and sales data as the website is used.