Mybrary.ru

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

Тут можно читать бесплатно Как сделать сайт адаптивным: полезные советы - "TemplateMonster". Жанр: Интернет год 2004. Так же Вы можете читать полную версию (весь текст) онлайн без регистрации и SMS на сайте mybrary.ru (mybrary) или прочесть краткое содержание, предисловие (аннотацию), описание и ознакомиться с отзывами (комментариями) о произведении.
Название:
Как сделать сайт адаптивным: полезные советы
Автор
Дата добавления:
17 сентябрь 2020
Количество просмотров:
80
Читать онлайн
Как сделать сайт адаптивным: полезные советы - "TemplateMonster"

Как сделать сайт адаптивным: полезные советы - "TemplateMonster" краткое содержание

Как сделать сайт адаптивным: полезные советы - "TemplateMonster" - описание и краткое содержание, автор "TemplateMonster", читайте бесплатно онлайн на сайте электронной библиотеки Mybrary.Ru

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

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

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

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

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

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

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

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

Как сделать сайт адаптивным: полезные советы читать онлайн бесплатно

Как сделать сайт адаптивным: полезные советы - читать книгу онлайн бесплатно, автор "TemplateMonster"
Назад 1 2 3 4 5 Вперед

Как сделать сайт адаптивным: полезные советы - _0.jpg

Как сделать сайт адаптивным: полезные советы - _1.jpg

Как сделать сайт адаптивным: полезные советы - _2.jpg

Как сделать сайт адаптивным: полезные советы - _3.jpg

Как сделать сайт адаптивным: полезные советы - _4.jpg

Как сделать сайт адаптивным: полезные советы - _5.jpg

Как сделать сайт адаптивным: полезные советы - _6.jpg

Как сделать сайт адаптивным: полезные советы - _7.jpg

Как сделать сайт адаптивным: полезные советы - _8.jpg

Как сделать сайт адаптивным: полезные советы - _9.jpg

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

Как сделать сайт адаптивным: полезные советы - _10.jpg

Как сделать сайт адаптивным: полезные советы - _11.jpg

Как сделать сайт адаптивным: полезные советы - _12.jpg

Как сделать сайт адаптивным: полезные советы - _13.jpg

Как сделать сайт адаптивным: полезные советы - _14.jpg

Как сделать сайт адаптивным: полезные советы - _15.jpg

Как сделать сайт адаптивным: полезные советы - _16.jpg

Как сделать сайт адаптивным: полезные советы - _17.jpg

Как сделать сайт адаптивным: полезные советы - _18.jpg

3

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое RWD

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

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

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

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

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

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

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

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

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

устройств.”

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

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

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

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

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

Как сделать сайт адаптивным: полезные советы - _19.jpg

Как сделать сайт адаптивным: полезные советы - _20.jpg

Как сделать сайт адаптивным: полезные советы - _21.jpg

Как сделать сайт адаптивным: полезные советы - _22.jpg

Как сделать сайт адаптивным: полезные советы - _23.jpg

Как сделать сайт адаптивным: полезные советы - _24.jpg

Как сделать сайт адаптивным: полезные советы - _25.jpg

Как сделать сайт адаптивным: полезные советы - _26.jpg

Как сделать сайт адаптивным: полезные советы - _27.jpg

Как сделать сайт адаптивным: полезные советы - _28.jpg

4

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

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

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

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

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

ширины.

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

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

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

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

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

• Макет Shifter;

• Колонка Drop;

• Off Canvas;

• Твики.

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

вы создаете.

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

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

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

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

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

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

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

Назад 1 2 3 4 5 Вперед

"TemplateMonster" читать все книги автора по порядку

"TemplateMonster" - все книги автора в одном месте читать по порядку полные версии на сайте онлайн библиотеки Mybrary.Ru.


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

Отзывы читателей о книге Как сделать сайт адаптивным: полезные советы, автор: "TemplateMonster". Читайте комментарии и мнения людей о произведении.

Прокомментировать
Подтвердите что вы не робот:*
Подтвердите что вы не робот:*
Все материалы на сайте размещаются его пользователями.
Администратор сайта не несёт ответственности за действия пользователей сайта..
Вы можете направить вашу жалобу на почту my.brary@yandex.ru или заполнить форму обратной связи.
×
×