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

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

В качестве примера для демонстрации можно взять сайт owltastic.com:

owastic.com — десктопная версия

owastic.com — версия для планшетов

owastic.com — мобильная версия

Недостатком в применении вариативного дизайна можно считать с некоторой натяжкой не совсем рациональное использовании полезной площади сайта на больших экранах, особенно FullHD и новых устройствах с Retina-дисплеями от Apple. При недостаточной оптимизации дизайна под высокие разрешения элементы интерфейса могут быть преувеличено большими или малыми, масштабирование же шрифтов и изображений потребует особой тщательности и тестирования. Flash-рекламу и многоуровневую анимацию тоже лучше  исключить, чтобы не перегружать обработкой мобильные браузеры, многие из которых не поддерживают технологию Adobe Flash.

Основным методом создания вариативного дизайна являются CSS3 Media Queries, которые произошли от стандарта CSS2 Media. В данный момент этот стандарт находится в статусе «Proposed Recommendation», все современные браузеры его поддерживают. Internet Explorer младше девятой версии вспоминать не будем, постараемся забыть, как страшный сон.

В стандарте CSS2 мы могли задавать только дизайн для определённых типов устройств, теперь же мы можем ориентировать дизайн по таким ключевым параметрам:

• width — ширина отображаемой области.
• height — высота отображаемой области.
• device-width —  вся доступная ширина экрана устройства
• device-height — вся доступная высоту экрана устройства
• orientation — определение, находится ли устройство находится в альбомном режиме или портретном
• aspect-ratio — соотношение ширины и высоты отображаемой области устройства
• device-aspect-ratio — соотношение высоты и ширины экрана устройства
• color — число бит на канал цвета
• color-index — поддерживаемое устройством количество цветов
• monochrome — определение монохромного устройства, как будто специально сделано для электронных книг
• resolution — разрешение устройства в DPI
• scan — тип развёртки (для телевизора)
• grid — для устройства с фиксированным размером символов — терминалы и телефоны с поддержкой единственного шрифта

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

CSS media-запрос для разрешения экрана до 620 пикселей

Чтобы задать отображение для мобильного устройства контента во всю ширину лучше всего использовать элемент, который хотя еще и находится в черновиках W3C, но поддерживается практически всеми более-менее современными мобильными браузерами и называется «Viewport META element«. Использовать его довольно-таки просто:

Этот элемент может принимать свойства:

• width — ширина
• height — высота
• initial-scale — начальный масштаб
• minimum-scale — минимальный масштаб
• maximum-scale — максимальный масштаб
• user-scalable — может ли масштаб изменяться пользователем (zoom in/out)
• target-densityDpi — плотность пикселей на устройстве, поддержка браузерами пока сильно ограничена

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

Meta viewport — до применения

Meta viewport — после применения

Стоит помнить, что в некоторых мобильных браузерах, а в частности Apple Safari и Microsoft Internet Explorer Mobile конструкция типа

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

Рекомендуется использовать в проектах, которые рассчитаны под вариативный дизайн не абсолютные (px), а относительные значения (%, em) свойств CSS: отступов, размеров шрифта и т.д. Это немного освободит вас от попиксельной подгонки дизайна под такие похожие, но такие разные мобильные устройства.

Относительные значения свойств CSS

Стоить вспомнить и про использование JavaScript при адаптации сайта к мобильным устройствам. Не стоит нагружать его большим количеством сценариев. Помните, что возможности мобильного телефона, планшета и прочей подобной техники существенно ниже десктопных версий аналогичных браузеров. Да и мобильный интернет на необъятных просторах нашей родины, мягко говоря, оставляет желать лучшего.

Пинги на мобильном интернете

В противном случае вы можете получить неполноценную загрузку сайта, чаще всего неоправданно долгую, а в особо запущенных случаях — вылеты мобильных браузеров. Используйте библиотеки сжатия на стороне сервера JS и CSS файлов и формирования их в один. Это может потребовать гораздо больше времени на разработку и устранение ошибок и немного увеличить нагрузку на сервер. Но результат будет отличаться в лучшую сторону от такого:

Ад мобильных браузеров где-то рядом…

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

Для того, чтобы определить по user-agent мобильный браузер и показывать/не показывать соответствующие блоки с рекламой вам может помочь примерно такое регулярное выражение и код для PHP:

