Дарья Калинская
Выпускающий редактор SEOnews
Стремительный рост мобильного рынка в России и за рубежом сделал вопрос «мобильных версий» одним из самых обсуждаемых в среде SEO-специалистов и владельцев сайтов. И хотя Google и недавно присоединившийся к мобильной гонке Яндекс не отдают предпочтение ни одному из мобильных вариантов, среди вебмастеров распространено мнение, что, выбирая между мобильным сайтом, динамическим контентом и адаптивной версткой, стоит остановиться на последней.
Редакция SEOnews разобралась в достоинствах и недостатках адаптивного дизайна, выделила моменты, которые нельзя упустить при его создании, и в качестве бонуса добавила несколько инструментов для тестирования адаптивной верстки.
Адаптивный дизайн – это конфигурация, в которой сервер отправляет одинаковый HTML-код на любые устройства, а размеры элементов страницы корректируются с помощью CSS, – .
Основные преимущества формата:
- Один 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. То есть сначала создается верстка для самых маленьких экранов. Макет для таких устройств состоит из одной колонки с базовыми элементами: шапкой, меню, основным контентом и подвалом. При увеличении экрана по ширине элементы выстраиваются горизонтально, как на десктопах.
- Не используйте межстраничные объявления. Вместо них стоит выбрать баннеры HTML или изображения, похожие на обычное объявление, которые не загораживают экран.
- Чтобы браузеры мобильных устройств не сжимали страницу под размер экрана, а отображали ее в нужном вам виде, используйте метатег viewport. Можно встретить, например, такое его употребление:
< meta name=»viewport» content=»width=device-width»>
Указанное значение для ширины device-width говорит мобильному браузеру, что страницу нужно отображать не в стандартном разрешении, а адаптировать под экран устройства.
Для устройств, у которых при переходе на ландшафтный (горизонтальный) экран ширина страницы не изменяется, просто выполняется масштабирование контента, необходим атрибут initial-scale=1. Он установит соответствие 1:1 для пикселей CSS вне зависимости от ориентации устройства. Подробнее о метатеге viewport читайте в Google Developers.
- Популярные разрешения. В отличие от десктопа планшеты и смартфоны могут менять ориентацию страницы с ландшафтной на портретную и наоборот, так что для каждого разрешение лучше разработать два варианта дизайна. Ниже – разрешения для некоторых популярных смартфонов и планшетов.
|
Разрешение |
Модель смартфона |
|
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, 1334×750 |
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 |
|
Разрешение |
Размер планшета |
|
600×800, 800×600 |
Ritmix RMD-825, 3Q Qoo! Q-pad, Texet TB-823A |
|
768х1024, 1024×768 |
Apple iPad mini, Acer Iconia Tab |
|
768×1366, 1366×768 |
ASUS Transformer Book, Samsung ATIV Smart, Acer Aspire |
|
800х1280, 1280×800 |
Acer Iconia Tab A3, ASUS MeMO Pad, ASUS Nexus 7, Lenovo Yoga Tablet, Lenovo Idea Tab, Samsung Galaxy Tab, Sony Xperia Tablet |
|
1080×1920, 1920×1080 |
Nokia Lumia 2520, Microsoft Surface, Samsung ATIV Smart, Lenovo ThinkPad, Acer Iconia Tab W700 |
|
1536×2048, 2048×1536 |
Apple iPad |
|
1600×2560, 2560×1600 |
ASUS Transformer Pad, Samsung Galaxy Tab Pro |
Где тестировать?
В идеале тестировать адаптивный дизайн нужно на устройствах с разным разрешением экрана. Но если такой возможности нет, вполне подойдут специальные плагины для браузеров и самостоятельные сервисы.
- Microsoft Internet Explorer Developer Toolbar (начиная с IE 8)
- (Firefox)
- (Safari)
- (Opera)
- (Google Chrome)
Эти инструменты показывают размер всего окна браузера, а не области просмотра.
Убедиться в том, что адаптивные сайты – это действительно полезно и удобно, можно посмотрев подборку из 47 адаптивных сайтов. И вот еще 12 примеров для тех, кому интересно.