Многофункциональная SEO-платформа
для профессионалов
Войти как пользователь
Вы можете войти на сайт, если вы зарегистрированы на одном из этих сервисов:

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

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

Стремительный рост мобильного рынка в России и за рубежом сделал вопрос «мобильных версий» одним из самых обсуждаемых в среде 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 примеров для тех, кому интересно. 

Есть о чем рассказать? Тогда присылайте свои материалы в редакцию.


Новые 
Новые
Лучшие
Старые
Сообщество
Подписаться 
Подписаться на дискуссию:
E-mail:
ОК
Вы подписаны на комментарии
Ошибка. Пожалуйста, попробуйте ещё раз.
Поделиться 
Поделиться дискуссией:
Отправить отзыв
  • Qwmnzxpo
    6 месяцев назад
    Адаптивный дизайн уже давно вошёл в работу пряморуких и следящих за тенденциями специалистов. Ведь в первую очередь это юзабилити, что имеет 80% решения об отказах с мобильных устройств. Например: сайт с появлением mobile friendly за год, по сравнению с предидущим периодом, потерял 40% траффика, так как с мобильных устройств сайт очень не удобен , и отказ с них 83%. Делать сайты адаптивными необходимо и это должно быть естественным ходом событий, ведь прогресс не стоит на месте.
    -
    0
    +
    Ответить
    Поделиться
    • Андрей Колесов
      38
      комментариев
      0
      читателей
      Андрей Колесов
      Qwmnzxpo
      6 месяцев назад
      Некоторые прости-господи-специалисты еще не освоили кроссбраузерную верстку, а вы тут про адаптивные дизайны...
      -
      5
      +
      Ответить
      Поделиться
ПОПУЛЯРНЫЕ ОБСУЖДЕНИЯ НА SEONEWS
23 действительно эффективных совета по продвижению интернет-магазина
Гость - Троль Гуру паНгинации - Что такое паНгинация?))))
Как построить качественную ссылочную массу сайта
Анна Фра
1
комментарий
0
читателей
Полный профиль
Анна Фра - www.youtube.com/watch?v=jtINdDyNdFU полезное видео
Анализ ссылок: сравнение многофункциональных платформ по размеру их баз
Андрей Ольшевский - Очень неточная статистика, объясню почему. Довольно часто делаю анализ сайтов на качество и объём ссылочной массы. Всегда делаю выгрузку из трех источников – Вебмастера Яндекса, сервиса Мегаиндекс, сервиса Линкпад. Потом с помощи алгоритмов и функции Excel отсеиваются много дублей, битых ссылок, несуществующих урл и тп. Как показала практика, вебмастера Яндекса вполне достаточно, там вся информация и она самая актуальная, в других сервисах куча мусора, а нового, чтоб было найдено и проиндексировано ПС - очень мало. Поэтому мирятся количеством в данном анализе не профессионально.
Как создать интернет-магазин: сколько стоит открытие?
Гость - да у битрикса что ни обновление - то сплошные баги. недавно знакомый обновился на лицензии интернет-магазина, про***лись заказы за последнюю неделю, слетели все связи по складам. одним словом, жопа. при этом обновился на сразу, а спустя месяц после выкатывания, надеялся, успеют все поправить
ТОП-10 автоматизированных сервисов контекстной рекламы
Гость - Не доверяйте свои данные системам от агентств, если рекламу у них вы не ведете. Юзал алитикс и к50. Пробуйте эти две системы как мин. А лучше всего автоматизировать с помощью эксель, pbi и подобных сервисов. Но пока это сложно для большинства
Как упростить продвижение вечными ссылками?
Coursh - Зарегестрировался. Накинули 1100 рубликов за пополнение на 10к. Очень неплохо!
Кому и зачем нужен маркетплейс от Яндекса
Дарья Калинская
209
комментариев
0
читателей
Полный профиль
Дарья Калинская - Максим, спасибо, рада, что статья оказалась полезной )
Конкурс: угадай победителя рейтинга «Известность бренда SEO-компаний»
Андрей
1
комментарий
0
читателей
Полный профиль
Андрей - Оптимизм Дэмис Кокос Ашманов и Партнеры Раш эдженси
Кейс: как молодому сайту увеличить органический трафик с 0 до 10 000 посетителей за 6 месяцев
Олег Буряк
38
комментариев
0
читателей
Полный профиль
Олег Буряк - Никаких санкций!!!! на сайт за резкий скачок уникальных естественных ссылок !!!не было наложено!!!. Все дальше читать не буду! УДАЧИ Вам! кошмар!
Инструкция по применению: обзор сервиса обратного звонка Callbackhunter
CallbackHunter
1
комментарий
0
читателей
Полный профиль
CallbackHunter - В своей рассылке, мы указываем все новые фишки ;)
ТОП КОММЕНТАТОРОВ
Комментариев
910
Комментариев
834
Комментариев
554
Комментариев
540
Комментариев
483
Комментариев
373
Комментариев
285
Комментариев
262
Комментариев
209
Комментариев
171
Комментариев
156
Комментариев
137
Комментариев
123
Комментариев
97
Комментариев
97
Комментариев
95
Комментариев
80
Комментариев
71
Комментариев
67
Комментариев
60
Комментариев
55
Комментариев
52
Комментариев
50
Комментариев
45
Комментариев
44

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