April 11th, 2018

Адаптация HTML-страницы для мобильника

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

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

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



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

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



Как говорится, сравните первый и второй вариант и почувствуйте разницу.

Для того, чтобы на мобильнике сайт отражался по второму (правильному) варианту, его нужно адаптировать для мобильных устройств. Для этого используют разные способы (например, динамический показ — один адрес страницы (URL), но разные варианты HTML-страницы в зависимости от браузера посетителя; или другой способ — разные URL с разными вариантами HTML-страницы для разных устройств), но наиболее оптимальным считается адаптивный дизайн. В этом случае браузеру посетителя выдается один и тот же код HTML, который отображается по-разному в зависимости от размера экрана.

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

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

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

Подробнее об этом можно почитать на сайте компании Google:

https://developers.google.com/search/mobile-sites/?hl=ru
(оптимизация сайта для мобильных устройств)

https://search.google.com/test/mobile-friendly?hl=ru
(онлайн-проверка оптимизации сайта под мобильник)

https://developers.google.com/search/mobile-sites/mobile-seo/responsive-design?hl=ru
(адаптивный дизайн)