x
 
Максим Россомахин
29 февраля 2012

Женя, привет!

Расскажите о том, как сделать хорошую модульную сетку.



Хочу затронуть важный тренд: responsive design, или адаптивный дизайн (о классической модульной сетке мы найдём время поговорить позже).

Responsive (respond — отвечать, реагировать) — это ещё один шаг резиновости сайта. Это адаптация вёрстки под разные разрешения экрана, но не простое сжатие-растяжение, а «умная» подстройка. В большем разрешении видно больше колонок текста, картинки имеют динамическую ширину (спасибо браузерам), ширина и размер текста тоже динамические. Попробуйте поменять ширину браузера на сайтах «Бостон Глоуб» и «Смэшинг магазин».

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



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

Мои последние проекты сделаны с адаптивным дизайном, например сайт «Ашманов и Партнеры Медиа». Конечно, технологически тут не всё так красиво (разные файлы ЦСС на разные разрешения), но работает для всех устройств:

Рекомендую статьи об адаптивном дизайне на Листапарте и Смэшинг-магазине.

P. S.
Это был совет о компоновке и стиле информационных сайтов. Евгений Лучинин — независимый дизайнер, работал над сайтами Локалс, Звуук, Лук-эт-ми и Афиши. Присылайте вопросы.

Поделиться
Отправить

Комментарии

Евгений Волков
29 февраля 2012

Очень удобный инструмент на эту тему: http://gridpak.com/

Задаете «контрольные точки» и для интервалов между точками выставляете значения (в процентах или в пикселях) ширин.

На выходе несколько CSS, LESS, JS и PNG-файлов для разработки тянущегося дизайна под все разрешения.

И есть одно правило, которое очень часто указывают в этой теме — разработка такого дизайна должна начинаться с минимального размера с дальнейшим наращиванием. Намного проще отсечь сначала всё ненужное, сделать крепкий мобильный дизайн, а потом наращивать то, что оторвалось вначале. А может и не наращивать, ведь оторвали не зря, наверно всё-таки не нужно оно.

Иван Пришвин
4 марта 2012

А можно узнать подробнее про элегантные ЦСС-решения?

Тема адаптивного дизайна мне интересна уже давно, и я уже давно использую простые JS-скрипты типа:
$(window).resize ( [код] )

Как правильно адаптировать с токи зрения технологий, но чтобы не подставлять новые ЦСС-файлы, классы и т. д.?

Егор Стремоусов
4 марта 2012

Возможно, кому-то покажутся полезными пара моих переводов по теме «адаптивный веб-дизайн»: http://peredelka.wordpress.com/…%B9-%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD (http://peredelka.wordpress.com/tag/%D0%B0%D0%B4%D0%B0%D0%BF%D1%82%D0%B8%D0%B2%D0%BD%D1%8B%D0%B9-%D0%B2%D0%B5%D0%B1-%D0%B4%D0%B8%D0%B7%D0%B0%D0%B9%D0%BD/)


Цель рубрики — обсуждение вопросов дизайна всех видов, текста в дизайне и взаимоотношений дизайнеров с клиентами.

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

Решение о публикации принимается один раз; мы не имеем возможности комментировать или пересматривать свое решение, хотя оно может быть ошибочно. Уже опубликованные комментарии могут быть удалены через некоторое время, если без них обсуждение не становится менее ценным или интересным.

Вот такой веб 2.0.

О тексте как базовом элементе 5 4 Сначала я думал, что 12 пунктов — это, может быть, 12 пикселей, но не так все просто 8




Недавно всплыло

Поделитесь соображениями, как работать, путешествуя 8 Что вы думаете о способе указывать цвету прозрачность в шестнадцатеричном виде вместо более традиционного RGBA? 3 Без стоп-слов текст мне кажется сухим, чёрствым, грубым и резким 33 Как написать хорошее резюме? 7