Как сделать для сайта мобильную версию
Как сделать сайт действительно удобным для мобильных устройств
Наверняка каждый не раз сталкивался с тем, как иногда важно быстро найти с мобильного телефона удобный и понятный сайт с нужной информацией. Именно поэтому некоторое время назад мы начали отмечать в мобильной выдаче страницы, оптимизированные для мобильных устройств, меткой «Мобильная версия», а также отдавать им предпочтение при ранжировании.
На основе наиболее частых вопросов ко мне я составил вот такие рекомендации для тех, кто только адаптирует сайт под мобильные устройства, и для тех, кто уже является гуру в этой области.
1. Какие бывают мобильные сайты
Обычно сайты представляют для мобильных устройств одним из трех способов:
2. Несколько слов о создании сайта.
Для создания мобильной версии существует множество плагинов и сервисов, также многие конструкторы сразу предоставляют возможность сделать мобильный сайт. Но одной технологией мобилопригодный сайт часто не создать – важен и контент. При работе над содержимым мобильной версии сайта стоит размещать ту информацию, которая будет полезна именно для пользователей мобильного интернета. Она может немного отличаться или не полностью дублировать тексты полной версии – это нормально. Главное, чтобы идея и содержание страницы оставались прежними.
Совет. После создания мобильной версии откройте её с нескольких мобильных устройств и проверьте, удобно ли с ней работать. Обратите внимание, что у немалой части пользователей смартфоны с небольшим разрешением экрана, поэтому необходимо учесть и их интересы и сделать сайт комфортным для просмотра с большинства устройств.
3. Как проверить сайт на мобилопригодность
Для проверки сайта вы можете воспользоваться инструментом в бета версии сервиса Яндекс.Вебмастер «Проверка мобильных страниц».
Самыми распространенными ошибками, которые позволяет выявить инструмент в Яндекс.Вебмастере, являются наличие горизонтальной прокрутки, много мелкого текста, отсутствие или неверное расположение мета-тега «viewport», а также наличие невоспроизводимого видео.
4. Что делать, если обнаружены ошибки
Хочу поподробнее остановиться на тех замечаниях, которые вы можете увидеть в сервисе Яндекс.Вебмастер:
Горизонтальная прокрутка
Если при проверке сайта в Яндекс.Вебмастере выявлена горизонтальная прокрутка, возможно, ширина его страниц больше среднего. Как правило, большинство пользователей использует смартфоны c разрешением 320 px, вы можете ориентироваться на эту величину. Заметьте, некоторые браузеры могут автоматически сжимать страницу под размеры мобильного устройства, поэтому вы можете и не обнаружить прокрутки при просмотре сайта, чего может не произойти у посетителя вашего сайта, и он увидит полосу прокрутки. Вместе с этим следует проверить отступы, встроенные картинки и логотипы – возможно, именно из-за них меняется итоговая ширина той или иной страницы.
Много мелкого текста
Если на сайте обнаружено много мелкого текста, то это также может быть следствием большой ширины страницы. Даже если шрифт на вашем сайте составляет 12 px, а ширина страницы равна, к примеру, 720 px, то браузер, сжимая страницу до среднего значения, скорее всего, уменьшит его почти в 2 раза.
В данной ситуации необходимо либо увеличивать размер шрифта таким образом, чтобы после масштабирования он оставался читаемым, либо менять ширину страницы, приводя её к рекомендуемой.
Отсутствие мета-тега «viewport»
Тогда вам не нужно будет устанавливать фиксированную величину и удастся избежать горизонтальной прокрутки.
Наличие Flash-элементов
Если на вашем сайте размещены видеоролики, убедитесь, что они корректно воспроизводятся с мобильных устройств и имеют формат HTML5. К сожалению, форматы Flash, Silverlight и Applet большинство мобильных браузеров не воспринимает, поэтому старайтесь не использовать их.
Мне бы также хотелось рассказать вам подробнее об индексировании мобильной версии сайта на поддомене, но это будет немного позже, ждите новой записи. Чтобы не пропустить пост, вы можете подписаться с помощью кнопки «Подписка» вверху страницы.
Надеюсь, я смог прояснить ситуацию по ряду вопросов о мобильной версии сайта. Создавайте и пользуйтесь с удовольствием!
Индексирование мобильной версии сайта на поддомене
Муки выбора или как назвать мобильный сайт
Копипаст или должен ли отличаться контент
Если ваш основной сайт достаточно ёмкий, рекомендуется упростить адаптивную версию сайта, оставив только нужный, с вашей точки зрения, контент для посетителей из мобильного поиска. Вы можете видоизменить тексты, оптимизировав их для легкого восприятия пользователей с мобильных устройств, но при этом наполнение не должно кардинально отличаться от содержимого полной версии. Исходите из того, какую информацию и в каком объеме будет удобно воспринимать пользователям со смартфона или другого мобильного устройства.
Совет. Когда основная версия вашего сайта содержит больше информации, то можно дополнительно предлагать пользователю переключаться на нее, например, разместив в футере сайта ссылку на его полную версию. Не забудьте сделать обратное и в основной версии сайта.
«Люк, я – твой отец» или как связать основной и мобильный сайты
Так мобильный робот сможет определить, что у сайта есть мобильная версия, проиндексировать её и проверить на мобилопригодность.
На заметку. Атрибут rel=»canonical» использовать необязательно, робот его проигнорирует в случае, если он указан на мобильном поддомене для страниц основного сайта. В данной ситуации мы используем другие алгоритмы идентификации мобильной версии. В случае, если у вас есть такая необходимость – размещайте, ничего страшного, отрицательно на сайт это не повлияет.
Во-вторых, желательно сделать перенаправление для пользователей с основной версии на мобильную в зависимости от устройства пользователя (на основании User agent устройства). Тогда пользователь сразу попадет на мобильный сайт, если он по случайности зашел на основную версию со смартфона или планшета.
Выход в свет или как сообщить роботу о мобильной версии
! Не забудьте добавить ваш мобильный поддомен в Яндекс.Вебмастер для того, чтобы отслеживать информацию о ходе его индексирования.
А как же robots.txt и Sitemap?
«Свет мой, зеркальце!» или что прописать в директиве Host
Когда наполнение мобильной и основной версии различается, склейки сайтов не произойдет. Поэтому в директиве Host мобильного сайта мы рекомендуем указывать тот адрес, который должен присутствовать в мобильном поиске, то есть сам мобильный поддомен.
Если контент на обоих сайтах идентичен, что все же встречается крайне редко, вы можете прописать в качестве директивы Host основной домен. В таком случае в мобильном поиске будет отображаться основная версия сайта.
Все тонкости работы с директивой Host изложены в разделе нашей Помощи.
Всему свое место или как избежать нахождения обоих сайтов в выдаче
Дублирования сайтов в поиске возникать не должно при выполнении перечисленных рекомендаций, а именно:
Если это случилось, и в поисковой выдаче отображаются обе версии сайта, это может быть связано с тем, что робот узнал об обоих сайтах, но еще не успел отследить взаимосвязь между ними и исключить из выдачи неподходящий сайт.
В любом случае, если заметите что-то неладное, пишите в поддержку, мы всегда готовы вам помочь!
Мобильная версия сайта: виды, создание, типичные ошибки
Из этой статьи вы узнаете:
Сегодня у каждой компании есть собственный сайт в Интернете. Но разрешение экрана смартфонов и планшетов отличается от разрешения компьютеров. Это доставляет неудобства при просмотре сайта, поскольку из-за некорректного отображения изучить его практически невозможно. Именно для удобного просмотра и требуется мобильная версия сайта.
Что значит мобильная версия сайта
Мобильная версия сайта представляет собой самостоятельный полноценный проект, в рамках которого разрабатывают специальный дизайн, оптимизируют контент и прорабатывают юзабилити.
Первое и основное, что должен сделать дизайнер, — корректно передать содержание и ключевые идеи компании, используя небольшой экран и всего одну колонку. Если нужно, удалить или откорректировать какие-то данные. В результате остается самое главное, без лишней информации.
В мобильной версии структура и функции совершенно иные, отличные от основного сайта. Неизменным остается лишь стиль, некоторые детали и содержание, за счет чего человек понимает, что попал на тот же сайт, но уже с мобильного устройства.
Рекомендуемые статьи по данной теме:
Почему мобильная версия сайта в ряде случаев крайне необходима?
Она прекрасно решает все задачи бизнеса. При ее создании используются современные гибкие технологии: мобильные изображения, возможность применять специфические функции смартфонов. Помимо этого, разработать мобильную версию сайта намного дешевле, чем, допустим, собственное мобильное приложение.
Преимущества мобильной версии сайта
Практически любой современный человек пользуется мобильными устройствами и планшетами. У гаджетов немало преимуществ. Они компактны, позволяют в два счета выйти в Интернет, и именно этим объясняется их популярность.
В данный момент мобильные телефоны есть у 87 % жителей нашей планеты. Из них порядка 1,5 млрд в Глобальную сеть заходят при помощи телефона. Сегодня с мобильных устройств в Интернет выходят чаще, чем с ноутбуков и стационарных компьютеров. И это лишь подтверждает предположение о том, что почти для всех сайтов нужно разрабатывать мобильные версии.
Стремительное развитие технологий диктует свои условия. Бизнес должен совершенствоваться стремительно, подобно техническому прогрессу.
Большая часть сайтов разных фирм искаженно отображается на телефонах и планшетах. Безусловно, это отрицательно сказывается на бизнесе компании. Человек, который зашел на сайт с мобильного устройства и увидел, что информацию сложно прочесть, сразу же уходит.
Потенциальный клиент отдаст предпочтение сайту конкурента, который уже адаптировал свой веб-ресурс под мобильные устройства.
Для множества предприятий, особенно тех, что специализируются на предоставлении услуг, мобильная версия сайта — обязательное условие успешной работы.
Мобильная версия сайта нужна не только для того, чтобы веб-ресурс посещала широкая аудитория потенциальных клиентов. Адаптировать сайт под мобильные устройства следует и по иным причинам:
Рейтинг лучших мобильных версий сайтов в России и мире
В быстром и удобном сайте нуждается каждое предприятие. Но немногие знают, что такое хороший дизайн и качественная разработка мобильной версии сайта. Google совместно с партнерами в области пользовательских интерфейсов провел исследование, чтобы выявить, в каком состоянии находится мобильный Интернет, и показать лучшие на рынке мобильные версии.
В ходе исследования эксперты изучили 469 самых известных сайтов в 15 европейских, ближневосточных, африканских странах. Были взяты три категории: ретейл, путешествия, финансовые услуги.
Итоги исследования самых востребованных российских мобильных версий сайтов продемонстрировали среднюю оценку юзабилити-показателей (включая скорость) веб-ресурсов в области ретейла — 59 %, а в сфере финансовых услуг — 52 %.
В число лидеров среди мобильных версий сайтов в области ретейла в России вошли (оценки некоторых международных веб-ресурсов взяты из исследований сайтов других государств):
Лидерами среди мобильных сайтов в сфере финансов в России стали:
Как понять, что сайту срочно нужна мобильная версия
Чтобы понять, нужно ли вам создавать мобильную версию, просто установите на свой веб-ресурс счетчик аналитики. Подойдет Яндекс.Метрика. Если он уже есть, прекрасно. Проанализируйте трафик. Если на мобильный трафик приходится 15 % и больше, то, безусловно, мобильная версия нужна.
Виды мобильной версии сайта
Адаптивный дизайн сайта
Адаптивным дизайном называют один из вариантов создания мобильной версии. Основная его характеристика — отсутствие самостоятельной версии сайта. Иными словами, непосредственно дизайн адаптируется под юзера с учетом разрешения его экрана.
Верстку адаптивного дизайна выполняют за счет CSS3 при помощи медиазапросов — Media Queries. Основной момент — адаптивный дизайн разрабатывают один для всех устройств, как для ПК, так и для планшетов и смартфонов. То есть это не отдельный сайт.
Медиазапросы позволяют решать ряд разных задач: задавать ширину страницы или элемента, отключать менее важные элементы, чтобы они не мешали изучать контент на мобильных устройствах и планшетах.
При этом для мобильных устройств и планшетов версии можно разработать разные. Например, для планшетов — оставить самые важные блоки и удалить лишние, для смартфонов — по максимуму их сократить, чтобы не мешали воспринимать контент.
Адаптивная мобильная версия сайта обладает рядом достоинств:
Адаптивная верстка при создании мобильной версии веб-ресурса имеет и минусы:
Несмотря на то, что дизайн мобильной версии сайта максимально упрощен и весит всего несколько килобайтов, вам нужно прогрузить все. Таким образом, общий вес страницы будет состоять из полной и мобильной версии. А, если из-за медленного Интернета сайт будет загружаться очень долго, пользователю, конечно, это не понравится.
Итак, несмотря на все недостатки, которыми обладает адаптивный дизайн, сегодня, благодаря хорошему потенциалу, это очень распространенный способ создания мобильной версии сайта. Если грамотно подойти к решению данной задачи, определенные трудности можно обойти стороной.
Отдельная мобильная версия сайта
Отдельная мобильная версия сайта — это особый вариант ресурса, рассчитанный на пользователей с телефонов и планшетов. У него отдельный адрес. Обычно это приставка m. или mobile к основному домену.
Отдельная мобильная версия использует базу данных основной версии для демонстрации того же контента, но с абсолютно другой версткой, оптимизированной под телефоны и планшеты. Обычно мобильная версия включает в себя самый важный функционал сайта. Опции, которые не требуются пользователям планшетов и смартфонов, удалены.
Данное решение начали использовать раньше остальных, но по сей день оно остается популярным. Даже у многих популярных ресурсов есть отдельная мобильная версия сайта за счет ряда достоинств, отсутствующих у адаптивной верстки. Например, у ВКонтакте, Одноклассников, Яндекса и других.
Мобильная версия сайта обладает рядом преимуществ:
Но при всех достоинствах мобильная версия сайта имеет и минусы.
Мы видим, что этот путь создания мобильной версии сайта имеет совершенно иные плюсы и минусы. Поэтому сейчас при разработке мобильных версий применяют оба метода.
RESS(Responsive Design + Server Side)
RESS (Responsive Design + Server Side) — это реализация мобильной версии на сайте через определение устройства, с которого зашел юзер. В соответствии с типом устройства запускается шаблон, подходящий под это устройство. Такой вариант обычно реализуют благодаря проверке User-Agent посетителя.
Responsive Design + Server Side (RESS) обладает следующими преимуществами:
Минусы Responsive Design + Server Side(RESS):
RESS (Responsive Design + Server Side) на сегодняшний день — самый оптимальный способ создания мобильных версий, но он сложен, требует огромных трудозатрат. Однако, если удается его реализовать, результат превосходит все ожидания.
Но не откидывайте и другие способы создания мобильной версии. Если рассматривать вопрос с позиции стоимости (если вы не владеете основами программирования сами), то создать адаптивную верстку дешевле всего. При этом со своими обязанностями она справляется отлично, и этим объясняется ее востребованность.
Так все-таки что лучше — мобильная версия сайта или адаптивный дизайн
Для начала спросите у себя и определите: так ли вы нуждаетесь в адаптивном дизайне или мобильной версии? А что, если удастся обойтись только резиновой версткой? Тщательно взвесьте все «за» и «против». Вспомните о СЕО. Оцените финансовые возможности.
Цена на адаптивную 20-колоночную версию — минимум 20 % от стоимости верстки + работа специалистов по программированию (от 16 до 24 часов). Если количество колонок будет другим, придется заплатить больше. Цены на мобильную версию рассчитывают индивидуально, и тарифы стартуют от 60 тысяч рублей.
Если вы не рассматриваете вариант резинового сайта, остается два пути — адаптивная верстка и мобильная версия. Последней логично отдать предпочтение в том случае, если на веб-ресурсе много информации, которую просто невозможно уместить в небольшой экран. Или можно, но только если ограничиться двумя кнопками: КУПИТЬ и ЗАКАЗАТЬ.
В подавляющем большинстве случаев лучшее решение — адаптивная верстка. Выберите ее и доверьте проведение всех мероприятий специалистам. Безусловно, можно попробовать сделать все самостоятельно. Но все же разумнее поручить это профессионалам.
Как сделать мобильную версию сайта, настроив адаптивный дизайн
В основе адаптивного дизайна лежат три основных принципа:
Гибкий макет
Чтобы сформировать гибкий макет, нам нужно пользоваться лишь относительными единицами измерения: em для размера шрифтов и % для размеров элементов. Довольно редко используют px, и они тоже неплохи, но лучше все же их исключить или минимизировать.
Ранее у данного блога была фиксированная ширина: 1080 px. Вместо него мы сделаем более гибкое значение, допустим, 90 % окна браузера. При этом мы установили, что ширина сайта все равно не должна быть очень большой. В связи с этим мы изначально ввели ограничение — до 1080 рх. В результате было:
Чем обусловлено значение именно в 90 %? Исключительно личными пожеланиями и предположением, что наиболее оптимальными станут отступы по 5 % с правой и с левой стороны. Можно было проставить 98 % или 79 % — все определяется вашей идеей.
Движемся дальше. У нас есть две колонки — главная (на которую вы смотрите) и правая. В ширину колонки составляли 780 px и 280 px, однако сейчас нам необходимо провести пересчет в процентах по универсальной формуле:
target / context = result
Ширину (размер шрифта) нужного элемента в px разделить на ширину (размер шрифта) родительского элемента в px = искомый результат в % (или em).
Здесь можно было бы остановиться и дальше не рассказывать о гибком макете, поскольку мы осветили все самое главное, но, чтобы вы лучше поняли, о чем идет речь, продолжим.
Фиксированный размер главной колонки — 780 px, фиксированная ширина ее контекста (родителя) — 1080 px, в результате:
780 / 1080 = 0,72222222222
Поскольку нам необходимы проценты, а не em, то результат умножаем на 100. В результате получается:
Наверняка, вы полагали, что это значение мы округлим? Нет, эксперты категорически не советуют этого делать. Поэтому действуйте по ситуации, смотрите, насколько важна точность. Если мы говорим о двух колонках, то в такой точности необходимости нет. В связи с этим мы спокойно округляем все до четырех знаков после точки.
В результате наш CSS для главной колонки выглядит так:
Важный совет: оставляйте комментарии с расчетами, чтобы не забыть и не запутаться, на что делить в будущем. Как правило, в комментариях оставляют лишь первое число — делитель.
Делаем то же самое с правой колонкой:
Думаем, смысл понятен.
Поговорим о размере шрифта, который рассчитывают по этой же схеме.
Браузеры на компьютерах по умолчанию ставят размер шрифта 16 pх. Однако для нас пиксели нежелательны, а потому, если хотите оставить это же значение, необходимо:
16 (нужное значение) / 16 (значение по умолчанию) = 1 em
Но для нас 16-пиксельный шрифт очень мелкий, и мы отдаем предпочтение 18, поэтому:
Размер шрифта нашего логотипа в фиксированном макете равен 40 рх. Переведем его в em:
Заметили? Теперь мы делим не на 16 рх, а на 18 рх, поскольку у родителя (у тега body) логотипа размер 18 px. В результате CSS:
И так с каждым элементом. Утомительно, да? Но наши усилия будут не напрасны, поскольку в результате появится стабильный трафик с гаджетов.
Гибкие изображения
Скажем кратко: если вы не обозначаете размеры изображений в атрибутах тега img, то нужно добавить его в ваш CSS:
А если обозначаете размеры изображений в атрибутах (мы обозначаем и рекомендуем это делать вам):
Медиазапросы
Крайне занимательное, несложное и при этом очень полезное решение — @media. Но перейдем сразу к кроссбраузерности. Положительный момент в том, что большая часть современных браузеров поддерживает медиазапросы, среди которых Opera 9.5+, Firefox 3.5+, браузеры на базе WebKit, такие как Safari 3+ и Chrome, а также IE 9+.
Что касается мобильных браузеров, с ними дела тоже обстоят хорошо. Медиазапросы поддерживают браузеры на базе WebKit: Mobile Safari, webOS производства HP и Android, а также Opera Mobile и Opera Mini.
Если говорить о Windows Phone, с 2011 года на них устанавливается IE9+, за счет чего обеспечивается всесторонняя поддержка медиазапросов. Это тоже безусловный плюс.
Что касается старых версий браузеров, в том числе IE8 и еще более ранних, с ними также нет проблем. Существуют специальные JavaScript-библиотеки, призванные обеспечить 100 % кроссбраузерность, начиная с IE5, например css3-mediaqueries.js или respond.js.
Тем, кто еще пока не разбирается в понятии медиазапросов, можно поискать сведения в специализированной литературе или продолжить читать эту статью. Все предельно просто.
Вот как в основном используются медиазапросы при создании адаптивной верстки:
Что означает вышеприведенный пример? Если у юзера экран равен или менее 1150 рх, то необходимо сделать гибкие изображения и убрать фон с заднего элемента.
Отметим сразу, что картинки можно сделать гибкими сразу же (любого размера). Необязательно размещать код в медиазапросе. Но кому-то это может показаться более разумным.
За счет таких медиазапросов, напоминающих конструкцию if (условие) <выполнить>из PHP или других языков программирования, мы перестраиваем стили сайта в зависимости от габаритов экрана, как пожелаем.
Вот как выстроены медиазапросы в данном блоге, чтобы обеспечить полную адаптивность: