О чем нужно помнить при создании адаптивной верстки?

Россия+7 (495) 960-65-87
Шрифт:
5 16155

Стремительный рост мобильного рынка в России и за рубежом сделал вопрос «мобильных версий» одним из самых обсуждаемых в среде SEO-специалистов и владельцев сайтов. И хотя Google и недавно присоединившийся к мобильной гонке Яндекс не отдают предпочтение ни одному из мобильных вариантов, среди вебмастеров распространено мнение, что, выбирая между мобильным сайтом, динамическим контентом и адаптивной версткой, стоит остановиться на последней.

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

Адаптивный дизайн – это конфигурация, в которой сервер отправляет одинаковый HTML-код на любые устройства, а размеры элементов страницы корректируются с помощью CSS, – Google.

Основные преимущества формата:

  • Один URL для всего контента. Облегчает взаимодействие пользователей с контентом, а также его обнаружение и индексацию поисковыми роботами.
  • Создание одной адаптивной страницы занимает меньше времени, чем дублирование содержания на разные сайты.
  • При адаптивной верстке алгоритмы Google точнее индексируют параметры страницы, а не регистрируют разные версии одной страницы.
  • Можно использовать возможности конкретного устройства для взаимодействия с пользователем.
  • Нет редиректов. А значит, снижается время загрузки, и растет производительность.

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

Что нельзя упустить?

  • Ни в коем случае нельзя блокировать JavaScript, CSS и файлы изображений. Для лучшего отображения и индексации всегда оставляйте доступ googlebot и googlebot-mobile к этим данным. Если вы запретите сканировать эту информацию у себя в robots.txt, это нанесет непосредственный вред отображению и индексации контента, что в свою очередь отрицательно скажется на ранжировании.

Проверить доступность файлов для роботов Google можно в Search Console, в разделе «Посмотреть, как Google».

  • Размер данных. Мобильные пользователи не должны скачивать полноразмерные изображения, предназначенные для больших экранов и высоких скоростей. Попробуйте уменьшить HTTP-запросы и сократить CSS и JavaScript. В первую очередь на странице должен загружаться контент. Все остальное вторично.
  • Используйте изображения в формате JPEG, GIF или PNG-8. От обычного PNG лучше отказаться, так как он может утяжелять картинку в 5–10 раз.
  • При создании графических элементов типа кнопок лучше отказаться от картинок в пользу CSS.
  • Невоспроизводимые форматы. Flash и некоторые нераспространенные форматы видео могут не воспроизводиться на мобильных устройствах. Их, а также Java-апплеты и Silverlight-плагины необходимо убрать с сайта, иначе Яндекс не будет считать сайт адаптировынным под мобильные устройства. К слову, с конца прошлого года Яндекс перестал показывать в мобильных Яндекс.Видео ролики, работающие на flash и не поддерживающие HTML5.
  • Разработка адаптивного дизайна должна вестись по принципу mobile-first. То есть сначала создается верстка для самых маленьких экранов. Макет для таких устройств состоит из одной колонки с базовыми элементами: шапкой, меню, основным контентом и подвалом. При увеличении экрана по ширине элементы выстраиваются горизонтально, как на десктопах.

mobile-first.png

http://blog.teamtreehouse.com/modern-field-guide-responsive-web-design

  • Не используйте межстраничные объявления. Вместо них стоит выбрать баннеры HTML или изображения, похожие на обычное объявление, которые не загораживают экран.

apps.png

  • Чтобы браузеры мобильных устройств не сжимали страницу под размер экрана, а отображали ее в нужном вам виде, используйте метатег viewport. Можно встретить, например, такое его употребление:

< meta name="viewport" content="width=device-width">

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

device-width.png

Для устройств, у которых при переходе на ландшафтный (горизонтальный) экран ширина страницы не изменяется, просто выполняется масштабирование контента, необходим атрибут initial-scale=1. Он установит соответствие 1:1 для пикселей CSS вне зависимости от ориентации устройства. Подробнее о метатеге viewport читайте в Справке Google Developers.

initial-scale.png

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

Разрешение

Модель смартфона

320х480, 480х320

1440х2560, 2560х1440 LG G3, Samsung Galaxy S6

Samsung Galaxy S II, Samsung Galaxy Fame, Samsung Galaxy Young, Samsung Rex, Samsung Galaxy Pro, Nokia X6, Nokia E7, HTC Legend, HTC Salsa, HTC Hero, Apple iPhone 3

480х800, 800х480 Samsung Galaxy S III mini, Samsung Galaxy Golden GT, Samsung Galaxy Grand Neo, Nokia Lumia, Nokia X, Nokia XL, HTC Desire 300-500

540х960, 960х540

Samsung Galaxy Core, Samsung Galaxy S4 mini, HTC Desire 600-700, HTC One S, HTC Sensation XE, Sony Xperia

640х1136, 1136х640 Apple iPhone 4, Apple iPhone 5

