Текст книги "Как сделать сайт адаптивным: полезные советы"

Автор книги: TemplateMonster

сообщить о нарушении

Текущая страница: 1 (всего у книги 1 страниц)

2

Содержание

Адаптивный дизайн. Что это такое и почему его нужно использовать

3

Что такое RWD

3

Адаптивные макеты

4

Гибкий макет на основе сетки (Mostly Fluid)

4

Макет Shifter

5

Колонка Drop

5

Off Canvas

6

Твики

6

Адаптивная навигация

6

Фиксированная панель или “ничего не делай” подход

6

Футер

7

Off-canvas навигация

7

Адаптивная типографика

7

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

8

max-width: 100%;

9

srcset

9

10

Выбор правильного формата

10

JPG или JPEG

10

SVG

10

PNG

11

GIF

11

Медиа-запросы

11

Пример

12

HTML

12

HTML5.js

13

CSS

13

Масштабируемые встроенные видео

15

Сжатие

16

Минификация

16

GZIP

16

3

Адаптивный дизайн. Что это такое и почему его нужно использовать

Если вы считаете, что адаптивность слишком проста, у меня есть для вас новости.

Существует 99 экранов и iPhone только один из них.

– Джош Брюэр, 10 марта 2010

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

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

Однако последние несколько лет мы наблюдаем значительный подъем мобильных технологий.

Новые устройства появляются буквально каждый день. Адаптивный веб-дизайн сейчас стал

абсолютной необходимостью.

Кроме того, с тех пор как Google объявила о том, что меняет работу поисковой выдачи в пользу

мобильных устройств, RWD стал стандартом в веб-дизайне.

Есть и другие способы обслуживания мобильных пользователей, такие как вышеупомянутые сайты

m-dot и мобильные приложения, однако ни один из них не является экономически выгодным и

эффективным в отличие от адаптивного дизайна.

В этой книге мы расскажем вам о том, как сделать ваш сайт адаптивным и действительно удобным

для конечного пользователя.

А теперь, поскольку ставка сделана на RWD, давайте подробнее рассмотрим, что это такое и как

на самом деле с этим работать.

Что такое RWD

Для лучшего понимания этого понятия, обратимся в Википедию:

“Адаптивный веб-дизайн (англ. Adaptive Web Design) – дизайн веб-страниц, обеспечивающий

правильное отображение сайта на различных устройствах, подключенных к интернету и дина-

мически подстраивающийся под заданные размеры окна браузера.

Целью адаптивного веб-дизайна является универсальность отображения содержимого веб-сайта

для различных устройств. Для того, чтобы веб-сайт был удобно просматриваемым с устройств

форматов и с экранами различных разрешений, по технологии адаптивного веб-дизайна не нужно

создавать отдельные версии веб-сайта для отдельных видов устройств. Один сайт может работать

на смартфоне, планшете, ноутбуке и телевизоре с выходом в интернет, то есть на всем спектре

устройств.”

Гибкие сетки. Расположение контента, у которого нет фиксированной ширины, осуществляется на

основе горизонтальных и вертикальных линий. Сетка используется для организации контента – это

лучший способ регулировать размер и положение элементов.

Адаптивные изображения. Любой элемент, который подстраивается под размер экрана. Обычно

это визуальные эффекты, размещенные в сетке со 100% максимальной шириной. Таким образом, изображения не могут быть больше, чем сетка, в которой они размещены. Можно менять размер

4

картинок без потери их пропорций. Чтобы избежать медленной загрузки, такие изображения могут

быть сжаты при отображении на меньших экранах. Существует еще один метод – установка ширины

в процентном соотношении относительно страницы. Таким образом, существует дифференциация

между размером картинкии размером страницы, другими словами – независимо от того, как

изменяется сама страница, изображение будет отображаться как определенный процент от ее

ширины.

Медиа-запросы. Это модуль CSS3, который управляет стилями в атрибуте media. Различные стили

применяются на основе свойств устройства (ширина экрана, высота, ориентация и т.д.).

Адаптивные макеты

Люк Вроблевски, директор по продуктам Google, описывает 5 адаптивных макетов:

• Гибкий макет на основе сетки (Mostly Fluid);

• Макет Shifter;

• Колонка Drop;

• Off Canvas;

• Твики.

Каждый из вариантов имеет свои достоинства и их выбор зависит от конечного продукта, который

вы создаете.

Гибкий макет на основе сетки (Mostly Fluid)

