10.08.2017

Адаптивная верстка посадочных страниц сайта PayU под мобильные устройства

payu.ru

PayU – ведущий международный платежный сервис, представленный в 16 странах Азии, Центральной и Восточной Европы, Латинской Америки, Ближнего Востока и Африки. Сайт, изначально адаптивный, предоставляя нам дизайн-макеты в psd формате, на выходе получил посадочные страницы с адаптацией под мобильные устройства.

Мы сделали более 5-ти различных страниц для сайта PayU. Они содержат всем известные для сайта элементы: вкладки, слайдеры, счетчики, переключатели и многое другое. Несколько страниц представлено ниже:

Данная страница интересна тем, что в первой открытой вкладке, при прокрутке страницы постепенно меняются изображения из столбца "приблизительное расположение элементов на сайте".

В следующем примере представлена простая посадочная страница. Она имеет неотъемлемое SEO преимущество из-за обширного контента. Чтобы посетитель страницы не заблудился на ней и сразу же не покинул ее, landing page не перегружен информацией, изображениями, кнопками. Все лаконично, но в то же время интересно, только необходимые данные и изображения.

В дизайне посадочных страниц использованы вкладки, это один из популярных способов экономии места на страницах сайтов. На картинках представлены два варианта: desktop-вариант и мобильное разрешение.

- https://www.payu.ru/masterpass
- https://www.payu.ru/partners

Так же на страницу добавлен счетчик, который добавляет числа произвольно от 1 до 5 руб.

На выходе мы получили полноценные адаптивные страницы.

/masterpass

/partners

Мы добавили сторонний плагин, который включает в себя форму для регистрации. Его стиль нельзя менять и адаптировать, все это выбирается у разработчиков на сайте.

Со стороны все эти элементы могут показаться простыми, но сложность и главной особенностью разработки посадочных страниц для сайта PayU было в том, что мы не имели доступа к ftp, к основным файлам сайта (общие стили, скрипты). Весь контент, подключение скриптов и стилей добавлялся через административную панель и редактор страниц Drupal.