Когда вы в последний раз выходили в Интернет со своего планшетника, электронной читалки или телефона? Вчера? Сегодня утром, просматривая новости за чашкой кофе?
В любом случае вы наверняка заметили, что большинство сайтов не оптимизированы под мобильные устройства: выглядят так же, как и на экране ноутбука, только гораздо мельче, и потому просматривать их не слишком удобно.
«Почему же Интернет такой неповоротливый?» спросите вы. Но это не так: Сеть меняется каждый день. Дизайнеры уже давно научились делать сайты, которые отлично выглядят и на широкоформатном мониторе, и на экране мобильного телефона. И вот что интересно – нужно для этого не так уж много. Не стоит писать кучу кодов для каждого мобильного устройства, тратить ресурсы на доработку под постоянно растущий ассортимент (попробуй за ним угнаться, когда того гляди мы будем заказывать домой продукты с экрана, встроенного прямо в холодильник).
1. Наша отзывчивая сеть
Давайте посмотрим правде в глаза: как только проект становится доступным онлайн, все начинает зависеть от человека, который его просматривает, – от выбранного им шрифта, цветопередачи монитора, формы и размера окна браузера.
Веб-дизайнеры берут пример с художников, но только наш холст - окно браузера
2. Ингредиенты
- Гибкий макет на основе сетки
- Гибкие изображения
- Медиазапросы
3. Гибкая сетка
В книге Grid Systems in Graphic Design («Системы сеток в графическом дизайне») Мюллер-Брокманн назвал этот процесс «созданием типографского пространства на странице», то есть разметкой сетки пропорционально размеру чистого листа бумаги.
Но графический дизайн отличается от веб-дизайна одним ключевым моментом: размерами страницы. Наш же холст – окно браузера – может принимать любую форму и размеры в соответствии с прихотями читателя или размерами устройств, на которых этот холст отображается.
Обычно первый слой нашего макета выглядит следующим образом:
#page
{ width: 960px;
margin: 0 auto;
}
То есть мы создали элемент в разметке, задали его фиксированную ширину в CSS и расположили на странице по центру. Если же мы решили создать гибкую сетку, мы должны перевести дизайн, созданный в Photoshop, во что-то более «резиновое», более пропорциональное. С чего же начать?
4. Гибкие шрифты
Строчный элемент наследует стиль font-size 100 %, который мы задали родительскому элементу body, а установленный в браузере по умолчанию кегль – 16 пикселей.
Перейдём к CSS на примере заголовка h1:
h1 {
font-size: 24px;
font-style: italic;
font-weight: normal;
}
h1 a {
color: #747474;
font: bold 11px Calibri, Optima, Arial,
sans-serif;
letter-spacing: 0.15em;
text-transform: uppercase;
text-decoration: none;
}
Нет ничего плохого или неправильного в определении размера текста с помощью пикселей. Но в целях нашего эксперимента давайте начнем думать пропорционально и переведем значения кегля (font-size) из пикселей в относительные единицы, а вместо пикселей и будем использовать знакомые нам em.
5. Контекстное восстановление
Сейчас будет немного математики: берем целевое значение кегля и делим на кегль (font size) его контейнера, то есть контекста. В результате мы получаем желаемый кегль, выраженный в относительных и достаточно гибких единицах em. Другими словами, относительный кегль можно рассчитать по следующей формуле: target ÷ context = result
Надеюсь вас не пугает несложная математика. Итак, формула у нас есть, давайте вернемся к нашему заголовку в 24px. Если предположить, что базовый кегль (font size) элемента body равен 16 пикселям при 100 %, мы можем подставить эти значения непосредственно в формулу. В результате получим отношение целевого кегля заголовка h1 (24 пикселя, 24px) и кегля его контекста (16 пикселей, 16px): 24: 16 = 1,5 Так как 24 пикселя в 1,5 раза больше 16 пикселей, это значит, что кегль равен 1,5 em.
h1 {
font-size: 1.5em; /* 24px / 16px */
font-style: italic;
font-weight: normal;
}
6. От пикселей к процентам
Противные, гадкие пиксели. Терпеть их не можем! Ну ладно, не такие уж они и отвратительные. Помните: в макетах с фиксированной шириной нет ничего плохого! Но нам нужна более гибкая сетка, поэтомдавайте попробуем перевести 960 пикселей в проценты.
#page {
margin: 36px auto;
width: 90 %;
7. Гибкие поля и отступы
Точно также как ив предыдущем случае мы поступаем и с отступами от полей, варьируя значения padding и margin в процентах.
8. Адаптивные изображения
Решение очень простое - установить max-width для нужного изображения, что запретит изображения выходить за границы ширины их контейнера
Я надеюсь, вы еще не устали от хороших новостей, поскольку, как оказалось, правило max-width: 100 % можно применять к большинству элементов с фиксированной шириной, таким как видео– и другие медиа-файлы. Фактически мы можем добавить в селектор еще и другие медиаэлементы.