Отзывчивая концепция шаблона веб-страницы плана дизайна

Добавляем отзывчивость (адаптивность).

В последнее время, появившаяся дисциплина, названная «отзывчивая архитектура», начала задаваться вопросом, как физические пространства могут отзываться на присутствие людей, находящихся в их близи? С помощью комбинации внедрённой робототехники и эластичных материалов, архитекторы экспериментируют с искусственными инсталляциями и стенными структурами, которые гнутся, растягиваются и расширяются в ответ на приближение людей. Датчики движения могут быть соединены с системами климат-контроля, чтобы поддерживать температуру в помещении и менять освещение, когда помещение наполняется людьми. Компании уже выпустили технологию «умного стекла», которое может автоматически становиться непрозрачным, когда в комнате достигается определённая концентрация людей, и таким образом обеспечивая им дополнительное ощущение личного пространства.

В своей книге «Интерактивная архитектура», Майкл Фокс и Майлс Кемп описали этот более адаптивный подход как «многосвязанную систему, в которой каждый участвует в беседе; продолжительный и созидательный обмен информацией». Подчеркну крайнюю значимость отличия: вместо создания неменяющихся пространств, которые определяют частный случай, они предлагают структуру, где живое и неживое может и должно взаимодействовать друг с другом.

И это наш случай. Вместо приспосабливания отдельных дизайнов для каждого их всё возрастающего числа устройств, мы можем рассматривать их как грани одного и того же случая. Мы можем проектировать дизайн для случая оптимального экрана, но внедрить технологии, которые не только добавят дизайнам растяжимость, но и адаптируют их к среде, которая их отображает. То есть, нам нужно осуществить отзывчивый веб-дизайн. Но как?

Я ничего не знаю, даже если всё знаю!

До начала курса я думал, что всё знаю и мне это всё не нужно. Но я уже в душе понимал, зачем мне этот курс — систематезировать то, что я уже знаю, получить волшебный пинок к действиям, получить практический опыт и опыт работы в команде. Мне повезло, что как раз перед началом курса прошёл DesignProsmotr, на котором я понял, что знания кроются в мелочах — там на лекциях и услышал то, что уже знал, но чётко сформулированными словами, ну и немного нового. И здесь, после первых занятий я услышал для себя формулировки, которые поставили знания и чувства по своим полочкам, обёрнутыми в красивую обложку.

Глава 4

24. http://www.w3.org/TR/CSS2/media.html

25. http://www.alistapart.com/articles/goingtoprint/

26. http://www.w3.org/TR/CSS21/media.html#media-types

27. http://www.w3.org/TR/css3-mediaqueries/

28. http://www.w3.org/TR/css3-mediaqueries/#media1

29. http://developer.apple.com/library/safari/#documentation/appleapplications/reference/SafariHTMLRef/Articles/MetaTags.html

30. https://developer.mozilla.org/en/Mobile/Viewport_meta_tag#Viewport_basics

31. http://www.theleagueofmoveabletype.com/fonts/7-league-gothic

32. http://windows.microsoft.com/ie9

33. http://ie.microsoft.com/testdrive/HTML5/CSS3MediaQueries/

34. http://www.quirksmode.org/mobile/#t14

35. http://blogs.msdn.com/b/iemobile/archive/2011/02/14/ie9-coming-to-windows-phone-in-2011.aspx

36. http://www.quirksmode.org/m/css.html#t021

37. http://code.google.com/p/css3-mediaqueries-js/

38. https://github.com/scottjehl/Respond

39. http://37signals.com/svn/posts/2661-experimenting-with-responsive-design-in-iterations

40. http://hicksdesign.co.uk/journal/finally-a-fluid-hicksdesign

41. http://thethemefoundry.com/shelf/

Глава 5

42. http://tripleodeon.com/2010/10/not-a-mobile-web-merely-a-320px-wide-one

43. http://jeffcroft.com/blog/2010/aug/06/responsive-web-design-and-mobile-context/

