КулЛиб - Классная библиотека! Скачать книги бесплатно
Всего книг - 706150 томов
Объем библиотеки - 1347 Гб.
Всего авторов - 272776
Пользователей - 124656

Последние комментарии

Новое на форуме

Новое в блогах

Впечатления

a3flex про Невзоров: Искусство оскорблять (Публицистика)

Да, тварь редкостная.

Рейтинг: 0 ( 1 за, 1 против).
DXBCKT про Гончарова: Крылья Руси (Героическая фантастика)

Обычно я стараюсь никогда не «копировать» одних впечатлений сразу о нескольких томах, однако в отношении части четвертой (и пятой) это похоже единственно правильное решение))

По сути — что четвертая, что пятая часть, это некий «финал пьесы», в котором слелись как многочисленные дворцовые интриги (тайны, заговоры, перевороты и пр), так и вся «геополитика» в целом...

В остальном же — единственная возможная претензия (субъективная

  подробнее ...

Рейтинг: 0 ( 0 за, 0 против).
medicus про Федотов: Ну, привет, медведь! (Попаданцы)

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

cit anno: "...офигевшая в край родня [...] не будь я барон Буровин!".

Барон. "Офигевшая" родня. Не охамевшая, не обнаглевшая, не осмелевшая, не распустившаяся... Они же там, поди, имения, фабрики и миллионы делят, а не полторашку "Жигулёвского" на кухне "хрущёвки". Но хочется, хочется глянуть внутрь, вдруг всё не так плохо.

Итак: главный

  подробнее ...

Рейтинг: 0 ( 0 за, 0 против).
Dima1988 про Турчинов: Казка про Добромола (Юмористическая проза)

А продовження буде ?

Рейтинг: -1 ( 0 за, 1 против).
Colourban про Невзоров: Искусство оскорблять (Публицистика)

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

  подробнее ...

Рейтинг: +2 ( 3 за, 1 против).

Как сделать сайт адаптивным: полезные советы [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 тысяч шаблонов для сайтов на выбор, созданных профессионалами.

Посмотреть шаблоны