Вы также поймете, что на практике легче начинать с представления, создаваемого самым простым, базовым уровнем, и заниматься его усложнением (этот подход называется постепенным усложнением), чем подходить к решению проблемы с противоположной стороны — заниматься сначала созданием представления самого высокого уровня, а затем предпринимать попытки отступления для работы на платформах с более скромными возможностями (этот подход называется постепенным упрощением).
Чтобы пояснить причину, по которой это важно знать заранее, подумайте о том, что, если вам не повезет и 25 % посетителей вашего сайта будут пользоваться, к примеру, Internet Explorer 9, придется учесть, какие функции поддерживаются этим браузером, и подстраивать свое решение под эти качества. Те же меры станут необходимы, если большой контингент ваших пользователей посещает сайт с устаревших платформ мобильных телефонов, таких как Android 2. Что именно рассматривать в качестве базового представления, будет сильно варьироваться в зависимости от проекта.
Если подходящие данные недоступны, то для определения того, нужно ли тратить время на разработку версии под конкретную платформу или браузер, я прибегаю к простому логическому приему: если стоимость разработки под браузер X и дальнейшей поддержки превышает выручку или выгоду, создаваемую пользователями браузера X, то вести разработку конкретных решений под браузер X не стоит.
Надо реже задаваться вопросом о том, возможно ли вести подгонку под устаревшую платформу или браузер, и чаще спрашивать себя о целесообразности этого.
Если при рассмотрении вопроса о том, какие функции какими платформами и версиями браузеров поддерживаются, вы еще не ознакомились с сайтом http://caniuse.com, я настоятельно советую вам сделать это. Там предоставляется весьма простой интерфейс для выявления, поддержкой какого браузера пользуются интересующие нас функции.
Краткая справка по инструментарию и текстовым редакторам. Неважно, какими именно текстовым редактором или IDE-системой вы пользуетесь для создания своих адаптивных веб-конструкций. Если самые простые текстовые редакторы позволяют вам успешно записывать код HTML, CSS и JavaScript, значит, все в порядке. Аналогично этому нет никакой особой оснастки, играющей важную роль в получении на выходе адаптивного веб-дизайна. Фактически вам нужно лишь что-то позволяющее записывать код HTML, CSS и JavaScript. Чему вы отдадите предпочтение, Sublime Text, Vim, Coda, Visual Studio или Блокноту, не играет практически никакой роли. Работайте в той среде, которая вас больше всего устраивает.
Тем не менее следует знать, что, в отличие от прежних времен, сейчас имеется множество инструментальных средств (зачастую бесплатных), способных существенно облегчить выполнение рутинных, затратных по времени задач создания сайтов. Например, CSS-процессоры (Sass, LESS, Stylus, PostCSS) способны помочь с организацией кода, с переменными, в работе с цветовыми решениями и арифметикой. Такие средства, как PostCSS, способны также автоматизировать решение трудоемких и неприятных задач, например установку в коде CSS префиксов производителей. Кроме того, проверочные средства могут сравнить ваш код HTML, JavaScript и CSS со стандартами, по которым вы работаете, сэкономив массу времени на выявление опечаток и синтаксических ошибок.
Постоянно появляются все новые и новые инструментальные средства с более совершенными свойствами. Поэтому, какие бы актуальные и полезные средства ни упоминались в настоящее время, следует иметь в виду, что где-то рядом на выходе уже есть что-то более интересное. Следовательно, в своих примерах мы не можем полагаться на что-либо иное, кроме стандартов на основе HTML и CSS. Но вы можете воспользоваться доступными средствами для создания своей интерфейсной части кода как можно быстрее и надежнее.
Первый пример придания адаптивности
В начале главы я обещал, что к ее завершению вы узнаете обо всем необходимом для создания полностью адаптивной веб-страницы. До сих пор вокруг этого вопроса велись лишь досужие разговоры. Настало время выйти на прогулку.
Примеры программного кода
Все примеры кода из этой книги можно загрузить по адресу rwd.education/download.zip или через GitHub на сайте https://github.com/benfrain/rwd. Имейте в виду, что окончательные версии отдельных примеров, приводимых в главе, имеются только в загружаемом коде. Так, если загрузить примеры кода из главы 2, они будут иметь тот вид, в котором приводятся в конце данной главы. В отличие от текста самой главы, в загружаемых примерах кода никаких промежуточных состояний не приводится.
Наш исходный файл HTML
Начнем с простой структуры HTML5. Не обращайте внимания на предназначение абсолютно каждой строки (особенно на содержимое контейнера <head>, которое более подробно будет рассматриваться в главе 4).
Предлагаю пока сконцентрироваться на элементах внутри тега <body>. Я абсолютно уверен, что вы не увидите там ничего необычного: всего лишь несколько div-контейнеров, символ логотипа, изображение (симпатичная булочка), один-два текстовых абзаца и список ингредиентов.
Вам будет представлена сокращенная версия кода. Для краткости я удалил из показанного далее кода текстовые абзацы, поскольку нас интересует лишь структура. Но вы должны знать, что это рецепт и описание способа изготовления булочек, относящихся к типично британской выпечке.
Если есть желание просмотреть весь файл HTML, его можно загрузить с сайта rwd.education:
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="utf-8">
<title>Our first responsive web page with HTML5 and CSS3</title>
<meta name="description" content="A basic responsive web page
– an example from Chapter 1">
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<div class="Header">
<a href="/" class="LogoWrapper"><img src="img/SOC-Logo.png" alt="Scone O'Clock logo" /></a>
<p class="Strap">Scones: the most resplendent of snacks</p>
</div>
<div class="IntroWrapper">
<p class="IntroText">Occasionally maligned