Вёрстка сайта

Fima Korolev

Верстка сайта

Мобильная версия сайта, адаптивный дизайн или резиновая вёрстка?

Всем привет! Как обычно, из общения с клиентами, рождаются темы для написания и обсуждения статей. Вот, недавно прислали мне задание на создание сайта с нуля. В ТЗ помимо всех пожеланий и требований к сайту было указано: верстка сайта адаптивная. После моего вопроса, что они подразумевают под адаптивной версткой, мне был дан ответ, вы же здесь профи, вот и разбирайтесь сами, что это такое, а нам это надо.

Мобильная версия сайта
Адаптивный дизайн
Резиновый тип макета

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

Мнения были такие:

  • адаптивный и реагирующий дизайн — разные вещи
  • дизайн, «заточенный» под разные устройства и есть «адаптивный»
  • подстраивание под размер окна браузера — это резиновый тип макета
  • разные версии сайта (в том числе мобильная) — попадает под понятие адаптивного дизайна

и прочее…

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

Мобильная версия сайта

Мобильная версия сайта — это отдельный сайт с общей базой от главного. Также может быть отдельный шаблон. Отличительные особенности: собственный поддомен (m.site.ru) или папка (site.ru/m/). Мобильная версия создана для удобства использования сайта на всяких гаджетах, преимущественно на смартфонах. Основной принцип: убрать всё лишнее (включая графику, второстепенный функционал и т.д.) и облегчить просмотр сайта на мобильных девайсах. Такая версия обладает свой отдельной вёрсткой, относительно десктопной версии, отдельным дизайном и отдельным функционалом. Проще говоря — это отдельный сайт (в большинстве случаев). Примеры:

Рекомендую к прочтению:  Основы HTML (часть 4)

http://www.pda.spb.mts.ru/

http://m.mvideo.ru/

http://m.kinopoisk.ru/

В десктопном браузере мобильные версии сайта, конечно, смотрятся не так как простые версии. Принцип подстановки сайта такой: определяется устройство или браузер, редиректит на m.site.ru. О плюсах и минусах можно судить в таблице, в конце поста.

Адаптивный дизайн (адаптивная вёрстка сайта)

Адаптивный дизайн (он же: Responsive, отзывчивый, реагирующий) — это единый сайт, который подстраивается под разную ширину браузера, вне зависимости с какого устройства открыт сайт. Многие считают, что адаптивный дизайн реагирует на устройство, однако это не совсем так. Корни растут именно от ширины окна браузера. У вашего сайта может быть всего лишь одна вёрстка для всех вариантов адаптации. Настройки макета и стили изменяются в зависимости от размеров области просмотра, посредством CSS3 Media Queries (CSS3 медиа запросы). Цитата с htmlbook:

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

URL сайта остаётся неизменным в разных адаптациях, т.к. у нас один и тот же сайт с одной и той же вёрсткой (чаще всего. Бывают также более сложные варианты). С примерами можно ознакомиться здесь. Вот некоторые:

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

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

Смысл в том, что в зависимости от размера окна браузера ширина колонок и промежутков между ними может меняться, но количество остаётся всегда 12. Вот по этим колонкам весь макет и адаптируется, какие то блоки сползают друг под друга, какие то просто уменьшают свою ширину, оставляя текст читаемым и т.д. Почитать про адаптивный дизайн я советую в книге «Responsive Web Design» (автор: Итан Маркотт — человек, который придумал понятие “отзывчивый веб-дизайн”).

Рекомендую к прочтению:  Основы HTML (часть 3)

Кстати, некоторые разделяют понятия “отзывчивый” и “адаптивный”. Разница не велика, просто “адаптивный” — более широкое понятие, включающее “отзывчивый”. Небольшая вырезка из википедии, для лучшего понимания:

в отзывчивом дизайне

  • применение гибкого макета на основе сетки ( flexible, grid-based layout);
  • использование гибких изображений (flexible images);
  • работа с медиазапросами (media queries);

 

