×
Россия +7 (909) 261-97-71

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

Россия +7 (909) 261-97-71
Шрифт:
0 11989
Подпишитесь на нас в Telegram

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

В ноябре 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 и Яндекса по оптимизации страниц мобильной версии.

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

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
Роскомнадзор начал требовать от владельцев сайтов уведомлять об использовании Google Analytics. Опыт SEOnews
Денис Добрынин
1
комментарий
0
читателей
Полный профиль
Денис Добрынин - Что-то я как-то пропустил момент, с которого например госномер автомобиля или разрешение монитора и версия установленного на ПК ОС стала перс.данными... Но сегодня тоже получили бумажку с ай-яй-яем. Пойдем на прием в теруправление.
В Почте и Облаке Mail появился новый тариф – «Семейный»
Анна Макарова
393
комментария
0
читателей
Полный профиль
Анна Макарова - Да, конечно, владелец видит все файлы. А про других пользователей так написано: подключившие этот тариф, могут добавлять в подписку до 4 пользователей. Всем, кого пригласили в подписку, предоставляется доступ к терабайту облачного пространства для общих дел.
Фиды, фильтры, внутренний поиск: как выжать максимум при технических ограничениях и увеличить трафик более чем в 5 раз
i-Media интернет-агентство
2
комментария
0
читателей
Полный профиль
i-Media интернет-агентство - Google Merchant работает, товары показываются - в кейсе есть скриншот с примером.
Россиянам могут запретить рекламу в Instagram* и Facebook*
Марина Ибушева
66
комментариев
0
читателей
Полный профиль
Марина Ибушева - Окончательное как раз и означает третье. Любой законопроект перед тем, как отправиться в Совет Федерации и на подпись прзиденту, проходит в России три обязательные стадии рассмотрения в Государственной Думе: Первое чтение - обсуждается общая концепция законопроекта. Второе чтение - более детальное обсуждение проекта, поправки и дополнения. Третье чтение (окончательное) - голосование за проект. Так что ожидается 25 марта второе и третье, окончательное чтение.
Тренды SEO в 2025 году
Борис
4
комментария
0
читателей
Полный профиль
Борис - 50/50 Описанная тобой ситуация (надеюсь, не против, что сразу на "ты") — типичная и вообще не требует какого-то глубинного опыта. Достаточно немного логики и наблюдательности. Разобью на пункты для читабельности: 1) Каннибализацию очень просто распознать. Достаточно загрузить СЯ в систему съёма позиций и мониторить источники. Если происходит некое «мигание» — идём (повторно) в топ, смотрим, подтверждаем гипотезу — склеиваем. 2) Но чаще всего эту проблему можно решить на уровне качественной группировки СЯ. А некоторые кластеры со знаком вопроса, которые мы решили разделить на несколько, достаточно держать под контролем. И снова получается, что внимательность и логика здесь могут помочь. И никакого серьёзного опыта не требуется. 3) Соглашусь, что в Яндексе правило "Интент = одна страница" — очень важно, но не всегда. Например, есть кластер, связанный с установкой сантехники, который включает запросы: "установка сантехники", "цена на установку сантехники". Вот здесь, как раз, для многих может быть неочевидно, что кластер лучше разделить на два: "Установка сантехники" и "Цена на установку сантехники". 4) Продолжая мысль из п.3 — в такой ситуации в Яндексе (скорее всего) всё будет ок. И никакой каннибализации не произойдёт. 5) Если говорить про Google (тот же п.3), то здесь, вероятно, возникнут проблемы (всё зависит от оптимизации страниц). Эти два кластера могут не дотянуть до топа из-за своей релевантности. Мы все знаем, что Google может «съесть» страницу с несколькими интентами, и всё будет ок. (в этом предложении пасхалка, что нужно сделать ;)) А если ещё поработать над ссылочным — вообще сказка. Конечно, эту проблему можно решить, но если переборщить, то каннибализация может уже произойти в Яндексе. Вот как раз чтобы уловить эту тонкую грань, и нужен хоть какой-то опыт, которого часто нет у джунов.
Целевая аудитория: как найти и встроиться в ее вселенную
Александра
2
комментария
0
читателей
Полный профиль
Александра - Здравствуйте! Благодарю Вас за отличную статью! Много полезной информации, написано доступным языком.
Количество пользователей ИИ в сервисах Mail превысило 5 млн человек
Сергей Карененко
1
комментарий
0
читателей
Полный профиль
Сергей Карененко - Поздравление еще худо бедно написать можно. А когда в почте больше 10к писем, вот тут хорошо, что ии есть)
Главные апдейты Google 2024: что изменилось и как продвигать сайты в 2025 году
Старый сеошник
5
комментариев
0
читателей
Полный профиль
Старый сеошник - Ребята, ну серьёзно? Это исследование и итоги?) Просто везде: усиливает борьбу, улучшение контента, улучшение ссылок и т.д. А что нового? А где конкретика, цифры, динамика? Или итог: В 2025 году продвижение сайтов должно опираться на качество контента и улучшение пользовательского опыта. Браво, ради этого стоило писать статью) Информативность 0. Возразите мне?
Сравнительный анализ сервисов для оценки трафика российских сайтов
Константин Булгаков
1
комментарий
0
читателей
Полный профиль
Константин Булгаков - Коллеги, очень большая работа проведена. Спасибо за исследование
После замедления YouTube треть россиян перешли на другие видеосервисы
Александр Лирионов
1
комментарий
0
читателей
Полный профиль
Александр Лирионов - Сейчас нормально с частными серверами только, кому надо дельный - в тг найдите @dzenvpnbot
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
393
Комментариев
373
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
141
Комментариев
124
Комментариев
121
Комментариев
100
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
80
Комментариев
77
Комментариев
74
Комментариев
67
Комментариев
66
Комментариев
60
Комментариев
59

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