44. http://thefonecast.com/News/tabid/62/EntryId/3602/Mobile-shopping-is-popular-when-watching-TV-says-Orange-UK-research.aspx

45. http://www.lukew.com/ff/entry.asp?1263

46. http://www.flickr.com/photos/merlin/sets/72157622077100537/

47. http://www.lukew.com/ff/entry.asp?933

48. http://www.lukew.com/ff/entry.asp?1117

49. http://chrispederick.com/work/web-developer/

50. http://www.alistapart.com/articles/smartphone-browser-landscape/

51. http://www.flickr.com/photos/filamentgroup/5149016958/

52. http://yiibu.com/about/site/

53. http://www.hesketh.com/publications/inclusive_web_design_for_the_future/

54. http://www.the-haystack.com/2011/01/07/there-is-no-mobile-web/

55. http://matmarquis.com/carousel/

56. http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

57. http://en.wikipedia.org/wiki/Canons_of_page_construction

58. http://www.amazon.com/dp/0520250125/

59. http://www.amazon.com/dp/3721201450/

60. http://www.amazon.com/gp/product/0321703537/

61. http://www.fivesimplesteps.com/books/practical-guide-designing-grid-systems-for-the-web

62. http://www.markboulton.co.uk/journal/comments/a-richer-canvas

63. http://www.thegridsystem.org/

64. http://www.alistapart.com/articles/fluidgrids/

65. http://www.w3.org/TR/css3-mediaqueries/

66. https://developer.mozilla.org/En/CSS/Media_queries

67. https://github.com/filamentgroup/Responsive-Images

68. http://unstoppablerobotninja.com/entry/responsive-images/

69. http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/

70. http://clagnut.com/blog/268/

71. http://bryanrieger.com/issues/mobile-image-adaptation

72. http://www.alistapart.com/articles/dao

73. http://adactio.com/journal/1716/

74. http://adactio.com/journal/4443/

75. http://timkadlec.com/2011/03/responsive-web-design-and-mobile-context/

76. http://globalmoxie.com/blog/mobile-web-responsive-design.shtml

77. http://www.cloudfour.com/weekend-reading-responsive-web-design-and-mobile-context/

78. http://unstoppablerobotninja.com/entry/with-good-references/

79. http://unstoppablerobotninja.com/entry/toffee-nosed/

Глава 3

10. http://www.flickr.com/photos/uberculture/1385828839/

11. http://clagnut.com/sandbox/imagetest/

12. http://www.svendtofte.com/code/max_width_in_ie/

13. http://msdn.microsoft.com/en-us/library/ms532969.aspx

14. http://www.dillerdesign.com/experiment/DD_belatedPNG/

15. http://msdn.microsoft.com/en-us/library/ms532920(VS.85). aspx

16. http://unstoppablerobotninja.com/entry/fluid-images

17. http://www.yuiblog.com/blog/2008/12/08/imageopt-5/

18. http://www.alistapart.com/articles/fauxcolumns/

19. http://stopdesign.com/archive/2004/09/03/liquid-bleach.html

20. http://www.w3.org/TR/css3-background/#the-background-size

21. http://srobbin.com/jquery-plugins/jquery-backstretch/

22. http://www.bbc.co.uk/news/technology-11948680

23. http://bryanrieger.com/issues/mobile-image-replacement/

viewport

Мобильные устройства в наши дни, как правило, довольно прилично выполняют работу по отображению сайтов. Иногда им может понадобиться небольшая помощь, связанная, в частности, с определением размера области просмотра, масштабированием и разрешением сайта. Чтобы исправить это, Apple внедрил метатег viewport.

Рис. 4.04. Хотя это всего лишь демонстрация медиа-запросов, многие мобильные устройства до сих пор не знают о начальной ширине или масштабировании сайта. При этом они могут не препятствовать медиа-запросам.

Высота и ширина области просмотра

