Сегодня как никогда остро стоит проблема адаптивного веб-дизайна. Все больше планшетных
компьютеров, смартфонов и даже телевизоров используется для выхода в Интернет. Разработчикам
веб-страниц требуется принимать во внимание огромное разнообразие размеров экранов, а также
учитывать особенности соответствующего пользовательского взаимодействия. Адаптивный веб-дизайн
позволяет наилучшим образом отобразить содержимое сайтов на экранах устройств, используемых
для просмотра. При этом веб-страницы будут хорошо смотреться на дисплеях не только современных
устройств, но и тех, что появятся в ближайшее время.
Начните разрабатывать сайты в соответствии с новой методологией адаптивного веб-дизайна,
благодаря чему они будут красиво отображаться на экранах любых размеров. Читайте эту книгу, по-путно создавая и улучшая адаптивные веб-дизайны с использованием HTML5 и CSS3. Вы научитесь
применять на практике новые технологии и методики, призванные стать инструментами будущего
для веб-разработчиков клиентских приложений.
Какие темы рассматриваются в этой книге
В главе 1 «Знакомство с HTML5, CSS3 и адаптивным веб-дизайном» поясня-
ется, что такое адаптивный веб-дизайн, приводятся примеры таких дизайнов,
а также подчеркиваются преимущества и эффект экономии от использования
HTML5 и CSS3.
Из главы 2 «Медиазапросы: поддержка разных областей просмотра» вы узна
ете, что такое медиазапросы, как их написать и применить к любому дизайну для
адаптации CSS-стилей к возможностям устройств.
В главе 3 «Использование “резиновых” макетов» рассказывается о преимуще-
ствах «резиновых» макетов и демонстрируется, как можно с легкостью преобразо-
вать текущий дизайн с фиксированной шириной в «резиновый» макет либо исполь-
зовать CSS-фреймворк для быстрого создания адаптивных веб-дизайнов.
В главе 4 «HTML5 для адаптивных веб-дизайнов» исследуются преимущества
написания кода на HTML5 (более компактный код, семантические элементы, авто-
номное кэширование и WAI-ARIA для внедрения вспомогательных технологий).
В главе 5 «CSS3: селекторы, типографика и цветовые режимы» демонстрирует-
ся мощь CSS3-селекторов, позволяющих с легкостью преобразовывать все что
угодно. Я также воспользуюсь CSS3-правилом @font-face , чтобы создать красивую22
Предисловие
веб-типографику, и расскажу вам о таких новых цветовых режимах CSS3, как RGB(A)
и HSL(A).
В главе 6 «Великолепная эстетика с использованием CSS3» рассказывается, как
создавать тени, отбрасываемые текстом и блочными элементами, а также градиенты
исключительно с помощью CSS3. Мы также поговорим о том, как добавлять разно-
образные фоновые изображения и создавать значки с использованием шрифтов.
В главе 7 «CSS3-переходы, трансформации и анимации» я поведаю вам о том,
как создавать, преобразовывать и анимировать экранные элементы, используя лишь
CSS3.
В главе 8 «Покорение форм с помощью HTML5 и CSS3» иллюстрируется, как
реализовать кросс-браузерные методики, касающиеся форм и работающие на всем,
начиная от новейших смартфонов и заканчивая настольными браузерами.
В главе 9 «Решение кросс-браузерных проблем с адаптивностью» разъясняется,
как обеспечить поддержку адаптивности в устаревших версиях Internet Explorer,
как адаптировать тот или иной набор ссылок к меню на мобильных устройствах,
как обеспечивать другое содержимое для устройств с экранами высокого разреше-
ния и условно загружать ресурсы с помощью Modernizr.
Что необходимо знать,
прежде чем приступать к чтению
Вам потребуется хорошо знать HTML и CSS. Кроме того, желательно иметь общее
понятие о JavaScript. Хороший вкус в фильмах тоже может оказаться нелишним.
Целевая аудитория книги
Вы создаете два сайта — один для экранов мобильных устройств и еще один для
более крупных мониторов? Или вы, возможно, слышали об адаптивном веб-
дизайне, но точно не знаете, как соединить его с HTML5 и CSS3? Если так оно и есть,
то эта книга обеспечит вас знаниями, необходимыми для того, чтобы перевести
веб-страницы на следующий уровень, прежде чем это сделают все ваши конку-
ренты!
Издание предназначено для веб-дизайнеров и веб-разработчиков, которые
в настоящий момент создают сайты с фиксированной шириной, используя HTML 4.1
и CSS 2.1. Здесь объясняется, как создавать адаптивные сайты с применением
HTML5 и CSS3, приспосабливающиеся к любому размеру экранов устройств.
