Основы создания адаптивного дизайна сайта и особенности его продвижения

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

Согласно прогнозам агентства Zenith к 2018 году доля мобильного трафика будет составлять 79 %. В некоторых нишах он уже перекрывает десктопный поиск (около 70%), а это значит, что такую аудиторию игнорировать нельзя. Для привлечения такого трафика можно либо создать мобильную версию своего сайта, либо применить адаптивный дизайн. Если вы хотите получить недорогой сайт, то надо выбирать второй вариант. Для него не придется создавать отдельный URL, писать все с нуля. Немного корректировок и ваш сайт будет адекватно отображаться на всех видах мобильных устройств.

Основы по осуществлению адаптивного дизайна

Главная задача адаптивного дизайна – сделать так, чтобы сайт подстраивался под размеры мобильного девайса, а для этого необходимо правильно структурировать его разделы. С этой целью используют CSS-фреймворки (наиболее популярны Bootstrap, Uikit, Skeleton), CSS3 Media Queries.

Основными шагами по превращению шаблона в адаптированную версию недорого сайта будут следующие действия:

• использование процентов вместо пикселей. В адаптивном дизайне ширина объектов прописывается в процентах: если было 500 пикселей, то должно стать 50%;
• max-width и width. Это поможет сделать ваш сайт «резиновым». Допустим, ширина вашего экрана составляет 1000 пикселей. Если эту ширину уменьшить, то появится горизонтальная прокрутка. Дабы этого не произошло, надо указать width: 100%. Теперь сайт будет растягиваться на всю ширину устройства. Но если ширина еще будет увеличена, то дальнейшее растяжение блока сделает информацию сайта нечитаемой. Дабы этого не допустить, необходимо ввести максимальное ограничение max-width: 1000 px. При достижении такого показателя блок просто перестанет растягиваться;
• min-width и width. Это ограничение на минимальную ширину. Если поставить минимальную ширину в 100 пикселей, то при ее достижении блок перестанет уменьшаться и появится горизонтальная прокрутка.

Продвижение адаптивного сайта

Адаптивные сайты и раньше давали в среднем на 11% больше конверсии, чем неадаптивные. Каждый мог самостоятельно решить, стоит ли делать ставку на мобильный сайт. С 2017 года адаптивный дизайн обязателен для СЕО-продвижения. Хочешь – не хочешь, а без него и Google, и Яндекс будут понижать позиции сайта в поисковой выдаче. Так можно потерять до 43% трафика.

После проведенных работ по адаптации дизайна необходимо проверить результат на сервисе Google "Mobile friendly". Есть ошибки – исправляем. Правильность проведенных работ, мобильные настройки контекстной рекламы приведут к увеличению конверсии, снижению процента отказов. С таким сайтом показатель бренда O'Neill, увеличившего выручку от своего мобильного трафика на 591.42%, станет достижимой целью, а не фантастической высотой.