01 · front-end coding and responsive design

HTML codingand mobile versions

We turn Figma designs into complete, production-ready sites and build mobile versions of existing ones. True to the design, without the obsession: clean markup, fast loading and a comfortable experience on any screen

Timeline
from 3 days

Front-end coding for your task

Some clients need a site built from a fresh design, others a mobile version of a site that has been running for years. These tasks call for different approaches and estimates

  • 01

    Figma to HTML

    The design is ready, but you have no front-end developer or yours is busy. We turn the mockups into code your designer will recognize on any screen

    • Every page template in the design
    • Grid, spacing and fonts as designed
    • Button, field and error states
    • Questions for the designer up front
  • 02

    Mobile version of your site

    The site was built for desktop, but visitors arrive on phones. We adapt what you have without rebuilding the whole site

    • Adapting your existing pages
    • Thumb-friendly menus, tables and filters
    • Call button and forms in plain sight
    • No separate m. subdomain
  • 03

    Landing and promo pages

    One page, a short deadline and plenty of attention to the first screen. We add animation where it helps people read

    • Coded in a few days
    • Scroll-triggered animation
    • Forms that send to your CRM or email
    • Analytics goals on buttons
  • 04

    Templates for WordPress and other CMSs

    Your site runs on a CMS, so new pages have to be editable from the familiar admin panel, not through a developer

    • Templates and components for your CMS
    • WordPress themes and blocks
    • Fields for your content manager
    • Responsive version of a CMS site
  • 05

    React and Next.js components

    You have your own dev team, but front-end work is slowing down sprints. We deliver a component library that is easy to plug in

    • Components in TypeScript
    • Design tokens: colors, spacing, fonts
    • A component showcase with every state
    • Code that follows your repo rules
  • 06

    Fixing old front-end code

    Blocks overlap, everything falls apart in Safari, the page takes ages to load. We find the cause instead of hiding the symptom

    • Cross-browser bug analysis
    • Sideways scrolling on phones
    • Heavy images and fonts
    • Tidy styles without a full rewrite

From a Figma file to a live site

Five steps, and at each one you see the result in a browser, not in an email thread

  1. 01Figma audit

    We review the design

    We check that everything is drawn: mobile screens, hover states, form errors, empty lists. Anything missing is discussed right away, not midway through

  2. 02Grid and components

    We build the foundation

    First the grid, fonts, colors and recurring blocks: buttons, cards, fields. Pages are then assembled from them like building blocks

  3. 03Templates

    We code the pages

    Each template goes to a staging URL with real copy and images. You review it in a browser, not in a screenshot

  4. 04Responsive from 360 px

    We test on every screen

    Phone, tablet, laptop, wide monitor and everything in between. In-between widths don’t break, even if the design never showed them

  5. 05QA and code

    We deliver and hand over

    We run through a checklist: browsers, speed, keyboard, long copy. Then we hand over the code, access and a short guide

What’s included

  1. 01Coding of every template in the design
  2. 02Responsive from 360 px to wide monitors
  3. 03Semantic markup for search engines
  4. 04Element states: hover, focus, error
  5. 05Keyboard navigation and screen reader labels
  6. 06Compressed images in modern formats
  7. 07Fonts that load without text flashing
  8. 08Forms with field validation and submission
  9. 09Testing in Chrome, Safari, Firefox and other major browsers
  10. 10Code and access handed over to you

Code that fits your stack

We deliver clean HTML, React components, or integrate the templates into your CMS. We pick what will be easy for you to live with

Tools and platforms we work with: Figma, HTML, CSS, TypeScript, React, Next.js, WordPress

If your team has its own code conventions, build setup and libraries, we adapt to them instead of bringing our own. The code should be easy to maintain after we leave

What we check before delivery

