Отзывчивый веб-дизайн

Оглавление

Итан Маркотт. Отзывчивый веб-дизайн

От научного редактора

Предисловие

1. Наша отзывчивая сеть

А теперь пристегните ремни

Отзывчивая архитектура

Путь вперед

Ингредиенты

2. Гибкая сетка

Гибкие шрифты

Контекстное восстановление

От гибких шрифтов к гибкой сетке

Создание гибкой сетки

От пикселей к процентам

Гибкие поля и отступы

Не продохнуть…

Немного отрицательных значений

Гибко двигаемся дальше

3. Гибкие изображения

Назад к разметке

Гибкие изображения

Если бы все было так просто…

Max-width в Internet Explorer

…И здесь становится понятно, что Windows нас ненавидит

Да здравствует герой-победитель AlphaImageLoader!

Гибкие повторяющиеся фоновые изображения

Полностью гибкие фоновые изображения?

Как научиться любить Overflow

Проблемы с контентом

Гибкие сетки и изображения как древо познания

4. Медиазапросы

Приступим к лечению

Расстановка акцентов

Маленькая сетка, большие проблемы

Широкоэкранные неприятности

Насущные проблемы

Навстречу отзывчивости

Знакомьтесь: медиатипы

Неправильное распределение типов

Знакомство с медиазапросами

Познакомьтесь с характеристиками

Знай свои характеристики

Более отзывчивый робот

В компании с viewport

Медиазапросы в действии

Все дело в деталях

Отворяй ворота!

Кое-что по поводу совместимости

Зачем это нужно?

Ограничения по мере необходимости

5. Как стать отзывчивым

Все дело в контексте

Определение целей пользователей

Знакомьтесь: «Сначала мобильные»

Навстречу отзывчивому процессу разработки

Определяем разрешение

Итеративный совместный дизайн

Интерактивный анализ дизайна

Ответственный подход к отзывчивому дизайну

«Сначала мобильные» и медиазапросы

Концепция прогрессивного улучшения

Работа с JavaScript

Загружаем контент не спеша, но с умом

Дальнейшие улучшения

Вперед! Будь отзывчивым!

Благодарности

Приложение. Полные веб-адреса упомянутых в книге источников

Глава 1

Глава 2

Глава 3

Глава 4

Глава 5

Рекомендуемая литература

Помощь онлайн

Об авторе

Отрывок из книги

Язык способен творить чудеса. В английском языке у слова glamour («гламур», «очарование») имеются и другие значения – «магия» или «чародейство», а происходит оно от слова grammar («грамматика»). Из всех чудес, творимых языком, самое волшебное и потрясающее – способность присваивать имена.

История веб-дизайна, хоть и недолгая, уже продемонстрировала нам преобразующую силу языка. Джеффри Зельдман подарил нам термин «веб-стандарты», а Джесси Джеймс Гарретт изменил природу взаимодействия в Сети, придумав технологию Ajax.

.....

Рис. 2.7. Размер нашего заголовка правильно выражен в гибких, масштабируемых единицах em. (Но что за ерунда творится со ссылкой?)

И вот здесь требуется внимание. Поскольку текст заголовка установлен равным 1,5 em, любые элементы внутри этого заголовка должны быть выражены в виде доли этого значения. Другими словами, изменился наш контекст.

.....