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

На главнуюБлог › Заметки › Адаптация сайта к мобильным устройствам. Адаптивный или вариативный дизайн
Речь пойдёт о применении примерно одинакового дизайна для отображения на всех устройствах: мониторы с большой диагональю, ноутбуки, планшеты, смартфоны. Электронные книги и обычные телефоны рассматриваться не будут, это немного специфичная ниша. Если коротко передавать смысл применения вариативного дизайна, то его можно охарактеризовать так: «Одна версия сайта для всех устройств»
Заметки 08-04-2015  Просмотров : 23752375

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

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

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

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

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

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

Основным методом создания вариативного дизайна являются , которые произошли от стандарта . В данный момент этот стандарт находится в статусе «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, но поддерживается практически всеми более-менее современными мобильными браузерами и называется ««. Использовать его довольно-таки просто:

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

  • 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…
}

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

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

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

На главнуюБлог › Заметки › Адаптация сайта к мобильным устройствам. Адаптивный или вариативный дизайн