В основном mostly fluid паттерн прекрасно работает на сайтах более чем с одним типом

контента – новостные ресурсы, интернет-магазины, маркетинговые сайты и др.

Идея проста – есть многоколоночный макет с большими полями на больших экранах, “резиновые”

сетки и изображения уменьшаются на меньших типах экранов, а колонки располагаются вер-

тикально. В целом, сам дизайн практически не меняется, пока не будет использован самый

маленький экран, сетка необходима для адаптации к различным размерам экрана.

5

Макет Shifter

Этот тип макета отлично зарекомендовал себя при работе над визуально-тяжелыми проектами

(сайты агентств, портфолио, проекты об искусстве и фотогалереи).

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

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

широкие типы экранов – более сложный дизайн. Здесь у дизайнера появляется много работы.

Колонка Drop

Идеально подходит для сайтов, страницы которых пользователи просматривают на широких

экранах. Этот макет может быть как многоколоночным, так и иметь всего одну колонку при

отображении на самых узких экранах. В отличие от большинства “резиновых” макетов, этот

паттерн имеет элементы, которые остаются неизменными, но при этом имеют свойство прекрасно

адаптироваться к различным размерам экранов. Независимо от размера, доступен видовой экран

для заполнения собой пространства.

6

Off Canvas

Если у вас есть блог и вам необходимо сосредоточить читателя на большом объеме информации,

off canvas паттерн – ваш выбор. Это скрытая навигация на сайте, которая размещается совсем

близко от основного контента и при нажатии на ссылку в ней, выдвигается из экрана. Реализуется

эффект при помощи JavaScript.

Твики

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

сам макет остается прежним.

Адаптивная навигация

Свободного пространства на мобильных устройствах очень мало, поэтому при разработке

навигации вы должны не забывать о мобильных пользователях. Навигация должна быть интуитивно

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

нельзя упускать из внимания. Итак, каковы же наиболее удачные схемы навигации для адаптивного

дизайна?

Фиксированная панель или “ничего не делай” подход

С помощью этого паттерна панель навигации фиксируется в верхней части экрана, центрируется

и сжимается по мере уменьшения размера окна просмотра. Это самый простой паттерн для

7

реализации, однако он имеет свои недостатки. Если объем вашего контента увеличивается (а со

временем это не избежать), вам придется расширять навигацию.

Футер

Это простая кнопка, которая зафиксирована в хедере со ссылкой на список навигации, размещенный

в футере. Навигация в футере очень удобна (ее легко реализовать и она позволяет высвободить

много места на странице сайта), однако она имеет свойство дезориентировать.

Off-canvas навигация

Этот метод навигации появился в Facebook. Работает он так: пользователь прокручивает страницу

вниз, при достижении определенной точки навигационное меню исчезает, а вместо него появляется

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

страницы сдвигается вправо.

Складывается впечатление, что большое меню просто невозможно уместить в off-canvas паттерне,

однако это довольно легко решить путем добавления прокрутки.

Адаптивные паттерны навигации можно найти здесь (с CSS сниппетами) и здесь (с примерами).

Адаптивная типографика

При разработке адаптивного сайта типографика должна быть на вершине ваших приоритетов.

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

информацию (цели, предложения, действия и т.д.). Естественно, читаемость и четкость влияют на

восприятие и понимание контента.

8

Вот несколько моментов, которые вы должны понять:

• Типографика основывается на структуре и общем представлении контента. Вы должны

быть абсолютно уверенными, что ваша типографика выглядит корректно на разных

размерах экранов, в противном случае рискуете потерять целостность своего дизайна.

• Высота, размер текста должны корректироваться относительно пропорций экрана. Здесь

полезно использовать относительные единицы измерения (ems и rems).

• Если ваш текст соотносится с размером экрана, вы получите естественный и аутентичный

дизайн. Адаптивная типографика, как правило, подкрепляет эту аутентичность.

Используйте адаптивную типографику, проведите тщательный анализ поведения пользователей.

Спросите у тебя, какой сайт вы хотите. Как должен быть размещен контент. Ответы на эти вопросы

определят контрольные точки и размер текстов. Используйте rems для определения размера

текста по отношению к области просмотра.

Раньше мы рассматривали типографику как набор фиксированных решений,

однако теперь мы понимаем ее как составляющую часть пропорциональной логики.

Несколько хороших туториалов по адаптивной типографике:

Основы адаптивной веб-типографики

Подробное руководство по основам типографики

Хинтинг шрифтов. Что это такое и с чем его едят

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