Использование метатега viewport со значениями height или width будет определять, соответственно, высоту или ширину области просмотра. Каждое значение принимает либо положительное целое число, либо ключевое слово. Для свойства height принимается ключевое слово device-height, а для свойства width принимается ключевое слово device-width. С помощью этих ключевых слов будет наследоваться ширина и высота устройства по умолчанию.

Для достижения наилучших результатов и красиво выглядящего сайта рекомендуется использовать значения устройства по умолчанию путём применения device-height и device-width.

Рис. 4.05. Разрешив устройствам узнать предполагаемую ширину сайта, device-width в данном случае, это позволило сайту принять правильный размер и подобрать любые точные медиа-запросы.

Масштабирование области просмотра

Для управления масштабированием сайта на мобильном устройстве и насколько пользователи могут его масштабировать, применяются свойства minimum-scale, maximum-scale, initial-scale и user-scalable.

initial-scale для сайта должно быть установлен в 1, так как это определяет соотношение между высотой устройства в портретной ориентации и размером области просмотра. Если устройство находится в альбомном режиме, то это будет соотношение между шириной устройства и размером области просмотра. Значением initial-scale всегда должно быть положительное целое число от 0 до 10.

Рис. 4.06. Использование целого числа больше 1 будет увеличить сайт больше, чем масштаб по умолчанию. Вообще говоря, это значение наиболее часто устанавливается в 1.

Значения minimum-scale и maximum-scale определяют, насколько область просмотра может масштабироваться в меньшую и большую стороны. При использовании minimum-scale значение должно быть положительным целым числом меньше или равным initial-scale. Используя те же рассуждения, значение maximum-scale должно быть положительным целым числом больше или равным initial-scale. Оба значения также должны быть от 0 до 10.

Вообще говоря, эти значения не должны быть установлены на то же значение, что и initial-scale. Это позволит отключить любое масштабирование, которое может быть выполнено взамен применения значения user-scalable. Установка значения user-scalable в no отключит любое масштабирование. В качестве альтернативы, установив значение user-scalable в yes мы включим масштабирование.

Выключение возможности масштабирования сайта является плохой идеей. Это вредит доступности и удобству, мешая людям с ограниченными возможностями просматривать сайт по желанию.

Разрешение области просмотра

Давая браузеру решать, как масштабировать сайт основываясь на любых значений масштаба области просмотра, обычно делают один трюк. Когда требуется больше контроля, в частности, над разрешением устройства, может быть использовано значение target-densitydpi. target-densitydpi принимает несколько значений, включая device-dpi, high-dpi, medium-dpi, low-dpi или конкретное число точек на дюйм.

Значение target-densitydpi применяется редко, но оно чрезвычайно полезно, когда необходим попиксельный контроль.

Комбинация значений

Метатег viewport принимает отдельные значения наряду с множеством значений, позволяя установить несколько свойств за раз. Установка нескольких значений требует разделения запятыми в значении атрибута content. Одно из рекомендованных значений приведено ниже, в котором используются свойства width и initial-scale.

Рис. 4.07. Комбинация width=device-width и initial-scale=1 обеспечивает начальный размер и требуемое масштабирование.

Правило @viewport

Поскольку метатег viewport вращается преимущественно вокруг установки стилей, которые определяют как должен отображаться сайт, то рекомендуем переместить его из HTML в правило @viewport в CSS. Это помогает сохранить стиль отдельно от содержания, обеспечивая более семантический подход.

В настоящее время в некоторых браузерах уже реализовано правило @viewport, однако поддержка не так повсеместна. Ранее рекомендованный метатег viewport будет выглядеть следующим правилом в CSS.

«Резиновая» (тянущаяся) основа.

Давайте рассмотрим для примера такой макет дизайна. Я создал простую страницу гипотетического магазина: это простой двухколоночный макет, сделанный в резиновой (тянущейся) вёрстке и в котором добавлено несколько растягивающихся изображений. Как давний сторонник нефиксированных макетов дизайна, я давно чувствовал, что они более обещающие на будущее, только потому что они были не зависимы от плана макета. И в определённой степени это верно: тянущиеся макеты никак не ориентируются на ширину окна браузера, и прекрасно адаптируются к устройствам как с горизонтальной, так и с вертикальной ориентацией.