A design shows three widths and perfect copy. Real life is messier, so we test against a checklist, not by eye

  • Widths from 360 px to wide monitors

    We don’t just check the three sizes in the design but the whole range: we slowly resize the window and catch any spot where blocks overlap or sideways scrolling appears

  • Browsers and devices

    Chrome, Safari on iPhone, Firefox and other popular browsers. Safari gets extra attention: that’s where spacing and forms most often go wrong

  • Loading speed

    Properly sized images, no unnecessary font weights, nothing heavy on the first screen. We measure on a mobile connection

  • Keyboard navigation

    Menus, forms and pop-ups can be navigated with the Tab key, focus is visible, and buttons and images have clear labels

  • Long copy and empty states

    A three-line heading, a surname half a page long, an empty product list. The layout holds up when real content differs from the design

  • Match with the design

    We overlay the design on the page and compare grid, spacing and fonts. Accurate, but not obsessive: where a pixel clashes with usability, we ask the designer

HTML coding: packages

The cost depends on scope. We review the design or site and send a detailed estimate the next day, and don’t change it after kickoff unless the scope changes

  • Landing page from a design

    Custom quote

    from 3 days

    • One page from Figma
    • Phone, tablet and desktop
    • Inquiry form and simple animation
    • Testing in major browsers
    Get an estimate
  • Website coding

    Custom quote

    1–2 weeks

    • Up to 10 page templates
    • Library of recurring blocks
    • Responsive from 360 px
    • Speed and accessibility checklist
    Get an estimate
  • Large site or mobile version

    Custom quote

    from 3 weeks

    • Catalog, product pages, cart, customer account
    • Adapting an entire existing site
    • Integration into WordPress or another CMS
    • Components for React and Next.js
    Get an estimate

What drives the cost

  • A design without mobile screens: the missing ones have to be drawn
  • Complex animation, background video and 3D scenes
  • Support for old browsers and unusual devices
  • Old front-end code that is easier to rewrite than to fix
  • Multiple languages and right-to-left text

How the work goes

  1. 01

    Design and estimate

    1 day

    You send a Figma link or your site’s URL. We review the templates and send an estimate with a timeline the next day

  2. 02

    Foundation and first template

    2–4 days

    We code the grid, components and home page, and use it to agree on accuracy and details

  3. 03

    Remaining pages

    per estimate

    Templates go to a staging URL as they’re ready. Payment is per phase

  4. 04

    Delivery and support

    30 days

    We hand over the code and integrate it into your system. For a month we fix any bugs found, free of charge

Common questions

Open 01 of 07

Didn’t find your question? Ask it on Telegram and we’ll reply during business hours

Ask on Telegram
  1. It depends on the number of unique templates

    The cost depends on the number of unique templates, not pages: a hundred identical product pages are coded as one. Animation, mobile screens in the design and the system the code must fit into also matter. We send a fixed estimate the day after we review the design

  2. A landing page from 3 days, a typical site 1–2 weeks

    A large site with a catalog and customer account takes three weeks or more. The timeline is fixed in the estimate. Work goes fastest when the design is complete, with mobile screens and element states

  3. It depends on the number of templates and the state of the code

    We don’t build a separate mobile site but a responsive version of the same one: one URL, one set of content, with the layout adapting to the screen. A small site takes a few days. If the old code is badly tangled, we’ll tell you before kickoff and suggest the better option

  4. Yes, if the builder does everything you need

    Online builders are fine for a simple business-card site. Once you need a custom design, fast loading, CMS integration and a proper mobile version, a builder starts getting in the way. If a builder is enough for your task, we’ll say so

  5. HTML, CSS and TypeScript

    Markup in HTML, styles in CSS, behavior in TypeScript. For React and Next.js teams we deliver ready-made components; for WordPress and other CMSs we integrate the code into templates. We don’t pull in unnecessary libraries

  6. Yes, in the site template, with no downtime

    We work on a copy of the site, test the new templates and components, then move them to the live site. Your content manager keeps editing pages from the familiar admin panel

  7. Yes, we work fully remotely

    Front-end coding doesn’t require in-person meetings: the design file, calls and a staging URL work the same from anywhere

Order HTML coding

Send a link to your Figma file or the site that needs a mobile version. We reply within two hours during business hours and send an estimate the next day

What you need

By clicking the button, you agree to the processing of your personal data