Перенос лендингов из Adobe Muse и их верстка под Android

В сентябре 2016 я запускал лендинг для аудита сторонних сайтов. Это был мой первый совместный проект, когда текст на ленд писал не сам, а профессиональный копирайтер. Вышло круто! Конверт в пике достигал ~40-50%. Когда мы пришли к конечному результату, мне лень было переносить проект Muse со всеми файлами к себе на сервер и я его срезал. Так же быстрее.

Протестировал во всех браузерах, на айфоне. Подкрутил пару мест, чтобы и кода по-меньше было и отображалось как надо и разослал коллегам потестить. Ведь одно дело, когда ты сам проверил, а взгляд со стороны порой открывает косяки в совершенно неожиданных местах. Так случилось и в этот раз - в вк мне скинули скрин из Андроида и это было просто ужасно! Блоки накладывались один на другой, половины картинок не было. Даже текст прочитать не удалось, так как всё переплелось в один фрагмент. Просто каша из блоков. Это был шок! Из андроидов на тот момент были только эмуляторы BlueStacks и Nox. В них тестировал еще до запуска - всё ровно, а тут такое.

По итогу проблема была решена. Расскажу, как справился с ситуацией.

Как срезать лендинг

Моральные аспекты сейчас не рассматриваем. «Срезать» или скопировать можно не только чужой сайт, но и свой собственный. Многое зависит от ситуации.

Пошаговая инструкция

1. Нужен браузер FireFox с плагином Scrapbook. В настройках плагина смотрим, куда будут сохраняться данные. Эта папка нам понадобится. Делаем её ярлык на Рабочем столе. Это здорово сэкономит время.
2. Открываем нужный лендинг или сайт. В верхнем меню браузера выбираем Scrapbook -> Сохранить страницу как... Откроется окно с настройками.
3. Выбираем изображения, css и javascript. Уровень глубины захвата ссылок в зависимости от структуры сайта. Если лэнд в 1 страницу, то ставим 0. Если страниц несколько, то 1. Когда речь идет о полноценном сайте, надо считать уровень вложенности по урлу статей и прочих документов.
4. Нажимаем "Сохранить". В процессе работы скрипта это дело можно поставить на паузу и выключить из списка страницы соц.сетей и сторонних сайтов, которые не будут использоваться в нашем проекте.
5. Когда процедура завершится, в правом нижнем углу браузера появится уведомление от ScrapBook, щелкнув по которому можно будет увидеть копию сайта (лендинга), сохраненную у вас на жестком диске.

Бывает, что при переносе ломаются некоторые скрипты, например, таймер обратного отсчета. Такие вещи надо руками допиливать на месте. Происходит это не каждый раз. Поэтому, если есть проблемы в работе с кодом, можно поискать другой исходник. Или, в случае, когда надо скопировать конкретный сайт и без вариантов искать где-то другой такой же, использовать альтернативный способ копирования: сохранить напрямую через браузер без плагинов или с помощью программы Cyotek WebCopy.

Тестирование

Когда ленд срезан, в нем надо поменять почтовые адреса и прочую информацию, а также протестировать на корректное отображение на различных устройствах и браузерах. Себе я иногда делаю чисто под ЦА, т.е., если предполагается работать с пользователями компьютеров, то на мобилы можно и подзабить. С мобильным трафиком наоборот.

Проверка на кроссбраузерность

Стандартная процедура: 6 основных браузеров - Google Chrome, Firefox, Yandex, Internet Explorer, Opera, Safari; iPhone, Macbook, Android и эмуляторы различных планшетов.

Загружаем по очереди в каждом, смотрим, чтобы ничего не ехало. При необходимости правим. Обычно если в оригинале всё хорошо и код не чистился "рандомно", т.е. без знания дела, то всё должно остаться в первоначальном виде. Исключения составляют лишь те лэндинги, которые вообще не переносятся подобным образом. Такое тоже бывает.

В случае с Adobe Muse всё копируется полностью. Вместе со скриптами, формами и прочим функционалом. Но есть нюансы: если открыть некоторые лендинги на Андроид 4.4 или более ранних, то может ехать верстка даже в оригинале. Это стоит учитывать при работе с мобильным трафиком, так как в некоторых тематиках эта версия ОС преобладает.

Как проверить верстку на Android

Есть несколько способов:

• физическое устройство на Андроиде;
• эмулятор в браузере;
• десктопное приложение-эмулятор;
• toggle device toolbar в Google Chrome.

С физическими устройствами всё понятно: берем телефон или планшет, открываем через браузер свой новый сайт и смотрим, как отображается. Если что-то едет, править неудобно, так как консоль обычно на пк, а глюки в телефоне.

В качестве эмулятора Андроид в браузере можно использовать Manymo. Здесь много разных разрешений, но минус в том, что старше Андроид 4.4 версий ОС нет, а у пользователей бывают.

Приложения - это многим известные Nox и BlueStacks. В них можно установить браузер и тестировать площадки. Минус в том, что нет консоли и непонятно, какая версия ОС. По итогу в эмуляторах было всё ровно, а в реале на андроиде верстка летела.

Toggle Device Toolbar в десктопном браузере гугл позволяет отображать страницы так, как они выглядят на Samsung Galaxy S5, Nexus 6P и т.д. Можно менять и разрешение. При этом внизу есть раскладка по DOM и CSS элементов, что позволяет быстро находить косяки верстки и править их по факту.

Прямо на глючной странице правим CSS, выравниваем верстку и дополняем свои файлы стилей нужными строками. Это куда проще, чем иметь живой телефон и пытаться устранить косяк в верстке, шаманя при этом на пк и после каждого изменения проверяя все прочие сборки, чтобы там не расползлось.