При разработке веб-сайта важно убедиться, что он отлично смотрится на любом устройстве, независимо от размера и формы экрана. Адаптивные веб-сайты созданы для того, чтобы хорошо выглядеть на всех видах современных устройств, таких как компьютеры, телефоны, планшеты, телевизоры, носимые устройства и даже автомобильные экраны. Чтобы сделать веб-сайт адаптивным, вам необходимо изменить код CSS и HTML, чтобы автоматически изменять размер его элементов в зависимости от конкретных условий. Из этой статьи вы узнаете, как спланировать и реализовать базовый адаптивный веб-дизайн.
Шаги
Метод 1 из 3: планирование адаптивного дизайна
Шаг 1. Узнайте, как ваша аудитория использует ваш сайт
В наши дни большинство людей просматривают Интернет с мобильных телефонов и планшетов. Чтобы сайт был отзывчивым, вы должны убедиться, что он правильно отображается независимо от того, где он просматривается. Если время и деньги имеют значение, сосредоточьтесь на типах устройств, которые наиболее популярны у ваших пользователей (если эта информация доступна), и на том, как они используют ваш сайт. Используя свое программное обеспечение для аналитики или какой-либо другой вид исследования, узнайте:
- Какие типы устройств они используют чаще всего для просмотра веб-сайта, уделяя особое внимание маркам мобильных телефонов / планшетов / компьютеров и размерам экрана / разрешению.
- Какие браузеры наиболее популярны у ваших пользователей. Что касается глобальной статистики, Google Chrome является самым популярным веб-браузером в мире, но Safari занимает второе место.
- Как посетители используют ваш веб-сайт, например, сколько времени они проводят, просматривая его, где они его просматривают и какой контент наиболее популярен. Это может помочь вам определить, какой тип контента важно включать, а какой можно опустить.
Шаг 2. Создайте разные макеты для разных устройств
Вы можете использовать комбинацию CSS и JavaScript для определения устройства пользователя, а также его возможностей (поддерживает ли оно Java, Flash и т. Д.) И соответственно отображать определенную версию вашего сайта. CSS Media Queries особенно полезны для определения размера / разрешения устройства.
Шаг 3. Учитывайте различные типы взаимодействий
Посетитель может взаимодействовать с вашим веб-сайтом с помощью мыши, клавиатуры, сенсорного экрана или даже программы чтения с экрана для людей с ослабленным зрением. Учитывая это, ваш веб-сайт должен реагировать на щелчки мыши, клавиши клавиатуры (Tab, Enter, Return и т. Д.) И касания пальцами экрана.
Эффекты наведения не работают ни с чем, кроме мыши. Вместо использования этих эффектов вы можете использовать требование, чтобы посетитель щелкнул кнопку или значок, чтобы отобразить то, что ранее отображалось при наведении курсора мыши
Шаг 4. Рассмотрите возможность использования системы управления контентом (CMS)
Простой способ обеспечить адаптивный дизайн вашего сайта - это использовать CMS с предварительно созданной адаптивной темой. Использование CMS, такой как Joomla, Drupal или Wordpress, позволяет вам гарантировать, что ваш веб-сайт отлично выглядит на всех устройствах, без необходимости самостоятельно кодировать адаптивные элементы. Уточните у своего провайдера веб-хостинга, какие инструменты CMS доступны в вашем сервисе.
Шаг 5. Используйте онлайн-инструменты для тестирования своего сайта
Теперь, когда популярность адаптивного веб-дизайна возросла, существует множество бесплатных инструментов, которые вы можете использовать для тестирования своего веб-сайта. Если вы уже написали код для своего веб-сайта, используйте эти инструменты, чтобы проверить, как он выглядит в различных условиях, чтобы вы знали, где вам нужно улучшить отзывчивость:
- Mobile-Friendly Test от Google: позволяет узнать, работает ли ваш сайт на мобильных устройствах так же хорошо, как и на экранах компьютеров.
- resizeMyBrowser: позволяет просматривать ваш сайт в разных разрешениях.
- Ответчик: отображает ваш сайт на разных экранах устройств в разных макетах (сбоку или справа вверх).
Метод 2 из 3. Создание адаптивного макета страницы
Шаг 1. Рассмотрим бесплатную адаптивную структуру таблиц стилей
Фреймворк - это заранее написанный набор HTML, CSS и / или JavaScript, который вы можете использовать в качестве скелета для своего сайта. Все фреймворки протестированы и оптимизированы для работы со всеми браузерами, поэтому все, что вам нужно сделать, это вставить свой контент, добавить медиафайлы и настройки цвета и опубликовать свой сайт. Вот некоторые популярные фреймворки:
- Бутстрап
- Скелет
- Фонд
Шаг 2. Установите область просмотра с помощью метатега
Если вы не используете фреймворк, вам следует начать с самого важного аспекта создания адаптивного веб-сайта: окна просмотра. Область просмотра - это часть веб-сайта, видимая пользователю. Ключом к правильному отображению вашего сайта независимо от размера экрана является масштабирование размера области просмотра в теге META. Для этого добавьте этот тег вверху каждой страницы сайта:
Шаг 3. Задайте размер текста относительно области просмотра
После настройки области просмотра текст на вашей странице будет масштабироваться по размеру экрана. Однако шрифты могут отображаться слишком большими или слишком маленькими, если их размеры не указаны относительно области просмотра. Вы можете сделать это, определив размер шрифта как определенный процент от области просмотра с помощью модуля vw. В этом примере заголовки H1 должны отображаться на 10% ширины области просмотра, независимо от ее размера:
wikiHow
Шаг 4. Используйте медиа-запросы, чтобы отображать разные стили для разных размеров экрана
Медиа-запросы позволяют вам выбрать, отображать ли определенные элементы CSS в зависимости от размера экрана. Вы можете указать специфику своего медиа-запроса в файле CSS. В этом примере цвет фона тела станет красным, если размер экрана пользователя составляет 480 пикселей или больше:
wikiHow
@media screen и (min-width: 480px) {body {background-color: aqua; }}
Метод 3 из 3. Как сделать изображения адаптивными
Шаг 1. Используйте свойство CSS width для масштабирования изображений
Вместо того, чтобы устанавливать ширину изображения на определенное количество пикселей (например, 500 пикселей), используйте процентное соотношение (например, 100%), чтобы изображение смотрело на ширину своего родителя и соответствующим образом настраивалось. Установка ширины изображения на 100% заставляет изображение масштабироваться вверх и вниз в зависимости от размера экрана зрителя. Чтобы сделать это в режиме онлайн:
Шаг 2. Используйте свойство max-width, чтобы ограничить масштабирование фактического размера изображения
Если вы используете свойство width на предыдущем шаге для масштабирования изображения до 100%, изображение будет увеличиваться или уменьшаться, чтобы поместиться на 100% своего контейнера независимо от размера. Это означает, что если изображение находится на меньшей стороне, оно будет увеличиваться больше, чем его исходный размер, и будет выглядеть хуже. Чтобы этого не произошло, используйте max-width, чтобы установить максимальный размер масштабирования изображения на 100% (его фактический размер). Вот как:
Шаг 3. Используйте элемент изображения HTML для отображения разных изображений на экранах разных размеров
Если вы хотите создавать изображения нестандартного размера для отображения на экранах разного размера, вы можете указать, какие фотографии будут отображаться в вашем HTML-коде. Создайте изображения разного размера, а затем используйте этот код в качестве примера для указания, какое изображение использовать на экранах шириной 600 и 1500 пикселей:
