Сайт под мобильные устройства – 3 способа быстро адаптировать сайт под мобильные устройства

15 Дек 2017   | Разное

Содержание

Адаптация сайта под мобильные

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

Хьюстон, у нас проблема

Самый простой способ проверить адаптацию сайта под мобильные устройства – открыть его на этих самых мобильных (смартфон, планшет). Явные признаки проблем:

Сайт или какие-то его части (картинки, таблицы) не помещаются целиком в экран:

Всё слишком мелкое, не получается с первого раза попасть пальцем в кнопку или ссылку:

Приходится прокручивать несколько экранов шапки (или фильтров), чтобы добраться до контента:

Всплывающие баннеры (более 50% экрана), либо слишком много рекламы:

Если смартфона под рукой нет или он не подключен к сети, можно воспользоваться онлайн-сервисами с обычного компьютера:

1. Mobile Friendly от Google: https://search.google.com/test/mobile-friendly

Вбиваем адрес сайта, жмем «Проверить», видим результат:

2. Проверка мобильных страниц от Яндекса: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (если ваш сайт уже добавлен в Яндекс.Вебмастер)

Выбираем адрес сайта, жмем «Проверить», видим результат:

3. Проверка в браузере в Инструментах разработчика

Открываем сайт в браузере и в меню (браузера) ищем пункт «Дополнительные инструменты» – «Инструменты разработчика». Либо жмем на клавиатуре F12. Если не сработало F12, жмем сочетание клавиш CTRL + Shift + I. Справа или внизу браузера нам откроется Панель разработчика, на ней жмем на иконку переключения на мобильные устройства и выбираем модель смартфона, на которой хотим проверить сайт:

Ключ на старт

Итак, проблема выявлена, теперь нужно определиться, каким мы хотим видеть свой сайт на мобильных устройствах.

Для разработки макета сайта для мобильных можно обратиться:

– К профессиональным дизайнерам. С ними сразу оговорите, для каких размеров экрана вам нужны макеты (например, 320 пикселей в ширину для смартфонов и 768 пикселей в ширину для планшетов) и для каких разделов сайта (например, главная страница, типовая внутренняя страница, список статей в блоге и статья блога). Что еще стоит проверять, принимая макет от дизайнера, читайте в статье.

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

– К собственным изобразительным способностям. Если у вас есть понимание, что вы хотите получить в итоге, и эта итоговая версия не требует отдельного дизайна (использует текущие решения), то вы можете на словах и стрелочках расписать ТЗ для верстальщика в том же ворде.

Поехали!

Приступаем к адаптации сайта под мобильные.

Шаг 1. Указываем тег Viewport

Нам нужно сообщить браузеру, что контент нашего сайта будет подстраиваться под ширину устройства (обычного компьютера, планшета или смартфона) и должен показываться в оригинальном масштабе. Для этого добавляем мета-тег viewport в секцию <head> в коде сайта (можно поставить перед тегом title):

<meta name=»viewport» content=»width=device-width, initial-scale=1″>

<title>Автосервис Mr Red: ремонт и обслуживание автомобилей в Красноярске</title>

Здесь:
width=device-width – говорит браузеру, что ширина его окна должна быть равна ширине устройства,
initial-scale=1 – сайт нужно показать в обычном масштабе (без увеличения или уменьшения).

Если не указать тег viewport, то браузер будет по умолчанию считать ширину контента равной стандартной ширине для десктопа (1024 пикселя) – и на телефоне с шириной 340 пикселей ваш сайт будет уменьшен в 3 раза. Поэтому чтобы адаптивная верстка сработала, обязательно прописываем viewport с device-width.

Шаг 2. Обновляем стили сайта

Берем макеты сайта для мобильных устройств и добавляем в стили сайта дополнительные правила для отображения блоков на разной ширине экрана:

/*
  … стандартные правила CSS …
  например, выводим карточки товаров по 4 в ряд
*/
@media (max-width:768px) {
  /*
    … правила для планшетов …
    выводим карточки товаров по 2 в ряд
  */
}
@media (max-width:320px) {
  /*
    … правила для смартфонов …
    выводим карточки товаров по 1 в ряд
  */
}

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

Что чаще всего делают дополнительные стили:

– Уменьшают число блоков в одном ряду. Например, на обычном компьютере выводится 4 блока в ряд (карточки товаров). Очевидно, что на экране телефона 4 карточки просто не поместятся в 1 ряд, так что здесь будем показывать по одной карточке.

– Скрывают какие-то блоки (совсем или под ссылку «Развернуть»). Например, у товара внушительное описание, которое на компьютере занимает почти целый экран. На телефоне такое описание может занять до 10 экранов. Их придется долго и нудно пролистывать, чтобы добраться до отзывов о товаре. Чтобы не нагружать пользователя, покажем на мобильных первый абзац описания, а остальной текст спрячем под ссылку «Показать все». Кто захочет прочитать полное описание, развернет его, в то время как все остальные будут избавлены от долгого пролистывания.

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

– Добавляют горизонтальную прокрутку таблицам. Если в таблице много столбцов, то она не поместится на экране телефона. В таком случае стоит добавить правила, чтобы эти таблицы можно было прокручивать вправо-влево на узких экранах.

Шаг 3. Дорабатываем дизайн сайта

