Адаптивный веб-дизайн: модульные сетки и фреймворки

В конце концов, все мы когда-нибудь прекратим спорить о веб-разработке. Не потому, что она исчезнет, а потому, что появятся стандарты описывающие весь процесс. Вспомните, как 10 лет назад мы спорили насчет CSS и необходимости использования бестабличной верстки. Сейчас это вполне очевидно. Почти все современные сайты сверстаны с применением этого принципа, хотя, к сожалению, есть несколько сайтов сверстанных на таблицах. Но это скорее исключение.

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

Mobile Boilerplate


«Mobile Boilerplate» один из лучших шаблонов для построения сложных и производительных веб-приложений. Вы получаете не только совместимость с современными браузерами мобильных устройств, но также поддержку старых Blackberry, Symbian и Windows Mobile. Хочется выделить, что он позволяет создать лишь отдельную версию для мобильных устройств.


Skeleton


Skeleton — это небольшой набор CSS и JS файлов, предназначенных для быстрой разработки адаптивного дизайна. Сайты с использованием этого фреймворка отлично выглядят в любом разрешении, от 17-дюймового монитора до экрана iPhone.

Hardboiled CSS3 Media Queries


Этот фреймворк разработан Анди Кларком специально для его книги «Hardboiled Web Design». Как видно из названия, работает на технологии CSS3.

Tiny fluid grid


Весьма элегантный способ разработки адаптивного дизайна для сайтов построенных с использованием модульных сеток.

FluidGrids


CSS-фреймворк для быстрого прототипирования.

Less Framework


Less Framework — это сеткоориентированная система для разработки адаптивного дизайна, основанная на CSS.

CSS Grid


Сетка шириной в 1140 пикселей, идеально подходит для устройств с разрешением 1280 пикселей по ширине. На меньших разрешениях макет адаптируется к разрешению устройства.

Inuit.css


Этот фреймворк позволяет адаптировать дизайн для небольших экранов (например, для таблеточных устройств) и крошечных (телефоны). отличительной особенностью является простота настройки. Все функции доступны прямо из коробки.

Flurid


Кросс-браузерный CSS-фреймворк, который «не скрывает пиксели в отступах».

320 and Up


«320 and Up» умеет определять тип устройства пользователя и выдает необходимый CSS, тем самым экономя трафик пользователя с небольшим экраном.
  • 0
  • 14 ноября 2011, 12:54
  • admin

Комментарии (6)

RSS свернуть / развернуть
Годная подборка
+2
  • avatar
  • asbuk
  • 15 декабря 2011, 02:36
Skeleton достаточно удобен, использовали на некоторых сайтах где требовалась реализация адаптивного дизайна для мобильных устройств. Советую
0
  • avatar
  • Den
  • 15 декабря 2011, 03:13
Честно говоря, если под Адаптивными сайтами вы имеете ввиду концепцию Responsive Web Design, то Mobile Boilerplate здесь не при чем. Он сделан для создания отдельной мобильной версии сайта.

А Responsive как раз за то, чтобы один сайт работал на всех устройствах сразу, в том числе мобильных — Как сделать один сайт для всех устройств, «Responsive Web Design»
+1
  • avatar
  • b29
  • 09 января 2012, 03:51
Спасибо, дополнил в описании
0
комментарий был удален
комментарий был удален
Только зарегистрированные и авторизованные пользователи могут оставлять комментарии.