Веб-разработчик
0,0
рейтинг
19 июля 2012 в 21:16

Разработка → Книга Итана Маркотта «Отзывчивый веб-дизайн»

Обложка книги Итана Маркотта «Отзывчивый веб-дизайн» Возможно, многие из вас уже читали книгу Итана Маркотта «Responsive Web Design» в оригинале. Для тех, кто еще этого не сделал, у меня есть хорошая новость – весной этого года издательство «Манн, Иванов и Фербер» выпустило данную книгу на русском языке под названием «Отзывчивый веб-дизайн».

Почему стоит прочитать эту книгу?


Во-первых, эта тоненькая книга (всего 176 страниц) содержит описание технологии, которая уже стала революционной. Если оценивать влияние, которое оказала данная книга на Сеть и процесс веб-разработки, то ее можно поставить в один ряд с такими инновационными книгами прошлых лет, как: «WEB-дизайн по стандартам» Джеффри Зельдмана и «AJAX в действии».

Во-вторых, данная книга была написана Итаном Маркоттом (Ethan Marcotte) — человеком, который придумал само понятие отзывчивый веб-дизайн.

В-третьих, в ноябре 2011 года «Отзывчивый веб-дизайн» был признан журналом .net magazine одной из 25 лучших книг для веб-дизайнеров и разработчиков.


Что такое отзывчивый веб-дизайн?


Впервые термин отзывчивый веб-дизайн (Responsive Web Design) был использован 25 мая 2010 года в одноименной статье Итана Маркотта, опубликованной в журнале A List Apart.

Отзывчивый веб-дизайн – это технология создания веб-страниц, которая обеспечивает удобство их просмотра на различных устройствах (стационарных компьютерах, ноутбуках, планшетах, смартфонах, телевизорах, имеющих подключение к Интернет (например, через игровую приставку), и т.д.). Целью отзывчивого веб-дизайна является универсальность HTML-разметки веб-сайта для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств различных разрешений и форматов, по технологии отзывчивого веб-дизайна не нужно создавать отдельные версии веб-сайта для каждого конкретного типа устройств.

Отзывчивый веб-дизайн базируется на 3 принципах:
  1. Гибкий макет на основе сетки (flexible, grid-based layout)
  2. Гибкие изображения (flexible images)
  3. Медиазапросы (CSS3 media queries)

Если вы уже работали с типовым веб-приложением ASP.NET MVC 4 RC (шаблон Internet Application), то значит, что вы уже видели отзывчивый веб-дизайн в действии. Страницы данного веб-приложения могут гибко подстраиваться под различные размеры экрана, причем для экранов, ширина которых меньше 850 пикселей (например, экраны смартфонов), используются специальные стили (подключаются с помощью медиазапроса):

Отзывчивый веб-дизайн в действии на примере типового веб-приложения ASP.NET MVC 4

Структура книги


Теперь непосредственно о книге. Книга «Отзывчивый веб-дизайн» представляет собой пошаговое руководство по созданию отзывчивого веб-сайта. Автор на примере тестового веб-сайта «ROBOT…OR NOT?» шаг за шагом показывает, как с помощью технологии отзывчивого веб-дизайна можно усовершенствовать веб-сайт, имеющий фиксированный макет.

В первой главе автор рассказывает о причинах, которые привели к возникновению технологии отзывчивого веб-дизайна, и об ее основных принципах.