Для некоторых элементов сайта понадобится более серьезная проработка для показа на мобильных. Как правило, это шапка сайта, меню и фильтры в каталоге товаров.

– Шапка сайта и меню. Если просто переместить все строчки в шапке сайта друг под друга (чтобы поместилось в ширину), то на телефоне такая шапка займет весь экран. Переходя по страницам сайта, человек будет вынужден раз за разом пролистывать экран с этой шапкой. Добавьте сюда 5-6 пунктов меню – и пользователь никогда не долистает до контента.

Поэтому на мобильных нужно сократить число элементов в шапке (например, убрать кнопку заказа обратного звонка и форму для поиска), а меню спрятать под иконку «гамбургера». Тогда шапка сайта будет занимать максимум четверть экрана телефона.

– Фильтры. В большинстве случаев фильтр по каталогу товаров располагают в левой части страницы. То есть в коде сайта сначала идет фильтр, а потом список товаров. Из-за этого на мобильных устройствах блок со списком товаров «переезжает» под блок с фильтром – и пользователь сайта рискует вообще не понять, что список товаров на этой странице есть (если фильтров много). Решается проблема просто – скрываем фильтр на мобильных под кнопку «Фильтр». Нажав ее, пользователь развернет необходимые фильтры. А по умолчанию список товаров будет виден сразу в первом экране.

Шаг 4. Сокращаем количество рекламы и всплывающих окон

Если у вас на сайте есть рекламные блоки, посмотрите, не стоит ли их чуть «подрезать», чтобы не занимать все место на отнюдь не бесконечных экранах смартфонов. Не обязательно убирать всю рекламу, достаточно будет лишь сократить ее количество. Например, оставить один баннер вместо четырех.

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

Шаг 5. Сокращаем количество контента

Если на сайте есть контент, который вы полностью скрываете от мобильных пользователей (не под кнопки «Подробнее», «Фильтр» и прочие, а совсем скрываете), то нет смысла вообще загружать этот контент на мобильное устройство – это дополнительный «вес» страницы, и он будет увеличивать драгоценное время загрузки сайта.

Пример: в статье на Хабре, открываемой с обычного компьютера, комментарии к статье загружаются сразу же в конце страницы – https://habr.com/company/mosigra/blog/427133/. А если открыть эту статью с мобильного, то страница будет содержать только текст статьи, без комментариев (и они не скрыты, они просто не выводятся для мобильных устройств). Под текстом статьи стоит кнопка «Комментарии», и по ней уже можно попасть на отдельную страницу с комментариями к статье. Конкретно для Хабра, где статьи часто и весьма охотно комментируют, это может экономить 3-5 секунд от загрузки страницы.

Для разграничения контента программист может как написать свой модуль, так и воспользоваться одним из готовых решений по определению типа устройства (например, MobileDetect). Во многие CMS такая функция уже встроена по умолчанию (например, wp_is_mobile в WordPress).

Шаг 6. Проверяем все страницы

Если на сайте до 200 страниц – лучше действительно отсмотреть их все. Потому что 20 карточек товаров могут отображаться нормально, а в описание 21-й кто-нибудь вставил видеоролик и прописал у него строго ширину в 900 пикселей – и вот этот ролик уже не помещается в экран мобильного.

Впрочем, если у вас тысячи страниц, то отсматривать каждую – не такая уж полезная трата времени. Тогда стоит проверить только важные страницы (продающие страницы, страницы с высоким трафиком и т.п.), и по 10-20 страниц в каждом разделе сайта (в каталоге товаров, в списке статей и т.д.).

Итог

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

Если стремление адаптировать свой сайт к мобильным есть, а умения нет – обращайтесь к нам, поможем с адаптивностью.

После настройки сайта под мобильные устройства не забудьте про техническую оптимизацию – для мобильных есть свои дополнительные нюансы, подробности расписали в этой статье.

1ps.ru

Оптимизация сайт под мобильные устройства

Всем-всем привет!

После писем от Google 21 апреля 2015 года, вебмастера начали в спешке проводить оптимизацию своих сайтов под мобильные устройства. С этого времени и началась эпоха мобильного Интернета, когда почти каждый веб-ресурс можно с удобством просматривать на смартфоне, либо планшете.

Объясняется данный факт тем, что именно два года назад (на момент написания статьи — 2017 год) поисковая система Google начала учитывать адаптивность сайтов под моб. устройства. Если же веб-ресурс некорректно отображается на смартфоне, то он понижается в выдаче. А терять в среднем 17% трафика мало кому хочется. Позже к этому подключился и Яндекс.

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

Погнали!

Для чего нужна оптимизация сайта для мобильных устройств?

Многие рекламодатели и владельцы сайтов задаются вопросом — зачем мне оптимизировать сайт под мобильные устройства? Как я уже сказал, с 2015 года поисковые системы начали обращать на данный момент особое внимание. И если игнорировать его, то можно с легкостью получить пессимизацию со стороны ПС, в результате чего теряется часть трафика. Особенно так любит делать Google.

Однако стоит отметить тот факт, что влияние алгоритмов Google и Яндекс, направленных на работу с оптимизированными и не оптимизированными под мобильные устройства сайтами, маленькое. То есть, такого тотального контроля за данным фактором не ведется, поэтому в «мобильной» выдаче мы можем частенько наблюдать не адаптивные сайты. Тут играет роль немного другое.

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

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

