Меню выбора книг

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

Автор: "TemplateMonster"
Категория: Компьютеры и Интернет / Интернет
Просмотров:0
Комментариев:0
Дата:15.07.2024

Дорогие читатели!

Здесь доступно чтение Как сделать сайт адаптивным: полезные советы - "TemplateMonster". Жанр: Интернет. Вы имеете возможность бесплатно ознакомиться с полной версией книги на веб-сайте coollib.biz (КулЛиБ) без необходимости регистрации или отправки SMS. Там вы также найдете краткое описание книги, предисловие от автора и отзывы читателей.

0/0

(18+) Внимание! Книга может содержать контент только для совершеннолетних. Для несовершеннолетних просмотр данного контента СТРОГО ЗАПРЕЩЕН! Если в книге присутствует наличие пропаганды ЛГБТ и другого, запрещенного контента - просьба написать на почту для удаления материала.

Информация о содержании книги, доступная в интернете. Как сделать сайт адаптивным: полезные советы - "TemplateMonster":

Во времена, когда мобильные устройства не были так распространены, а мобильный просмотр казался чем-то необычным в сфере новых технологий, все что вам было необходимо -убедиться, что ваш сайт выглядит привлекательно на пяти экранах, создать m-dot версию или приложение. Однако последние несколько лет мы наблюдаем значительный подъем мобильных технологий. Новые устройства появляются буквально каждый день. Адаптивный веб-дизайн сейчас стал абсолютной необходимостью. Кроме того, с тех пор как Google объявила о том, что меняет работу поисковой выдачи в пользу мобильных устройств, RWD стал стандартом в веб-дизайне. Есть и другие способы обслуживания мобильных пользователей, такие как вышеупомянутые сайты m-dot и мобильные приложения, однако ни один из них не является экономически выгодным и эффективным в отличие от адаптивного дизайна. В этой книге мы расскажем вам о том, как сделать ваш сайт адаптивным и действительно удобным для конечного пользователя.

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

Шрифт:

Интервал:

Закладка:

Сделать

1 2 3 4 5

Содержание

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

Что такое RWD

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

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

Макет Shifter

Колонка Drop

Off Canvas

Твики

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

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

Футер

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

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

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

max-width: 100%;

srcset

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

JPG или JPEG

SVG

PNG

GIF

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

Пример

HTML

HTML5.js

CSS

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

Сжатие

Минификация

GZIP

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Что такое RWD

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

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

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

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

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

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

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

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

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

устройств.”

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

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

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

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

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

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

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

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

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

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

ширины.

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

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

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

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

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

• Макет Shifter;

• Колонка Drop;

• Off Canvas;

• Твики.

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

вы создаете.

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

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

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

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

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

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

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

1 2 3 4 5

На этом сайте Вы можете читать книги онлайн бесплатно русская версия Как сделать сайт адаптивным: полезные советы - "TemplateMonster".

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

Веб-Самоделкин. Как самому создать сайт быстро и профессионально - Алексей Гладкий - Интернет
Идеально! Как создать и переделать свой сайт. Правильный подход и передовые техники разработки - Элиот Стокс - Интернет
Wi-Fi: Все, что Вы хотели знать, но боялись спросить - А. Щербаков - Интернет
Компьютерные сети. 6-е изд. - Эндрю Таненбаум - Прочая околокомпьтерная литература / Интернет / Программное обеспечение
Интернет-коммуникации в глобальном пространстве современного политического управления. Монография - Сергей Володенков - Интернет

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

Оставить комментарий