—»     —»   Разрабатываем адаптивный дизайн
  Раздел: Web-дизайн   Комментариев: 2  

Разрабатываем адаптивный дизайн

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

Что же такое «адаптивный веб-дизайн»?

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

В его книге, которая так и названа «Адаптивный веб-дизайн», он описывает три части адаптивного дизайна:

* резиновая модульная сетка
* резиновые изображения
* использование media queries

Я не буду обсуждать эти вещи, так как эта статья предназначена для дизайнеров, а не разработчиков, я не хочу наступать на пятки Итану.
Тем не менее, вам как дизайнерам важно понимать основы адаптивного веб-дизайна (АВД), чтобы лучше разрабатывать сайты, которые будут быстро работать. Я настоятельно рекомендую прочитать три статьи, написанные Итаном: «резиновая модульная сетка», «резиновые изображения», «адаптивный веб-дизайн».

Разрабатываем адаптивный дизайн
Иллюстрация Кевина Корнелла


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

Роль дизайнера

Если вы дизайнер, ответственный исключительно за дизайн сайта, то есть не несёте ответственность за HTML и CSS-код сайта, над которым работаете, то многое из этого пройдёт мимо ваших ушей. Возможно, вы даже спросите, зачем вам нужно знать об АВД.

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

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

Я ещё раз напоминаю, что эта статья для дизайнеров. В следующих абзацах я расскажу, как именно, будучи дизайнером, мы должны изменить способы разработки дизайна для АВД.

Grid Systems и Вы

Разрабатываем адаптивный дизайн

Grid Systems (модульная сетка) – это отличный пример основанного на сетке дизайна, к которому вы должны стремиться.

Даже если вы не разрабатываете АВД, вы всё равно должны разрабатывать шаблон с использованием модульной сетки. Как современный, образованный дизайнер, вы должны понимать, что значит использовать модульную сетку, так что я пропущу немного очевидных вещей.

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

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

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

Постарайтесь воздержаться от использования текстурированной границы на ваших страницах, например:

Разрабатываем адаптивный дизайн

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

2. Горизонтальные градиенты – очередной тупик

Разрабатываем адаптивный дизайн

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

3. Если у вас есть текстурированный фон на странице, убедитесь, что его можно использовать в форме циновки. Можно использовать пиксельные текстуры или нечто подобное. Нельзя использовать фотографии, иллюстрации или другие не мозаичные изображения.

Мыслите пропорционально

Масштабируйте ваш дизайн по горизонтали, для корректного отображения на меньших экранах, но в определённый момент текст станет слишком большим. Конечно, заголовок в 100pt выглядит отлично в вашем PSD-файле, но он просто не уместится на экране iPhone, например – он будет слишком большим, и текст растянется на несколько строк, что не даст того эффекта, на который вы рассчитывали.

Итак, дизайнер, использующий CSS media queries, должен подгонять размер для лучшего отображения на экране. Это дизайнерское решение, а раз вы дизайнер, то выбор остаётся за вами, ведь так?

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

Так же вы должны решить, как будет корректироваться изменяемый текст.

Никогда не делайте, чтобы X был меньше, чем 20pt Y. Это не только вызовет проблемы у разработчиков, но и не будет иметь смысла на изменяемом экране, потому что ваше постоянное значение, которое никогда не изменится, независимо от размера экрана. Для АВД это огромная ошибка, так как это не принимается во внимание в процессе генерации страницы.

Правильно будет сделать так: X всегда должен быть в полтора раза больше, чем Y. Этот способ единственно правильный для получения большого или маленького шрифта, сопоставимого с другим текстом на странице. Неизменное значение типа 24pt или 67pt бессмысленно.

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

Сделаем дизайн модульным

Последняя часть «адаптивного» паззла – это Media Queries. Если вы не знакомы с этим термином, то Media Queries – это способ применения CSS к странице, основанной на размере отображения в браузере.

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

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

Например: представьте, что вы разрабатываете сайт, который выглядит как этот (я уверен, что вы уже работали над такими проектами):

Разрабатываем адаптивный дизайн

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

При создании собственного сайта удерживание в голове данных модуля облегчит понимание того, как ваш макет адаптируется под разные размеры окон. Например:

Разрабатываем адаптивный дизайн

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

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

Заключение

Как и многое в интернете, адаптивный веб-дизайн – эволюционный, но не революционный. Это просто следующий шаг в развитие веб, а не полное его переосмысление. Будучи дизайнерами, мы должны адаптироваться к новым способам разработки, и этот способ как раз не исключение.

Адаптивный дизайн – это будущее или, по крайней мере, будет таковым, когда разработчики примут его. Как веб-дизайнеры и разработчики, мы единственные способны сделать так, чтобы новый стандарт был принят повсеместно.
Обнаружили ошибку или мёртвую ссылку?
Выделите проблемный фрагмент мышкой и нажмите CTRL+ENTER.
В появившемся окне опишите проблему и отправьте уведомление Администрации ресурса.
Нужна органическая вечная ссылка из данной статьи? Постовой?
Подробности здесь
Вам понравился материал? Поблагодарить легко!
Будем весьма признательны, если поделитесь этой статьей в социальных сетях:

Опубликовал Design FactoRy   Прочитано (раз): 18913   |   Оставлено комментариев: 2
Источник материала / оригинал статьи   Распечатать
Другие статьи и новости по теме:
Комментарий #1: 1 мая 2012 @ 12:59
Написал: fortune — группа: Читатели  
На сайте с: 19.11.2009   |   Публикаций: 0   |   Комментариев: 59
ICQ: 190783170
Классная вещь, страница складывается в зависимости от разрешения экрана устройства, блоки уходят друг под друга и меняется их размер. Я пользуюсь готовой модульной сеткой от http://www.amazium.co.uk/ Попробуйте, очень удобно!


--------------------
я дизайнер - http://imdesigner.ru
Комментарий #2: 1 мая 2012 @ 19:23
Написал: acelote — группа: Гости  
На сайте с: --   |   Публикаций: 0   |   Комментариев: 0
ICQ: --- не указано ---
Старая статья, если честно. А вот ссылка
Цитата: fortune
http://www.amazium.co.uk/

очень интересная. Спасибо.
Добавление комментария
Уважаемые пользователи!
При добавлении комментариев на сайт Вам следует учитывать следующее - все комментарии проверяются Администрацией на предмет отсутствия спама. При обнаружении признаков спама, в оставленном Вами комментарии, сам комментарий будет незамедлительно удалён, а Ваш IP-адрес будет забанен без предупреждения! Учётные записи пользователей, рассылающих спам, блокируются/удаляются без права последующего восстановления.

С уважением, Администрация сайта.
* = поля обязательны к заполнению
Полужирный Наклонный текст Подчеркнутый текст Зачеркнутый текст | Выравнивание по левому краю По центру Выравнивание по правому краю | Вставка смайликов Выбор цвета | Скрытый текст Вставка цитаты Преобразовать выбранный текст из транслитерации в кириллицу Вставка спойлера
Вопрос : Назовите месяц December по-русски
Подтверждение кода безопасности :

Включите эту картинку для отображения кода безопасности
обновить, если не виден код


Спонсоры проекта
Баннер в сайдбаре 1 (сквозной)
Баннер в сайдбаре 2 (сквозной)
Спонсоры проекта
Баннер в сайдбаре 3 (сквозной)
Баннер в сайдбаре 4 (сквозной)
Популярные публикации







Свежие шаблоны сайтов каждый день
С миру по нитке
«    Октябрь 2019    »
ПнВтСрЧтПтСбВс
 123456
78910111213
14151617181920
21222324252627
28293031