Как проверить сайт на оптимизацию под моб. устройства?

Google конкретно запарился проблемой мобильный сайтов и создал очень удобный сервис, показывающий насколько оптимизирована страница под моб. устройства и оптимизирована ли вообще. Называется он Mobile Friendly, вот ссылка на него.

Если Ваш сайт оптимизирован для мобильных устройств, то Вы увидите такой результат:

В противном случае:

Как сделать мобильную версию сайта?

Существует множество способов сделать сайт адаптивным, я же перечислю только самые основные и понятные простому человеку. Однако, для ясности всей картины рекомендую прочитать эти уроки:

Итак, условно способы реализации адаптивной верстки можно разделить на два вида:

  1. С использованием специальных плагинов;
  2. Работа с кодом сайта.

Каждый имеет свои плюсы и минусы, о которым мы поговорим прямо сейчас.

Адаптивная верстка с использованием специальных плагинов

Так как более-менее большой опыт работы я имею исключительно с CMS WordPress, а с любой другой системой мало знаком, буду говорить только о ней.

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

Также существует функция создания адаптивной верстки в популярном плагине Jetpack, насколько я знаю. Там достаточно нажать одну кнопку и все.

Однако, при использовании такого способа важно учитывать тот факт, что не для всех шаблонов они будут работать корректно, а где-то и вовсе не будут. К тому же, возможны всякие-разные рекламные вставки из самого плагина, которые мешают просмотру контента. Хочу Вас сразу предупредить: использовать подобные плагины не рекомендуется, но если очень надо, то только на время.

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

Адаптивная верстка сайта посредством работы с кодом

Работа с кодом сайта — это дело сложное, а создание адаптивной версии веб-ресурса еще сложнее. В своей практике пытался создать два мобильных сайта, но полностью реализовать их не получилось. В первом случае была попытка создать мобильный сайт на поддомене типа m.site.ru: у меня получилось сделать более-менее нормальную верстку, расставить все блоки по нужным местам, сделать текст читабельным. Короче говоря, мобильный сайт я создал, но проблема крылась в другом.

Дело в том, что если использовать поддомен с мобильным сайтом, то необходимо делать 301 редирект на него с обычного домена. Но редирект не обычный, а умный, который бы перенаправлял посетителей со смартфонов на мобильную версию. Пришлось угробить на эту фигню много времени, но результат был неудовлетворительным. Поэтому пришлось отказаться от этой идеи.

Во втором случае, я создавал сайт для интереса (мне очень интересно писать код), который я пытался сделать адаптивным при помощи каскадных стилей CSS. У меня получилось, но дальше разработки сайт дело не ушло.

Хочу отметить, что создание адаптивной верстки при помощи CSS является отличным вариантом, ведь: не нужно создавать отдельный сайт и заливать его на отдельный поддомен и не нужно возиться с редиректами. Достаточно просто использовать директивы @media. Их еще называют Media Queries:

@media screen and (max-width: 1025px) {

Прописываются CSS-свойства для элементов, к которым их нужно применить при ширине экрана
меньше 1025px

}

@media screen and (max-width: 760px) {

Прописываются CSS-свойства для элементов, к которым их нужно применить при ширине экрана
меньше 760px

}

Очень удобный способ, так как не требует создания каких-то левых файлов. Работа ведется исключительно с файлом style.css, где у Вас прописаны все стили сайта.

Вот пример из моих стилей для конкретных элементов:

@media screen and (max-width: 991px) {
/*Все стили используются для баннера в шапке сайта на страницах статей и заголовка на главной*/
 #banner-head {
 margin-top:80px;
 }
 .box-wrapper h2{
 margin-top:150px !important;
 }
}
@media screen and (max-width: 840px) {
 #banner-head {
 margin-left:60px;
 }
}
@media screen and (max-width: 801px) {
 #banner-head {
 margin-left:40px;
 }
}
@media screen and (max-width: 786px) {
 #banner-head {
 margin-left:20px;
 }
}
@media screen and (max-width: 765px) {
 #banner-head {
 margin-left:5px;
 }
}
@media screen and (max-width: 757px) {
 .box-wrapper h2{
 font-size:32px !important;
 }
}
@media screen and (max-width: 750px) {
 #banner-head {
 display:none;
 }
}
@media screen and (max-width: 539px) {
 .box-wrapper h2{
 font-size:28px !important;
 }
}
@media screen and (max-width: 480px) {
 #banner-head {
 visibility: hidden;
 display:none;
 }
}
@media screen and (max-width: 471px) {
 .box-wrapper h2{
 font-size:24px !important;
 }
}
@media screen and (max-width: 407px) {
 .box-wrapper h2{
 font-size:22px !important;
 }
}
@media screen and (max-width: 375px) {
 #banner img{
 width: 100% !important;
 }
}
@media screen and (max-width: 370px) {
 .box-wrapper {
 width: 380px !important;
 }
 .box-wrapper h2{
 margin-left:-15px !important;
 }
}
@media screen and (max-width: 357px) {
 .box-wrapper h2{
 font-size:20px !important;
 }
}
@media screen and (max-width: 345px) {
 .box-wrapper h2{
 margin-left:-25px !important;
 }
}
@media screen and (max-width: 338px) {
 .box-wrapper{
 margin-top:-50px;
 }
 .box-wrapper h2{
 margin-left:-35px !important;
 }
 .sep{
 margin-left:-20px !important;
 }
}
Мета-тег Viewport