720х1280, 1280х720

Samsung Galaxy S III, Samsung Galaxy Note, Samsung Galaxy Grand, Nokia Lumia 900+, Sony Xperia T2 Ultra, Sony Xperia Z1 Compact

750х1334, 1334x750

iPhone 6

1080х1920, 1920х1080

Samsung Galaxy S4, Samsung Galaxy S5, Samsung Galaxy Note 3, Nokia Lumia 1520, Sony Xperia Z1, Sony Xperia Z2, Sony Xperia Z Ultra, HTC One, HTC One MAX, HTC One M8, iPhone 6 Plus

Разрешение

Размер планшета

600x800, 800x600

Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A

768х1024, 1024x768

Apple iPad mini, Acer Iconia Tab

768x1366, 1366x768

ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire

800х1280, 1280x800

Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet

1080x1920, 1920x1080

Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700

1536x2048, 2048x1536

Apple iPad

1600x2560, 2560x1600

ASUS Transformer Pad, Samsung Galaxy Tab Pro

Где тестировать?

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

Эти инструменты показывают размер всего окна браузера, а не области просмотра.

Убедиться в том, что адаптивные сайты – это действительно полезно и удобно, можно посмотрев подборку из 47 адаптивных сайтов. И вот еще 12 примеров для тех, кому интересно. 

