TheLandpage / ADMD — разработка лендингов
Frontend-разработчик
О проекте
В 2013 году я около полугода работал frontend-разработчиком в веб-студии TheLandpage / ADMD, специализировавшейся на посадочных и промо-страницах. По предоставленным макетам я самостоятельно собирал лендинги: реализовывал desktop- и mobile-версии, адаптивную вёрстку, анимации, навигацию, формы, клиентские скрипты и отправку заявок. За это время было выпущено около 15–20 проектов в разных тематиках. Для ускорения потоковой разработки я создал собственный инструмент сборки на Gulp, Jade, SCSS и jQuery, а в отдельных проектах подключался к интеграции с WordPress, чтобы заказчики могли самостоятельно управлять контентом.
Первые коммерческие проекты в потоковой разработке
TheLandpage и ADMD были одной веб-студией, которая специализировалась на создании и продвижении посадочных и промо-страниц. Я присоединился к ней в 2013 году как frontend-разработчик и за примерно полгода принял участие в выпуске около 15–20 коммерческих проектов.
Это был период интенсивного набора опыта: сроки почти всегда были короткими, проекты сменяли друг друга, а каждый предоставленный макет нужно было быстро превратить в готовый сайт для реального заказчика.
- Около 15–20 запущенных проектов
- Короткие сроки производства
- Коммерческая потоковая разработка
- Проекты для разных отраслей
От макета до полностью работающего лендинга
Я самостоятельно отвечал за frontend-часть лендинга: воспроизводил дизайн в браузере, создавал desktop- и mobile-версии, настраивал адаптивное поведение, анимации, навигацию, формы, пользовательские сценарии и отправку заявок.
Дизайнеры и backend-разработчики подключались на аутсорсе. Мы созванивались, синхронизировались по макетам и данным, уточняли спорные состояния и согласовывали точки интеграции, после чего я собирал все части в готовый интерфейс.
- Вёрстка по предоставленным макетам
- Анимации и интерактивная навигация
- Формы и отправка заявок
- Синхронизация с дизайном и backend
Собственный инструмент для быстрой сборки лендингов
Чтобы не повторять одинаковую подготовительную работу в каждом новом проекте, я создал собственный инструмент автоматизации на Gulp. Он объединил шаблоны Jade, стили SCSS, JavaScript и jQuery в единый процесс разработки и сборки.
Общая основа и переиспользуемые заготовки позволяли быстрее запускать новый лендинг, поддерживать одинаковую структуру проектов и больше времени уделять особенностям конкретного макета и пользовательского сценария.
- Gulp-процесс разработки и сборки
- Jade-шаблоны
- SCSS и переиспользуемая основа
- Ускорение старта новых проектов
Мобильные версии и поддержка основных браузеров
Для лендингов требовались полноценные desktop- и mobile-версии, поэтому интерфейсы сразу проектировались как адаптивные. Bootstrap использовался там, где помогал быстрее собрать сетку и типовые элементы, а собственные стили писались на SCSS.
Autoprefixer уменьшал количество проблем с CSS в разных браузерах, а для JavaScript использовались полифилы. Это помогало сохранять работоспособность сайтов в Chrome, Firefox, Safari и Internet Explorer — важное требование для коммерческих проектов того периода.
- Desktop- и mobile-версии
- Адаптивная вёрстка
- Autoprefixer и JavaScript-полифилы
- Chrome, Firefox, Safari и Internet Explorer
Управляемый контент для заказчиков
В отдельных проектах я подключался к интеграции лендингов с WordPress. Задача заключалась не просто в публикации статичной страницы, а в том, чтобы заказчик мог самостоятельно обновлять данные после запуска.
Через административную часть клиент получал возможность добавлять товары и услуги, редактировать тексты и развивать контент без постоянного участия разработчика.
- Интеграция готовой вёрстки с WordPress
- Редактирование товаров и услуг
- Самостоятельное управление контентом
- Меньше зависимости от разработчика
Лендинги для разных продуктов и аудиторий
За время работы я выпускал страницы для студий йоги, продавцов строительных материалов, образовательных курсов, персональных сайтов и визиток ведущих. Также были проекты по аренде и выкупу автомобилей, продаже аксессуаров для телефонов и другим направлениям.
Постоянная смена тематики учила быстро погружаться в задачу, понимать структуру предложения и переносить визуальный макет в понятный сценарий: от первого экрана до формы заявки.
- Студии йоги и образовательные курсы
- Строительные материалы
- Персональные сайты и сайты ведущих
- Автомобили и мобильные аксессуары
Практический опыт и собственный производственный процесс
Главным результатом стали около 15–20 выпущенных коммерческих лендингов и опыт самостоятельной ответственности за frontend — от получения макета до работающей адаптивной страницы с формами и интеграциями.
Одновременно я сформировал собственный подход к производству: автоматизировал повторяющиеся операции, создал переиспользуемую основу и научился выпускать проекты в короткие сроки без потери необходимой кроссбраузерности.