Отзывчивый и адаптивный веб-дизайн - это оба метода создания многоуровневых веб-сайтов, которые хорошо работают на разных размерах экрана. Хотя отзывчивый веб-дизайн рекомендуется Google и является более популярным из двух подходов, оба этих метода для веб-дизайна с несколькими устройствами имеют свои сильные стороны и их слабости.
Давайте рассмотрим различия между адаптивным и адаптивным веб-дизайном, в частности, сосредоточив внимание на этих ключевых областях:
- Простота разработки
- Уровень контроля над дизайном
- Ширина поддержки устройства / экрана
- Как будущее дружественное решение
- Общая скорость загрузки и производительность сайта
Некоторые определения
Прежде чем мы приступим к нашим сравнительным сопоставлениям адаптивного и адаптивного веб-дизайна, давайте рассмотрим определение этих двух подходов на высоком уровне.
На адаптивных веб-сайтах есть гибкий макет, который изменяется и адаптируется независимо от используемого размера экрана. Медиа-запросы позволяют реагировать на сайты, которые могут даже измениться, «на лету», если размер браузера изменяется.
Адаптивный дизайн использует фиксированные размеры на основе предварительно определенных точек останова, чтобы предоставить наиболее подходящую версию макета для размера экрана, которая обнаруживается при первой загрузке страницы.
Используя эти широкие определения, давайте обратимся к нашим ключевым направлениям.
Простота развития
Самое существенное различие между адаптивным и адаптивным веб-дизайном заключается в том, как эти решения применяются к веб-сайту. Поскольку отзывчивый дизайн создает полностью жидкий макет, его лучше использовать в проектах, где вы перепроектируете сайт с нуля. Пытаться модифицировать код существующего веб-сайта, чтобы стать отзывчивым, часто является изнурительным делом, потому что у вас просто нет такого уровня контроля, который у вас был бы, если бы вы разрабатывали этот код с нуля и учитывали гибкий дизайн на самых ранних этапах этот процесс. Это означает, что когда вы модифицируете сайт, чтобы быть отзывчивым, вы вынуждены идти на компромиссы, чтобы оставаться в пределах существующей кодовой базы.
Если вы работаете с существующим сайтом с фиксированной шириной, адаптивный подход означает, что вы можете оставить размер, который был создан для неповрежденного сайта, и добавить дополнительные адаптивные точки останова по мере необходимости. В некоторых случаях, если бюджет проекта мал, и если он будет выполнять только небольшой объем работ по разработке, вы можете выбрать только добавление новых адаптивных точек останова для меньших размеров экрана / мобильно-ориентированного размера. Это означает, что вы позволили бы более крупным экранам использовать один и тот же макет - возможно, версию прерывания 960, изначально предназначенную для этого сайта.
Подход к адаптивному подходу заключается в том, что вы можете лучше использовать существующий код сайта, но одним из недостатков является то, что вы создаете разные шаблоны макетов для каждой точки останова, которую вы хотите поддерживать. Это будет иметь последствия для рабочей нагрузки, необходимой для разработки и поддержания этого решения в долгосрочной перспективе.
Управление дизайном
Одной из сильных сторон чувствительных веб-сайтов является то, что их текучесть позволяет им адаптировать и поддерживать все размеры экрана, а не только заданные контрольные точки, определенные в адаптивном подходе. Реальность, однако, заключается в том, что отзывчивые сайты могут отлично смотреться при определенных размерах экрана (обычно это размеры, соответствующие популярным устройствам, доступным на рынке), но визуальный дизайн часто ломается между этими популярными разрешениями.
Например, сайт может отлично смотреть на широкоэкранную компоновку 1400 пикселей, средний размер экрана - 960 пикселей, а на маленьком экране - 480 пикселей, но как быть между состояниями этих размеров? Как дизайнер, вы не имеете никакого контроля над этими промежуточными размерами, и визуальный вид страницы с этими размерами часто бывает меньше идеального.
С адаптивным веб-сайтом вы имеете гораздо больше контроля за дизайном различных используемых макетов, поскольку они являются фиксированными размерами на основе установленных контрольных точек. Эти неуклюжие межгосударственные состояния больше не являются проблемой, потому что вы тщательно разработали каждый, «смотря» (что означает отображение каждой точки останова), которое будет доставлено посетителям.
Такой привлекательный, как этот уровень управления проектами может звучать, вы должны знать, что он идет по цене. Да, вы полностью контролируете внешний вид каждой точки останова, но это означает, что вы должны инвестировать время проектирования, необходимое для проектирования для каждого из этих уникальных макетов. Чем больше точек останова вы выбираете для дизайна, тем больше времени вам нужно потратить на этот процесс.
Ширина поддержки
И отзывчивый, и адаптивный веб-дизайн пользуются довольно надежной поддержкой, особенно в современных браузерах.
Для адаптивных веб-сайтов требуются либо компоненты на стороне сервера, либо Javascript для определения размера экрана. Очевидно, что если для адаптивного сайта требуется Javascript, это означает, что браузер должен иметь его, чтобы сайт работал правильно. Это может быть не очень важно для вас, поскольку большинство людей будут иметь Javascript в своих браузерах, но в любой момент, когда сайт имеет критическую зависимость от чего-либо, следует отметить.
Реагирующие веб-сайты и медиа-запросы, которые их приводят, будут хорошо работать во всех современных браузерах. Единственные проблемы, с которыми вы столкнетесь, - это самые старые версии Internet Explorer, так как версии 8 и ниже не поддерживают мультимедийные запросы. Чтобы обойти это, часто используется многозадачность Javascript, что означает, что здесь есть зависимость от Javascript, по крайней мере для тех устаревших версий IE.Опять же, это может не сильно беспокоить вас, особенно если ваша аналитика сайта показывает, что вы не получаете много посетителей, используя те старые версии браузера.
Будущее дружелюбие
Гибкий характер реагирующих веб-сайтов дает им преимущество перед адаптивными сайтами, когда дело доходит до будущего. Это связано с тем, что эти чувствительные сайты не построены для размещения только ранее установленного набора точек останова. Они приспосабливаются к все экраны , в том числе те, которые сегодня не могут быть на рынке. Это означает, что отзывчивые сайты не должны быть «исправлены», если новое разрешение экрана внезапно станет популярным.
Рассматривая невероятное разнообразие ландшафта устройства (по состоянию на август 2015 года на рынке было более 24 000 различных устройств Android), наличие сайта, который делает все возможное для размещения этого широкого спектра экранов, имеет критически важное значение для будущего. Это связано с тем, что этот ландшафт вряд ли станет менее разнообразным в будущем, а это означает, что проектирование конкретных экранов или размеров станет невозможным, если мы еще не достигли этой реальности.
С другой стороны этого сценария сравнения, если сайт адаптивен и он не вмещает новые разрешения, которые могут стать важными на рынке, тогда вы можете быть вынуждены добавить эту точку останова на созданные вами сайты. Это добавляет время проектирования и разработки к проектам, и это означает, что эти адаптивные сайты должны постоянно контролироваться, чтобы гарантировать, что на рынок не будут введены новые точки останова, которые должны быть добавлены на сайт. Опять же, с разнообразием устройств, являющимся тем, чем оно является, необходимость постоянного контроля за новыми размерами и возможного размещения их с новыми точками останова является постоянной проблемой, которая будет влиять на работу, которую вы должны поддерживать на сайте, и стоимость этого обслуживания для компании или организации, для которых предназначен сайт.
Спектакль
Отзывчивый веб-дизайн давно обвинялся (несправедливо, поэтому во многих случаях) быть плохим решением с точки зрения скорости / производительности загрузки. Во многом это связано с тем, что в начале этого подхода многие веб-дизайнеры просто привязывали небольшие запросы к экранам на существующий CSS-сайт сайта. Это вынуждало изображения и ресурсы, предназначенные для больших экранов, доставляться на все устройства, даже если эти меньшие экраны не использовали их в своих окончательных макетах. Решительный дизайн прошел долгий путь с тех пор, и в действительности реальность заключается в том, что на сайтах с качественным реагированием сегодня не страдают проблемы с производительностью.
Медленная скорость загрузки и раздутые веб-сайты не являются отзывчивой проблемой веб-сайта - это проблема, которая может быть найдена на всех веб-сайтах. Слишком тяжелые изображения, каналы из социальных сетей, чрезмерные сценарии и т. Д. И взламывают сайт вниз, но как быстродействующие, так и адаптивные веб-сайты могут быть созданы для быстрой загрузки. Конечно , они также могут быть сконструированы таким образом, чтобы обеспечить приоритет производительности, но это не является признаком самого решения, а скорее отражением команды, которая участвовала в разработке самого сайта.
За пределами макета
Одним из наиболее привлекательных аспектов адаптивного веб-дизайна является то, что вы не только контролируете дизайн сайта для заданных контрольных точек, но и ресурсы, которые предоставляются для этих версий сайта. Например, это означает, что изображения сетчатки могут быть отправлены только на устройства сетчатки, в то время как экраны с сетчатой сетью получают более подходящие изображения, размер которых меньше по размеру. Другие ресурсы сайта (файлы Javascript, стили CSS и т. Д.) Могут быть надежно доставлены только тогда, когда они понадобятся и будут использоваться.
Это использование адаптивного веб-дизайна выходит далеко за рамки простого уравнения «если вы обновляете веб-сайт, адаптивный подход может быть более простым». Все сайты, включая полную редизайн, могут извлечь выгоду из более разумного подхода к более адаптированному опыту.
Этот сценарий демонстрирует тонкую природу этой «ответной или адаптивной» дискуссии. Хотя верно, что адаптивный подход может быть лучше приспособлен, чем реагировать на модернизацию сайта, он также может стать отличным решением для полной реорганизации. Аналогичным образом, в некоторых случаях отзывчивый подход может быть добавлен в кодовую базу существующего сайта, что дает этому сайту все преимущества полностью отзывчивого подхода.
Какой подход лучше?
Когда дело доходит до адаптивного и адаптивного веб-дизайна, нет четкого «победителя», хотя отзывчивость, безусловно, является более популярным подходом. По правде говоря, «лучший» подход зависит от потребностей конкретного проекта. Кроме того, это не обязательно должно быть «или / или» ситуацией. Есть много веб-профессионалов, которые строят сайты, которые сочетают в себе лучшие из гибкого веб-дизайна (ширина жидкости, будущая поддержка) с сильными сторонами адаптивного дизайна (лучший дизайн управления, умная загрузка ресурсов сайта).
Этот подход обычно известен как RESS (адаптивный веб-дизайн с компонентами на стороне сервера), этот подход показывает, что на самом деле нет «одного размера, подходящего для всего решения». У обоих адаптивного веб-дизайна и адаптивности есть свои сильные стороны и их проблемы, поэтому вам нужно определить, какой из них будет работать лучше всего для вашего конкретного проекта, или если гибридное решение может действительно вам подойдет.