Огромные картинки остаются огромными. Наш макет, хотя и тянется, но не отвечает как следует на изменения разрешения или размеры устройства, в котором отображается.

Но ни какой макет, будь то фиксированный или тянущийся, не масштабируется плавно под контекст, для которого он изначально предназначался. Макет в нашем примере, прекрасно выглядит, когда мы растягиваем окно браузера, но на малых разрешениях (узкая ширина окна) начинают выявляться некрасивости. Когда мы просматриваем его на разрешении меньше, чем 800×600, иллюстрация в логотипе, начинает обрезаться, текст в пунктах меню может переноситься неожиданным способом, а картинки внизу становятся слишком мелкими, чтобы различить, что на них изображено. И это происходит не только в случае уменьшения разрешения: если просматривать дизайн на очень широком экране, то картинки вырастают до громоздких размеров, задавливая собой окружающий текст (товарищ, Вас слишком много!).

В общем, наш тянущийся дизайн работает достаточно хорошо в десктопном центрированном контексте, для которого он и был задуман, но не оптимизирован на случаи, выходящие за рамки десктопных браузеров.

Чем занимается веб-дизайнер

Что из себя представляет рабочий процесс дизайнера?

  • Дизайнер получает данные от заказчика — зачем нужен сайт, как он будет работать, какие пользователи будут на него заходить. Хороший вариант, если заказчик точно знает, что нужно. Но так бывает не всегда, поэтому дизайнер должен сам задавать вопросы и получить нужные данные. Задачу, требования к сайту и ответы на вопросы дизайнер записывает в бриф.
  • Веб-дизайнер создает наброски или прототипы будущего сайта: на бумаге или в специальных программах. Прототипы больше похожи на схемы, где указывается расположение основных элементов на страницах сайта.

Создание сайта начинают с прототипов, чтобы посмотреть все варианты расположения элементов и согласовать с заказчиком.

Важно!

Прототип легче изменить, чем нарисованный макет, поэтому вопросы по структуре и расположению решают на стадии прототипирования.


Wires by Charlie Waite

  • На основе прототипов дизайнер рисует цветной макет. Тут уже можно работать над сочетаниями цветов, добавлять анимацию.
  • Готовый макет дизайнер передает заказчику или разработчикам, которые перенесут его на сайт.

Статический дизайн

«Статичным» или «статическим» называется сайт, который состоит из неизменяемых HTML-страниц. Такой сайт подразумевает наличие закрепленной темы с фиксированной шириной и чаще всего содержит одну или буквально несколько страниц. Чтобы отобразить такой сайт по центру экрана достаточно 1000 px. Контент всегда будет выравниваться строго по центру.

Также стоит учесть, что обновить статический сайт может только человек, обладающий хорошим опытом веб-разработки. В нём нет админпанели, поэтому все изменения нужно делать через исходный код.

Преимущества статического дизайна:

  • Экономия времени и сил при разработке;
  • Требует меньше нагрузки на хостинг;
  • Вывод картинок, видео-материалов, баннеров можно осуществлять без опасения, что они перекроют друг друга или сместятся при разном разрешении монитора.

Недостатки статического дизайна:

  • На мобильном устройстве сайт будет отображаться с горизонтальной полосой прокрутки;
  • Широкоформатные мониторы отображают статический дизайн довольно убого — вариант не для тех, кто стремится к эффектности.

Статичных сайтов раньше было намного больше – появление и развитие CMS способствовало сокращению их количества в пользу динамических. Примеры статических сайтов:

  • www.9boninnes.co.za
  • www.quayside906.co.za
  • www.fibercom.co.za
  • www.blouberg-holiday.co.za

