Ранним разработчикам сайта не пришлось много волноваться над проектированием веб-сайтов, поскольку пользователи будут просматривать их на компьютерах, и на этих компьютерах было зафиксировано разрешение экрана. С мобильной революцией все больше и больше людей ищут на своих мобильных устройствах - планшеты или мобильные телефоны - для информации. Поэтому разработчикам веб-сайтов стало необходимо создавать веб-сайт, который обслуживает все, начиная с Windows PC и мобильных устройств. В этой статье объясняется разница между адаптивный и гибкий веб-дизайн и позволяет вам решить, какой из них лучше для вас и вашей организации.
Отзывчивый веб-дизайн
Отзывчивый веб-дизайн включает в себя дополнительное кодирование и использует так называемые «жидкостные решетки». Номера указаны в процентах, а не в точном числе пикселей. Это делает правильный код сайта на экране ПК и на экране мобильного телефона. Таким образом, независимо от того, как вы изменяете размер экрана, тот же веб-сайт представлен в удобном для чтения виде. Для небольших веб-сайтов текст и изображения легко текут с пространством экрана и вставляются в него, не нарушая веб-сайт или не обрезая части веб-сайта.
Адаптивный подход к веб-дизайну делает обязательным использование CSS3 вместо простого CSS. Он также использует масштабируемые изображения и жидкостные решетки, которые немного сложно кодировать.
Адаптивный веб-дизайн
Адаптивный веб-дизайн также ориентирован на представление просматриваемого веб-сайта на планшетах и мобильных телефонах в дополнение к экранам ПК. Однако подход немного другой. В гибком веб-дизайне это была гибкость, которая позволяла свободному текстовому потоку и размеру изображений для размещения на разных экранах.
В адаптивном веб-дизайне разработчики используют соответственно предопределенные размеры экрана и код. То есть, когда пользователь приземляется на веб-сайт, веб-сайт определяет тип используемого устройства и представляет веб-сайт, предназначенный для этого размера экрана конкретного устройства. В некоторых случаях контент может различаться для разных устройств.
Например, разработчики рассмотрят 1280 × 800 пикселей для ПК, 8 "для планшетов и 5" для мобильных телефонов. Ранний код адаптивного веб-проектирования содержит идентификацию экранов. Если это ПК, покажите версию ПК на веб-сайте. Если это таблетка размером 8 ", покажите планшетную версию веб-сайта, а также, если устройство является мобильным телефоном, покажите мобильную версию веб-сайта. Это достигается с помощью оператора «IF», за которым следуют разные размеры, указанные точно в пикселях, а не в процентах.
Если новые устройства появятся с различным разрешением экрана, разработчикам придется вернуться к кодированию, чтобы включить более новые разрешения экрана. Таким образом, адаптивный веб-дизайн имеет некоторые шансы на обрезку на более мелкие устройства, если разработчики не будут осторожны.
По сравнению с адаптируемым веб-дизайном адаптивный веб-дизайн легче программировать, и большинство разработчиков выбирают последнее по гибкому веб-дизайну.
Отзывчивый против адаптивного веб-дизайна
Отзывчивые веб-сайты трудно комментировать. Код является сложным и использует процентные значения вместо фиксированных значений пикселей. Для создания веб-сайта, который масштабируется в соответствии с размером экрана устройства, требуется хорошая концентрация. Напротив, проще создавать разные сайты для разных устройств, как это имеет место в адаптивном веб-дизайне. Хотя работа больше связана с адаптивным веб-дизайном, поскольку разработчики будут создавать разные веб-сайты для разных размеров устройств, это все же легче по сравнению с адаптивным веб-дизайном.
Поскольку на рынке слишком много мобильных устройств, разработчики не обязательно могут включать все типы разрешений экрана. Это приводит к обрезке сайтов на небольших экранах при использовании адаптивного веб-дизайна.
Адаптивные веб-сайты немного медленны в загрузке, так как веб-сайт сначала должен выяснить, какое устройство и какое разрешение экрана используется. Исходя из этого, соответствующая версия веб-сайта загружается на экран устройства. В случае гибкого веб-дизайна используется единый код, который автоматически сокращается до мобильных экранов.
Возможно, вы также захотите посмотреть этот пост на MSDN под названием Почему я предпочитаю адаптивный веб-дизайн над отзывчивым веб-дизайном.
UPDATE: связанная страница недоступна в Microsoft. Вместо этого вы можете проверить SharePoint Отзывчивый веб-дизайн.
