Адаптивный дизайн (также известный как «адаптивный» дизайн), где одна и та же веб-страница представляет собой лучшую версию двух или более макетов, созданных вручную, в зависимости от ширины браузера, является самым сильным вариантом для большинства веб-сайтов. Чтобы понять почему, полезно взглянуть на все опции, доступные веб-дизайнерам:
Исправлены макеты
Фиксированная ширина страницы, при которой ширина содержимого одинакова независимо от ширины браузера, обеспечивает одинаковый внешний вид на всех устройствах и может потребовать меньше кодирования, мышления и обслуживания, чем более гибкие проекты.
Некоторые считают, что макеты с фиксированной шириной - это пережитки ушедшей эпохи, когда люди жаждали совершенства пикселей и одинакового внешнего вида во всех браузерах. Энди Кларк, автор Hardboiled Web Design, считает, что этот образ мышления мертв:
«В прошлом это было стандартной практикой бороться трудно создать сайт, который выглядел и работал одинаково во всех браузерах -. Независимо от их возможности Чтобы сделать это означало идти на компромиссы и избегать использования технологий, не поддерживаемых всеми браузерами.
Это вкрутую?
Не обманывай себя, сладкие щеки. Это не способ развить наше ремесло или построить лучшую сеть. Такое старомодное мышление сдерживает нас. Это заставляет нас оправдываться за то, что мы не делаем то, что, как мы знаем, является правильным. Худшее, что мы, нынешние хранители Интернета, можем сделать, - это позволить всему ограничивать то, что возможно ».
- Энди Кларк, Веб-дизайн вкрутую , стр. 6 [PDF-версия доступна здесь ]
В то время как некоторые рассматривают фиксированные макеты как высоту лени, очень умные команды дизайнеров по-прежнему выбирают проекты с фиксированной шириной поверх плавных или адаптивных макетов. Apple, например, в настоящее время использует тот же макет для iMac, что и для iPad и iPhone. Почему компания, ответственная за доведение мобильного веб-браузера до широких масс, не оптимизирует свой веб-сайт для мобильных устройств?
Потому что не думает, что это нужно.
Вместо того чтобы адаптировать свой веб-сайт для небольших экранов, Apple создала аппаратное и программное обеспечение для удобной работы с широкими веб-сайтами на этих экранах. Apple считает, что «оптимизирован для мобильных устройств» лучше всего использовать в собственном приложении, а не в окне браузера. Вот почему он предлагает приложение Apple Store вместо того, чтобы предлагать оптимизированный для мобильных устройств интернет-магазин. И именно поэтому он поощряет издателей предлагать журнальные приложения на специализированных сайтах. Текущая философия Apple в области веб-дизайна ясна: один макет, управляющий ими, работает нормально. Для всего остального есть приложение для этого.
Только по этой причине некоторые утверждают, что фиксированные макеты остаются такими же актуальными, как и раньше; они сказали бы, что гибкие и адаптивные макеты - это просто пробелы, пока мы ждем улучшения программного обеспечения для мобильных браузеров, а HTML и JavaScript развивают и искушают разработчиков отказаться от магазинов изолированных приложений.
Однако, на мой взгляд, прокрутка по принципу пинч-тап-перетаскивание в интернете в течение любого промежутка времени на мобильном устройстве не доставляет большого удовольствия, даже на iPhone. Если вы считаете, что лучший веб-опыт - это то, что делает чтение, публикацию и взаимодействие с веб-сайтами приятным занятием, а не рутинным занятием, независимо от того, какое устройство вы используете, в какой-то момент вы должны согласиться с тем, что содержание контента предназначено для каждого из них. посетитель стоит рассмотреть.
Расположение жидкостей
Жидкие макеты, в которых ширина страницы перемещается по экрану (часто до наложенной максимальной ширины), обещают лучший опыт на разных платформах, предоставляя контент с шириной, более подходящей для области просмотра.
На практике жидкие макеты вызывают больше проблем, чем решают, как отмечает Кэмерон Молл в этом квипе:
«... гибкие конструкции решают все проблемы с макетом почти так же, как компьютеры делают офисы безбумажными, то есть не делают».
- Кэмерон Молл, «Должны ли все объекты быть текучими?», Сентябрь 2006 г.
Принимая изменчивый макет, вы отказываетесь от контроля над своим дизайном и принимаете, что текст будет перематываться, изображения будут перекомпоновываться, длины линий будут непредсказуемо изменяться, текст, изображения и элементы навигации могут сжиматься вместе при небольшой ширине, а столбцы будут прыгать и перемещаться вокруг, чтобы вас злить.
Некоторые могут сказать, что изменчивая компоновка также является ленивым вариантом. Это подход дробовика к адаптивному веб-дизайну. Вместо того, чтобы предлагать индивидуальный подход к трем или четырем тщательно продуманным проектам с фиксированной шириной, вы предлагаете непредсказуемый опыт в надежде, что он будет работать на больших и маленьких экранах, и, надеюсь, закроете все пробелы, которые вы не в полной мере рассмотрели между.
Это не делает плавные макеты бесполезными. Есть способы заставить их работать. 456 Бэриа Санкт блога, например, принимает макет жидкости до заданной ширины, после чего она использует фиксированную один для чего - нибудь большего. И при очень небольшой ширине боковая панель убирается, чтобы использовать один столбец, который облегчает чтение на маленьких экранах. Но это уже не текучая планировка. Это что-то лучше. Это адаптивный дизайн.
Адаптивные макеты
«Адаптивный» или «адаптивный» макет - когда на одной и той же веб-странице представлена одна версия из двух или более созданных макетов в зависимости от ширины браузера посетителя - является ключевой частью прогрессивного улучшения, целью которого является сделать веб-сайт наиболее привлекательным это может для каждого посетителя.
По словам Аарона Густафсона, автора Adaptive Web Design, выбор адаптивного макета - это «отличное обслуживание клиентов ». По его словам, если мы хорошо спроектируем наши сайты, посетителям должен быть предоставлен отличный опыт, не осознавая, что мы суетимся из них
«Как веб-дизайнеры и разработчики, мы должны стремиться быть такими же хорошими в нашей работе, как и этот внимательный, ненавязчивый официант, но это непростая задача. Так же, как официант не имеет представления, потребует ли клиент частого входа через дверь» Пополнение или немного, у нас нет возможности узнать потребности конкретного пользователя, когда они приходят на наш сайт. Вместо этого мы должны расти, чтобы удовлетворить эти потребности. Если мы действительно хороши, мы можем сделать это без наших клиентов, даже не осознавая, что мы уделив им особое внимание. К счастью, благодаря прогрессивному усовершенствованию подхода, ориентированного на пользователя и контент (в отличие от новейшего подхода браузера - постепенного ухудшения), это легко достижимо ».
- Аарон Густафсон, Adaptive Web Design, стр. 12 [PDF-версия доступна здесь ]
Осознание того, что наша работа как веб-дизайнеров состоит в том, чтобы приспосабливаться к нашим посетителям, а не заставлять их приспосабливаться к нам - как, возможно, заставит нас верить Apple, - является довольно недавним развитием в веб-дизайне. Это, на мой взгляд, своего рода ренессанс: мы закончили черри, выбирая хорошие привычки из многолетнего дизайна печати. Теперь мы должны выбросить кандалы, работающие в заранее определенном пространстве на печатной странице.
Если когда-то мы рассматривали браузер как фиксированный холст, то теперь мы признаем, что никакого определенного холста вообще не существует, и это становится все более очевидным из огромного сочетания размеров экрана, которое вы, без сомнения, начинаете видеть в статистике посетителей. , Вместо того, чтобы относиться к каждому новому устройству как к уникальному «размеру страницы» для цели (а затем к необходимости собирать войска, когда выходит новое устройство), мы можем следовать более условным будущим соглашениям.
Мы можем думать с точки зрения групп - «большие», «средние» и «маленькие» - вместо того, чтобы думать о конкретных телефонах и планшетах, затем проектировать сайты так, чтобы они выглядели наилучшим образом в этих группах. Какие бы новые устройства не выходили, они будут вписываться в ту или иную полосу, и - даже если они находятся прямо на границе между двумя полосами - мы все равно имеем больший контроль над опытом, чем если бы мы использовали фиксированную или текучую среду. раскладка.
В отзывчивом веб-дизайне Итан Маркотт предлагает этот призыв к оружию:
«Мы должны отпустить.
Вместо того чтобы создавать отдельные проекты, каждый из которых предназначен для конкретного устройства или браузера, мы должны вместо этого рассматривать их как аспекты одного и того же опыта. Другими словами, мы можем создавать сайты, которые не только более гибки, но и могут адаптироваться к медиа, которые их отображают.
Короче говоря, нам нужно практиковать
адаптивный веб-дизайн. Мы можем использовать гибкость, присущую Интернету, не отказываясь от контроля, который требуется нам как дизайнерам. Все благодаря внедрению в нашу работу основанных на стандартах технологий и небольшому изменению нашей философии в отношении онлайн-дизайна ».
- Итан Маркотт, Адаптивный веб-дизайн, стр. 8 [PDF-версия доступна здесь ]
Но какие группы вы используете? Итан Маркотт рекомендует следующие три в адаптивном веб-дизайне. (Чтобы узнать, что они делают, и понять предостережения, вы можете взять книгу. )
@media screen and (max-width: 768px) {
...
} @media screen and (max-width: 520px) {
...
} @media screen and (min-width: 1200px) {
...
}
Существует также ряд CSS-фреймворков, предназначенных для помощи в создании адаптивных веб-сайтов, в том числе Less Framework Джони Корпи .
Вместо использования произвольных точек останова, возможно, лучше позволить дизайну вашего сайта определять группы. Уменьшите ширину экрана вашего браузера и, когда ваш дизайн ломается, эта ширина должна быть одной из ваших «точек останова». Продолжайте уменьшать ширину и добавляйте точки останова с помощью медиазапросов CSS, пока ваш дизайн не будет хорошо выглядеть при любой ширине. Таким образом, ваш дизайн будет хорошо смотреться на всех устройствах, а не только на нескольких размерах экрана, в которые вы пытались его вставить. Если вы используете Chrome, включив Инструменты разработчика («Просмотр»> «Разработчик»> «Инструменты разработчика») и уменьшив ширину браузера, вы получите полезную информацию о текущей ширине в верхнем правом углу, которую вы можете использовать, чтобы определить, где должны быть ваши точки останова.
Другой популярный подход - адаптивный дизайн Mobile First , когда ваша основная таблица стилей обрабатывает стили для самых маленьких устройств, а медиазапросы имеют дело с большей шириной экрана, а не наоборот. Это может привести к более высокой производительности на мобильных устройствах, особенно если вы используете много фоновых изображений CSS. (Вы создадите точки останова таким же образом - просто начните с минимальной ширины вашего браузера и работайте вверх. И не забудьте протестировать столько реальных устройств, сколько сможете - подумайте о посещении открытого устройства Лаб .)
Короче говоря, когда все сделано хорошо, адаптивный дизайн - это радость и опыт как веб-дизайнера, так и пользователя общего сада. Возьмем сайт японской фирмы Information Architects , например:
На айфоне
На iPad
На iMac
Как и предсказывал Аарон Густафсон, вы даже не узнаете, что вас обслуживают, пока не увидите дизайн на той же странице.
Опыт вряд ли может быть более приятным в каждом случае; вам не нужно думать или взаимодействовать со страницей, чтобы начать читать содержимое, тратить время на размышления о том, почему на вашем экране это странно выглядит, или увеличивать масштаб, чтобы увидеть элементы навигации, прежде чем вы сможете их коснуться, потому что кто-то уже решил эти проблемы для вы. И именно поэтому адаптивный дизайн почти всегда превосходит другие варианты.