Адаптивные веб-сайты — это веб-сайты, которые предназначены для просмотра в самых разных условиях и на любых современных устройствах, таких как компьютеры, телефоны, планшеты, телевизоры, носимые устройства и даже автомобили и кухонные приборы! Отзывчивость — это новый термин в индустрии создания веб-сайтов, который означает веб-сайт, который ведет себя и проявляет как можно больше в пределах ограничений условий и устройства, на которых он просматривается, таких как размер и разрешение экрана, скорость интернета и ограничения полосы пропускания, метод взаимодействия и даже физической ориентации устройства.
Действия
1. Поймите, что отзывчивый дизайн имеет приоритет
Поскольку все веб-сайты имеют гораздо больше контента, чем могут быть разумно отображены на одном экране, каждый веб-сайт должен выбрать наиболее важные биты информации, которые будут отображаться в данный момент времени. Например, домашняя страница всегда должна показывать нужную информацию, которую посетитель должен увидеть первым.
- Адаптивные веб-сайты нуждаются в еще более тщательном определении приоритетов, потому что посетители могут иметь ограниченное (или избыточное) время и «визуальное пространство» из-за устройства, которое они используют или окружающей среды. Поскольку веб-сайт является более ограниченным в этом отношении, то, что он отображает, необходимо уменьшить, отбросить менее важную информацию и сохранить только важную информацию.
2. Изучите аудиторию, чтобы узнать, как они просматривают сайт
Хотя вы можете попытаться заставить свой сайт отвечать на все устройства во всех условиях, это, вероятно, пустая трата времени и денег. Скорее, потратьте время на выяснение:
- Как ваши посетители используют ваш веб-сайт, в том числе, сколько времени они тратят на него, как они читают и просматривают контент, насколько далеко они находятся на экране и т. Д.
- Какие устройства они чаще всего используют для просмотра веб-сайта и какие устройства они могут использовать в ближайшем будущем
- Где (дома, снаружи, в машине, на работе и т. Д.), И когда они в настоящее время и будут просматривать ваш сайт
3. Разработайте различные макеты для разных устройств
Как правило, вы хотите предоставить большую часть информации или содержимого веб-сайта для размера / разрешения устройства, которое использует посетитель; однако имейте в виду расстояние просмотра на больших устройствах, таких как телевизоры. Макеты на основе сетки упрощают эту задачу, предоставляя разные количества столбцов для блоков контента в зависимости от устройства.
- Например, веб-сайт может использовать 5 столбцов для размещения на больших устройствах, 3 столбца на планшетах и 1 столбец на обычном телефоне.
4. Отрегулируйте макет для разных устройств
Комбинация CSS и JavaScript может использоваться для обнаружения устройства, на котором используется веб-сайт, и его спецификаций (например, если он поддерживает Flash или последнюю версию HTML) и соответствующим образом корректирует веб-сайт. CSS Media Queries особенно полезны для определения размера / разрешения устройства.
- Например, вы можете использовать следующий медиа-запрос для установки стилей CSS для веб-сайта, когда он просматривается экранами с более чем 1000 пикселями по горизонтали.
@media только экран и (min-width: 1000px) {}
5. Убедитесь, что носитель имеет достаточный размер
Адаптивные веб-сайты обычно пытаются отображать меньшие изображения и видео для мобильных устройств, таких как телефоны, потому что экраны телефона обычно меньше, чем экраны компьютеров или телевизоров, а также потому, что телефон часто используется с контрактами с ограниченной пропускной способностью. Однако это стало проблемой, поскольку смартфоны имеют экраны с более высоким разрешением. Кроме того, современные браузеры часто используют предварительную выборку, что затрудняет отправку изображения определенного размера на устройство.
- На противоположной стороне, поскольку все устройства имеют экраны с более высоким разрешением, стало необходимо отображать изображения с более высоким разрешением на веб-сайтах. В принципе, вы должны знать о лучших размерах для средств массовой информации на своем веб-сайте и искать технологию, которая позволяет вам выбирать подходящие носители для посетителя.
6. Учет разных типов взаимодействия
Посетитель может взаимодействовать с веб-сайтом с помощью мыши, клавиатуры, сенсорного экрана или даже экрана для читателей (для людей с ослабленным зрением). Учитывая это, ваш сайт должен иметь возможность реагировать на щелчки мышью, «вкладку», «вводить» и другие клавиши, а также касаться пальцами экрана.
- Эффекты Hover-over не работают ни с чем, кроме мыши. Вместо этого вы можете использовать посетителя, чтобы щелкнуть кнопку или значок, чтобы отобразить все, что ранее отображалось при наведении мыши.
- Элементы должны показать, что они сфокусированы, когда пользователь нажимает клавишу «tab».