Знакомимся с «запросами к среде» (media query).

Со времён CSS 2.1, наши списки стилей (они же таблицы стилей) обрели некоторые возможности опознавания устройств посредством типов запросов (media types). Если вы когда-нибудь писали список стилей для печати, то вы уже сталкивались с такими понятиями, как:

В надежде, что мы планируем создать что-то большее, чем просто вид страницы для её печати, CSS-спецификация обеспечила нас рядом (media types), каждый из которых направлен на определённый класс устройств. Но большинство браузеров и устройств никогда в действительности не охватывали все эти спецификации, оставляя многие из запросов внедрёнными неполностью, или вовсе их игнорируя.

К счастью, консорциум W3C ввёл медиа-запросы (запросы к средам, media запросы) как часть CSS3-спецификации, ориентируясь на перспективу media-запросов в будущем. Запрос к среде позволяет нам не просто определить классы устройств, на которых будет показываться наш разработанный дизайн, но также и физические характеристики этих устройств. Например, следуя недавнему подъёму мобильного WebKit’а, медиа-запросы стали популярной техникой на стороне клиента для доставления подстроенной таблицы стилей для iPhone, Android и им подобных. Чтобы это сделать, мы можем добавить запрос в соответствующий атрибут «media» нашей таблицы стилей:

Запрос содержит 2 компонента:

  1. тип медиа (screen)
  2. соответствующий запрос заключённый в скобки, содержащий определённую медиа-особенность (max-device-width), которую хотим проверить, с указанием конечного значения (480px).

Говоря простым русским, мы спрашиваем у устройства о его горизонтальном разрешении (max-device-width), не выходит ли оно за рамки 480px. Если наша проверка успешна, то есть, если мы имеем случай устройства с маленьким экраном, как iPhone – тогда устройство загрузит shetland.css. Иначе, этот метатег будет проигнорирован вовсе.

Дизайнеры экспериментировали с макетами для разных разрешений и прежде, главным образом опираясь на JavaScript решения, подобные прекрасному скрипту от Cameron Adams. Но медиа-запросы предоставляют ряд медиа функций, которые выходят далеко за рамки только экранных разрешений, предоставляя широкий

И что ещё важно, вы можете проверять сразу  несколько свойств одним запросом, перечисляя их цепочкой друг за другом через слово «and»:

Кроме того, мы не обязаны включать все запросы в метатеги , а можем включить их в наш CSS файл, как часть правила @media:

@media screen and (max-device-width: 480px) {
  .column {
    float: none;
  }
}

Или как часть директивы @import:

@import url("shetland.css") screen and (max-device-width: 480px);

В каждом случае результат будет одинаков: если устройство проходит проверку, запрашиваемую нашим media-запросом, то соответстующие CSS применяются к нашей разметке. Media-запросы для остальных, кто проверку не проходит, остаются условными комментариями. Вместо того, чтобы нацелиться на конкретную версию конкретного браузера, мы можем «хирургически» поправить пункты нашего макета, чтобы он увеличил свой охват, и вышел за рамки первоначального, идеального разрешения.

Помощь онлайн

Вопросы применения сетки для веб-дизайна рассматриваются в следующих источниках:

• Запись в блоге Марка Болтона A Richer Canvas: http://bkaprt.com/rwd/62/

• Веб-сайт The Grid System: http://bkaprt.com/rwd/63/

• Моя статья для A List Apart о гибкой сетке (Fluid Grids): http://bkaprt.com/rwd/64/

Если вы ищете информацию о медиазапросах, то следующие две ссылки – это действительно фантастическое чтение:

• Спецификации медиазапросов World Wide Web Consortium (W3C): http://bkaprt.com/rwd/65/

• Справочные материалы разработчиков Mozilla на тему медиазапросов: http://bkaprt.com/rwd/66/

Если вы работаете с изображениями и другими средствами медиа в гибкой среде, рекомендую вам для ознакомления:

