Адаптивный сайт: создание, преимущества, недостатки

26-11-2015, 00:35   By admin

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

Создание адаптивного сайта

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

Уменьшение диагонали дисплея приводит к тому, что ресурс сжимается и тестовый шрифт становится мельче, а потому читать его затруднительно. Чтобы на небольших экранах шрифт оставался оптимального размера, используется мета-тег «viewport».

Текст будет хорошо прочитываться, но возникнет прокрутка по горизонтали, поскольку блоки не поместятся на дисплее, что тоже не совсем удобно. Справиться с этой проблемой можно посредством «media screen». Медиа-запросы позволят тексту нормально отображаться на дисплее, вне зависимости от размера последнего.

Используя «media screen», можно сделать адаптивный веб-дизайн под какой угодно монитор, при этом элементы ресурса можно увеличивать, уменьшать, при необходимости перемещать с одной стороны на другую, снизу наверх и наоборот. Для любого мобильника можно сделать свой адаптив-дизайн ресурса.

Тестирование

Протестировать «свежесозданный»  адаптив-ресурс и сориентироваться, как он будет выглядеть на устройствах с различными диагоналями мониторов, можно на ресурсах «ami.responsivedesign.is» и «mattkersley.com».

Плюсы и минусы адаптивного сайта

Практика показывает, что адаптив-сайт имеет ряд недостатков, в частности:

  • адаптив-дизайн хорошо работает с маленькими сайтами, а также с блогами, но с большими проектами и порталами дела обстоят сложнее;
  • страницы адаптивного сайта загружаются намного медленнее, ее тормозят «фишки» традиционной версии (анимация, онлайн-калькуляторы, видео);
  • если адаптированный дизайн в чем-то неудобен либо скрывает некий важный навигационный нюанс, его придется немедленно менять;
  • цель пользователей мобильников обычно отличаются от целей пользователей ПК. Например, клиент банка, зайдя на сайт через смартфон, заинтересуется ограниченным перечнем услуг, а не возможностями банкинга в целом;
  • необходимость    использования нескольких адресов; ограниченность,    упрощенность ресурса .

Но преимуществ адаптивных сайтов также немало. Среди них можно отметить следующие:

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

Несмотря на некоторые недостатки мобильной версии, она довольно хорошо себя оправдывает — но в том случае, если точно знать, какие задачи с ее помощью нужно решить.

dle