2 ноября 2013 г.

Десктопы, планшеты, смартфоны... Адаптивный дизайн.

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

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


Удобство на любом устройстве. Сайт автоматически подбирает оптимальный вариант отображения для каждого устройства, перестраивая контент в одну, две или три колонки. В результате чтение любых материалов, просмотр фотогалерей и встроенного видео становятся максимально комфортным на любых устройствах.
Все грузится быстрее. Для устройств с высоким разрешением экрана (retina) загружаются картинки в высоком разрешении, устройств с низким разрешением — картинки с низким разрешением. В результате адаптивного подхода к верстке для большинства мобильных устройств объем загружаемых данных стал почти вдвое меньше, что привело к заметному ускорению загрузки страниц.
Устройства дольше сохраняют заряд батареи. За счет почти полного отказа от использования в коде страниц так называемых тяжелых скриптов, которые довольно требовательны к производительности устройств, удалось заметно снизить нагрузку на вычислительные мощности мобильных устройств.

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