Как делаются сайты с адаптивным дизайном?

All-Devices-Supported

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

Только в одном им нелегко тягаться с настольными компьютерами — это размер дисплея. Комфортные глазу 24 дюйма никак не хотят влезать в карман :).

Плотность матрицы дисплеев у смартфонов (величина числа точек на дюйм) выше, чем у мониторов настольных компьютеров, но их разрешение едва ли дотягивает до последних. К примеру, iPhone 6S имеет разрешение 1334×750 точек. При том смартфон привычнее держать в ладони в «портретной» ориентации. Получается, что 750 точек в случае iPhone 6S — это ширина экрана. В то время как скромный уже по нынешним меркам 19-ти дюймовый монитор типично обладает разрешением 1280 точек по ширине.

Ясно, что нужно учитывать эти особенности при отображении сайтов.

Разные шаблоны для разных случаев.

Этот путь добротный, правильный, но трудный. Идея в том, чтобы определять тип устройства и, в соответствии с ним, подключать ту или иную тему оформления сайта. То есть ваш сайт должен иметь 2 и более темы оформления (например : десктоп, планшет, мобильник).

Responsive_Design_Is_So_Important

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

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

Переключение темы в зависимости от типа устройства на WordPress

Если ваш сайт на WP, то вам повезло — у меня есть готовое решение. Это плагин — «Any mobile theme switcher». Устанавливаем его и идем в настройки.

any-mobile-switcher-settings

Плагин проводит анализ переменной HTTP_USER_AGENT и определяет тип мобильного устройства. Теперь вы можете определить какую тему сопоставить каждому случаю.

any-mobile-switcher-settings-s

Каждая мобильная платформа может получить своё оформление, а для десктопного варианта выводится основная тема, выбранная в разделе сайта — «внешний вид».

Другие CMS.

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

Один шаблон, разный внешний вид.

Этот подход более экономичный, он использует возможности CSS.

В CSS есть механизм, определяющий применение описаний свойств элементов страницы в зависимости от среды вывода документа.

Для определенного типа среды — media type (монитор, принтер и т.д.), обладающего определенными свойствами media features (разрешение, глубина цвета, ориентация и ещё полсотни свойств), можно задать свои стили оформления.

Описание @media на w3schools.

Разбор типичного примера

Давайте попробуем разобраться как это использовать на небольшом примере. Мы создадим пару контейнеров по 500 пикс. Но один из них будет «адаптироваться» к ширине экранной области, а другой — нет.

Начальный вариант документа выглядит так:

Теперь нам надо решить, где та граница, когда следует переопределить правила. Пусть при уменьшении области вывода (ширины окна браузера) менее 500 точек и затем и менее 400 точек, подключаются специальные стили оформления. Я буду уменьшать размер шрифта и менять цвет фона, чтобы было очевидно какой стиль имеет силу.

В стили я добавляю следующие строки:

Блоки @media в нашем случае нужно подключать именно в таком порядке: сначала для большего разрешения, потом для меньшего. Если @media (max-width: 500px) и @media (max-width: 400px) поменять местами, то правила для четырехсот точек будут всегда перекрыты и выполняться не будут.

Установим ширину браузера больше наших критических отметок. Оба контейнера получили одинаковые, базовые стили (зеленый фон и шрифт в 22 пикселя).

over-size-2

Теперь будем уменьшать ширину окна браузера. Перейдя через отметку в 500 пикс, второй контейнер получит свойства, описанные в соответствующей случаю секции @media.

sized-below-500

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

sized-below-400

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

Написать комментарий

Мало букафф? Читайте есчо !

Пропорциональное заполнение контейнера картинкой

Ноябрь 29, 2017 г.

Речь идет о том, чтобы показать изображение внутри контейнера так, чтобы оно заполнило собой весь контейнер, но при этом не изменились пропорции картинки. Сейчас это актуально в связи с необходимостью поддержки отображения сайта на мобильных устройствах. ...

Читать

Виджетик для сравнения двух картинок

Ноябрь 1, 2015 г.

Этот виджет может найти применение для сайта дизайнера или фотографа, которые занимаются реставрацией или обработкой изображений. Наверное, приложений ...

Читать

 

Комментарии к «Как делаются сайты с адаптивным дизайном?»

Понравилась статья? Есть вопросы? - пишите в комментариях.



Комментарий: