Адаптивный дизайн

 

Дизайн с фиксированной шириной

Обычно это дизайн, который подходит для всех экранов c шириной в 1024 пикселей и больше. Самый большой плюс такого дизайна в том, что затрачивается сравнительно меньше времени на его разработку и вёрстку: не приходится думать как будет вести себя сайт при растягивании и результат обычно полностью соответствует задумке. К минусам можно пожалуй отнести только отсутствие плюсов остальных видов дизайна, то есть сам по себе вид этого дизайна минусов не имеет.

«Резиновый» дизайн

Вся площадь окна браузера занята страницей сайта, многие элементы страницы тянутся. Эта его особенность является и его основным плюсом — площадь экрана используется более эффективно. То есть владельцы больших мониторов теоретически получают больше информации на одном экране (что на практике не всегда так). Минус такого подхода в том, что увеличивается время разработки и вёрстки такого дизайна, так как нужно учитывать поведение сайта при изменении его ширины. Ещё один минус в том, что, как не крути, невозможно создать такой сайт, который бы одинаково хорошо выглядел при всех ширинах. Часто это обходится введением максимальной и минимальной ширины сайта, оно и понятно — это единственный способ не показывать те уродства, которые происходят с любым тянущимся сайтом на ширинах меньше 960 или больше 1600 пикселей.

Адаптивный дизайн

Этот  вид дизайна появился сравнительно недавно и не получил ещё такого широкого распространения, как предыдущие два вида. Фишка такого дизайна в том, что сайт выглядит одинаково хорошо при любых разумных ширинах (240—2500 пикселей). То есть дизайн адаптирован к разным разрешениям. Блоки с последними работами адаптируется к ширине страницы, исчезают при уменьшении ширины и добавляются при увеличении ширины. Как видно понятие адаптивный дизайн можно применять не только к сайту, но и к отдельному элементу сайта. Плюс такого дизайна в том, что это выглядит просто охуительно и площадь экрана действительно занимается эффективно и растяжение сайта его не уродует. Ну а минус — это время, затрачиваемое на его разработку и реализацию, его требуется намного больше.
 

Разновидности адаптивного дизайна

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

  • Количество представляемой информации пропорционально ширине окна, то есть как в ранее приведённом примере с сайта САЛ: элементы исчезают при уменьшении окна.
  • Противоположность предыдущему пункту: информация сохраняется при изменении ширины элемента (можно в это понятие включить и сам сайт). Это может быть банальное перескакивание блоков.
  • Вид дочерних элементов блока изменяется при изменении его ширины. Например вариант одного и того-же блока для мышки и для тач-устройтсва, или варианты блоков для телефона и для десктопной версии.
  • Противоположность предыдущему пункту: при изменении ширины сайта изменения касаются только положения блоков, но ни как не его внешнего вида.
  • Плавный или резкий переход по фазам. Фазами я называю учтенные варианты дизайна (расположения и вида блоков) в зависимости от условий, одним из которых является ширина сайта. Если переход между фазами резкий, значит между двумя фазами (например между фазами 980 и1240 пикселей) сайт ведёт себя как сайт с фикисрованной ширирной, т. е. никак не изменяется. Как только фаза изменяется — вид сайта тоже меняется. При плавном переходе сайт между фазами ведёт себя как резиновый, то есть расположение и вид блоков не меняется, меняются лишь их размеры.

 

Уместность

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

Для чего делают резиновые сайты? Ну, они на мониторах с большим разрешением часто лучше выглядят, чем сайты с фиксированной шириной. Поэтому делают резиновые сайты (то что больше информации влазит — это имхо фигня всё). Но сайт не обязан быть тянущимся, если на сайте мизер информации или она не требует того, чтобы она тянулась. Например 14-пунктовый текст, вытянутый во всю ширину FullHD — то ещё уродство.

Если сравнивать с другими версиями сайта, что в посте не рассматривалось, то у этих методов есть как минусы так и плюсы:
Разные версии одного и того же сайта предпочтительнее, для массивных проектов с большим объёмом информации и графических элементов, так как загружая сайт, браузер на смартфоне не будет захлёбываться от переизбытка и анализа кода, который всё равно не нужен + сервер тоже не будет отсылать лишнюю информацию.
Адаптивная вёрстка же, если рассматривать триаду «смартфон — планшет — десктоп» подойдёт больше для небольших и средних проектов с средней же посещаемостью, так как к трафику и объёму они не очень требовательны.

С технической стороны адаптивная вёрстка невыгодна, она выгодна для дизайна.

Примеры

http://www.bostonglobe.com/?refresh=true

http://belkiosk.by/

Теория

http://wedeal.ru/blog/korporatsii-nachinayut-ispolzovat-adaptivnyie-saytyi-responsive-web-design/

Адаптивный веб-дизайн на практике (хабр)

http://habrahabr.ru/company/futubra/blog/142735/

Самые простые техники адаптивной верстки http://habrahabr.ru/post/144003/

62 полезных инструмента для адаптивного дизайна (Responsive web design)

http://webtun.com/webmaster/2701-responsive-web-design-techniques-tools-and-design-strategies.html

http://forum.htmlbook.ru/index.php?showtopic=33911

Мой любимый  Ruseller.com  http://ruseller.com/lessons.php?rub_id=2&id=1177

Добавить комментарий

Ваш e-mail не будет опубликован. Обязательные поля помечены *