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

Примеры адаптивного дизайна

аргументы и факты

Сайт издания Аргументы и факты


forbes

Сайт Forbes.ua

Существует несколько Фреймворков для создания отзывчивого дизайна.

Foundation от компании Zurb

Построен на 12-колоночной сетке. Как основу javascript Фреймворк взят легковесной Zepto.js http://zeptojs.com/, совместим с jQuery http://jquery.com/. В сборку входят такие компоненты как tooltips, progress bars, выпадающее меню, accordion, tabs.

Twitter bootstrap

Так же состоит из 12-ти колоночной сетки для адаптивного дизайна. Возможен вариант работы с фреймворком без адаптации (ширина сетки 940px подключение только bootstrap.css) и с адаптацией (ширина сетки 1170px плюс подключение bootstrap-responsive.css). В помощь дизайнерам в интернете можно найти готовую сетку для изготовления responsive макета. Twitter bootstrap использует jQuery в качестве javascript-framework.

Предоставляется возможность сократить размеры подключаемого bootstrap - выбрав необходимые элементы в Bootstrap Customize .

В состав bootstrap входит множество компонентов таких как выпадающее многоуровневое bootstrap меню, фиксированные и не фиксированные меню, постраничная навигация, progress bars, кнопки различного цвета и размера, tabs, всплывающие модальные окна bootstrap (modal), слайдер (carousel), всплывающие подсказки (tooltip, popover). Для работы javascript элементов необходимо подключение bootstrap js.

Начиная с версии Joomla 3 bootstrap входит в комплект CMS. Известный Joomla компонент Digistore http://foobla.com так же полностью сделан с применением Twitter bootstrap.

Peak-systems разрабатывает адаптивные Joomla шаблоны (версии 2.5 и 3).

Рейтинг:  5 / 5