Не указан
51 ставка
Описание задания Нужен опытный frontend-разработчик или верстальщик для поэтапного обновления большого действующего сайта.
Сайт работает много лет, содержит значительное количество страниц, различные типы контента, формы, таблицы и интерактивные блоки. Используется собственная серверная система, имеются legacy HTML/CSS. Полная замена технологий или системы управления сайтом не планируется.
На первом этапе необходимо разработать новый адаптивный общий шаблон сайта. После успешного завершения первого этапа планируется последовательное обновление внутренних страниц.
Название сайта, URL, дизайн-макеты и текущие выходные файлы будут предоставлены ограниченному количеству кандидатов после предварительного отбора по портфолио и опыту.Что входит в первый этап Необходимо реализовать общую визуальную оболочку: шапку для desktop- и mobile-версий; основную и мобильную навигацию; служебные элементы шапки; общий контейнер и сетку страницы; навигационный цепочку («хлебные крошки»); базовые элементы интерфейса: кнопки, ссылки, поля ввода; общие стили типографики с возможностью их поэтапного подключения; футер; адаптивное поведение шаблона; совместимость новой оболочки со страницами, которые временно останутся в старом дизайне. Уникальные внутренние блоки отдельных страниц на первом этапе полностью переделывать не нужно.Особенности проекта Большой действующий сайт с множеством типов страниц. Имеется legacy CSS и местами устаревшая HTML-разметка. Новый дизайн будет внедряться постепенно. Одновременная полная замена всех страниц невозможна. Исполнитель не получает доступа к серверу, CMS и рабочему проекту. Заказчик самостоятельно интегрирует подготовленную верстку. Исполнителю будут предоставлены текущие CSS-файлы, макеты, графические материалы, HTML-фрагменты и примеры страниц в пределах, необходимых для выполнения работы. Предполагается несколько итераций после тестовой интеграции в реальный проект.Технический подход Предполагается подключение нового CSS поверх имеющихся стилей с дальнейшей постепенной миграцией и удалением устаревших правил.
Разрешается: создавать новые CSS/SCSS-файлы; предлагать изменения HTML общих частей шаблона; исправлять имеющиеся CSS-правила, которые мешают реализации; предлагать улучшения структуры DOM; создавать новые повторно используемые компоненты. Изменения имеющегося CSS необходимо передавать отдельно в виде: patch/diff-файла; отдельного файла совместимости; или документированного перечня измененных правил и селекторов. Необходимо избегать: неконтролируемого использования !important; глубоко вложенных и хрупких CSS-селекторов; привязки стилей к тексту или порядковому номеру элемента; дублирования всей разметки отдельно для desktop- и mobile-версий; подключения тяжелых фреймворков без предварительного согласования; глобальных правил, которые могут нарушить отображение еще не обновленных страниц.Требования к качеству Проект рассчитан на дальнейший многолетний развитие. Нужно не разовое «подгонка под скриншот», а чистая, профессиональная и удобная для поддержки верстка.
Ожидается: понятная компонентная структура; повторно используемые CSS-классы; CSS custom properties для цветов, размеров, отступов и других дизайн-токенов; разумная специфичность селекторов; семантическая HTML5-разметка; корректная иерархия заголовков; отсутствие лишних DOM-оберток; отсутствие дублирования контента, который индексируется; корректное использование header, nav, main, section, footer; использование кнопок и ссылок в соответствии с их назначением; доступность интерфейса с клавиатуры; состояния hover, focus, active и disabled; отсутствие горизонтального прокручивания страницы; корректная работа с динамическим контентом различной длины; понятный и профессионально организованный код.SEO и производительность Обновление шаблона не должно ухудшать технические SEO-показатели сайта.
Необходимо: сохранить семантику основного контента; не создавать отдельные дубликаты DOM для мобильной и desktop-версий без обоснованной необходимости; не скрывать важный для индексации контент с помощью JavaScript; не нарушать иерархию заголовков; не удалять имеющиеся SEO-, аналитические и структурные атрибуты из предоставленных HTML-фрагментов; минимизировать дополнительный JavaScript; не использовать тяжелые библиотеки без согласования; предусмотреть размеры изображений и отсутствие заметных смещений макета во время загрузки; не допускать заметного ухудшения показателей Lighthouse и Core Web Vitals после интеграции. Исполнитель должен понимать, что качественный CSS сам по себе не исправляет структуру DOM. Если для профессионального результата необходимо изменить разметку, нужно подготовить и передать заказчику соответствующие HTML-фрагменты.Адаптивность Проверка верстки должна выполняться как минимум на таких ширинах: 1440 px; 1200 px; 1024 px; 768 px; 390 px; 360 px; 320 px. Между контрольными размерами интерфейс также должен оставаться корректным и функциональным.
Горизонтальное прокручивание всей страницы не допускается. Исключения для отдельных компонентов, например больших таблиц, необходимо предварительно согласовать.Результат первого этапа Исполнитель передает: Новый CSS или SCSS вместе с готовым собранным CSS. Автономную демонстрационную HTML-страницу. HTML-фрагменты шапки, меню и футера, если разметка изменялась. Отдельный patch/diff изменений legacy CSS. Новые SVG, изображения, иконки и шрифты. Инструкцию по подключению и интеграции. Описание структуры CSS и компонентов. Перечень новых и измененных классов и селекторов. Скриншоты результата на контрольных размерах. Перечень известных ограничений и расхождений с макетами. Рекомендации по дальнейшей миграции внутренних страниц.Итерации В стоимость первого этапа должны входить: Согласование общей структуры и desktop-версии. Адаптивное доработка tablet- и mobile-версий. Исправление выявленных заказчиком проблем после первой тестовой интеграции. Дополнительные работы вне согласованного первого этапа оцениваются отдельно.Что нужно указать в заявке Просим указать: опыт работы с большими действующими сайтами и legacy CSS; примеры сложной адаптивной верстки; примеры кода или ссылки на репозитории, если они доступны; подход к организации архитектуры CSS; опыт постепенной миграции дизайна без полной остановки сайта;
