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

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

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

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

В ноябре 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
Что скрывает «Прогноз бюджета Яндекс.Директ»?
Михаил Мухин
14
комментариев
0
читателей
Полный профиль
Михаил Мухин - Здравствуйте! 1-2. Считает стенд. Ссылка на него дана, но могу повторить: online.p-c-l.ru/competition/task/card/id/106. Нажмите на кнопку "Начать" и заранее приготовьте прогноз бюджета Яндекс. Суть расчета: перебор комбинаций всех ставок на всех фразах, построение бюджетных когорт - бюджетов с одинаковым СРС, отбор в каждой когорте бюджета с максимальным количеством кликов и ..., да упорядочивание этих бюджетов по мере возрастания СРС, причем берем не все, а с фиксированным шагом. 3. Гугл считается через поправочные коэффициенты. Мы перевариваем океан данных и представляем их. На удивление, получается не менее, хотя и не более точно, как и прогноз Яндекс. Конечно, нужно понимать, что это очень примерные прикидки, фактически перевод неточного прогноза Яндекс в удобочитаемую форму, не больше. Самое интересное начинается, когда применяешь метод бюджетных когорт к измерению показателей фраз на реальной рекламной кампании в режиме 48х7. Первые результаты очень хорошие. Если хотите присоединиться к бесплатному тестированию, напишите Эльвире r-support@r-broker.ru. В теме укажите "хочу присоединиться к тестам Умного управления рекламой"
#SEOnews14: мы празднуем – вы получаете подарки!
Анна Макарова
362
комментария
0
читателей
Полный профиль
Анна Макарова - Гость, добрый день! С победителями мы связывались сразу после розыгрыша. Если мы вам не написали, значит, ваш номер не выпал. Но не расстраивайтесь, у нас обязательно будут новые розыгрыши!
Ссылочное продвижение локальных сайтов: ТОП худших SEO-методов
demimurych
5
комментариев
0
читателей
Полный профиль
demimurych - о господи. это для регионального сайта? в яндексе? где у сайта по региону конкурентов меньше чем выдачи на двух страницах из которых перваш это реклама москвы? потешно ей богу. ктото чего то не понеимает.
Как ускорить сайт на WordPress, чтобы получить 100/100 в Google PageSpeed Insights
Георгий
1
комментарий
0
читателей
Полный профиль
Георгий - Все что рекомендуется в этой статье есть у w.tools. Ни разу не пожалел что подключился. Своя CDN сеть, кеш статики и динамики, минификация js\css и кешируемого html, оптимизация всех типов картинок и еще куча всего полезного. Сайт летает и я не знаю проблем. Могу рекомендовать от души.
«Аудит, чтобы ты заплакала…», или Что делать, когда получил сторонний аудит сайта
Евгений
1
комментарий
0
читателей
Полный профиль
Евгений - Воообще, на самом деле здесь двоякое впечатление от таких аудитов. Конечно, для полного глубокого анализа и подготовки рекомендаций по сайту - нужны доступы к системам аналитики и инструментам вебмастера. Но если оценивать подобные аудиты с точки зрения чистого SEO (которое все больше и больше становится лишь малой частью digital-маркетинга, лишь одним из каналов) - они имеют место быть. Но с оговоркой, что они сделаны с учетом анализа конкурентов/отрасли. Современные инструменты и алгоритмы позволяют делать это маркетологам в автоматическом режиме, и даже давать рекомендации - возможностями машинного обучения уже никого не удивишь. Да, полное перечисление "мифического" списка ошибок, построенного по предикативным правилам, да еще и с учетом устаревших особенностей ПС - это явный признак некачественного аудита. В первую очередь потому, что эти "ошибки" следует рассматривать в качестве рекомендаций от ПС (как и говорится в справочнике вебмастера у Яндекса/Google). Однако если эти данные даются с отсылкой на данные о конкурентах, об отрасли, используются методы ML и Natural language processing для обработки исходных данных, кластеризации запросов, классификации страниц/запросов/сайтов, определения структуры документа - такие отчеты имеют право на существование. Но ключевым моментом является то, что подобные инструменты достаточно сложны в разработке, а значит требуют квалифицированных специалистов для их разработки. Которых просто нет у студий рассылающих подобные "сео отчеты". Подобные отчеты по "ошибках" тоже неплохой источник информации, но лишь на 0 этапе анализа сайта. И в принципе, теоретически, возможно почти полное составление "хороших аудитов" без участия маркетолога, на основе лишь открытых данных сайта/внешних источников, но только при соответствующем применении всех современных возможностей анализа данных и рекомендательных систем. И в любом случае подобный "хороший отчет" требует конечного заключения от эксперта.
От мечты стать юристом к собственному SMM-агентству. Как найти себя в современном цифровом мире
Виктор Брухис
5
комментариев
0
читателей
Полный профиль
Виктор Брухис - Статья выглядит так, как пожелали редакторы и интервьюер) Вопросы к интервью подбирал не я)) Хотя, в целом я согласен с вашим видением. А за пожелание удачи большое спасибо!
BDD 2019: Как перестать убивать время на сбор и обработку тонны данных для SEO-аудита
Kosta Bankovski
4
комментария
0
читателей
Полный профиль
Kosta Bankovski - Спасибо за приятные слова! Буду и дальше делиться наработками ;)
Как провести анализ содержания страниц товаров и категорий
Никита Седнин
3
комментария
0
читателей
Полный профиль
Никита Седнин - Спасибо!
Как вывести сайт в ТОП 10 Google в 2019 году
Роман
1
комментарий
0
читателей
Полный профиль
Роман - Вот скажите пожалуйста, Мне разработали сайт на мою фирму, www.линк.kz и теперь надо решить, сео продвижение у нас стоит около 25000 - 30000 руб. в месяц, для меня сумма не маленькая стоит ли оно того? или можно просто оптимизировать сайт в плане СЕО и выходить в ТОП за счет трафика?
Как я пытался купить CRM-систему, но мне ее поленились продать
Kristina
1
комментарий
0
читателей
Полный профиль
Kristina - Очень рекомендую CRM-систему польской фирмы Firmao. Все функции настраиваются в соответствии с индивидуальным потребностям компании! Советую попробовать бесплатную демо-версию, чтобы попробовать все необходимые функции, без лишних кнопок и траты дополнительных финансов! :) Сайт: firmao.ru/info
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
362
Комментариев
262
Комментариев
249
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
107
Комментариев
97
Комментариев
97
Комментариев
96
Комментариев
82
Комментариев
80
Комментариев
77
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55

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