Читайте нас в Telegram - digital_bar

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


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Отправить отзыв
  • Павел Столяров
    1
    комментарий
    0
    читателей
    Павел Столяров
    5 месяцев назад
    www.iloveadaptive.ru – самый современный сервис на текущий момент, который я видел.
    -
    1
    +
    Ответить
  • Павел Чащин
    1
    комментарий
    0
    читателей
    Павел Чащин
    больше года назад
    Уже год работаю с сайтом автошколы "Автоледи", сделали примитивный дизайн, что тоже в принципе влетело в копеечку. Мне как директору, важно внушать доверие своих клиентов, наличие группы вконтакте выглядит как фирма однодневка. Позволить полноценное СЕО, на постоянной основе данная фирма не может, из-за денежных скачков и непостоянного потока клиентов. В последствии обновили дизайн и плавающую кнопку звонка. До какого то времени это работало. В этот период мы запустили активно тарге...
    Уже год работаю с сайтом автошколы "Автоледи", сделали примитивный дизайн, что тоже в принципе влетело в копеечку. Мне как директору, важно внушать доверие своих клиентов, наличие группы вконтакте выглядит как фирма однодневка. Позволить полноценное СЕО, на постоянной основе данная фирма не может, из-за денежных скачков и непостоянного потока клиентов. В последствии обновили дизайн и плавающую кнопку звонка. До какого то времени это работало. В этот период мы запустили активно таргетированную рекламу вконтакте, но выстрела это не дало тк целевая аудитория в основном молодые девушки, студентки, без детей, и им важно не сидеть попами у мониторов, а заходить с мобильных устройств, планшетов. Я часто сотрудничаю с фрилансерами - людьми из дома, но как оказалось деньги потраченные на рекламу, не выстрели потому, что сайт на мобильном устройстве не работает! Кнопки залипают, страница не обновляется, хлебные крошки ведут к пустыми разделам. Честное слово, открыла первый попавшийся сайт www.mobile-version.ru/ и заказал услугу адаптацию сайта под мобильные устройства, цена была дешевле, чем у моих аутсорферов, сделали мне адаптацию под разные разрешения экрана, в целом это сотрудничество позволило мне пересмотреть мое отношение на введение дел с такими компаниями. За 3 дня мне было сделано обновление сайта, теперь сайт виден на первой странице яндекса, переходов стало больше, звонков больше, появилась отдача. Впервые видел отчет о проделанной работе, я видел все куда ушел каждый рубль.
    Ни за что сам бы не полез переписывать HTML код, ведь я в случае чего не умею делать откат.
    -
    1
    +
    Ответить
  • Гость
    больше года назад
    Хоть бы размеры правильные написали
    -
    0
    +
    Ответить
  • Qwmnzxpo
    больше года назад
    Адаптивный дизайн уже давно вошёл в работу пряморуких и следящих за тенденциями специалистов. Ведь в первую очередь это юзабилити, что имеет 80% решения об отказах с мобильных устройств. Например: сайт с появлением mobile friendly за год, по сравнению с предидущим периодом, потерял 40% траффика, так как с мобильных устройств сайт очень не удобен , и отказ с них 83%. Делать сайты адаптивными необходимо и это должно быть естественным ходом событий, ведь прогресс не стоит на месте.
    -
    0
    +
    Ответить
    • Андрей Колесов
      38
      комментариев
      0
      читателей
      Андрей Колесов
      Qwmnzxpo
      больше года назад
      Некоторые прости-господи-специалисты еще не освоили кроссбраузерную верстку, а вы тут про адаптивные дизайны...
      -
      5
      +
      Ответить
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
32 инструмента в помощь SEO-специалисту
Игорь
1
комментарий
0
читателей
Полный профиль
Игорь - отличная подборка, сам многим из этих сервисов пользуюсь (ETXT, TEXT.RU, Адаптивность, Pingdom Website Speed Test, Google PageSpeed Tools, 2IP, Whois, Букварикс) Правда не мог найти достойного кластеризатора, но потом наткнулся на вот этот seoquick.com.ua/keyword-grouping/ не сочтите за рекламу:) Было бы интересно услышать ваше мнение о нем. Мне очень даже зашел, из-за скорости работы. Как говорит автор - 100 000 запросов за несколько минут. Я с такими цифрами правда не работал, обычно это до 30 000 точно, но работает очень быстро и в правду. Ну и бесплатно, думаю, это был еще один решающий фактор для меня
Исследование: влияние smart-ссылок на продвижение по СЧ-запросам
Анатолий Шевчик
1
комментарий
0
читателей
Полный профиль
Анатолий Шевчик - +1097988
Все, что нужно SEO-специалисту. Обзор инструментов
Администратор Сайта
1
комментарий
1
читатель
Полный профиль
Администратор Сайта - Шаришь в seo! Сервис реально хороший
Не очень удачный кейс продвижения сайта по услуге «Трезвый водитель» в Москве
Александр Селенков
1
комментарий
0
читателей
Полный профиль
Александр Селенков - Работа проделана огромная. Интересный кейс, все детально и понятно изложено.
Два идеальных способа разориться на старте интернет-магазина
Стас
4
комментария
0
читателей
Полный профиль
Стас - Seonews в последнее время такую чушь несет! Где вы таких афторов находите? Статья ничего не стоит и несет чушь! Кто хоть немного понимает в этом так вам и скажет, и такие де комментаторы горе-сеошники, просто смешно читать, вы хоть модерируете ваши статьи или просто для воды на сайте?! Бред сивой кобылы эта статья до самой последней точки!!!
SEO глазами клиентов 2018
Мария Рогачева
2
комментария
0
читателей
Полный профиль
Мария Рогачева - Никита, в этом вы правы. В каком-то смысле мы оказались заложниками названия. Когда запускали рейтинг, было одно сплошное SEO, сейчас же сложно найти агентства, которые специализируются только на SEO. Не учитывать другие каналы продвижения стало просто неправильно.  Активно думаем в этом направлении.  Спасибо вам за отзыв и внимание к рейтингу! 
4 способа быстро собрать теги для сайта
Рустем Низамутинов
5
комментариев
0
читателей
Полный профиль
Рустем Низамутинов - Расписал и закинул в Google Docs, а то здесь в комментариях ссылки на активны. docs.google.com/document/d/1r0TZLNrQyYLdIzDQsD5YKlMG41HUGQgEep3bxE_ij-M/edit?usp=sharing
Яндекс перестал индексировать сайты, созданные на Wix
Константин Даткунас
3
комментария
0
читателей
Полный профиль
Константин Даткунас - Было бы интересно посмотреть саму выборку из 10 000 и методику анализа.
Яндекс: как мы модерируем объявления
Гость
5
комментариев
0
читателей
Полный профиль
Гость - Это ж Яндекс, чего вы ожидали-то? Коммерческая структура с раздутым штатом, задачей которой является заработать больше денег. Любыми методами. Задача всех пользователей посадить на Директ, даже если придется разрушить суть рунета, реализуется по полной программе. Все возражающие караются и выпиливаются. И каждый из сотрудников делает все возможное и невозможное, чтобы реализовать любую дурацкую идею - за это еще и премию выхватить можно. Даже если потом придется выполнять "откат", премиальные уже заплачены. Так было с одним из фильтров Яндекса, так было с купленным им сайтом Кинопоиска, который из русскоязычной энциклопедии кино был превращен за безумные деньги в банальный платный онлайн-кинотеатр.
Как мы разработали и вывели в ТОП сайт курсов рисования
Иван Стороженко
25
комментариев
0
читателей
Полный профиль
Иван Стороженко - Добрый день. 1)Чаще всего основная проблема заключается, в согласовании с клиентом добавляемого контента и то как он будет отображаться. На данном сайте фото и услуги конечно предоставлял клиент, все остальное уже делали мы. 2)Да в принципе, когда есть команда и понимание, что нужно делать, все идет быстро (опять же основная заминка идет на согласовании с клиентом) 3)Смысла делать новый в данном случает нет. В принципе доделывался полноценный сайт. 4)Когда клиент уже не предоставляет информацию, приходится искать у конкурентов (например с других стран или регионов). Но чаще всего клиент, хоть что-то "подкидывает".
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
329
Комментариев
262
Комментариев
235
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
121
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
86
Комментариев
80
Комментариев
67
Комментариев
60
Комментариев
59
Комментариев
57
Комментариев
55
Комментариев
54
Комментариев
53

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