$useragent=$_SERVER[‘HTTP_USER_AGENT’];
if(preg_match(‘/android.+mobile|avantgo|bada\/|blackberry|blazer|compal|elaine|fennec|hiptop|iemobile|ip(hone|od)|iris|kindle|lge |maemo|midp|mmp|netfront|opera m(ob|in)i|palm( os)?|phone|p(ixi|re)\/|plucker|pocket|psp|symbian|treo|up\.(browser|link)|vodafone|wap|windows (ce|phone)|xda|xiino/i’,$useragent)||preg_match(‘/1207|6310|6590|3gso|4thp|50[1-6]i|770s|802s|a wa|abac|ac(er|oo|s\-)|ai(ko|rn)|al(av|ca|co)|amoi|an(ex|ny|yw)|aptu|ar(ch|go)|as(te|us)|attw|au(di|\-m|r |s )|avan|be(ck|ll|nq)|bi(lb|rd)|bl(ac|az)|br(e|v)w|bumb|bw\-(n|u)|c55\/|capi|ccwa|cdm\-|cell|chtm|cldc|cmd\-|co(mp|nd)|craw|da(it|ll|ng)|dbte|dc\-s|devi|dica|dmob|do(c|p)o|ds(12|\-d)|el(49|ai)|em(l2|ul)|er(ic|k0)|esl8|ez([4-7]0|os|wa|ze)|fetc|fly(\-|_)|g1 u|g560|gene|gf\-5|g\-mo|go(\.w|od)|gr(ad|un)|haie|hcit|hd\-(m|p|t)|hei\-|hi(pt|ta)|hp( i|ip)|hs\-c|ht(c(\-| |_|a|g|p|s|t)|tp)|hu(aw|tc)|i\-(20|go|ma)|i230|iac( |\-|\/)|ibro|idea|ig01|ikom|im1k|inno|ipaq|iris|ja(t|v)a|jbro|jemu|jigs|kddi|keji|kgt( |\/)|klon|kpt |kwc\-|kyo(c|k)|le(no|xi)|lg( g|\/(k|l|u)|50|54|\-[a-w])|libw|lynx|m1\-w|m3ga|m50\/|ma(te|ui|xo)|mc(01|21|ca)|m\-cr|me(di|rc|ri)|mi(o8|oa|ts)|mmef|mo(01|02|bi|de|do|t(\-| |o|v)|zz)|mt(50|p1|v )|mwbp|mywa|n10[0-2]|n20[2-3]|n30(0|2)|n50(0|2|5)|n7(0(0|1)|10)|ne((c|m)\-|on|tf|wf|wg|wt)|nok(6|i)|nzph|o2im|op(ti|wv)|oran|owg1|p800|pan(a|d|t)|pdxg|pg(13|\-([1-8]|c))|phil|pire|pl(ay|uc)|pn\-2|po(ck|rt|se)|prox|psio|pt\-g|qa\-a|qc(07|12|21|32|60|\-[2-7]|i\-)|qtek|r380|r600|raks|rim9|ro(ve|zo)|s55\/|sa(ge|ma|mm|ms|ny|va)|sc(01|h\-|oo|p\-)|sdk\/|se(c(\-|0|1)|47|mc|nd|ri)|sgh\-|shar|sie(\-|m)|sk\-0|sl(45|id)|sm(al|ar|b3|it|t5)|so(ft|ny)|sp(01|h\-|v\-|v )|sy(01|mb)|t2(18|50)|t6(00|10|18)|ta(gt|lk)|tcl\-|tdg\-|tel(i|m)|tim\-|t\-mo|to(pl|sh)|ts(70|m\-|m3|m5)|tx\-9|up(\.b|g1|si)|utst|v400|v750|veri|vi(rg|te)|vk(40|5[0-3]|\-v)|vm40|voda|vulc|vx(52|53|60|61|70|80|81|83|85|98)|w3c(\-| )|webc|whit|wi(g |nc|nw)|wmlb|wonu|x700|yas\-|your|zeto|zte\-/i’,substr($useragent,0,4)))
{
//some code there…
}

Загрузить регулярные выражения для различных языков и протестировать их работу можно с помощью сервисаdetectmobilebrowsers.com. Регулярные выражения там постоянно обновляются и совершенствуются.

Можно также воспользоваться помощью сторонних сервисов, таких, например, как api.yandex.ru/detector, но тогда вы будете зависеть от доступности/недоступности и времени отклика сторонних серверов.

На этом первая рабочая статья из цикла «Адаптация сайта к мобильным устройствам» завершается, следите за дальнейшими обновлениями на сайте. источник:seazo.net.