Мы специализируемся на разработке веб-проектов, интерактивных веб-приложений и сервисов

Мы можем предложить вам полный цикл разработки: от дизайна фирменного стиля и интерфейса до развертывания вашего проекта в интернет и хостинга

Адаптивный сайт, адаптивная верстка

6 октября 2013

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

Уже сегодня каждый второй пользователь заходит в интернет с мобильного устройства. Еще год назад это звучало фантастически, сегодня - это уже реальность. Посмотрим на Запад: там число пользователей интернета с применением мобильных устройств еще в прошлом году перевалила за 50%, в Японии уже сегодня этот показатель составляет 90%. Тенденция очевидна. По прогнозам аналитиков в следующем году уровень продаж мобильных устройств обгонит десктопы и ноутбуки. Мир интернета стремительно меняется. Мы стремительно меняемся в попытке не отстать от прогресса. Украинцы и россияне массово покупают планшеты и смартфоны. Все хотят быть онлайн. Вопрос в том, готовы ли сайты к этому буму? Как правило, не готовы! В то время как пользователи активно осваивают новейшие технологии, большинство наших веб-ресурсов стоят на месте. Что на Западе давно стало обыденностью у нас только начинает развиваться: идут в ногу со временем единицы. Кроме самих устройств появляются и новые технологии разработки сайтов, которые делают сайт комфортным для веб-серфинга с любого устройства. Эта технология называется адаптивная верстка сайта.

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

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

Сайт располагает блоки с информацией соответственно разрешению экрана. При просмотре на обычном мониторе в ряд размещается меню и множество блоков с информацией. В качестве примера можно привести один из разработанных нами адаптивных сайтов stepinmobile.com:

На более мелких расширениях (например, iPhone) в целях экономии пространства и улучшения восприятия ресурса меню может находится в другом месте, а расположение информационных блоков полностью меняется, как это видно на рисунке ниже:

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

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

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

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

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

Бесплатный аудит сайта.
Заинтересованы в развитии Вашего сайта? Получите рекомендации профессионалов.