zettahome.ru
Вёрстка по макетуZetta Home · ремонт и мебель
5,4 pxсредняя погрешность к макету на десктопе
Страница высотой почти 17 000 px свёрстана на чистых HTML, CSS и JS. Размеры, шрифты и картинки взяты из Figma через API, а не на глаз.
Как сделано
Заказчик просил только HTML, CSS и JS, картинки из самой Figma и точное попадание в макет на компьютере и телефоне.
- Два макета — 1920 и 360 px; у мобильной версии своя компоновка и порядок блоков
- Оригиналы картинок и параметры текста выгружены из Figma через API
- Скрипт сверяет живую страницу с макетом по координатам
- Планшетных макетов не было — промежуточные ширины собраны самостоятельно
- Без фреймворков и сборщиков, как просил заказчик
HTMLCSSJavaScriptFigma APIPython
zettahome.ru
Вёрстка по макетуПриложение о здоровье
14статей переведены из PDF и презентаций в адаптивный формат
Материалы из презентаций и PDF стали статьями для мобильного приложения. Схемы и таблицы перерисованы в SVG и сами подстраиваются под тему приложения.
Как сделано
Перенести обучающие материалы в приложение так, чтобы схемы читались на телефоне и выглядели родными в светлой и тёмной теме.
- Схемы и таблицы перерисованы в SVG: чёткие на любом экране, цвет берут из темы
- Повторяющийся декор убран, настоящие фото оставлены с подписями
- Две версии каждой статьи: чистый источник и готовая к загрузке
- Оформление накатывается скриптом — палитра меняется в одном месте
- Учтён фильтр безопасности приложения, который вырезает блоки стилей
HTMLSVGPython
Вёрстка по макетуТехнологическая конференция
1 файлбез внешних стилей и картинок-подложек
Письмо-приглашение с кнопкой регистрации: табличная вёрстка, которая одинаково открывается в почтовых программах, включая Outlook.
Как сделано
Сверстать письмо, которое не разваливается в почтовых клиентах и читается с телефона.
- Табличная вёрстка — единственный способ, который понимают все почтовые программы
- Отдельные запасные варианты для Outlook
- Адаптация под узкий экран телефона
HTMLCSSVML
