Как мы переехали в mobile. История «Фотостраны»

Для начинающих

В ноябре 2016 года Google объявил о запуске тестирования мобильного индекса и рассказал о приоритете в ранжировании мобильной выдачи сайтов, адаптированных под телефоны и планшеты. После этого многие разработчики, которые до этого не задумывались, насколько мобильная версия продукта удобна для пользователей, начали ее создавать.

Всего существует три варианта мобильных версий сайтов:

• Адаптивная верстка. Она предполагает, что существует одна версия сайта, которая автоматически адаптируется под размеры разных экранов, будь то компьютер или мобильное устройство.
• Динамический показ разных страниц в зависимости от типа браузера. Мобильная и десктопная версии выглядят по-разному, написаны на разных кодах (HTML или CSS), но имеют один и тот же адрес. При запросе этого адреса в зависимости от используемого устройства выдаются либо страницы, написанные для телефонов и планшетов, либо компьютерные версии.
• Мобильная версия на субдомене. В этом случае мобильная версия отличается от десктопной и имеет свой адрес.

Варианты с адаптивной версткой и динамическим показом страниц нам не подошли из-за того, что аналогичные разделы на основной и мобильной версии сильно различались. Например, игровой каталог содержит разные приложения для десктопных и мобильных устройств, а раздел «Фотоконкурс» использует различную механику и структуру урлов для взаимодействия с пользователями в обычной и мобильной версии.

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

При работе над интерфейсом мобильного сайта дизайнеры и верстальщики должны учитывать особенности устройств.

Во-первых, важно помнить, что существуют не только «лопаты», но и девайсы с маленьким экраном, из-за чего следует выделять «пограничные» разрешения и компоновать элементы интерфейса с их учетом. Допустим, для маленьких экранов изображение может находиться над заголовком статьи, а для больших — слева от него. Таких ситуаций много, и это значительно усложняет разработку.

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

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

Также нельзя забывать о том, что мобильные устройства имеют серьезные ограничения по вычислительным ресурсам. Любые плагины или фреймворки нужно применять аккуратно, иначе телефон будет тормозить и активно тратить батарею. Так, например, мы отказались от использования популярного фреймворка ReactJS. Анализ производительности показал, что React потребляет слишком много оперативной памяти устройства, и мы заменили его на VanillaJS.

В итоге главная страница сайта на мобильном устройстве выглядит так:

   

А один из основных разделов сайта — «Знакомства» — в мобильной версии превратился в такой аналог:

   

Дальше нужно было связать между собой страницы основной и мобильной версии.

На страницах основной версии были установлены такие теги:

Соответственно, в мобильной версии:

Также, учитывая наличие приложений в Google Play и App Store, мы в обе версии добавили теги, связывающие страницы сайта с официальными приложениями:

Для обоих приложений мы выполнили оптимизацию для соответствующего маркета:

1. Ввели в название основные ключевые слова: «Фотострана: знакомства и общение».
2. Включили в поля описания и ключевых слов второстепенные ключевики, как, например, «знакомства онлайн», «знакомства рядом», «чат» и др.
3. Подобрали иконки, дающие высокую кликабельность при поиске внутри каждого маркета.
4. Сделали скриншоты, наглядно показывающие потенциальным пользователям, что представляет из себя приложение.

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

Официальное приложение в выдаче Google:

Официальное приложение в выдаче Яндекс:

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

Основные причины такого роста:

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

2) Выполнение всех рекомендаций Google и Яндекса по оптимизации страниц мобильной версии.

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