Отзывчивый веб-дизайн (Responsive Web Design) – такой подход в создании сайта, который предполагает проектирование и разработку в соответствии с используемым разрешением экрана, его ориентации и платформы. Другими словами, веб-сайт должен строиться на таких технологиях, которые автоматически реагировали бы на пользовательские настройки. На практике отзывчивый веб-дизайн представляет собой сочетание резиновых изображений, включая видеоролики, резинового макета на пропорциональной основе и Media Queries, которые, собственно, и отвечают за адаптацию макета под размеры пользовательского экрана, а средствами CSS3 это разрешение определяется и выдается результат.
Данный подход впервые был предложен еще в начале 2009 года Итаном Маркоттом, который впоследствии опубликовал целую книгу «Responsive Web Design» (русского аналога пока не имеется).
Если вы до сих пор откладывали возможность сделать ваш дизайн «отзывчивым», то вот 5 причин, которые могут вас заставить подумать об этом.
Рекомендации от Google
В 2012 году Google настоятельно стал рекомендовать использовать адаптивный дизайн, и в настоящий момент, считает это лучшей практикой для сайтов , что бы быть удобными для пользователей смартфонов. Адаптивные сайты имеют один и тот же адрес в интернете ( часто у обычной версии сайта и мобильной разные адреса ). Это позволяет поисковикам легко сканировать информацию на вашем сайте. По одной только этой причине вам нужно задуматься об адаптивном дизайне.
Меньший показатель отказов
Если пользователь перешел на ваш сайт, и после этого почти сразу вернулся к поисковым результатам, то такие действия поисковик сочтет за то , что ваш сайт не удовлетворяет условиям поиска и его позиции нужно пересмотреть. Если ваш сайт плохо отображается на мобильном экране , то пользователь его быстро закроет. Исследования показывают, что рост мобильных пользователей в России за прошлый год составил 53 % и достиг 25 миллионов.
Кроме того в 2015 году пользователей мобильным интернетом станет больше чем других. И в этих условиях адаптивный дизайн обязателен , что бы сократить процент отказов посетителей вашего сайта.
Один сайт - одно продвижение
Если вы используете обычную версию сайта и мобильную , то вам нужно будет тратится на продвижение двух сайтов. Технология адаптивного сайта позволит избежать этих неудобств.
Все действия направленные на продвижение будут сконцентрированы на одном сайте , а не на двух. Все ссылки в интернете будут вести тоже только на один сайт и будут давать больше авторитета сайту, чем если бы эти ссылки «размазывались» на 2 сайта. Если у вас нет необходимости продвигать сразу 2 сайта , это даст преимущества перед конкурентами.
Адаптивный дизайн = Редизайн + долгосрочное техническое обслуживание
Многие компании которые хотят продавать свои услуги пользователям смартфонов, до сих пор полагаются на отдельную мобильную версию сайта. Однако мобильная версия сайта , часто несет в себе трудности с ее обслуживанием. Как часто меняются технологии мобильных телефонов, так часто нужно отслеживать и обновлять поддержку этих технологии у мобильного сайта. Адаптивный дизайн лишен этих недостатков.
Адаптивная верстка сайта , позволит вашему сайту еще долго правильно отображаться на различных экранах мобильных устройств.
Гарантированный возврат инвестиций
Не адаптивные сайты, скорее всего, будут тянуть бизнес «вниз», так как будут проигрывать конкурентам с адаптивными сайтами. Что бы получать максимальную отдачу от сайта , нужно увеличивать максимальных охват его посетителей , и он должен быть больше чем у конкурентов. Адаптивный дизайн сможет увеличить охват пользователей у вашего сайта, и будет в дальнейшем этому способствовать, увеличивая ваши шансы на успешные конверсии.
Об авторе и переводе
Данная статья является вольным переводом статьи Amber Alvi. Эмбер - контент разработчик в компании Genetech Solutions , которая занимается разработкой и сопровождением веб-сервисов , а так же мобильными приложениями. Их блог можно почитать здесь .
Замечания по качеству перевода можете оставить в комментариях. Если у вас есть примеры интересных статей, можете прислать ссылки в комментариях , и если нам понравится - обязательно опубликуем перевод.
![5 причин, чтобы разработать «отзывчивый» дизайн](/upload/1396375830-top5responsive_intro.jpg)