Рубрика
Вёрстка и frontend
Адаптивная вёрстка и frontend под дизайн-макеты с прицелом на скорость и CMS.
В этой рубрике разбираем темы вроде: верстка сайта, адаптивная верстка, html css верстка, frontend разработка.
Скорость загрузки и вёрстка сайта
Медленный сайт теряет заявки. Часто причина не «в хостинге вообще», а в тяжёлой вёрстке и скриптах. Разберём рычаги.
Pixel-perfect вёрстка: нужна ли она вам
Точность «пик в пик» с макетом важна для брендов с жёстким гайдом. Для сайта услуг важнее ясность и скорость. Разберём границы.
Вёрстка по макету Figma
Качественная вёрстка начинается с полного макета: состояния, мобила, компоненты. Иначе правки растягиваются.
UI/UX сайта услуг
UI/UX — про то, насколько легко человеку понять предложение и оставить заявку. Это не про модные эффекты.
Адаптивный дизайн сайта
Адаптивный дизайн заранее думает о телефонах, а не «сжимает десктоп потом». Так меньше сюрпризов на вёрстке.
Базовая доступность сайта
Доступность делает сайт удобнее всем: с клавиатуры, на ярком солнце, с укрупнённым шрифтом. Базовые правки недорогие и полезные.
Передача из Figma в вёрстку
Плохая передача рождает бесконечные «чуть не совпало».
Критичный CSS и скорость
Первый экран должен появляться быстро — иначе клиент не дождётся оффера.
UX форм заявок
Форма — последнее препятствие перед обращением. Каждое лишнее поле снижает конверсию.
Ошибки: ссылки на мессенджеры
Тема «ссылки на мессенджеры» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Выбор подхода: липкая кнопка заявки на мобильном
Тема «липкая кнопка заявки на мобильном» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Этапы: оптимизация изображений
Тема «оптимизация изображений» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Поддержка: ленивая загрузка изображений
Тема «ленивая загрузка изображений» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Подключение шрифтов без тормозов
Тема «подключение шрифтов без тормозов» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Этапы: cookie-баннер без вреда UX
Тема «cookie-баннер без вреда UX» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Поддержка: доступность форм
Тема «доступность форм» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Контраст и читаемость
Тема «контраст и читаемость» часто звучит технически. Разберём её языком задач бизнеса: что сделать, чего избежать и как принять результат.
Приёмка вёрстки
Приёмка — не «мне нравится», а совпадение состояний.
Ошибки адаптивной вёрстки
Адаптив ломают мелким текстом и невидимыми кнопками.
Фреймворк или кастом
Фреймворк ускоряет. Кастом легче контролировать вес.
Оптимизация шрифтов
Шрифты часто тормозят первый экран.
Вёрстка формы заявки
Форма — часть UX, не «добавим внизу».
Сколько стоит вёрстка макета
Анимации и состояния резко поднимают бюджет.
Pixel-perfect: нужен ли
Пиксель в пиксель на всех устройствах — дорогая иллюзия.
Доступность формы заявки
Недоступная форма теряет часть клиентов молча.
Адаптивная вёрстка: цены и что влияет на стоимость
Стоимость адаптивной вёрстки зависит не от числа страниц, а от числа разных шаблонов, сложности блоков и качества макетов. Разбираем, из чего складывается цена и как получить точную смету.
Ошибки CTA-кнопок
CTA — не декор, а следующий шаг.
Grid или Flexbox
Оба инструмента; важна читаемость кода командой.
Приёмка адаптива
Приёмка только на MacBook — дыра.
Мини design system
Система экономит время на новых страницах.
Ошибки мобильного меню
Сложное меню прячет CTA.
Цена анимаций
Анимация ради анимации дорога.
SSR или статика
Статика часто быстрее и проще.
Липкая кнопка звонка
Липкая кнопка помогает и бесит.
Цена UI-kit
UI-kit окупается на росте страниц.
Переход на новую сетку
Сетка — основа, менять её на всём сайте рискованно.
Ошибки контраста
Красота без контраста = отказ.
Иконки: font или SVG
SVG обычно предсказуее.
Вёрстка сайта
Хорошая вёрстка — это не только совпадение с Figma на одном разрешении, а предсказуемое поведение в браузерах, быстрый первый экран и структура, которую потом не стыдно натянуть на CMS.
Адаптивная вёрстка
Большая часть трафика на коммерческих сайтах приходит с мобильных. Адаптив проверяют не масштабом окна на мониторе, а на реальных устройствах и в полевых метриках.
HTML CSS вёрстка
Для лендинга, корпоративного сайта и даже небольшого блога чистый HTML и CSS с грамотной сборкой часто быстрее и легче тяжёлого UI-kit, который тянет половину Bootstrap ради одной сетки.
Frontend разработка
Frontend на коммерческом сайте должен помогать заявке, аналитике и поисковой индексации — а не только воспроизводить анимации из презентации дизайна.
JavaScript разработчик для сайта
На коммерческом сайте JavaScript чаще всего нужен не ради фреймворка, а ради надёжного интерактива вокруг заявки, каталога и измеримой конверсии.
Нужен сайт под спрос и заявки?
Разберём задачу, предложим структуру и ориентир по срокам. Без воды и «продающих» слайдов.