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

Не так давно я запускал лендинг для аудита сторонних сайтов. Это был мой первый совместный проект, когда текст на ленд писал не я, а копирайтер. Имхо, вышло круто! Ну так вот, когда мы пришли к конечному результату, мне лень было переносить проект Muse со всеми файлами к себе на сервер и я его срезал. Так же быстрее)

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

Сейчас, когда проблема решена, расскажу, как справился с ситуацией.

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

Начну с самого начала. В таком формате это будет полезно и тем, кто только начинает в товарке и испытывает сложности при копировании landing page. Моральные аспекты сейчас не рассматриваем. Каждый для себя сам решит, делать ему с нуля или скопировать готовый и обломать автора, который вложил немало денег и времени в разработку.

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

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

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

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

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

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

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

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

В случае же с 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, выравниваем верстку и дополняем свои файлы стилей нужными строками. Это куда проще, чем иметь живой телефон и пытаться устранить косяк в верстке, шаманя при этом на пк.

Понравилась статья? Расскажи о ней друзьям!

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *