×
Россия +7 (495) 139-20-33

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

Россия +7 (495) 139-20-33
Шрифт:
0 8222

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

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

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

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

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

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

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

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

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

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

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

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

Главная mobile 1.png   Главная mobile 2.png

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

Знакомства mobile.png   Знакомства mobile 2.png

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

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

код 1.PNG

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

код 2.PNG

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

код 3.PNG

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

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

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

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

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

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

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

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

Трафик.png

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

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

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

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

(Голосов: 5, Рейтинг: 5)
Читайте нас в Telegram - digital_bar

Есть о чем рассказать? Тогда присылайте свои материалы Марине Ибушевой


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Как работать с сервисом для блогеров и бизнеса Perfluence
SergZa
1
комментарий
0
читателей
Полный профиль
SergZa - Не знал, что с небольшим количеством подписчиков можно заработать, буду пробовать;)
Диагностика и снятие ссылочного фильтра «Минусинск» в 2021 году. Кейс
Stanislav Romanenko
7
комментариев
0
читателей
Полный профиль
Stanislav Romanenko - Просто чисткой ссылочного можно просадить позиции в гугле, поэтому с бухты-барахты начинать удалять ссылки как-то тоже не хотелось бы. Ну в общем, если попадётся ещё подобный случай - не стесняйтесь выкладывать новый кейс :) Просто видите как мало кейсов по этому поводу, поэтому каждый на вес золота. "с этой бедой также приходится сталкиваться и пока кроме как крутить в обратную сторону ничего лучше не придумали." - на серче один товарищ скрипт антибота своего под это дело заточил searchengines.guru/ru/forum/981615/page39#unread - вроде боты пропадают, но и часть живых людей тоже :)
Михаил Ляшенко (PostMarket): о рынке инфлюенс-маркетинга и рекламе у блогеров
Данил Щеглов
1
комментарий
0
читателей
Полный профиль
Данил Щеглов - Сервис вообще отличный. Я обращался для рекламы к блогерам, которых я мог даже сам выбрать. Справляются быстро и качественно.
Облако тегов в интернет-магазине: прикладная инструкция по увеличению трафика
Юлия Дмитриева
2
комментария
0
читателей
Полный профиль
Юлия Дмитриева - Согласна с вами, что в любом деле важен индивидуальный подход:)
Специалисты в Рунете заметили глобальную накрутку поведенческих факторов
Дмитрий Кулаевский
1
комментарий
0
читателей
Полный профиль
Дмитрий Кулаевский - кто-нибудь знает как с этим бороться? очень много такого трафа идёт с июля, сайт сильно просел
Как мы увеличили трафик из Яндекса более чем в 3 раза за неделю на сайте клиники. Кейс
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - У большинства сайтов произошел рост в Гугле в декабре и в марте Яндекса. Ваши шаманства тут не причём :)
Увеличение трафика новостного сайта в 2 раза с помощью SEO. Кейс
Гость
1
комментарий
0
читателей
Полный профиль
Гость - Делали подобное тут ruszakony.ru/rubrikator/ , получилось полная фигня
5 книг от эксперта: Александр Алаев (АлаичЪ и Ко)
Сергей
1
комментарий
0
читателей
Полный профиль
Сергей - Богатый папа, бедный папа - сборник мифов, которые уже разоблачил все. Все сразу стало понятно про "эксперта". Дальше можно список не смотреть. Прочитать ее конечно можно, если ничего другого нет под рукой, но советовать другим, это уже извините, совсем людей не уважать.
Локальное SEO, или Как увеличить трафик стоматологии на 700% в небольшом городе
Дмитрий Дмитриев
1
комментарий
0
читателей
Полный профиль
Дмитрий Дмитриев - расскажите, о чем именно речь? :)
Сколько стоит SEO на фрилансе. Кейсы
Людмила
1
комментарий
0
читателей
Полный профиль
Людмила - Очень спорная статья. Особенно оценка. К примеру, за 1500 руб. 200 вечных ссылок с быстрой индексацией. Это про какой год? Про 2020? Точно? Собственно, в текущих реалиях при хорошем раскладе за эти деньги можно получить 3-4 качественные ссылки. А никак не 200. Если 200, то такие ссылки, по 7,5 руб. за штуку выбьют сайт за ТОП-100. А заказчик будет в шоке, он же все правильно делал, по инструкции из статьи в уважаемом издании.
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
385
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
121
Комментариев
113
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
92
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
65
Комментариев
62
Комментариев
60
Комментариев
59

Отправьте отзыв!
Отправьте отзыв!