Если же Вы не хотите создавать отдельную мобильную версию или прописывать директивы @media в CSS-стилях, то есть еще один способ, при котором Ваш сайт будет более менее отображаться на «мобилках» — использование мета-тега Viewport.

Однако рекомендуется использовать данный мета-тег совместно с адапативной версткой. Но допускается и при фиксированной или «гибкой» верстке.

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

Устанавливается данный мета-тег в пределах тегов <head></head> и имеет следующий вид:

<meta name="viewport" content="width=device-width; initial-scale=1.0; maximum-scale=1.0;">

Более подробно можете почитать тут.

Таким образом у нас получилось четыре способа оптимизации сайта под мобильные устройства:

  1. Использование специальных плагинов для Вашей CMS;
  2. Использование поддомена типа m.site.ru с мобильной версией сайта;
  3. Использование Media Queries в CSS;
  4. Использование мета-тега Viewport.

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

Ну а на этом все, дорогие друзья!

До скорых встреч!

Предыдущая статья
Как упростить процесс кластеризации запросов до «невозможности»? Следующая статья
Урок 158. Необходимые для анализа трафика отчеты в Яндекс.Метрике

context-up.ru

Как адаптация сайта под мобильные устройства влияет на ранжирование в ПС Яндекс и Google

В этой статье мы рассмотрим:

Как влияет адаптивность сайта на ранжирование в ПС

Позиция Google

В феврале 2015 года ПС Google анонсировала запуск нового алгоритма, который учитывает оптимизацию сайта под мобильные устройства как фактор ранжирования в мобильной выдаче. Подробнее в Google Webmaster Central Blog.

В ноябре 2016 года в официальном блоге появилась информация о запуске Mobile-first index. Перевод фрагмента заявления в официальном блоге Google:

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

Если кратко – раньше при ранжировании сайта ПС Google использовала десктопную версию, теперь она будет опираться, прежде всего, на содержимое мобильной версии. О точной дате запуска представители Google не сообщили, известно, что сейчас Mobile-first индекс тестируется на ограниченной выборке. Однако уже сейчас рекомендуем проверить готовность сайта к его запуску.

Как подготовить сайт к мобильному индексу

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

Если есть отдельный мобильный сайт на поддомене, убедитесь, что весь важный контент и метаданные отображаются одинаково в десктопной и в мобильной версиях. Также важно удостовериться, что в обеих версиях сайта используется одинаковая семантическая разметка. Подробнее о подготовке сайта к Mobile-first index в Google Webmaster Central Blog.

Позиция Яндекса

В Яндексе адаптация под мобильные устройства стала учитываться в феврале 2016 года как фактор ранжирования в мобильной выдаче.

Как Яндекс определяет, оптимизирована ли страница под мобильные устройства?

Если эти условия выполнены, страница считается пригодной для мобильных устройств:

1. Нет горизонтальной прокрутки. Горизонтальная прокрутка — первый симптом плохой адаптации сайта под мобильные устройства. Весь контент сайта (текст, изображения, кнопки, меню и т. д.) должен адаптироваться под размер экрана.

2. Нет элементов, которые не работают на популярных мобильных платформах. К таким элементам, например, относятся флеш-ролики, которые не воспроизводятся мобильными браузерами. Такие ролики были исключены из мобильной выдачи Яндекс.Видео, так как пользователи всё равно не могли их просмотреть.

Подробнее о запуске алгоритма «Владивосток» в блоге Яндекса для вебмастеров.

Как оптимизировать сайт под мобильные устройства

Мобильная версия сайта на поддомене

Отдельная мобильная версия сайта полностью реализуется на другом URL и может быть в значительной мере оптимизирована под мобильные устройства и навигацию на них.

Преимущества: можно существенно облегчить дизайн сайта для мобильных устройств, что хорошо отразится на скорости загрузки мобильных страниц.

Недостатки: к основному недостатку относится необходимость разработки ещё одной самостоятельной версии интернет-ресурса, требующей дополнительных временных и денежных затрат.

Динамическая подстановка контента

При этом методе адаптации сервер анализирует тип устройства, с которого поступает запрос, и показывает пользователям мобильных устройств и ПК разные версии страниц под одним и тем же URL.

Преимущества: URL остаётся неизменным

Недостатки: сложная разработка и высокая стоимость поддержки. Ошибки при определении вида устройства: сервер может не распознать смартфон пользователя как мобильное устройство и откроет десктопную версию.

Адаптивный дизайн

Сайт, который будет корректно отображаться на всех устройствах. Некоторые элементы не будут отображаться на мобильных устройствах (и наоборот) или будут отображаться в более компактном виде.

Преимущества: URL остаётся неизменным, относительно лёгкий в разработке.

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

Подробнее о способах адаптации под мобильные устройства мы рассматривали в статье «3 способа быстро адаптировать сайт под мобильные устройства».

Какой из способов адаптации сайта рекомендуют поисковые системы

ПС Яндекс

В инструкциях Яндекса для веб-мастеров говорится о том, что поисковые роботы с одинаковым приоритетом воспринимают все виды оптимизации — и адаптивный дизайн, и мобильную версию, и динамическую подстановку контента. Они оставляют выбор за веб-мастерами, которые должны сами определить способ оптимизации сайта под мобильные устройства.