Когда дело доходит до использования изображений в веб-дизайне, мы должны помнить о

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

Каждая JPEG или GIF картинка, как правило, является довольно объемным файлом. Кроме того, вам стоить помнить о скорости загрузки, которая не должна превышать 5 секунд.

Когда вы создаете привлекательный адаптивный веб-дизайн, который должен прекрасно выглядеть

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

начальном этапе.

9

Задача не из простых. Однако изображения чаще всего более красноречивы, чем любые слова.

Существует несколько решений:

1. max-width: 100%;

2. srcset

3.

4. Adaptive images от Мэтта Вилкокса

max-width: 100%;

Вышеприведенный код CSS адаптивного изображения работает на IE7 и IE9, но не работает на IE8.

Дополнительно можно применить CSS специально под IE8 или использовать IE-хак ниже: srcset

Атрибут srcset позволяет добавлять другие версии изображения, устанавливать ширину, что

позволит картинкам корректно отображаться на пользовательских экранах.

10

 – это полноценный элемент со своим собственным тегом и всем остальным.

Читать больше:

Адаптивные изображения в CSS

5 трюков CSS для адаптивных шаблонов

Выбор правильного формата

Существует несколько форматов, которые вы можете использовать. Однако даже опытные веб-

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

подходит для работы JPG, SVG, GIF или PNG.

JPG или JPEG

Формат JPEG был придуман в начале 90-х г.г. Тогда это был идеальный формат, однако на

сегодняшний день можно сказать о том, что JPG использует сжатие с потерями и качество

изображения значительно ухудшается.

Однако сжатие JPG считается идеальным для фотографий. Этому есть две причины. Во-первых, на

сложных изображениях сжатие выглядит естественно. Во-вторых, детализированные фото, но без

резких переходов цвета и яркости выглядят при сжатии довольно качественно.

SVG

Формат SVG был придуман в 2001 году как стандарт W3C. Это формат векторного изображения

на основе XML, который поддерживает интерактивность и анимацию. SVG картинки прекрасно

индексируются и сжимаются. В качестве файлов XML SVG изображения можно создавать и

редактировать в графических редакторах.

Векторный формат SVG лучше всего использовать для иконок, логотипов и иллюстраций.

Несколько хороших руководств по SVG:

SVG в вебе. Практическое руководство

Что дизайнеру нужно знать о SVG: за и против

11

PNG

PNG как стандарт появился в 2004 году, он является на сегодняшний день широко используемым

форматом сжатия изображений без потери качества. Это означает, что детали картинки не

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

PNG также обладает замечательной способностью быть прозрачным, потому он отлично подходит

для иконок и всего, что требует прозрачности.

GIF

GIF формат существует с 1987 года. Если вам нужна простая анимация, GIF поможет. Формат

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

простых изображений и в JPG – для сложных.

Медиа-запросы

Медиа-запросы – сердце RWD. Идея адаптивного дизайна подразумевает, что для разных экранов

должны применяться свои правила.

Медиа-запросы – это команды CSS, влияющие на другие CSS селекторы, которые вступают в силу

при определенных условиях. Простыми словами – мультимедийный запрос говорит браузеру

применить 1-10 правила при ширине экрана до 700 пикселей, а другой запрос указывает браузеру

обратить внимание на правила 11-20, когда экран имеет ширину 701 пиксель и больше.

Медиа-запросы всегда начинаются с “@media”, браузеры умеют читать правила, которые

перечислены между фигурными скобками {}. Наиболее популярные условия, отображаемые медиа-

запросами – максимальная и минимальная ширина, однако можно использовать и другие свойства.

Изучение Медиа-запросов требует отдельной книги, ниже несколько ссылок по тематике:

CSS – Медиа запросы (media queries)

Стандартные @media для всех пользовательских устройств

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

адаптивный веб-дизайн: mediaqueri.es

12

Пример

Контейнер страницы имеет ширину 980 пикселей для любого разрешения более 1024 пикселей.

Для проверки ширины используются медиа-запросы. если ширина меньше 980 пикселей, макет

становится “резиновым”. Если ширина меньше 650 пикселей, контейнеры с контентом и боковая

панель становятся полноэкранными и располагаются в одной колонке.

HTML

На странице есть контейнер “pagewrap”, который содержит “header”, “content”, “sidebar” и “footer”.

13

HTML5.js

Internet Explorer v8 и ранние версии, не поддерживает новые элементы HTML5, такие как

,

,