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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Источник: www.seonews.ru