Как сделать сайт адаптивным: полезные советы [TemplateMonster] (fb2) читать онлайн
[Настройки текста] [Cбросить фильтры]
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
<picture>
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. <picture>
4. Adaptive images от Мэтта Вилкокса
max-width: 100%;
Вышеприведенный код CSS адаптивного изображения работает на IE7 и IE9, но не работает на IE8.
Дополнительно можно применить CSS специально под IE8 или использовать IE-хак ниже: srcset
Атрибут srcset позволяет добавлять другие версии изображения, устанавливать ширину, что
позволит картинкам корректно отображаться на пользовательских экранах.
<img src=”/img_articles/22532/whatever-small.jpg” srcset=”whatever-medium.jpg 1000w, whatever-large.jpg 2000w” alt=”whatever”>
10
<picture>
<picture> - это полноценный элемент со своим собственным тегом и всем остальным.
Читать больше:
Адаптивные изображения в 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, такие как <header>, <article>, <footer>, <figure> и др. Добавив файл html5.js, вы сделаете IE способным понять
новые элементы.
CSS
Сброс настроек элементов HTML5
Нижеприведенный CSS код сбрасывает стандартные элементы HTML5 (статья, боковая панель, хедер, футер, элемент) и делает их элементами блока.
Основные CSS без медиа-запросов
CSS3 медиа-запросы
Internet Explorer 8 и ранние версии не поддерживают медиа-запросы CSS3, это можно исправить
с помощью css3-mediaqueries.js
14
<!--[if lt IE 9]>
<script src=”http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js”></
script>
<![endif]-->
Создайте новый CSS файл для медиа-запросов.
<link href=”media-queries.css” rel=”stylesheet” type=”text/css”>
Для экранов меньше чем 980 пикселей
Используются правила: pagewrap = reset width to 95%, content = reset width to60 %, sidebar = reset width to 30 %
Совет: используйте аутентичный (%), чтобы сделать блоки “резиновыми”.
Размер экрана меньше 650 пикселей (одноколоночный макет)
15
Экран меньше 480 пикселей
Масштабируемые изображения
Чтобы сделать масштабируемые изображения, просто добавьте max-width:100% и height:auto -
они работают на IE7, но не работают на IE8. Чтобы это исправить, добавьте width:auto\9 для IE8.
Масштабируемые встроенные видео
Для видео используются те же правила, что и для изображений. Но max-width:100% (только для
видео) не работает в Safari, вместо параметра max-width:100% используйте width: 100%.
Исходный масштаб. Мета-тег (iPhone)
По умолчанию iPhone Safari сжимает страницы, чтобы они соответствовали экрану. Этот мета-тег
дает команду iPhone Safari использовать ширину устройства в качестве ширины страницы. <meta name=”viewport” content=”width=devicewidth; initial-scale=1.0”>
16
Сжатие
Скорость работы сайта должна быть быстрой. При этом необходимо сжать как изображения, так и файлы CSS. И хотя сжимать файлы изображений довольно легко (большинство редакторов
изображений осуществляют это с легкостью), файлы CSS требуют некоторого опыта. Существует
ряд методов, которые помогут вам это сделать.
Минификация
Вам необходимо свести к минимуму пробелы между элементами, свойствами и селекторами.
Уменьшить количество пробелов - значит уменьшить количество байтов для загрузки.
GZIP
GZIP - это утилита для сжатия, которая сканирует ваши файлы на наличие избыточных байтов.
Эксперты говорят, что zip-файлы после минимизации становятся намного легче.
17
Благодарим за прочтение!
Если вы сочли это руководство полезным, скорее всего, вам понравятся и другие наши электронные
книги. Работая над ними, наши авторы фокусировались на темах, которые помогают новичкам
создавать онлайн-бизнес и делать свои сайты прибыльными:
Посмотреть другие книги
P.S. Тщательно продуманный контент имеет решающее значение для вашего сайта, но есть
множество других факторов, которые влияют на его успех. Безупречный дизайн и надежная
архитектура - это основные стержни любого онлайн-ресурса.
Если вы собираетесь запустить новый сайт или хотите обновить дизайн текущего, взгляните на
готовые решения от TemplateMonster. У нас есть более 26 тысяч шаблонов для сайтов на выбор, созданных профессионалами.
Посмотреть шаблоны
Последние комментарии
10 часов 50 минут назад
19 часов 42 минут назад
19 часов 45 минут назад
3 дней 2 часов назад
3 дней 6 часов назад
3 дней 8 часов назад