Сегодня поговорим о том, как сделать мобильную версию сайта.
В сети давно говорят о том, что пора переходить на адаптивные шаблоны или создавать мобильные версии сайтов.
И, хотя нынче 90% разрабатываемых шаблонов изначально являются адаптивными, на большей части вебсайтов, до сих пор, используются шаблоны с обычной фиксированной версткой - а ведь в некоторых нишах количество мобильного трафика достигает 80%!
Подтолкнуть вебмастеров решил Google, разослав владельцам "не мобильных" вебресурсов официальные письма о том, что их детище должно быть оптимизировано под мобильные устройства, иначе оно будет плохо ранжироваться в поисковой выдаче.
Процесс закономерный - трафик с планшетов и смартфонов растет, а их пользователи намного чаще возвращаются на проекты, оптимизированные под эти устройства - пришло время позаботиться о том, чтобы им было удобно.
Поэтому руководство Google приняло решение добавить в поисковую выдачу, в сниппеты сайтов, адаптированных под чтение с маленьких экранов, ссылку mobile-friendly – дружественный к мобильным устройствам.
Она должна привлечь внимание пользователей, так как последние исследования показали:
- 74% пользователей заявили, что они, скорее всего, будут возвращаться на такие дружелюбные для них ресурсы.
- 61% юзеров заявили, что если они с мобильных устройств быстро не могут найти то, что им надо, то они уходят.
Но, это планы на будущее, а пока, у Google появился сервис для определения "мобильности сайтов" - https://www.google.com/webmasters/tools/mobile-friendly/.
Чтобы проверить свой сайт, нужно указать URL и нажать кнопку Analize.
Что интересно, некоторые шаблоны, не оптимизированные под планшеты, Google определяет, как мобильные и наоборот.
Почему так?
При тестировании, сервис проверяет не только саму верстку, но и то, насколько близко расположены друг к другу элементы (кнопки меню, картинки, ссылки и пр.) и, соответственно, насколько удобно (по версии Гугла), будет пользователю нажимать на них пальцем.
Если он сочтет, что элементы расположены удобно для пользователя, то может счесть такой шаблон мобильным.
Вот пример такой коллизии – recepty-multivarka.ru с установленной темой Cooking Recipe. Тема не "мобильная", но Google относит ее к таковым.
Если же, в адаптивной версии, элементы страницы размещены близко друг к другу, Google может причислить такой сайт к не мобильным.
Нужно сказать, что переходить на адаптивные шаблоны придется всем, так как ранжирование в поиске по принципу мобильности и для Яндекса - вопрос времени.
Хотя, сильно спешить надобности нет – по крайней мере, пара месяцев для внесения изменений, у нас есть.
Сначала, стоит проверить статистику и выяснить, какой процент трафика приходит на ваш ресурс с планшетов и смартфонов. Если этот процент – внушительный, например 20% или, даже, больше, это будет дополнительным аргументом "мобилизации" вашего сайта.
Но, сначала давайте определимся с терминами, чтобы не было путаницы.
В чем разница между мобильным, адаптивным и отдельным мобильным сайтом или шаблоном?
Адаптивный (в просторечьи, мобильный) – это такой шаблон, который изменяет верстку и, соответственно, внешний вид в зависимости от размера экрана устройства, через которое его просматривают.
Адаптивный шаблон дает возможность сделать сайт одинаково доступным, и с планшетов, и со стационарных компьютеров. Кроме того, на нем один и тот же контент загружается одинаковым для всех платформ.
Адаптивные шаблоны часто путают с резиновыми.
Но, резиновый – это шаблон, в котором контент просто растягивается во всю ширину экрана.
Термины "мобильный" и "адаптивный" часто используют для обозначения одного и того же сайта, в отличие от "отдельного (самостоятельного) мобильного сайта".
Отдельный мобильный сайт, как правило, имеет индивидуальный адрес и содержание, которое больше приспособлено для пользователей с планшетами.
С терминами разобрались.Теперь самый главный вопрос:
Мобильная версия сайта: как ее сделать?
Варианты существуют следующие:
Содержание:
- 1. Установить шаблон, уже адаптированный под все устройства
- 2. Установить плагин для создания мобильной версии
- 3. Воспользоваться специальными сервисами для создания мобильной версии сайта
- 4. Заказать разработку адаптивной или мобильной версии сайта
↑ 1. Установить шаблон, уже адаптированный под все устройства
Установить шаблон, уже адаптированный под самые различные устройства, т.е. адаптивный - это самый простой и бюджетный способ.
Пример такого шаблона.
Проще всего, установить адаптивную версию того же шаблона, который вы использовали до сих пор.
Причин этого несколько:
Как правило, панель настроек шаблона создает в базе данных отдельную таблицу, для записи ваших настроек или новые поля в уже существующей таблице, поэтому, если вы установите "мобильную" версию вашего старого шаблона, вам не придется заново настраивать его и вручную чистить базу данных от настроек предыдущего шаблона.
↑ 2. Установить плагин для создания мобильной версии
С плагинами возникла небольшая проблема - мне удалось найти только 2 более-менее рабочих плагина:
Бесплатная версия any-mobile-theme-switcher – скачать можно здесь - https://wordpress.org/plugins/any-mobile-theme-switcher/.
Этот плагин позволяет, как дополнительную версию, выбрать любой мобильный шаблон.
Кроме того, если вы хотите иметь не просто мобильный, а шаблон в том же дизайне, что и ваш основной, вам придется его сделать самостоятельно или заказать кому-нибудь - настроек, позволяющих создать мобильную версию прямо в админке, плагин не имеет.
И, к сожалению, бесплатная версия плагина не работает корректно с плагинами кеширования.
Платный wptouch-pro - http://www.wptouch.com/. Стоит он от 49 до 350$ в зависимости от набора дополнительных функций.
У этого плагина, также, есть бесплатная версия, но она имеет существенные ограничения – меньше настроек и нет возможности установить рекламу.
Кроме того, в бесплатной версии, если у вас установлен плагин кэширования, правильно настроить взаимодействие кэша и мобильной версии сайта будет оооочень сложно. А, если не настраивать, то может произойти так, что посетители с обычными компьютерами будут видеть мобильную версию, которая попала в кэш.
↑ 3. Воспользоваться специальными сервисами для создания мобильной версии сайта
Один из самых популярных сервисов такого рода - howtogomo.com.
Сервис разрешает один год бесплатного использования, а дальше, предлагает платить за услугу по 9,9 доллара в месяц.
И, хотя создать мобильную версию при помощи этого сервиса можно очень легко и быстро, я советую этот способ исключить сразу потому, что все сервисы, которые мне встречались, и этот в том числе, хранят файлы созданных версий на своем сервере, соответственно, загрузка файлов происходит оттуда.
Поскольку скорость мобильного интернета, у нас часто оставляет желать лучшего, что будет, если с одного сервиса начнут загружать файлы 100 или 1000 сайтов?
Совершенно верно, ваша мобильная версия начнет тормозить, и, местами, очень сильно.
↑ 4. Заказать разработку адаптивной или мобильной версии сайта
Остался последний способ – заказать уникальный адаптивный шаблон разработчику.
Заказ такого шаблона с нуля, нужно сказать, стоит достаточно дорого:
- Адаптивный шаблон с дизайном средней сложности и исполнением среднего качества стоит в рунете от 60 000 руб. В хорошем исполнении и с SEO оптимизацией кода – и того дороже.
- Отдельный мобильный сайт с исполнением среднего качества стоит от 40 000 руб.
- Мобильная версия уже существующего сайта в исполнении среднего качества стоит от 9 000 руб.
Конечно, если у вас раскрученный портал, который уже приносит прибыль, можно заказать отдельную версию.
Но, если вы новичок в интернете то, индивидуальная разработка может оказаться вам не по карману.
Хочу вас предостеречь:
Почти все адаптивные шаблоны (и готовые, и заказные) нынче создают на основе фреймворков - это быстрее и проще, чем верстать все с нуля.
Чем это грозит владельцу заказчику?
Фреймворк содержит массу готовых стилей и скриптов, большинство из которых вам никогда не понадобится.
Но, все они окажутся подключены в вашем шаблоне и все будут загружаться, при загрузке каждой страницы, что будет сильно тормозить загрузку страниц.
Поэтому, если заказываете шаблон разработчику, обязательно предупреждайте о том, что ваш шаблон не должен разрабатываться на основе готового фреймворка.
Итог:
- Учитывая все выше написанное, самый простой способ получить "мобильный" сайт - это приобрести (найти бесплатный или сделать самому) адаптивный шаблон.
- На втором месте, приобрести, найти или создать самому мобильный шаблон с установкой его через плагин.
- Заказать индивидуальную адаптацию Вашего сайта у опытных верстальщиков.
С хорошей версткой, контент удобно впишется в любой экран, тесты на мобилопригодность от Яндекса и Google пройдут на отлично!
Теперь о том, как протестировать работу адаптивного сайта
Это можно сделать при помощи специальных сервисов:
Первый - http://mattkersley.com/responsive/
Нужно ввести URL в специальное поле и нажать Enter.
Вы увидите отображение страницы во всех возможных устройствах.
Сервис http://responsive.victorcoulon.fr/ предназначен для разработчиков.
Он предлагает перетащить свою закладку на панель закладок браузера.
Перейдя на нужный сайт и нажав закладку, вы получите в браузере панель с картинками различных разрешений экрана.
Просто нажмите нужную и увидите отображение страницы на этом устройстве.
http://deviceponsive.com – в этом сервисе лучше просматривать сайт, если у вас большой экран монитора. Все будет выглядеть очень зрелищно.
http://quirktools.com/screenfly/ еще один очень функциональный сервис.
Здесь можно проверить отображение страницы во всех возможных устройствах и в невозможных, тоже :).
В заключение, предлагаю протестировать мой новый адаптивный шаблон Sabrina Responsive.
Да, пришло время объяснять клиенту что такое адаптивный сайт и почему нужно платить больше за его разработку, чем раньше.
Показательным был у меня крайний проект, где заказчик запросив ужасно бюджетный сайт-визитку захотел чтобы элементы дизайна по краям страницы были видны всегда и у всех. Пришлось тупо урезать ширину страницы, увеличить элементы дизайна, т.к. доплачивать за адаптивность они отказались.
Хорошо. Не так давно задавала вопрос по оптимизации шаблона Сабрина. У меня вопрос, данная версия отличается от предыдущей. Не будут ли искажены картинки, я изначально их подстраивала под тему. Я так поняла, здесь отсутствует карусель. Хотелось бы получить больше информации по данной теме.
Искажений картинок быть не должно, так как в адаптивной версии используются те же размеры, что и в предыдущих версиях.
Карусель в теме есть.
Подробнее о функционале темы Sabrina можно узнать на странице темы, вкладка Функционал и версии темы.
Огромное спасибо за статью! Как-то все было некогда задумываться над адаптивностью сайта...
Здравствуйте, Людмила!
Спасибо за информативную и полезную статью. Как всегда, Вы пишете понятно и доступно:)
Очень удивилась, прочитав, что Ваш кулинарный шаблон сервис проверки посчитал адаптивным. На моём кулинарным сайте также установлена тема Cooking Recipe, однако проверка показывает, что сайт не оптимизирован для мобильных устройств.
Буду благодарна, если Вы подскажете, почему один и тот же шаблон на разных сайтах ведёт себя по-разному.
Возможно, в теме нужно выставить иначе какие-либо настройки, чтобы на моём сайте он также стал восприниматься при анализе, как адаптивный?
Юлия, на указанный в примере сайт, добавлен только вывод контента в виде галереи картинок на Главной - больше ничего.
Возможно вы что то добавляли в тему - форму подписки, какие то виджеты.
Если, в этом добавленном, элементы расположены близко друг к другу, так что при нажатии на них пальцами, можно попасть на соседний элемент - Google мог счесть ваш сайт не мобильным.
А может быть это просто глюки гугловского сервиса - кто знает?
У меня этот шаблон стоит так же на 2-х сайтах и не определяется как адаптивный для мобильных. Пришлось заказывать новые шаблоны.
Так это же не мобильный шаблон :).
А пример я привела для того, чтобы показать субъективность работы гугловского сервиса.
Людмила, здравствуйте. Мой сайт существует 4-ый год, посещаемость доходит до 6 тыс. в сутки. Мобильный трафик 54%. Понимаю, что теряю много посетителей. Очень актуально для меня оптимизировать сайт под мобильные устройства. С плагинами ничего не получилось. Заказывать разработку пока не по карману. Посоветуйте, пожалуйста. Можно ли перенести без ущерба для сайта и без потери трафика весь контент на купленный у Вас адаптивный шаблон?
Контент переносить не нужно, он останется там же, где и был - т.е. в базе данных.
Нужно просто установить новую тему и активировать ее в админке.
В зависимости от того, как в вашей старой теме выводились изображения, возможно придется отдельно настроить их вывод.
Но, если, в вашей теме картинки выводились при помощи миниатюр, тогда ничего дополнительно настраивать не нужно.
Ваша тема Life Style - не адаптивная? Как лучше ее сделать адаптивной? Плагина- достаточно?
Плагина достаточно, если в нем есть возможность настроить мобильную версию.
Мне такие, увы не встречались.
Нм... Адаптивная верстка сайта для меня не проблема. WordPress как раз начну изучать. Спасибо за приглашение, информация по WordPress будет полезна для меня.
Добрый день, Людмила! Подскажите, пожалуйста, у меня тема Сабрина премиум. Как мне сделать ее мобильной?
Вы можете обновиться до новой версии. Инструкцию читайте здесь.
Прочитав заголовок статьи "Мобильная версия сайта: зачем она нужна и как ее сделать?" подумала, что на самом деле будут советы, как адаптировать шаблон. Обратиться к разработчикам - это не совет. Разочарована 🙁
Хотите совет?
Изучить HTML и CSS, и много тренироваться :). Тогда вы сможете самостоятельно адаптировать шаблон.
Иначе, придется использовать готовый шаблон, купленный или заказанный разработчику.
А в статье нет советов, а есть обзор вариантов того, как сделать мобильный сайт.
Здравствуйте, Людмила! Зашёл на Ваш прекрасный сайт по ссылке из пришедшего письма, в котором мне предлагают улучшить мой сайт. Очень хотелось бы узнать, а что с моим сайтом не так, что ещё не хватает ему, может я чего-то не вижу со свего монитора?
Заранее, очень благодарен!
http://myvirtualput.ru/
Посмотрела, у вас хороший сайт.
Но, с моей точки зрения, как разработчика, ему не хватает хорошего шаблона.
В вашем шаблоне - контент начинается с 220 строки, а всего в коде строк меньше 1000.
Это значит, что четверть кода занята какими то тегами и скриптами - не совсем понятно, какими, потому что особого функционала на сайте не видно.
Кроме того, в коде видны десяток файлов стилей.
Большое спасибо, Людмила! Весомые замечания! Честно говоря, тема была установлена недавно "на скорую руку", особо возиться с ней не было времени, дизайн слегка переделал по-быстренькому, на том и успокоился. Заняться поплотней, время только зимой будет, катастрофически не хватает времени. Ещё раз, огромное спасибо за подсказки, сейчас посмотрел, да, действительно, очень многое нужно поубирать из файлов, но тут уже торопиться нельзя, а то получится "Поспешишь..." 🙂
Если кто-то хочет сделать свой сайт адаптивным, советую Людмилу и ее шаблоны в качестве лучшего в рунете варианта.
Знакомый кодер (программист) посмотрев шаблон, подтвердил, что все сделано качественно и на совесть.
Плюс, сайт автоматически адаптируется под любой размер мобильного или планшетного устройства. В будущем, если придумают еще 10 стандартов экрана, вам не надо будет судорожно переделывать под них сайт.
Чтобы не быть голословным, можете оценить http://dobro.pw.
Плюс, благодаря адаптивности (никаких других специальных действий не предпринималось) через 2 недели после установки посещаемость выросла на 20-25%.
Людмила, здравствуйте.
Я как-то покупала шаблоны у вас. Но да, приходится переходить на мобильную версию хорошего качества. Скажите, а у вас новые шаблоны появились мобильные или адаптивные? Не вижу в коллекции, может есть где-то где я не могу найти? Спасибо.
Да, появились новые адаптивные темы Adsense Center, Infobis и адаптивная версия темы Sabrina.
Спасибо, сейчас посмотрю.
ммм... какая интересная новость..
Во, теперь разобрался в вопросе, зачем нужна и с чем её едят.