мобильных браузеров во всем мире вырос с 2,86 до 7,02».

В середине 2015 года в той же статистической системе (gs.statcounter.com) утверждалось, что данный показатель увеличился до 33,47 %. Для сравнения, в компании North America Mobile этот показатель достиг 25,86 %.

Использование мобильных устройств растет по любым показателям, а на другом краю шкалы в общую практику применения входят 27- и 30-дюймовые дисплеи. Как никогда ранее растет и разрыв между наименьшими и наибольшими экранами, на которых просматривается веб-содержимое. Благо есть решение, подходящее для постоянно расширяющейся арены браузеров и устройств. Нормальная работа сайта на множестве устройств и экранов возможна благодаря так называемому адаптивному дизайну, построенному на основе применения HTML5 и CSS3. Эта технология позволяет разметке и возможностям сайта подстраиваться под имеющееся окружение (размер экрана, тип ввода и возможности устройства или браузера).

Более того, адаптивный веб-дизайн, создаваемый с помощью HTML5 и CSS3, может быть реализован без необходимости использования конечных решений на серверной стороне.

Итак, вперед к неизведанному

Я надеюсь, что глава 1 поможет достичь одной из двух целей независимо от того, в новинку ли вам такие понятия, как адаптивный дизайн, HTML5 или CSS3, или вы в них неплохо разбираетесь.

Если HTML5 и CSS3 уже используются вами для адаптивной веб-разработки, эта глава позволит быстро вспомнить их основы. А если вы новичок в этом деле, воспринимайте ее в качестве своеобразного курса молодого бойца, охватывающего все с самого начала, так что данная глава пригодится всем без исключения.

К концу главы будет рассмотрено все необходимое для создания полностью адаптивной веб-страницы.

А зачем тогда остальные девять глав? Это также станет понятно к концу главы.

В текущей главе будут рассмотрены следующие вопросы:

• определение адаптивного веб-дизайна;

• способы настройки уровней поддержки браузеров;

• краткий обзор инструментальных средств и текстовых редакторов;

• создание первого адаптивного примера — простой страницы, созданной с использованием HTML5;

• важность метатега viewport;

• способ масштабирования изображений под их контейнер;

• написание медиазапросов CSS3 для создания контрольных точек дизайна;

• несовершенство нашего простого примера;

• почему мы находимся всего лишь в самом начале пути.

Определение адаптивного веб-дизайна

Понятие «адаптивный веб-дизайн» было введено Итаном Маркоттом (Ethan Marcotte) в 2010 году. В своей новаторской статье на сайте A List Apart (http://www.alistapart.com/articles/responsive-web-design/) он свел воедино три уже существовавшие на тот момент технологии (гибкий макет на основе сетки, подстраиваемые по размеру изображения и элементы мультимедиа, а также медиазапросы) в единый унифицированный подход, который он назвал адаптивным веб-дизайном.

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

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

Прежде чем вникать во все это, я хочу рассмотреть два вопроса, касающиеся поддержки браузера, а также текстовых редакторов и инструментальных средств.

Установка уровней поддержки браузеров

Благодаря популярности и возможности повсеместного использования адаптивного веб-дизайна теперь стало намного легче торговать с клиентами и ключевыми партнерами. Некоторые представления об адаптивном веб-дизайне сложились уже у большинства людей. Понятие единого кода, способного работать практически на всех устройствах, становится весьма привлекательным.

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

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

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

В середине 2015 года мне уже приходилось писать о том, что времена браузеров Internet Explorer 6, 7 и 8 прошли. Даже IE 9 на всемирном рынке браузеров занимает весьма скромные 2,45 % (у IE 10 только 1,94 %, а у IE 11 уже более привлекательный показатель, равный 11,68 %). Если вам не остается ничего другого, как вести разработку под Internet Explorer 8 и более ранние версии, то я вам искренне сочувствую и заявляю, что ничего особо полезного из этой книги вы для себя не почерпнете.

Все остальные должны объяснить своему клиенту или заказчику, финансирующему проект, ошибочность разработки под скудные по своим возможностям браузеры и причины, по которым выделение времени и ресурсов преимущественно на разработку под современные браузеры и платформы во всех отношениях имеет более определенный финансовый смысл.

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