Как сделать сайт адаптивным: полезные советы
Шрифт:
изображения значительно ухудшается.
Однако сжатие JPG считается идеальным для фотографий. Этому есть две причины. Во-первых, на
сложных изображениях сжатие выглядит естественно. Во-вторых, детализированные фото, но без
резких переходов цвета и яркости выглядят при сжатии довольно качественно.
SVG
Формат SVG был придуман в 2001 году как стандарт W3C. Это формат векторного изображения
на основе XML, который поддерживает интерактивность и анимацию. SVG картинки прекрасно
индексируются и сжимаются. В качестве файлов XML SVG изображения можно создавать и
редактировать в графических редакторах.
Векторный формат SVG лучше всего использовать для иконок, логотипов и иллюстраций.
Несколько хороших руководств по SVG:
SVG в вебе. Практическое руководство
Что дизайнеру нужно знать о SVG: за и против
11
PNG
PNG
форматом сжатия изображений без потери качества. Это означает, что детали картинки не
искажаются и выглядят привлекательно при неизменном размере самого файла. В свою очередь, это говорит о том, что таким изображениям необходимо больше времени на загрузку. Но при этом
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