• Скрипт Responsive Images от Filament Group: http://bkaprt.com/rwd/67/, а также соответствующие записи в блоге: http://bkaprt.com/rwd/68/, http://bkaprt.com/rwd/69/

• Эксперименты Ричарда Раттера с изменениями размеров изначальных изображений: http://bkaprt.com/rwd/70/

• Эксперименты Брайана Ригера с адаптацией изображений: http://bkaprt.com/rwd/71/

Дополнительную информацию, как и когда взять на вооружение подход отзывчивого дизайна, можно найти здесь:

• Семинар Джона Олсоппа A Dao of Web Design: http://bkaprt.com/rwd/72/

• Статья Люка Вроблевски на тему «Сначала мобильные»: http://bkaprt.com/rwd/47/, а также статьи на его сайте: http://www.lukew.com/ff/archive.asp?tag&mobilefirst

• Работы Джереми Кита One Web: http://bkaprt.com/rwd/73/ и Context: http://bkaprt.com/rwd/74/

• Запись Тима Кадлека в статье Responsive Web Design and Mobile: http://bkaprt.com/rwd/75/

• Блоги Джоша Кларка и Джейсона Григсби. Джош (http://bkaprt.com/rwd/76/) и Джейсон (http://bkaprt.com/rwd/77/) постоянно ведут интересную дискуссию, которая поможет вам понять, в каких случаях и для каких проектов необходим отзывчивый дизайн.

Растровые vs векторные изображения

Имеет ли ваше изображение множество мелких деталей и впечатляющих эффектов? Если да, то используйте растровый формат. В противном случае используйте векторный формат. Для растровых изображений используйте форматы jpg, png или gif, для векторных лучшим выбором будут SVG и иконочные шрифты. Каждый из форматов имеет свои преимущества и недостатки. В любом случае, помните о размере изображений — ни одна картинка не должна попасть в онлайн, не будучи оптимизированной (сжатой). Векторные изображения зачастую избавлены от лишнего размера, однако они не поддерживаются старыми браузерами. Также стоит помнить, что если векторное изображение содержит много деталей, то оно может весить больше растрового.

Сначала мобильные

Один из популярных методов использования медиа-запросов называется «сначала мобильные». Данный подход включает в себя использование стилей, ориентированных на более мелкие экраны как стили по умолчанию для сайта, а затем использование медиа-запросов, чтобы добавить стили по мере роста экрана.

Вера в мобильные заключается в том, что пользователь мобильного устройства обычно использует меньший экран и не должен загружать стили для настольного компьютера, которые перепишут мобильные стили позже. Это пустая трата трафика. Трафик это ценность для любых пользователей, которые ищут реактивный сайт.

Подход «сначала мобильные» также учитывает в дизайне ограничения мобильного пользователя. В недалеком будущем большинство интернет-соединений будет сделано на мобильных устройствах. План состоит в том, что для этого соответственно и развивать важный мобильный опыт.

Контрольные точки медиа-запросов с учётом «сначала мобильные» могут выглядеть следующим образом.

Кроме того, загрузка ненужных ресурсов может быть остановлена с помощью медиа-запросов. Вообще говоря, удаление теней, градиентов, трансформации и анимации в мобильных стилях сама по себе неплохая идея. При их чрезмерном применении они вызывают тяжёлую нагрузку и даже могут сократить время работы батареи.

Демонстрация

Добавив медиа-запросы к нашему предыдущему примеру, мы перепишем несколько стилей, чтобы макет выглядел лучше на экранах меньше 420 пикселей в ширину. Переписывая этот код, мы вначале добавим мобильные стили по умолчанию, затем медиа-запросы для настройки экранов с шириной более 420 пикселей, следующим образом:

Сначала мобильные

Заметьте, здесь такое же количество кода, что и раньше. Единственным исключением является то, что мобильные устройства требуют только единственную запись CSS. Остальные стили отложены и загружаются только на больших экранах и сделано это без переписывания начальных стилей.

Ссылка на основную публикацию