в дополнение к этому в адаптивном дизайне

  • применение постепенного улучшения;
  • проектирование для мобильных устройств с самых ранних этапов

 

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

Резиновый тип макета

Или проще «резиновая вёрстка» (резина) — тип вёрстки макета, при которой пропорции сайта меняются в зависимости от размера окна браузера. В большинстве случаев, это значит, что какой бы у вас ни был широкий экран, резиновый сайт будет полностью занимать окно браузера, без пустоты по бокам. Есть ещё резиновые до передела сайта. То есть в каком-то промежутке ширины сайт резиновый, а выше порога — остаётся на своей максимальной ширине. Лично я не очень люблю такие типы макетов, очень уж проблемные если ковыряться и дополнять функционал сайта.

В пример я вспомнил только http://www.searchengines.ru/ (также потяните окно браузера, сайт будет скользить). Конечно, адаптивный дизайн можно совмещать с резиновым типом и другими штуками, но речь тут про чистый резиновый макет, не упустите мысль.

Теперь табличка с с основными для меня особенностями. Все остальные особенности я перечислять не буду:

Особенности верстки сайтов

Мобильная версияАдаптивный дизайнРезиновый макет
Отличияредирект на m.site.ruподстройка под разные размеры окнаизменение пропорций
Сложность разработкисложноне очень сложнопросто
Трендвсё ещё в модеявный трендникому не нужно
Гибкость подстройки под разную ширинуне оченьоченьсредне
Основные плюсыразный функционалудобство с любого девайсаучёт широкоформатников
Основные минусысложно, часто дорогоновый функционал необходимо учитывать по всех адаптацияхнет никаких подстроек под девайсы
Стоимость разработкидорогодорогоне дорого
Мой выбордля супер-функционального сайтадля контентного сайтабез комментариев
Рекомендую к прочтению:  Как в WordPress показать фото до и после


-->

11 комментариев »

  1. Мобильная версия опять актуальна – планшеты с большим разрешением, а отображать на них также надо как и на маленьких телефонах

  2. У всех блогов на Вордпресс, как я понимаю, именно адаптивный дизайн. Но вот я, например, если пишу сайт на чистом HTML, по старинке, табличной вёрсткой, то всегда использую резиновый тип. Зато всегда уверен, что сайт будет нормально смотреться на любом мониторе.

  3. Александр:

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

  4. Евгений:

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

  5. Сергей:

    А меня мобильная версия сайта раздражает, я всегда ищу на телефоне полную версию сайта если автоматом на мобильную редиректнуло.

  6. Александр:

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

    • M&D:

      Именно! Я как раз к таким отношусь. По хоршему надо иметь какой-нибудь опрос пользователей, прежде чем переходить от одного дизайна к другому (кстати, у меня зафиксированный, хотя тема на ВП сайте позволает выбрать резиновый).

  7. Все, я разобрался. Спасибо! Надо себе делать адаптивную верстку. Пока у меня только “резинка”.

  8. Vlad:

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

  9. О, я себе навертела адаптивный дизайн в блоге, давно уже. :) А у самой смартфона нет, тестить приходится в эмуляторах (что не всегда надёжно), а ещё – побираться у осмартфоненых знакомых с просьбами потестить мой блог. Ну, пока никто не нашёл, к чему придраться, но если бы искала я, я бы, скорее всего, нашла, что улучшить. :D

  10. Статья хорошая, но она больше для ознакомления нужна. Хотелось бы почитать побольше конкретики. Напимер как перестроить шаблон для WordPress на резиновый. Помню мастерил как-то интернет-магазин на движке OpenCart, так там просто все обошлось вставкой небольшого кода, помоему в style.css. А для WordPress возможно такое? И если да, то где что нужно править?

Оставить комментарий

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

Что-то типа КАПЧИ :) *

Вы можете использовать это HTMLтеги и атрибуты: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">