5 черт действительно отзывчивого сайта

У вас есть «отзывчивый сайт»? Это сайт с макетом, который изменяется в зависимости от устройства посетителя и размера экрана. Адаптивный веб-дизайн в настоящее время является лучшей отраслевой практикой. Это рекомендовано Google и найдено на миллионах сайтов в Интернете. Однако существует большая разница между наличием веб-сайта, который просто «умещается» на экранах разных размеров, и сайтом, который действительно отзывчив.

Я регулярно вижу, как компании изменяют дизайн своего веб-сайта и выпускают пресс-релиз, рассказывающий о достоинствах их нового дизайна, удобного для мобильных устройств. Когда я посещаю эти сайты, я часто нахожу макет, который действительно масштабируется и изменяется, чтобы уместиться на разных экранах, но это настолько далеко, насколько они воспринимают идею отзывчивости. Этого недостаточно. По-настоящему отзывчивый веб-сайт делает больше, чем просто масштаб, чтобы уместить его на экране меньшего или большего размера. На этих сайтах вы также найдете следующие важные черты.

1. Оптимизированная производительность

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

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

Как только вы определите базовый уровень вашего сайта в плане производительности, вы сможете начать вносить необходимые улучшения для увеличения скорости загрузки. Хорошее место для начала, вероятно, с изображениями вашего сайта. Слишком большие изображения являются причиной № 1, когда дело доходит до медленной загрузки сайтов, поэтому оптимизация ваших изображений для веб-доставки действительно может помочь вашему сайту с точки зрения производительности.

Реальность такова, что повышение производительности веб-сайта и высокая скорость загрузки – это преимущество, которое оценят все посетители. В конце концов, никто никогда не жаловался, что сайт загружается «слишком быстро», но если сайт загружается слишком долго, это абсолютно отвлечет людей, независимо от того, «отзывчиво» он «умещается» на их экране или нет.

2. Умная Иерархия Контента

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

Этот сценарий довольно резко меняется, когда вы берете этот дизайн сайта и трансформируете его для устройств с небольшим экраном, таких как мобильный телефон. Внезапно вы работаете с частью недвижимости, которая была у вас раньше. Это означает, что вам нужно решить, что будет появляться на сайте первым, что последует за ним и т. Д. Вместо того, чтобы все было видно сразу, у вас, скорее всего, есть место, чтобы показать одну или две вещи (одна из которых, вероятно, является навигацией). Это означает, что решения иерархии должны быть приняты. К сожалению, то, что часто определяет то, что идет первым на экране, а затем вторым и т. Д., Это способ кодирования самой страницы. При создании адаптивного сайта проще всего отобразить на экране все, что находится сначала в коде, затем в коде, затем второй элемент в коде и т. Д. К сожалению, то, что может быть самым важным на одном устройстве, может быть не столь критичным на другом. По-настоящему отзывчивый сайт понимает, что иерархия контента должна меняться в зависимости от различных ситуаций, и он должен быть умным в отношении того, что и где он отображает.

Усовершенствования в технологиях компоновки CSS, в том числе CSS Grid Layout, Flexbox и т. Д., Дают веб-дизайнерам и разработчикам больше возможностей, когда речь идет об интеллектуальном размещении контента, вместо того, чтобы ограничиваться точным порядком областей содержимого в коде HTML. Использование этих новых методов верстки станет еще более важным, поскольку ландшафт устройства и потребности пользователей нашего сайта продолжают развиваться.

3. Опыт, учитывающий сильные и слабые стороны устройства

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

Например, сотовый телефон имеет ряд функций, которые вы не найдете в традиционном настольном компьютере.GPS является одним из примеров мобильно-ориентированной функции (да, вы также можете получить общую информацию о местоположении на настольных компьютерах, но GPS устройства намного точнее). Ваш сайт может использовать информацию GPS для умной отправки человеку очень подробной и конкретной пошаговой информации о направлении или специальных предложений, исходя из того, где именно они находятся в данный момент.

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

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

4. Контент с контекстом

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

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

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

5. Доступность

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

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

Оцените статью
Solutics.ru
Добавить комментарий