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

Адаптивный - значит меняющий вид из-за каких то причин. Причин, по которым Ваш сайт должен менять вид несколько:

• Большое количество разнообразных разрешений экранов устройств;
• Переход большой доли трафика на другой вид устройств;
• Желание правильно донести информацию, не взирая на вышеперечисленное.

Если Вы не знаете, что такое разрешение экрана или трафик - спросите у своего админа, а если у Вас его нет, то лучше не читайте статью про сети, а сразу звоните нам.

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

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

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

Для пример возьмем один из наших сайтов, магазин торговой марки JSB.

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

А вот как для телефона: сделано расположение всех блоков по порядку, что, конечно, увеличивает длину страницы, но дает удобную навигацию на сайте. Кроме того, сохраняется внешний вид разработанной картинки и текста описания категории, а также ключевых товаров (на представленных картинках их нет).

Посмотреть более полно можно самостоятельно зайдя с телефона, планшета или компьютера на сайт JSB.BY

Всегда Ваш, aplat.by