Как делать адаптивный дизайн сайта

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


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

Если вы пользуетесь статистикой Яндекс, Google для сайта, то вы можете узнать о своих посетителях. В Яндекс.Метрике есть специальный раздел: Технологии - Разрешения дисплеев. Там можно узнать очень подробные данные о ваших посетителях: на каких экранах смотрят сайт чаще, также какие браузеры используют. Иногда количество людей, заходящих с планшетов и телефонов, достигает 20% - 30% от общего числа. Это повод задуматься, а как же выглядит сайт на этих устройствах?

Жёсткая структура сайта больше не работает
Старые форматы сайтов, которые разрабатывались до появления мобильных устройств с выходом в сеть, имеют жёсткую структуру, которая не умеет сжиматься при масштабировании окна. Такие сайты, конечно, отображаются на любых экранах, но что происходит на устройствах? Попробуйте на своём компьютере изменить размеры окна браузера при просмотре такого сайта: пример биржа текста etxt.ru При сжатии окна появляется горизонтальная полоса прокрутки, а на экране изначально виден только огромный логотип и пару ненужных кнопок. Но не только сайт не влезает целиком на малый экран. В случае с etxt.ru на малый экран ничего полезного не попадает, хотя сайт очень популярный, и его просматривают с разных устройств.

http://youni.ru/adaptivnyy-dizayn-sayta-kak-delat-adaptivnyy-responsivnyy-dizayn

Мой сайт жёсткой структуры, что делать?
Если вы обнаружили на своем сайте подобные неудобства при изменении размера окна, а количество посетителей с устройств больше 10%, значит каждый десятый испытывал неудобства. Да, в начале эпохи гаджетов все сайты отображались неудобно, просто потому что маленький экран - это маленькие возможности. Но теперь удобство зависит только от профессионализма разработчика, уже многие сайты учитывают интересы пользователей гаджетов. Для этого вовсе необязательно создавать мобильную версию сайта, достаточно оптимизировать дизайн. Если ваш сайт работает на известной CMS, просто найдите респонсивный шаблон, а если нет, то рассмотрим как работают респонсивные шаблоны.

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

http://youni.ru/adaptivnyy-dizayn-sayta-kak-delat-adaptivnyy-responsivnyy-dizayn

Если вы попробуете сжать до минимума страницу браузера при присмотре нашего сайтаhttp://youni.ru, то увидите такую картину: дизайн сожмётся, меню станет одной кнопкой "Раскрыть меню", и сайт будет прокручиваться вниз, текст будет хорошо читаться. Единственным неудобством является то, что рубрики блога совсем уйдут вниз, а в главном меню к ним никак не добраться, но наш сайт ориентирован на продажи услуг, а не на подачу блогов. В главное меню была добавлена кнопка "Блог" для исправления ситуации.

Как добиться удобства навигации?
1. Блочная вёрстка
2. Использование процентов в значении ширины основных блоков
3. Использование процентов для ширины внутренних элементов
4. JavaScript для уплотнения элементов и файл media.css

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

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

Читайте полную версию статьи на сайте Юни Youni.ru
http://youni.ru/adaptivnyy-dizayn-sayta-kak-delat-adaptivnyy-responsivnyy-dizayn