«Поисковые роботы с одинаковым приоритетом воспринимают перечисленные выше типы адаптации, поэтому выбор полностью за вами. Но стоит обратить внимание на несколько нюансов.»

ПС Google

В инструкциях Google для веб-мастеров также говорится о том, что поисковая система не отдаёт предпочтение определённому виду оптимизации, однако, адаптивный дизайн выделяет как рекомендованный (см. раздел «Преимущества адаптивного дизайна»).

Какие инструменты можно использовать для проверки адаптивности сайта

PageSpeed Insights – с помощью этого сервиса можно проверить скорость загрузки страниц и посмотреть рекомендации, как эту скорость повысить.

Рисунок 1

Mobile-Friendly Test от Google – с помощью этого сервиса можно увидеть и проанализировать, как выглядит сайт на смартфоне, скорость загрузки и отображения информации. Проверить можно любой сайт, достаточно ввести его адрес в строку.

Рисунок 2

Посмотреть как Googlebot (в панели Google Search Console) – с помощью инструмента «Посмотреть как Googlebot» вы можете проанализировать отображение сайта на разных устройствах.

Рисунок 3

Яндекс.Вебмастер. В сервисе Яндекс.Вебмастер также можно проверить сайт на мобилопригодность. Для этого нужно добавить его в интерфейс Вебмастера и подтвердить на него права.

Рисунок 4

pingdom.com – с помощью этого инструмента вы можете проверить скорость загрузки мобильных страниц из разных мест и регионов, он даёт подсказки и рекомендации по оптимизации ресурса (рис.5).

Рисунок 5

Как повысить удобство сайта для пользователей мобильных устройств

Ускорьте загрузку страниц

Скорость загрузки мобильных страниц играет важную роль для ранжирования – это напрямую влияет на ПФ.

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

Настройте AMP и Турбо-страницы

AMP – проект от ПС Google, запущенный в октябре 2015 года. Это технология ускорения мобильных страниц, которая позволяет создать облегчённую версию веб-страниц.

Рисунок 6

Подробнее о том, как ускорить загрузку целевых страниц с помощью AMP.

В феврале 2018 года ПС Google запустила новый формат ускоренных мобильных страниц AMP Stories. С его помощью веб-мастера смогут создавать публикации, состоящие из нескольких экранов с изображениями и видео.

Аналог Яндекса – Турбо-страницы. В отличие от AMP, при создании которых нужно работать с сайтом, Турбо-страницы собираются вручную с помощью конструктора на основе шаблонов. Сюда можно загрузить изображение, составить форму заявки с обязательными полями и оставить ссылку для перехода на сайт.

Ограничение: нет доступа к коду, так как все страницы на серверах системы.

Вся информация о подключении доступна в панели Я.Вебмастера

Рисунок 7. Скриншот данных Я.Вебмастера

Подробнее о том, как настроить и подключить Турбо-страницы.

Убедитесь, что тексты и картинки хорошо читаются без увеличения

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

Сделайте большую кнопку

Сделайте возможность комфортно нажимать на кнопку как co смартфона, так и c планшета. Размер кнопки должен быть соответствующим человеческому пальцу.

Пользователь должен иметь возможность легко позвонить с сайта

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

Не размещайте телефон в виде картинки или в неправильном формате.

Изображения товаров должны масштабироваться

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

Выберите правильный viewport

Viewport сообщает браузеру, область просмотра какого размера нам нужна. Это весьма полезно, ведь, как правило, мобильные браузеры пытаются уместить на дисплей мобильного гаджета сайт целиком. Если размер экрана маленький, сайт выглядит настолько мелким, что прочитать что-то становится проблематично. Проверяя корректность viewport, вы получаете гарантию того, что посетители видят адекватную версию сайта независимо от устройства, которое используют для просмотра.

Уберите всплывающие окна

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

Заключение

Доля мобильного трафика постоянно растёт. Если ваш сайт не оптимизирован под мобильные устройства, вы уже теряете мобильный трафик, а в будущем можете терять из-за этого и десктопный.

Поэтому, если ваш сайт ещё не адаптирован под мобильные устройства – самое время это исправить!

Подписаться на рассылку

Еще по теме:

Наталия Бондаренко

SEO-оптимизатор

Оптимизирую сайты с 2009 года. Люблю сложные кейсы, которые оказались не по зубам специалистам с других компаний. Делаю очень подробные аудиты.

Пишу статьи-инструкции на блог SiteClinic по SEO-инструментам и аналитике.

Любимая цитата — Чтобы добиться успеха, надо искренне любить то, чем вы занимаетесь

Есть вопросы?

Задайте их прямо сейчас, и мы ответим в течение 8 рабочих часов.

siteclinic.ru

Оптимизация шаблона сайта под планшет и телефон (мобильные устройства)

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

Недавно на глаза мне попались ролики на ютюбе по адаптивной верстке и это не спроста. Просто на моём втором блоге шаблон (бесплатный из паблика) уже адаптирован под мобильные устройства: когда зайти с планшета, или телефона, то он красиво подстраивается под размер экрана. А на этом блоге seodnevnik.ru дела плохи. И я решил тоже в этом шаблоне что-нибудь подправить.

