<<назад.
За почти пятьдесят лет существования интернет-технологии прошли огромный путь эволюционного развития. Все начиналось с примитивного языка разметки гипертекста, имевшего всего несколько тегов для создания веб-страниц. Причем никакого общего стандарта не существовало и для каждого типа браузера необходимо было проектировать уникальные сайты.
Говорят история имеет тенденцию повторяться. В наши дни происходит нечто подобное, только теперь на уровне разновидностей компьютеров. Когда смартфоны и планшеты перестали быть роскошью, а превратились в основное средство передвижения по всемирной сети, неожиданно выяснилось, что сайты, созданные на базе традиционных стандартов HTML, совершенно не годятся для маленьких, но сенсорных экранов мобильных девайсов.
Да и для гигантских мониторов жидкокристаллических гибридных телевизионных установок, имеющих доступ к интернету, обычная HTML-верстка тоже не подошла.
Первой попыткой унификации веб-сайтов стал, так называемый, «резиновый дизайн». Идея в том, что веб-страница принудительно подгоняется под форму и размер экрана, будь он маленький или большой.
Результатом такого подхода оказались странные, деформированные сайты в стиле Сальвадора Дали, что мало способствовало электронной коммерции. Людям элементарно стало неудобно покупать товары в абстракционистских интернет-магазинах.
В этом случае дух коммерции и стремление к наживе оказались двигателем творческой мысли. Следующим этапом всеобщей веб-стандартизации явились два инновационных направления в индустрии веб-дизайна.
RWD. Отзывчивый дизайн – Responsive web design. AWD. Адаптивный дизайн – Adaptive web design.
Люди, далекие от программирования и верстки, часто думают, что адаптивный и отзывчивый дизайн – это одно и то же. Однако это две большие разницы и термины даже не являются синонимами.
Что такое отзывчивый дизайн.
В основе отзывчивого веб-дизайна стоят три слона, как писал один из отцов-основателей этого направления Этан Маркотт.
Гибкий макет на базе фреймворков – сеточного выравнивания. Сетка для разметки страницы сайта может быть разных форматов. Суть в том, что независимо от размера экрана сетка занимает всю поверхность страницы. Гибкая сетка – это обычная, часто применяемая в верстке таблица с ячейками, которые растягиваются под размер веб-страницы. Гибкие изображения. С помощью специально оформленных HTML-тегов достигается изменение размера картинки, чтобы уложиться точно в посадочную ячейку фреймворка. Медиазапросы CSS3. Когда страница сайта готовится к отправке в браузер пользователя, формируется обращение к компьютеру, чтобы выяснить формат дисплея и разрешение экрана. После этого веб-страница форматируется соответствующим стилем CSS.
Принцип работы отзывчивого дизайна базируется на системе множества каскадных таблиц стилей. То есть, под каждый тип компьютера разрабатывается собственная CSS. А когда сайт попадает на глаза пользователю, он уже модифицирован подходящими для смартфона или десктопа стилями.
Что такое адаптивный дизайн.
Изобретатели адаптивного дизайна пошли по несколько иному пути. В этом подходе используется несколько макетов веб-страницы для каждого типа устройств. Вид компьютера и размеры экрана выясняются еще до отправки данных с сервера в интернет-обозреватель.
Технология адаптивного дизайна напоминает процесс формирования динамической страницы при помощи системы управления контентом. Как в динамической версии HTML, адаптивный дизайн использует программные сценарии Java Script и объектную модель документа DOM. Поэтому адаптивные сайты более интерактивны, чем отзывчивые.
Адаптивная разметка и адаптивный дизайн.
На этот раз американская пословица: “Если выглядит, как лошадь, значит, это конь”, ошибается. Адаптивная разметка и адаптивный дизайн – это совершенно разные технологии.
Адаптивный дизайн подразумевает использование нескольких разных макетов для всех предусмотренных техническим заданием типов компьютеров. Адаптивная разметка (Adaptive Layout) использует несколько различных каскадных таблиц для форматирования одного шаблона веб-страницы.
Адаптивный vs. отзывчивый дизайн
И теперь возникает законный вопрос – что лучше использовать для создания веб-проекта? Какую из двух технологий? Ответ кроется в целях и задачах, поставленных перед веб-сайтом и еще в технических возможностях разработчиков.
Плюсы и минусы адаптивного дизайна
Адаптивный дизайн гораздо сложеннее в плане программирования. Здесь используется технология, близкая к DHTML – Java Script, DOM, HTML. Зато по быстродействию такие сайты лучше. При обращении к серверу, в браузер отправляется только та часть сайта, которая требуется для конкретного устройства (смартфон, десктоп или планшет). Высокая скорость загрузки страниц улучшает пользовательский опыт и положительно оценивается поисковыми системами. Однако, адаптивный дизайн малопригоден для эффективной поисковой оптимизации. Именно поэтому веб-мастера вынуждены искать альтернативные решения. Адаптивные сайты имеют преимущество в интерактивности, поэтому часто на этой технологии работают социальные сети и любые другие типы проектов, где требуется хорошая обратная связь. Примеры – сайты ВКонтакте и Google Mail.
Преимущества и недостатки отзывчивого дизайна
Отзывчивая верстка более проста для изучения и работы. В технологии все кодирование идет на уровне HTML и CSS. Необходимости заморачиваться с программированием Java и формированием сценарной поверхности DOM совершенно нет. Стоимость отзывчивых шаблонов гораздо ниже, чем адаптивных. Этим пользуются недобросовестные реселлеры, продавая дешевые отзывчивые шаблоны сайтов под видом дорогостоящих адаптивных. Загружается в браузер отзывчивый сайт гораздо дольше адаптивного и тем более обычного HTML-сайта. Увеличение времени загрузки обусловлено тем, что приходится передавать с сервера весь пакет каскадных таблиц стилей, для всех типов мониторов. Тогда как в случае адаптивного сайта задача ограничивается загрузкой только одной подходящей версии макета. На разных типах мониторов отзывчивый сайт будет выглядеть совершенно по-разному. Обычное текстовое меню десктопного сайта может оказаться выпадающим на смартфоне. На планшетном компьютере текст будет представлен в одной колонке, а на широкоформатном мониторе – в нескольких.
Вердикт.
Эти две веб-технологии возникли, как способы компенсации несоответствия старых версий HTML современным требованиям мультиплатформенного интернета. Сейчас в активной разработке находится версия HTML5. Как обещают члены рабочей группы, новая технология позволит создавать универсальные сайты, одинаково хорошо пригодные для любых типов девайсов.
Дополнительные материалы по созданию сайтов можно найти в этой статье.
Напомню, что у нас можно заказать создание сайта любой сложности с индивидуальным адаптивным дизайном, перейдя по данной ссылке и оформив заказ.