В этой статье мы постараемся показать необходимость и преимущества адаптивного дизайна сайта или просто адаптивного сайта.
Для тех, кто знает зачем нужна адаптивность, этот раздел можно пропустить.
Начнем с того, что задумаемся о необходимости такого сайта. За последние несколько лет, количество устройств, которые способны отображать сайт выросло в разы. Это мобильные телефоны, планшеты, ноутбуки, обычные компьютеры, телевизоры и кто-его знает какие еще есть и будут в недалеком будущем. Каждое из этих устройств имеет свое разрешение экрана. Что это значит - разрешение экрана. Разрешение - это количество точек, которое устройство может отобразить. Например, мониторы FullHD имеет разрешение 1920х1080px. Мобильный телефон может иметь - 240х320px. И что получается, если сайт оптимизирован под FullHD, то на экране мобильного будет показана 1/8 часть ширины сайта или 1/6, если повернуть устройство в альбомный режим. Это можно сравнить с размером листов. А1 это 2*А2, А2 - это 2*А3
И что человек увидит на своем мобильном, когда страница загрузиться(кстати скорость загрузки - один из важных критериев в адаптивном дизайне, но об этом немного позже)? Он увидит просто маленький кусочек сайта, либо весь сайт но очень мелко.
Теперь, перейдем собственно к самой адаптивности , а точнее преимуществам.
Скорость загрузки
Скорость российского мобильного интернета, особенно в регионах, оставляет желать лучшего. Ситуация. Посетитель переходит на сайта из поиска, ждет загрузку, например 10картинок по 300К итого примерно 3Мб, но ещё не знает нужен ему этот сайт или нет. Сколько продлиться его терпение и он будет ждать загрузки? Как показывает мировая статистика, не более 7сек. и эта цифра склонна к уменьшению, т.е. со временем порог ожидания снизиться до 6сек.
По рекомендации магната поиска Google, оптимальное время загрузки страницы 3,5сек. Если за это время он не получит результат, то перейдет к следующему сайту. Что же нам предлагает адаптивный дизайн. Он не показывает на мобильном весь контент сайта, а только лишь выбранную часть, использует оптимизированные по размеру изображения. Сайт загружается быстро. Посетитель доволен, ему комфортно.
Вопрос контента
В современном интернете контент превыше всего. Текст, изображения все есть контент и главная задача сайта правильно его преподнести. А что получатся, если при разработке не задумывались об адаптивности. Распрастраненный шаблон для обычного ПК, сначала идет шапка сайта(навигация или просто какие-то изображения для "красоты"), а только затем интересные предложения(спецпредложения, лидеры продаж и др.) и текстово-графическая информация. Значит, чтобы с мобильного человек увидел это, он должен сразу заинтересоваться сайтом и начать им пользоваться. Такое встречается не так уж часто.
Другое дело, адаптивный дизайн. Он сразу превращает шапку сайта в небольшую строку и, например, следом идет уже спецпредложение. Вариантов масса, а самое главное это под контролем, в случаи создания адаптивного сайта. Что же мы получили в итоге? Человеку, зашедшему на сайт, сразу выдается читаемый размер шрифтов, интересное предложение и т.д. Посетителю не нужно тратить силы на адаптацию под сайт, он может потратить их на чтение текста, например. Будь вы на его месте, вам должно было бы это понравиться.
Изображения
На маленьком разрешении не нужно размещать картинку с разрешением в несколько раз превосходящем необходимое, иначе получатся как с дизайном. Наш посетитель видит лишь небольшую часть изображения. И наоборот, кому может понравиться изображения на экране монитора размером с экран небольшого смартфона, особенно если это карта или схема. Это вопросы удобства работы с сайтом. Но также вспомним, что упоминалось немного ранее - скорость загрузки. Если немного ранее мы говорили просто о скорости загрузки, то сейчас о необходимом количестве и качестве размещаемого материала(изображений). И одна из целей адаптивного дизайна - поиск и реализация оптимального решения. На этапе разработки дизайна продумывается сколько и какого качества изображений будет отображаться на различных устройствах. Ведь в адаптивном сайте это можно контролировать.
Что же в итоге.
Адаптивный дизайн сильно отличается от обычного дизайна сайта. Как следствие, создание адаптивного сайта не стоит переносить на потом. Получиться двойная работа. Создать обычный сайт, а потом довести его до адаптивности не получиться, это будет новый дизайн. Разработка же адаптивного дизайна сайта может сэкономить до 70% стоимости. Что получиться если сначала сделать дизайн обычного сайта, сверстать его, наполнить информацией, а потом задуматься над адаптивным или над мобильной версией(когда для мобильных используется отдельный сайт). Получается и в мобильной и в адаптивной версии опять нужен дизайн-макет, верстка и наполнение контентом. И получается как в поговорке: "Скупой платит дважды". Оценивайте ситуацию и смотрите в будущее. Успехов Вам!