CSS-стили под разное разрешение экрана и устройство

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

Перед тем, как приступить к написанию стилей, убедитесь, что между тегами <head/>, вашего шаблона, прописана meta-строчка:

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />

Итак, в зависимости от размера экрана, мы можем прописать отдельные стили в файле сss: основной стиль для компьютера, потом для размера ниже 992px и 768px (для планшетов), и для 480px и 320px (для телефонов).

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

Пример:

.content{background-color: #FBFBFB; position: relative;margin: 0;padding: 0;border: 0;float: left;overflow: hidden; max-width: 768px; width: 100%;}
.sidebar1{background-color: #FBFBFB; position: relative;margin-right: 0;padding: 0;border: 0;float: left;overflow: hidden; width: 100%; max-width: 268px;}
blockquote{margin:10px 10px 10px 35px;}

/* Medium Devices, Desktops */
@media only screen and (max-width : 992px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Small Devices, Tablets */
@media only screen and (max-width : 768px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Extra Small Devices, Phones */
@media only screen and (max-width : 480px) {
  .content{max-width: none; width: 100%;}
  .sidebar1{max-width: none; width: 100%;}
  blockquote{margin:10px;}
}

/* Custom, iPhone Retina */
@media only screen and (max-width : 320px) {

}

То есть, для телефона не обязательно показывать сайдбар — его можно убрать вниз, а контент по ширине вытянуть на 100%. Для планшета сделать сайдбар тоже снизу, но по-красивее. Можно еще чего-нибудь намудрить в стилях и показывать тот или иной вид шаблона в зависимости от устройства с которого заходит пользователь.

Ну и получается, что можно не делать отдельный шаблон под мобильные устройства, а просто адаптировать основной шаблон.

Посмотреть, как выглядит ваш сайт на разных устройствах, можно на сайтах:

http://quirktools.com/screenfly/

http://ipadpeek.com/ — как выглядит на iPad, iPhone.

http://responsive.is/ (не актуален — сервис перестал работать, используйте другие)

А также здесь: http://www.viewlike.us/operator/?url=seodnevnik.ru и в других подобных сервисах.

Для Хрома есть расширение «Window Resizer». А также можно использовать стандартную фишку — нажав F12, кликните по значку телефона и вы попадете в такую среду:

Для чего нужна адаптация? Дело в том, что если пользователю неудобно находиться на сайте с мобильного устройства, то он быстро закроет страничку и уйдет. Соответственно, уменьшается время нахождения, просмотры, или проще говоря — ухудшаются поведенческие факторы. А также и CTR рекламных объявлений, если они тоже как-то криво показываются на планшетах и телефонах.

Читайте также как пройти проверку если Google пишет «Страница не оптимизирована для мобильных устройств».


Вот те видеоролики, о которых я упомянул вначале заметки:

P.S. На этом блоге я только начал пробовать адаптировать. Может что и получится

seodnevnik.ru

Как оптимизировать сайт для мобильных устройств с помощью PageSpeed Insights

Уровень подготовки веб-мастера: для всех

Мы опубликовали на сайте PageSpeed Insights новые рекомендации, которые помогут улучшить сайты для мобильных устройств.

Недостаточная оптимизация может свести на нет все преимущества быстрой загрузки сайта. В среднем загрузка одной страницы на мобильных устройствах длится более 7 секунд, но правильное использование инструмента PageSpeed Insights позволяет значительно сократить это время. Предположим, вам удалось добиться загрузки сайта не за семь секунд, а всего за две. Но какой в этом смысл, если пользователю все равно придется потратить ещё 5 секунд на то, чтобы увеличить размер шрифта и прокрутить страницу до нужного места? Новые рекомендации PageSpeed Insights помогут выявить и устранить подобные проблемы.

Вот список новых рекомендаций:
  • Настройте область просмотра. Если на сайте отсутствует метатег viewport, современные мобильные браузеры не обнаружат оптимизированную версию страницы и покажут версию для компьютеров. В результате текст на странице может отображаться слишком крупным шрифтом. Оптимизацию сайта для мобильных устройств следует начинать с настройки тега viewport и установки параметра width=device-width.


    Адаптируйте размер контента для области просмотра. На сайтах для мобильных устройств пользователи предпочитают видеть вертикальную прокрутку, а не горизонтальную. Указав область просмотра, убедитесь, что ваше содержание не выходит за ее пределы. Помните, что существует множество стандартов ширины для экранов мобильных устройств.
    Используйте шрифты легко читаемого размера. Сайт, на котором посетителям приходится увеличивать масштаб для того, чтобы прочитать текст на экране смартфона, не может считаться оптимизированным. PageSpeed Insights проверяет, подойдет ли размер шрифта на сайте для пользователей мобильных устройств.
    Увеличьте размер активных элементов на странице. Область касания при сенсорном управлении значительно больше курсора мыши, и не всегда удается нажать нужную кнопку или ссылку. Это раздражает пользователей смартфонов и планшетов. Убедитесь в том, что размер активных элементов позволяет попасть по ним пальцем.
    Откажитесь от плагинов. Большинство смартфонов не поддерживает Flash и другие плагины для браузеров, поэтому не следует рассчитывать на них, создавая мобильную версию сайта.

    • этого сервиса.

habr.com

Как сделать сайт дружественным для мобильных устройств. Читайте на Cossa.ru

Мы решили разобраться, на что стоит обратить внимание владельцам подобных ресурсов при оптимизации своих сайтов.

Доля мобильных пользователей неуклонно растет

Уже несколько лет подряд в своем ежегодном исследование аудитории РунетаЯндекс отмечаетсущественный прирост пользователей, выходящих в интернет с мобильных устройств. Статистические данные подтверждают еще одну наметившуюся тенденцию — в ряде тематик доля пользователей, которые заходят на сайт с различных мобильных устройств, уже превышает долю пользователей ПК. Это прекрасно иллюстрируют сайты социальных сетей. Например, по состоянию на октябрь 2014 года мобильная аудиторияFacebookсравнялась с общей ежедневно активной аудиторией сервиса.

Возрастает и процент покупок, совершаемых с мобильных устройств. Постатистике Google39% пользователей смартфонов совершали покупки с помощью мобильных устройств, 55% пользователей, ищущих на смартфонах информацию о товарах или услугах, планируют совершить покупку в течение одного часа, 83% в тот же день. В 47% случаев такой поиск конвертировался в последующую покупку с ПК, в 82% в покупку в офлайн-магазине, в 17% в покупку с помощью смартфона.

Реклама

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

Варианты дружественных к мобильным устройствам сайтов

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

  • Мобильная версия сайта(у некоторых сайтов так же есть WAP-версия) – это вынесенные на отдельные URL (www.domain.ru/mobile/page_1) или даже отдельный поддомен (m.domain.ru/page_1) страницы сайта. Чаще всего это урезанная версия основного сайта с ограниченным функционалом. В последнее время мобильные версии теряют свою актуальность из-за совершенствования CSS и ряда недостатков при разборе user-agent-ов на серверах. Дополнительное неудобство для пользователя — необходимость запоминать несколько URL сайта.
  • Мобильное приложение сайта —специальное приложение, разработанное под определенную мобильную платформу (iOS, Android, Windows Phone). Привлекательно наиболее тесной интеграцией с платформой, что позволяет реализовать привычный для пользователей интерфейс, также отличается высоким быстродействием. Оправданный вариант, если проект больше рассчитан на оффлайновую работу и на мобильных пользователей. Основной недостаток — необходимость скачивания приложения, в противном случае пользователь видит полную версию сайта в маленьком масштабе. Поэтому, даже если у вас есть мобильное приложение, этого не достаточно, в любом случае необходимо делать качественную мобильную версию ресурса.
  • Сайты с адаптивным дизайном —автоматически адаптируется под параметры того устройства, с которого осуществляется вход. Существенный плюс — один URL для всех устройств, что избавляет разработчиков от редиректов, а пользователей от необходимости запоминать адрес мобильной версии сайта. Наиболее популярный в последнее время вариант, так как позволяет работать над одним сайтом для всех типов устройств и дает существенную экономию на трудозатратах при внесении изменений в сайт и его последующую оптимизацию.

Особенности оптимизации сайта под мобильные устройства

Если вы хотите сделать сайт дружественным к мобильным устройствам, вамобязательнонеобходимо учесть три основные составляющие:

  • оптимизацию CSS и настройку медиазапросов;
  • настройку области просмотра с помощью специальных метатегов;
  • оптимизацию используемых плагинов.

Оптимизация CSS и настройка медиазапросов

Первая проблема, с которой сталкивается пользователь, попадая на полную версию сайта с мобильного устройства и наоборот, — некорректное отображение ресурса по отношению к разрешению экрана.

Происходит это, потому что верстальщики, получая макет, по умолчанию прописывают значения ширины или высоты различных элементов в абсолютных величинах (в пикселях) для самых распространенных разрешений обычных ПК, например:

.container {width:210px;height:200px;}

Избежать этого можно, если при обозначение размеров элементов на странице использовать вместо абсолютных величин относительные (например, в процентах):

.container {width: 21,75%;height: 20,408%;}

Это позволит элементам страницы подстраиваться под изменения масштаба всей страницы.

Настройка области просмотра

Большинство сайтов при просмотре с экрана небольшого размера показываются пользователю в точно таком же разрешении (обычно это около 980 пикселей), как и при просмотре с ПК, например:

В результате посетителю приходится увеличивать необходимую область просмотра, чтобы хоть что-то разглядеть.

Использование специализированного метатега “viewport” помогает настроить ширину экрана под любое устройство:

<meta name="viewport" content="width=device-width, initial-scale=1.0">

Атрибут “initial-scale=1” указывает браузеру пользователя соотношение пикселей CSS и устройства (равное 1:1 независимо от ориентации дисплея) для корректного отображения в альбомной ориентации.

Оптимизация используемых плагинов

Многие мобильные устройства и браузеры не поддерживают или поддерживают не все версии современных плагинов, поэтому рекомендуется пересмотреть необходимость наличия на странице плагинов Flash, Silverlight или Java. Многие элементы HTML5 на данный момент позволяют найти замену всем плагинам без потери качества отображения контента.

Помимо всего прочего сокращение или полный отказ от плагинов на сайте позволит оптимизировать вес страниц, что также положительно скажется на его индексации поисковыми системами.

Дополнительные рекомендации

Помимо основных моментов, перечисленных выше, существует масса дополнительных настроек, которые сделают ваш сайт удобным в использовании с мобильных платформ:

  • Правильно подходите к выбору контрольных точек при задании процентных величин элементов макета, на эту тему можно почитать гуру адаптивного веб-дизайна –Итана Маркотта.

Пример оптимизации текста под смартфон и ПК

  • По возможности максимально оптимизируйте JavaScript.
  • Используйте понятную навигацию по сайту в верхней части страниц. Особенно это актуально для сайтов с гибким дизайном. Помните, что при «серфинге» с мобильной платформы пользователю должно быть так же удобно пользоваться сайтом, как и с ПК. Понятное меню и удобная навигация позволят не потеряться на страницах ресурса. Хороший вариант верстки лендинга с адаптивным дизайном —http://www.theverge.com/a/virtual-reality.

Пример навигации по сайту с адаптивным дизайном на экране ПК и смартфона

  • Не пренебрегайте сжатием gzip или deflate, это положительно влияет на скорость загрузки страниц сайта на всех устройствах.
  • Обязательно применяйте кеширование изображений.
  • Зафиксируйте до и после доработок значения таких показателей, как время и глубина просмотра страниц, показатель отказов, основные позиции сайта по всем ключевым запросам, а также статистику по мобильным устройствам и технологиям. Это позволит оценить, все ли вы сделали правильно.

Заключение

Мобильный поиск активно развивается и уже в ближайшие годы займет большую долю рынка. Если вы хотите идти в ногу со временем, опережать своих конкурентов, или хотя бы не отставать от них, не пренебрегайте оптимизацией сайта под мобильные устройства. Это гарантированный дополнительный трафик и конверсии в продажи.

www.cossa.ru

Верстка для мобильных устройств / Habr

Общая информация


Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

DOCTYPE, используемый для мобильных устройств


Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:
    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:
    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

На мой взгляд, предпочтительнее использовать первый вариант.

Особенности верстки


Подключение CSS

Некоторые устройства не поддерживают стили, подключаемые из внешних файлов, поэтому есть рекомендация описывать все стили внутри самого документа:
    <style type="text/css">
        body {
            background-color: #E9E9CC;
            font-family: sans-serif;
            font-size: small;
            }
   </style>

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

Есть мнение, что стили вроде padding и margin нужно прописывать отдельно, используя padding-left, padding-top, margin-right и т.д. Точно так же следует поступать со всеми свойствами, которые имеют короткую запись. Например красный цвет фона стоит лучше записать как background-color: #ff0000;, а не background-color: #f00; и тем более не background: #f00;.
Фон элементов

Нежелательно использовать изображения в качестве фонов, т.к. многие устройства их могут просто не поддерживать. Если они все-таки используются, то необходимо задавать подходящий под фон цвет и проверять, как будет смотреться сайт без изображения.
Изображения

Все изображения на сайте желательно заключать в тег <img> и не забывать добавлять атрибут alt, потому что загрузка изображений на устройстве может быть отключена, и вместо него нужно вывести замену текстом, ну и в конце концов, — мы ведь XHTML используем. 😉 При подготовке изображений желательно ужимать их до минимального размера. При добавлении изображения в документ необходимо указывать его размеры атрибутами width и height.

В итоге, каждое изображение, вставленное в документ должно иметь вид:

    <img src="image.gif" alt="Текстовая замена" />

Таблицы

Старайтесь избегать сложных, в том числе вложенных таблиц, т.к. некоторые браузеры могут не справиться с их рендерингом и вывести кашу вместо таблицы. Также нельзя использовать атрибуты cellpadding и cellspacing, они не включены в DOCTYPE. И ни в коем случае не следует применять таблицы для верстки страниц. Таблицы не удобны в применении на маленьких экранах: чтобы прочитать объёмную таблицу, приходится применять горизонтальную прокрутку, чего тоже следует избегать учитывая, что разрешение экранов мобильных устройств несравнимо меньше, чем у настольного монитора.
Списки

На просторах интернета я наткнулся на упоминание о том, что некоторые браузеры, в частности встроенный браузер в телефонах Nokia некорректно отображает нумерованные и маркированные списки. Возможно это и так, но я считаю, что использовать списки можно и нужно, потому что при отключении стилей, информация остается строго структурированной и хорошо воспринимается пользователем.
Шрифты

Мобильные устройства в большинстве своем имеют очень плохую поддержку шрифтов, поэтому полагаться на то, что текст будет отображен именно тем шрифтом, который был задан в стилях не стоит. Но указывать хотя бы гарнитуру (serif или sans-serif) все равно нужно. Размер шрифтов желательно задавать в относительных единицах или, что еще лучше указывать аргументы свойства font-size в значениях small, medium, или large.
Плавающие элементы

Нельзя использовать плавающие элементы. Большинство браузеров просто не умеют их обрабатывать. Т.е. при создании верстки старайтесь не использовать такие свойства, как float, clear, overflow, clip.

Тестирование


Тестирование необходимо производить в нескольких режимах:
  • с загрузкой изображений и стилей
  • без загрузки изображений
  • без загрузки стилей
  • с полностью отключенными стилями и изображениями

Для тестирования сайтов удобно пользоваться эмулятором Opera Mini, а также встроенной функцией в Opera (для десктопа) в меню «Вид» -> «Небольшой экран».

Мобильные браузеры



Ссылки


habr.com

No related posts.

Leave a Reply