Во второй главе автор показывает, как сделать макет страницы более гибким (резиновым). Приводятся примеры, того как правильно рассчитать размер элементов страницы в относительных единицах (размер текста должен задаваться в em`ах, а размеры блоков, полей и отступов в процентах).

В третьей главе речь идет о технологии гибких изображений — изображений, которые могут адаптироваться под различные размеры экрана, и приводится ряд способов кроссбраузерной реализации данной технологии.
Если вы до этого читали совместную книгу Дэна Седерхольма и Итана Маркотта «CSS ручной работы» (а именно 6-ую главу «Резиновая сетка»), то многие понятия из 2-й и 3-й главы «Отзывчивого веб-дизайна» будут вам знакомы.

В четвертый главе рассматривается технология медиазапросов из спецификации CSS3 и особенности использования meta-тега viewport. На примерах показывается, как с помощью медиазапросов можно задавать стили, ориентированные на конкретные типы устройств. Кроме того, автор приводит ссылки на JavaScript-библиотеки, которые обеспечивают поддержку медиазапросов в старых версиях браузеров.

В пятой главе перечисляются проблемы, которые могут возникнуть при создании отзывчивых веб-сайтов. Классическая технология отзывчивого веб-дизайна предполагает, что за основу берется версия веб-сайта для стационарного компьютера, а затем адаптируется для планшетов и смартфонов. Такой подход имеет один существенный недостаток: мобильным пользователям приходиться загружать элементы дизайна, которые были разработаны для стационарной версии сайта, что приводит к увеличению объема трафика и времени загрузки веб-страниц. В качестве решения данной проблемы предлагается взять за основу подход Люка Вроблевски, подробно изложенный в книге «Сначала мобильные!». При таком подходе сначала должна быть создана мобильная версия сайта, а уже затем к ней могут быть добавлены стили и возможности для устройств с большим размером экрана. Также Итан Маркотт отмечает, что отзывчивый веб-дизайн требует внесения изменений в процесс веб-разработки. Фактически при отзывчивом веб-дизайне объединяются стадии проектирования и разработки, и процесс становится более итеративным, что требует более тесного взаимодействия графических дизайнеров и front-end разработчиков. В конце главы автор показывает, как отзывчивый веб-дизайн сочетается с концепцией прогрессивного улучшения (progressive enhancement).

Достоинства и недостатки русского издания


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

Пожалуй, я нашел всего один недостаток данного издания – это неправильное использование кавычек в листингах (вместо «двойных» и 'одинарных' компьютерных кавычек используются «елочки» и ‘марровские кавычки’).
Андрей Тарицын @Taritsyn
карма
13,7
рейтинг 0,0
Веб-разработчик
Реклама помогает поддерживать и развивать наши сервисы

Подробнее
Спецпроект

Самое читаемое Разработка

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

  • +8
    Переводчики, скорее всего «Адаптивный» а не «Отзывчивый».
    • +1
      Адаптивный и отзывчивый веб-дизайн часто используют, как синонимы. Книга Итана Маркотта в оригинале называется «Responsive Web Design», что в дословном переводе означает «Отзывчивый веб-дизайн». Также не стоит забывать, что существует книга Аарона Густафсона «Adaptive Web Design», название которой можно перевести на русский язык как «Адаптивный веб-дизайн».
      • 0
        «Адаптивный»? Какой же это русский язык? О_о
        Может быть тогда эту книгу стоит перевести как «Респонсивный вебдизайн»? ))
    • 0
      С помощью поиска я нашел много статей, в которых сравниваются адаптивный и отзывчивый веб-дизайн. Вот ссылки на некоторые из них:
      1. On Adaptive vs. Responsive Web Design
      2. Adaptive vs. Responsive, what’s the difference?
      3. Responsive & Adaptive Web Design

      На мой взгляд, наиболее понятное сравнение двух понятий дал финский веб-дизайнер Вилжами Салминен в статье «Adaptive vs. Responsive, what’s the difference?». Он считает, что отзывчивый веб-дизайн является подмножеством (частью) адаптивного веб-дизайна. Фактически отзывчивый веб-дизайн = подвижная разметка, а адаптивный веб-дизайн = подвижная разметка + прогрессивное улучшение.
      • 0
        Добавьте к этому статью из A List Apart A Dao of Web Design за 2000 год в которой автор размышляет о переходе веба на новый уровень, оставив фиксированный лэйаут позади. Там ясно сказано, что есть адаптивный дизайн, а что отзывчивый.

        Мне почему-то кажется, что все возмущения вокруг термина отзывчивый связаны с тем, что это слово намного чаще употребляется по отношению к человеку, чем к чему-либо другому и поэтому звучит оно не к месту. Может быть правильнее было бы употреблять слово реагирующий.
  • +1
    Twitter Bootstrap это отлично умеет.
    • 0
      Да и в качестве примера для этой статьи он много лучше (распространеннее, проще «пощупать»)
  • 0
    А подойдет ли книга для чтения «не программистам»?

    Имею ввиду она наполнена различными техническими тонкостями или простой обыватель слегка знающий html поймет суть и идеи книги?
    • 0
      Ага, у нас вообще ее дизайнерам для начала дали, потом верстальщикам. Вот думаю не прочитать ли и мне:)
    • 0
      Книга с цветными картинками, тоненькая:) Прочитать стоит, на сложность изложения вроде не жаловались.
    • 0
      Для того, чтобы понять данную книгу необходимы знания HTML и CSS. В книге есть пара листингов на JavaScript с использованием jQuery, но они не играют существенной роли.

      Книга в первую очередь рассчитана на HTML-верстальщиков, front-end разработчиков (веб-технологов) и продвинутых веб-дизайнеров.
      • 0
        Интересно, как соотносится front-end разработка и веб-дизайн?!
        • 0
          Напрямую. В процессе создания проекта по технике rwd принимают участие все. И UX дизайнеры и веб-дизайнер, и собственно фронт-энд разработчик. Responsive Web Design это не только верстка с помощью медиазапросов.
  • +1
    Тоненькая, а стоит 320 руб. на аймобилке… )
    Из этой серии есть еще несколько книг, например «Эмоциональный веб-дизайн».
    • +1
      Серия называется «A Book Apart» и в нее входят пока только 4 книги:

      1. Отзывчивый веб-дизайн
      2. Эмоциональный веб-дизайн
      3. Основы контентной стратегии
      4. Сначала мобильные!
      • 0
        В оригинальной серии 6 книг, две из которых (посвещённые CSS3 и HTML5) не были переведены, соответственно нумерация русских переводов не соответствует нумерации оригиналов.
        Что, в общем-то, не удивительно для БИЗНЕС-издательства — у тех, кому нужно для работы все эти книжки (оригиналы) уже год как стоят на полке.

        Это скорее не книги, а брошюры (я читал 4 из 6 на английском и Mobile First на русском).

        В качестве достоинства отмечаю перевод — он адекватен и не коряв, что для русских переводов редкость.

        Из недостатков — цена (650 руб. за бумажную книгу в 170 стр. — это действительно БОРЩ!) и не совсем адекватная вёрстка, в частности «разорванные » (с пробелами) ссылки (ТРАФИК!):
        i47.tinypic.com/m9vwna.jpg
        i46.tinypic.com/34qpgdu.jpg
        i50.tinypic.com/k2fjly.jpg

        Для тех, кому цена неподъёмна — есть складчины на складчине и складчике.
  • 0
    При таком подходе сначала должна быть создана мобильная версия сайта, а уже затем к ней могут быть добавлены стили и возможности для устройств с большим размером экрана.

    Какая разница какой носок надевать первым.
    • 0
      ага, наверно тайна кроется в подгружаемых медиа запросах…
    • +1
      Огромная разница.

      Смартфоны захватывают мир и совсем скоро их будет больше, чем персоналок. Первая ласточка из Китая:

      Количество людей, выходящих в Сеть с помощью мобильных телефонов, достигло 388 миллионов человек. Число пользователей, выходящих в интернет с компьютеров, составляет 380 миллионов человек. В этом году, отмечает агентство, мобильные устройства впервые обошли в Китае компьютеры.
      www.lenta.ru/news/2012/07/19/smartphones/


      То есть мобильная версия сайта становится приоритетнее десктопной (а в некоторых случаях десктопная и вовсе не нужна, см например Инстаграм)
  • 0
    Недавно ее прочитал в надежде найти полезную информацию для проектировщика интерфейса, но увы — полезно, в основном, только для front-end'а.
    А так читается на одном дыхании.
    • +1
      Думаю, что Вас просто смутило наличие в названии книги слова «веб-дизайн». Давно известен факт, что слово «веб-дизайн» у нас и у них имеет разные значения. Еще в 2000 году Александр Качанов написал в своей статье «Что же такое web-дизайн?» следующее: «Из-за этого зарубежная книга по web-дизайну — это в большей части техническая информация о том, как верстать таблицы, как создавать навигацию, как оптимизировать изображения».
      • 0
        Спасибо, буду иметь ввиду.
  • 0
    • 0
      1087,66 :(
      за 800 с кем в складчину купить?
      • 0
        Да, прошу прощения за некорректную цену.
        Скидка от аккаунта зависит.
  • +1
    Книга больше похожа на развернутую статью, как по содержанию, так и по полезности. У нас ее прочитали дизайнер, верстальщик и программист, сильного впечатления ни на кого не произвела.
    Цена на всю серию A Book Apart явно завышена, но люди все равно купят книги из-за актуальности тем, в ней затронутых.
  • 0
    Купил. Почитал. Абсолютно ничего нового — все есть в интернете и на русском языке. Единственное, что книга оформлена красиво (и вся серия)
  • 0
    А вот Итан приводит пример как он ресетит стандартные размеры для тэга h1 с помощью следующего CSS

    body {
    background-color: #DCDBD9;
    color: #2C2C2C;
    font: normal 100 % Cambria, Georgia,
    serif;
    }

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

    h1 {
    font: normal 100 % Cambria, Georgia,serif;
    }

    Может быть я плохо что-то поминая или плохо гуглил?

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