Дизайн html: Основы HTML, CSS и веб-дизайна

Содержание

Веб дизайн: html | maximsoldatkin.com

Стоит ли для работы в веб-дизайне изучать html/css и заниматься версткой?

У меня есть для вас два примера.

Эти две картины (рис.1) нарисованы только карандашом, они черно-белые, выполнены в определенной стилистике. При их рисовании использовался один лишь инструмент – карандаш. И они обе прекрасны. То есть пользуясь только одним инструментом можно делать удивительные вещи.

Рис.1 Рисунок карандашом

И знания html/css это такой же инструмент. Во-первых, дизайнер html/css – это инструмент, во-вторых дизайнер интерфейсов создает взаимодействие. Картинки давно уже недостаточно.

О чем я говорю? Сейчас поясню.

В веб дизайне html и css даст вам понимание анимации, например (рис.2). То есть в последних версиях css есть такая функция как transition. Важно знать, что такой инструмент существует и можно таки вещи делать с его помощью. Если вы не знаете его, то вы соответственно ограничены в картинках и можете делать только статичные переходы.

Рис.2 Анимация http://css3.bradshawenterprises.com/transitions/

Кстати, рекомендую посмотреть прямо сейчас:

Если мы знаем, что блоки можно так и так изменять, то мы можем использовать это в наших работах.

Frontend frameworks

Есть еще фрэймворки. Так называемые frontend frameworks. Самый популярный – это bootstrap. Я тоже покажу что это такое. В двух словах – это набор компонентов, которые уже можно использовать в вашем сайте. То есть они с разными размерами, они работают определенным образом. Этот набор компонентов можно давать верстальщику и он на основе этих компонентов уже все собирает. Это все упрощает, то есть вместо того, чтобы придумывать эти вещи самому, можно взять готовые и их использовать. Самые популярные getbootstrap, foundation, pure, semantic и т.д. (рис.3,4).

Рис.3 Frontend frameworks

Рис.4 Frontend frameworks

Есть анимационные фрэймворки (рис.5). Мы можем тоже брать готовые элементы и на их основе создавать какие-то вещи. Мы можем что-то крутить, что-то двигать, что-то заполнять цветом, двигать под углом, двигать с искажением, увеличивать. Все это дает нам новые возможности для выражения. Одно дело мы просто нажимаем кнопочку в интерфейсе, другое дело когда у нее есть какая-то дополнительная анимация. Конечно с этим стоит быть действительно аккуратным и внедрять только, когда это важно и нужно.

Рис. 5 Animation frameworks

Опять же есть все готовое и можно просто давать ссылку вашему верстальщику и наглядно показывать что вам нужно, чтобы он сделал.

Поэтому в схеме (рис.6) верстальщик – это люфт (рис.7), как в примере с авто, когда мы крутим руль влево, а колеса начинают поворачивать только через какой-то промежуток времени. Соответственно, также в дизайне. Вы говорите верстальщику сделать что-то, он как-то понимает это по-своему и через какое-то время вы получаете какой-то результат. Вам нужно больше с ним взаимодействовать.

Рис. 6 Схема с верстальщиком

Рис. 7 Люфт

Дизайн веб-сайта на html/css

Если есть хороший технолог. (рис.8) Это человек, который не просто странички верстает по блокам, а человек который очень глубоко понимает и знает техническую часть, разбирается лучше вас, он сам готов что-то предложить. Когда есть технолог в команде — это большой плюс. Он сделает не просто базовые вещи, он сделает гораздо лучше, приятнее, он что-то доработает и таким образом, результат получается намного выше.

Рис. 8 Схема с технологом

Технолог – это ваш рычаг (рис.9). Гаечный ключ, который вы можете подбирать в зависимости от задачи.

Рис.9 Рычаг

Если дизайнер-технолог. Это вообще прекрасно, когда вы сами знаете возможности в анимации (frontent) и вы сами их внедряете, пробуете, экспериментируете, может что-то новое создаете и т.д. И это в идеале. Потому что, чем точнее контрольза результатом, тем этот результат лучше.

Рис. 10 Схема дизайнер-технолог

Существует софт , который позволяет работать дизайном веб сайта на html/css без знания кода (рис.11): Adobe Muse, Adobe Edge Animate, Macaw, Webflow. Есть курсы по этим программам, соответственно изучайте и пробуйте.

Рис.11 Программы для работы дизайном сайта на html/css без знания кода

В итоге, нужно ли знать html в веб дизайне? Нет.

Дизайнер не должен верстать, но знать и понимать как страницы строятся (html/css), понимание framework – это да, потому что дизайнер должен разбираться в том материале, с которым работает.

Узнайте больше по профессии веб дизайнера в моем бесплатном мастер-классе.

Фиксированный дизайн. Основы | htmlbook.ru

Термин «фиксированный дизайн» используется для обозначения макета страницы,
который создается на основе слоев заданной ширины. Выбор ширины зависит от
ориентации на определенное разрешение монитора пользователей. Так, для разрешения
1024х768 пикселей размер таблицы следует брать не более 1000 пикселей. Такая
ширина получается за счет вычитания из значения 1024 ширины вертикальной полосы
прокрутки и границ окна браузера. Для всех пользователей, сайт, построенный
на таком макете, будет отображаться корректно, но при больших разрешениях оказывается
слишком много пустого места. Поскольку наиболее популярным среди пользователей
Интернета является разрешение 1024×768, разработчики сайтов ориентируются именно
на него и используют общую ширину слоев 900–1000 пикселей.

При фиксированном дизайне блок с материалом размещается обычно у левого края
или по центру экрана. Последний вариант предпочтительнее, тогда не так заметны
широкие поля вокруг при больших разрешениях монитора (рис. 1).

Рис. 1. Типичная модульная сетка при фиксированном дизайне

Числовые обозначения, используемые в данном рисунке: 1 — заголовок сайта;
2 — левый слой, обычно содержит элементы навигации; 3 — правый слой, содержит
информационное наполнение страницы; 4 — «подвал», самый низ веб-страницы, в
нем, как правило, размещают контактную информацию и различные кнопки.

Для создания макета показанного на рис. 1, следует продумать некоторые
предварительные моменты — какова будет общая ширина всех элементов; где
будет размещаться макет — по центру страницы или у левого края; какие
цвета и шрифты будут использоваться и т.д. Шаги, которые предстоит сделать
перед написанием кода, описаны далее.

Ширина слоев

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

Итак, вся ширина известна, теперь надо поделить ее на две части. Слой, обозначенный
цифрой 2 (рис. 1), отводится под меню, ширина его должна быть минимальна,
но достаточна для комфортного чтения текста. Сделаем ее круглым числом, например,
200 пикселов. Все остальное будет занимать контент.

Высота слоев

Высота слоя меняется динамически в зависимости от его содержимого. Если хочется
установить высоту слоя самостоятельно, можно воспользоваться свойством height и задать высоту в пикселах, процентах или других единицах CSS. Учтите, что
при таком подходе выравнивание содержимого слоя происходит всегда по его верхнему
краю, поэтому слишком большую высоту задавать не стоит (пример 1).

Пример 1. Задание высоты слоя

<style type="text/css">
 #top {
  text-align: left; /* Выравнивание по левому краю */
  width: 750px; /* Ширина слоя */
  background: #800000; /* Цвет фона */
  height: 50px; /* Высота слоя */
 } 
</style>

Аналогично, высоту слоя можно менять и отступами, изменяя значение padding-top и padding-bottom (пример 2). Но этот способ менее универсальный.

Пример 2. Задание высоты слоя с помощью отступов

<style type="text/css">
 #top {
  padding-top: 15px; /* Отступ сверху */
  padding-bottom: 15px; /* Отступ снизу */
 }
</style>

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

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

Выравнивание по центру

Если есть необходимость оставить макет выровненным по левому краю окна, делать
ничего не надо, данный эффект произойдет сам собой. А вот чтобы макет оказался
по центру окна браузера поможет еще один дополнительный слой,
который будет служить каркасом и включать в себя все остальные слои. Назовем
его container и пропишем для него следующий стиль (пример 3).

Пример 3. Выравнивание по центру

<style type="text/css">
 #container {
  width: 750px; /* Ширина слоя */
  margin-right: auto; /* Отступ справа */
  margin-left: auto; /* Отступ слева */
 }
</style>

Свойства margin-right и margin-left со
значением auto задают выравнивание
слоя по центру веб-страницы. В этом
же селекторе указываем и общую ширину всех слоев.

Выравнивание макета веб-страницы по правому краю, как правило, никогда не
делается — используется выравнивание либо по центру, либо по левому краю.

Отступы на веб-странице

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

Отступы задаются свойствами CSS margin и padding для
селектора BODY. Наличия
двух свойств вместо одного, опять же требуют интересы разных браузеров, margin —
Internet Explorer, а padding — Opera и Firefox. Совмещение разных свойств гарантирует, что показываться веб-страница в разных браузерах будет одинаково.

Управлять отдельными отступами от разных краев экрана можно с помощью свойств
margin-top, margin-bottom, margin-right и margin-left,
которые соответственно изменяют расстояние от верхнего, нижнего, правого и
левого краев окна браузера. Прежде чем их использовать, следует задать нулевое
значение свойства
margin (пример 4).

Пример 4. Изменение верхнего отступа от края браузера

<style type="text/css">
 BODY {
  margin: 0; /* Убираем отступы */
  margin-top: 10px /* Устанавливаем отступ сверху */
 } 
</style>

Цвета

CSS имеет несколько опций для определения цвета текста и фона слоя. Свойство
color указывает цвет текста в слое, а background —
цвет фона (пример 5).

Пример 5. Изменение цвета

<style type="text/css">
 #menu {
  color: white; /* Цвет текста */
  background: #008080 /* Цвет фона */
 }
</style>

Цвет фона для слоя menu в примере указан темно-зеленым, а текста — белым.

Как реализовывается в html дизайн для сайта, перенос дизайна на joomla

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

Веб-дизайн и зачем он нужен

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

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

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

Где создается внешний вид сайта

Простой ответ – в фотошопе или любой другой программе, где возможно нарисовать макет шаблона. И занимается этой работой веб-дизайнер.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

Как вы понимаете, макет – это не просто картинка, а изображение с кучей слоев, на которых отображаются различные структурные элементы будущего проекта.

Так для чего же нам html?

Пока я ни одним словом не упомянул о html – языке разметки гипертекста. Он играет непосредственную роль в создании сайта. Дело в том, что нарисованный дизайнером макет является красивым прототипом будущего ресурса, но у него есть одна проблема – это картинка. Пусть многослойная, созданная не за один час, но картинка.

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

А если я знаю html и css, могу ли я сразу начать верстку сразу, без дизайнера и макета?

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

Тут можно, конечно, работать таким образом: так, у меня будет зеленая шапка, синий сайдбар и красный футер. В основной части у меня будет три колонки, которые будут выводить три последний новости.

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

Это – одна из моих первых попыток сверстать какой-нибудь шаблон. Мне хотелось сделать это без макета, просто следуя своим собственным идеям. Кстати, этот шаблон я не доверстал до нормального состояния.

Например, тут нужно было бы еще создать и оформить боковую колонку и саму статью, но даже если доработать верстку, то все равно тут видно, что дизайн сделан просто ужасно.

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

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

Как html помогает реализовать дизайн сайта?

Сам по себе html – это язык разметки гипертекста. В нем создается структура будущего шаблона, но не его оформление. За это ответственен язык css (cascade style sheets), в котором и записываются все отступы, цвета, границы и вообще все, что влияет на внешний вид.

HTML же формирует сайт. Чтобы вам было понятней, я покажу, как выглядит тема с полностью готовым оформлением с помощью css и без него.

Этот шаблон вы сможете сверстать в курсе по WordPress, ссылку на него я дам ниже. Тут видно, как все ровно и красиво выглядит. А теперь я просто специально сделаю ошибку в строчке, где подключается таблица стилей, так что она не подключится. И вот что получится:

Что тут сказать? Все развалилось, блоки стало в одну строку и это вообще никак не похоже на сайт, а скорее на случайное скопление текста и картинок. Да, css значит многое и работает он в связке с html.

Перенос дизайна html сайта на joomla или wordpress

Сверстав шаблон ни в коем случае нельзя сказать, что разработка сайта завершена и его можно начинать использовать. Конечно, это не так. Очень мало кто сегодня использует статичные html-сайты, подавляющее число людей управляют сайтом через специальные системы управления, потому что это очень удобно.

Самыми популярными среди веб-мастеров и владельцев интернет-ресурсов являются такие CMS (системы управления сайтами, а можно просто движки), как Joomla и WordPress.

И тут возникает справедливый вопрос: “А как же перенести готовую верстку в любой из этих движков, чтобы все начало работать и сайтом можно было управлять в удобном визуальном режиме?”

Вопрос очень хороший и ответ на него есть на нашем сайте. Здесь вы можете посмотреть описание нашего курса «JOOMLA-МАСТЕР: С НУЛЯ ДО ПРЕМИУМ ШАБЛОНА». Это отличное пошаговое руководство, благодаря которому вы сможете уяснить для себя процесс создания сайта для этой cms.

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

Итог

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

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

Практический курс по верстке адаптивного сайта с нуля!

Изучите курс и узнайте, как верстать современные сайты на HTML5 и CSS3

Узнать подробнее

PSD to HTML

Верстка сайта на HTML5 и CSS3 с нуля

Смотреть

Верстка для самых маленьких или что дизайнер должен знать об HTML и CSS и где это найти | by Pauline Bertry | О дизайне

Привет! Мы с Вами уже разобрались почему дизайнеру полезно иметь базовые навыки вёрстки ( внимание, прикрываю попу: я имею ввиду именно базовые навыки, а не заменять верстальщика ). Если вкратце, то для того, чтоб упростить взаимодействие с разработчиками и создавать более качественный дизайн благодаря пониманию того, как он будет реализован.

Итак, что же дизайнеру нужно знать об HTML и CSS

Итак, давайте разберёмся с тем, что происходит после того, как вы закончили свой дизайн, сложили все ваши слои в аккуратные папочки и отправили исходники верстальщику. Первым делом верстальщик посмотрит все существующие на сайте страницы и выделит у себя в голове общую структуру: ага, вот тут меню, вот тут футер, вот тут контент и так далее. На основе этой логической структуры, верстальщик создаст разметку страницы с помощью HTML. Это значит, что используя определенные обозначения он объеденит вместе блоки, логически связанные между собой.

Например, HTML разметка вот такого блока:

может выглядеть следующим образом:

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

А где же мои картинки — цвета градиенты, спросите вы? А вот так, нет их, закончились 🙂

HTML разметка практически никаким образом не влияет на то, как выглядит сайт. Этим занимается СSS — каскадные таблицы стилей. Почему? Всё просто: мясо отдельно, мухи отдельно. В HTML мы занимается содержанием и семантикой, в CSS — внешним видом.

Для того, чтоб блок на прошлой картинки стал выглядеть так, как мы его надизайнили, мы напишем к нему стили и скажем нашему HTML использовать созданный нами CSS файл. Выглядит CSS где-то так:

Дорогие верстальщики, если вы читаете эту статью и у вас глаза истекают кровью из-за ошибок в моем CSS — буду благодарна за любые замечания, комментарии и подсказки, но только не за тухлые помидоры в мою сторону. Я тут как бы пытаюсь убедить дизайнеров разобраться чуть чуть в том, чем вы занимаетесь и упростить всем нам жизнь 😀 Давайте жить дружно!

Это конечно же очень базовое понимание того, как происходит процесс вёрстки.

Тем, кто хочет сразу в бой — советую вот этот курс, во время которого вы сможете понять базовые принципы HTML CSS на создании мини-сайтов. Курс бесплатный, на английском, займёт примерно часа 2 : https://dash.generalassemb.ly/

Сколько раз вам приходилось кривить лицо, когда на макетах, сверстанных по вашему дизайну, вы замечали, что тщательно высчитанные пиксели не были так же тщательно перенесены на свёрстанный сайт? Много? Вот-вот….

Давайте разберемся почему так бывает

  1. Во-первых, на самом деле, ваш дизайн прекрасен! Наверняка он создан по всем законам композиции и каждый элемент на странице визуально связан с другим. В Sketch или Photoshop, где размер экрана всегда 1280px для дексктопа и 320px для мобилки всё замечательно! Но что происходит, когда человек смотрит Ваш сайт на экранах других размеров? Для того, что сайт выглядел удобно и прилично на других размерах экранов, верстальщики используют условные единицы измерения для размеров блоков, шрифтов, иконок и так далее. Соответственно, иногда размер шрифта вашего сайта будет на 16px ровно, как вы задумали, а например 16,25874px. Важно ли это для общего опыта пользователя? Скорее всего не особо, правда?
  2. Во-вторых, дело не в Вас, а в инструментах, которые Вы используете. Инструменты дизайнера статичны, инструменты разработчика — динамичны. Мы привыкли работать со страницами или артбордами, а верстальщики —с окнами браузеров, постоянно меняющими ширину. Часто мы не понимаем, насколько трудно управлять изменением сайта от десктопной версии к мобильной.

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

На написание этого параграфа меня вдохновила статья Dear Designer, I’m sorry! Love, your dev.

Сейчас я забегаю немного вперед, но то, о чем я буду говорить важно понимать для успешного сотрудничества. Для того, чтоб упростить разработку продуктов, сейчас часто говорят о так называемых дизайн системах. Что это значит? Это значит, что у вас есть определенный набор компонентов, которые нужно и можно использовать в своём дизайне ( нет, это не значит, что нельзя создавать новые; можно, когда это необходимо ). Обычно в дизайне это проявляется наличием качественного тулкита и гидлайнов по использованию элементов интерфейса. Разработчики же обычно используют библиотеки типа ReactJS, Angular 2 и языки типа SASS для того, чтоб сделать эти компоненты независимыми и упростить повторное использование кода в будущем. Мы поговорим немного о SASS.

Плохая новость в том, что в СSS ( то, благодаря чему мы стилизируем страницы ), нельзя использовать переменные. Это значит, что каждый раз, когда вы используете где-то какой-то цвет — верстальщик должен прописывать его вручную. И если вы меняете цвет в ходе разработки дизайна — исправлять каждую строчку тоже вручную. Та же ситуация со шрифтами, их размерами да и вообще всем, что должно оставаться « стабильным » на макете. Поэтому придумали SASS — это язык, который позволяет использовать переменные (ну и много других плюшек, но мы же о базовых знаниях сейчас говорим 😀 ) для того, чтоб упростить верстальщикам работу с CSS.

Представим ситуацию. Вы надизайнили сайт на основе фирменного стиля компании, в котором есть 5ть брендовых цветов. Что сделает верстальщик? Правильно, посмотрит на ваш макет, увидит, что Вы — молодец, использовали фирменные цвета компании и создаст переменные для этих цветов. Дальше начинается веселуха. Верстальщик верстает сайт и гордый собой скидывает его на валидацию дизайнеру. И понеслась: оооооой, а вот тут цвет на два оттенка отличается, потому что если использовать обычный цвет компании, то он слишком яркий, так как рядом я использовал другой цвет, и поэтому надо на два оттенка другой. АААААААА!

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

Совет дизайнерам: подумайте, важно ли тут менять цвет? Да? Отлично! Предупредите об этом верстальщика! А может быть всё-таки не настолько уж важно?

Написанное касается всех элементов, которые есть на сайте: цвета, шрифты, кнопки, ссылки, поля ввода, меню и так далее. Будьте аккуратны во время создания ваших макетов. А если есть какие-то важные изменения(особенно малозаметные) — указывайте их в описании к макету и ваш верстальщик будет счастлив!

Лучше один раз сделать, чем 10 раз прочитать статью. Поэтому вот два курса, которые я советую для знакомства с HTML и CSS:

☝️этот совсем для новичков, но быстро дает базовые понятия, я уже давала ссылку на него вверху статьи.

☝️ тут уровень поднимается немного быстрее, довольно приятно и интересно проходить курс.

========================================

Для тех, кому хочется пойти ещё дальше, советую вот эти два “пути” на pluralsight :

Внимание: не начинайте обучение с этих ☝️ двух курсов, вам будет скучно 🙂

  1. Пройдите курс по вёрстке, для того, чтоб понять боль Ваших коллег 🙂
  2. Пожалуйста, не думайте, что после одно курса Вы стали верстальщиком и не добавляйте вёрстку в список услуг. Уважайте труд коллег:) На данном этапе цель — понять, как они работают для упрощения совместного сотрудничество.
  3. В следующий раз, когда вы решите сделать верстальщику замечание о том, что « тут на 14px размер текста, а 14.8456px » — подумайте насколько это ДЕЙСТВИТЕЛЬНО важно 😀
  4. Ещё меня часто спрашивают, какие другие языки программирования стоит изучать дизайнерам. Я считаю, что для начала HTML и CSS хватает с головой. Когда и если Ваш уровень можно будет назвать уверенно-средним, можно посмотреть в сторону JavaScript, который вам, как дизайнеру, поможет лучше понимать то, как создаются анимации на страницах ( но JavaScript конечно же используется не только для этого ).

__________________________________________________________________

Понравилась статья? Буду благодарна за Like и Share!

Есть чем дополнить материал? Пишите на почту: [email protected] или добавляйтесь в Facebook и Linkedin

Отзывчивый дизайн сайта

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

Responsive Design (RWD) — отзывчивый дизайн — проектирование сайта с определенными значениями свойств, например, гибкая сетка макета, которые позволяют одному макету работать на разных устройствах;

Adaptive Design (AWD) — адаптивный дизайн, или динамический показ — проектирование сайта с условиями, которые изменяются в зависимости от устройства, базируясь на нескольких макетах фиксированной ширины.

1. Приемы отзывчивого дизайна

Философия отзывчивого веб-дизайна заключается в том, что сайт был удобным для просмотра с любого устройства, независимо от размера экрана. Фраза отзывчивый дизайн была придумана Ethan Marcotte в 2011 году. Главная особенность отзывчивого веб-дизайна — за счёт подвижной (fluid) сетки макет автоматически реагирует на изменение размеров экрана, раздуваясь или сужаясь, как воздушный шар.

Отзывчивый дизайн (англ. Responsive Web Design) объединяет в себе три методики — гибкий макет на основе сетки, гибкие изображения и медиазапросы.

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

Гибкость текстового содержимого достигается путем вычисления размеров шрифта относительно размера шрифта в браузерах по умолчанию 16px, например для фиксированного размера font-size: 42px относительный размер равен 42px / 16px = 2.625em.

Проблема гибких изображений решается с помощью правила img {width: 100%; max-width: 100%;} для всех картинок на сайте. Это правило гарантирует, что изображения никогда не будут шире, чем их контейнеры и никогда не превысят своих истинных размеров на больших экранах.

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

Рис. 1. Отзывчивый дизайн

Дополнительные приёмы отзывчивого дизайна

Масштабируемая векторная графика — используйте svg-изображения, которые масштабируются до любого размера без потери качества и хорошо выглядят на дисплеях Retina.

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

Рис. 2. Pinterest, макет на основе карт

Оставьте только самое необходимое — хороший приём, особенно для отзывчивого дизайна. Создавайте отзывчивые и дружелюбные минималистические интерфейсы, которые приобретают всё большую популярность в настоящее время.

Рис. 3. Hotellook, минимализм в веб-дизайне

Расставьте приоритеты и правильно скройте контент — используйте скрытые элементы управления, особенно для устройств с небольшими экранами. Всплывающие окна, табы, off-canvas меню и другие подобные приёмы помогут уменьшить количество элементов на странице. Освободив пространство от лишних элементов, вы сделаете интерфейс удобным и дружелюбным для пользователя.

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

Добавьте интерактивности в свои интерфейсы — в ответ на действие пользователя создайте ответное действие — анимацию, которая будет работать при наведении на элемент на десктопных устройствах и при прикосновении к элементу на мобильных устройствах.

2. Настройка области просмотра с помощью мета-тега viewport

Чтобы мобильные браузеры для операционных систем Android и iOS не изменяли автоматически размер страниц сайта, используется специальный тег <meta> с атрибутом name="viewport". В данном теге допускается устанавливать определенное значение для параметров width и initial-scale:

<meta name="viewport" content="width=device-width, initial-scale=1">

— initial-scale=1 говорит о том, что размер страницы в браузере будет равен 100% величины области просмотра. То есть, соотношение между физическим пикселем и css пикселем будет 1:1;

— width=device-width говорит о том, что ширина страницы будет равна 100% ширины окна любого браузера. То есть, ширина страницы сайта соответствует ширине устройства, поэтому её не надо масштабировать.

<meta name="viewport" content="initial-scale=2.0, width=device-width">

В данном примере содержимое в окне браузера будет в 2 раза больше по сравнению с физическим размером.

Также тег <meta> можно использовать для контроля над тем, насколько пользователи могут увеличивать и уменьшать ширину страницы:

<meta name="viewport" content="width=device-width, maximum-scale=3, minimum-scale=0.5">

Данный код позволит увеличивать ширину страницы до величины, равной 3-х кратной ширине экрана устройства и уменьшать её до половины ширины экрана устройства.

Лишить пользователей возможности масштабирования можно с помощью атрибута user-scalable:

<meta name="viewport" content="initial-scale=1.0, user-scalable=no">

3. Универсальные шаблоны

Большая часть макетов, используемых для создания отзывчивого веб-дизайна, относятся к одной из пяти категорий шаблонов, определенных Люком Вроблевски:
Mostly Fluid (Наиболее резиновый),
Column Drop (Столбцы друг под другом),
Layout Shifter (Двигающийся макет),
Tiny Tweaks (Крошечные изменения),
Off Canvas (Вне экрана).
В некоторых случаях на странице может использоваться сочетание шаблонов, например Column Drop и Off Canvas.

3.1. Mostly Fluid

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

3.2. Column Drop

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

3.3. Layout Shifter

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

3.4. Tiny Tweaks

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

3.5. Off Canvas

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

4. Адаптивный дизайн

В отличие от отзывчивого дизайна, адаптивный дизайн (Adaptive Web Design) ориентируется на размеры устройств. Он использует несколько статичных макетов для разных типов устройств (мобильные устройства, планшеты, настольные компьютеры), базируясь на контрольных (переломных) точках. То есть макеты загружаются при определенных размерах окна браузера устройства, а переходы между макетами происходят скачкообразно, а не плавно.

Обычно адаптивные макеты имеют шесть вариантов макетов в зависимости от ширины экрана:
320
480
760
960
1200
1600.

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

Основные приёмы адаптивного дизайна

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

Используйте сетку — структура из 12-ти колонок является более предпочтительной для управления шириной колонок и отступами между ними.

5. В чём разница между отзывчивым и адаптивным веб-дизайном

Рис. 4. Отзывчивый и адаптивный дизайн на разных устройствах

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

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

6. Полезные сервисы и инструменты

Android SDK Android-эмулятор для Windows, Linux и Mac OS X. iOS-симулятор доступен только для пользователей Mac OS X и является частью пакета Xcode (его можно бесплатно скачать из Mac App Store).

Adaptive Images PHP-скрипт, работающий на любом веб-сайте, определяет размер экрана и подгоняет под него размер изображения, что в итоге дает малый размер изображения на малых экранах.

Mydevice.io Таблицы соответствия физических размеров устройств css-значениям высоты и ширины, а также значение pixel-ratio для мобильных устройств.

Mediaqueri.es Коллекция веб-сайтов, использующих медиазапросы и отзывчивый веб-дизайн.

Skeleton CSS-фреймворк на основе 12-ти колоночной разметки, максимум 960px. Поддерживается Chrome, Safari, Firefox, IE 7 и выше, мобильными версиями браузеров.

Bootstrap Набор инструментов для разработки веб-приложений. Язык LESS, 12-ти колоночная адаптивная разметка, поддержка мобильных устройств, планшетов и мониторов, множество компонентов, кнопок, выпадающие меню, собственный стиль полей ввода, списков, заголовков, меток, иконок, алерты, табы, прогресс-бары, всплывающие подсказки, «аккордеон», «карусель», и так далее, различные Javascript-плагины, поддержка Scaffolding, в том числе применение Bootstrap-стиля к уже созданным HTML.

Глава 4: DjangoBook по-русски | Django на русском

Глава 4. Шаблоны

Перевод © Попов Руслан <ruslan.popov • gmail>

В предыдущей главе вы могли заметить что-то особенное в том, как
мы возвращали текст в наших представлениях. А именно, HTML был
напрямую вбит в код на Python, примерно так:

def current_datetime(request):
    now = datetime.datetime.now()
    html = "<html><body>It is now %s.</body></html>" % now
    return HttpResponse(html)

Несмотря на то, что данный подход был удобен для объяснения
принципов работы представления, он не может быть признан годным
для использования в реальных проектах. И вот почему:

  • Любое изменение в дизайне страницы требует изменения в коде. Дизайн сайта изменяется гораздо чаще, чем сам код сайта. Удобнее будет иметь возможность вносить изменения в дизайн, не затрагивая код.

  • Разработка кода на языке Python и работа с HTML являются двумя различными дисциплинам и наиболее профессиональные среды web-разработки разделяют такую ответственность между отдельными людьми (или даже отдельными подразделениями). От дизайнеров и HTML/CSS кодеров не следует требовать редактирования Python кода для выполнения их работы.

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

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

Основы шаблонной системы

Шаблон Django — это строка текста, которая предназначена для разделения представления документа от его данных. Шаблон определяет места подстановки и различные виды основной логики (шаблонные теги), которая управляет отображением документа. Обычно, шаблоны используются для создания HTML, но шаблоны Django также способны участвовать в генерации любого текстового формата.

Давайте начнём с простого примера. Данный шаблон описывает HTML
страницу, которая благодарит посетителя за заказ, отправленный
компании. Рассматривайте его как вид письма:

<html>
<head><title>Ordering notice</title></head>

<body>

<h2>Ordering notice</h2>

<p>Dear {{ person_name }},</p>

<p>Thanks for placing an order from {{ company }}. It's scheduled to
ship on {{ ship_date|date:"F j, Y" }}.</p>

<p>Here are the items you've ordered:</p>

<ul>
{% for item in item_list %}
    <li>{{ item }}</li>
{% endfor %}
</ul>

{% if ordered_warranty %}
    <p>Your warranty information will be included in the packaging.</p>
{% else %}
    <p>You didn't order a warranty, so you're on your own when
    the products inevitably stop working.</p>
{% endif %}

<p>Sincerely,<br />{{ company }}</p>

</body>
</html>

Данный шаблон представляет собой обычный HTML с несколькими
переменными и шаблонными тегами. Рассмотрим его подробнее:

  • Любой текст взятый в скобки (т.е., {{ person_name }}) является переменной. Это
    означает «вставить значение переменной с указанным именем.» (Как же мы определяем значения переменных?
    Скоро мы это рассмотрим.)

  • Любой текст взятый в фигурные скобки и проценты (т.е.,
    {% if ordered_warranty %}) является
    шаблонным тегом. Определение тега
    достаточно простое: тег просто указывает шаблонной системе
    «сделать что-то.»

    Вышеприведёный шаблон содержит тег for
    ({% for item in item_list %}) и тег
    if ({% if ordered_warranty %}).

    Тег for работает почти так же как и
    оператор for языка Python, позволяя вам
    циклически обрабатывать каждый элемент
    последовательности. Тег if, как вы можете
    ожидать, работает аналогично логическому оператору
    if. В данном примере, тег проверяет
    является ли True значением
    ordered_warranty. Если это так,
    шаблонная система отобразит всё, что находится между
    {% if ordered_warranty %} и {% else %}. В противном случае, шаблонная система
    отобразит всё между {% else %} и {% endif %}. Следует отметить, что элемент {% else %} является необязательным.

  • Наконец, второй параграф данного шаблона содержит пример
    использования фильтра, который
    предоставляет наиболее удобный способ изменения формата
    переменной. В данном примере, {{ ship_date|date:»F j, Y» }}, мы передаём значение переменной
    ship_date фильтру date,
    указывая для него аргументы «F j, Y». Фильтр date форматирует дату в
    соответствии с указанным форматом. Фильтры подключаются к
    переменным с помощью символа |, аналогично
    Unix потокам.

Каждый шаблон Django имеет доступ к некоторому количеству встроенных тегов и фильтров, многие из которых будут рассмотрены в последующих разделах главы. Приложение F FIXME содержит полный список тегов и фильтров, будет неплохо, если вы ознакомитесь с этим списком. Также есть возможность создавать свои собственный фильтры и теги, мы рассмотрим это в главе 9 FIXME.

Адаптивные изображения — Изучение веб-разработки

В данной статье мы изучим концепцию гибких (responsive) изображений — таких, которые отображаются хорошо на устройствах с сильно отличающимися размерами экрана, разрешением, и другими характеристиками — и рассмотрим инструменты, которые  имеются в HTML для их реализации. Responsive images — только одна часть (и хорошее начало) гибкого веб-дизайна, темы, которая будет рассмотрена подробнее в будущем модуле на тему CSS.

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

Такая вёрстка хорошо выглядит на широкоформатных экранах ноутбуков и настольных ПК, (вы можете посмотреть посмотреть демо-пример и найти исходный код на Github.) Мы не будем подробно рассматривать CSS, скажем только следующее:

  • Содержимому тега main задана максимальная ширина 1200 пикселей. Если окно браузера выше этой ширины, то содержимое сайта остаётся на 1200 пикселей и центрирует себя в доступном пространстве. Если окно браузера ниже этой ширины, содержимое устанавливается в 100% от ширины экрана.
  • Изображение в шапке всегда будет оставаться в центре тега header вне зависимости от ширины браузера. Если сайт будет просматриваться на узких экранах, то важные детали в центре изображения (люди) всё равно будут видны. Все, что выходит за пределы ширины экрана будет скрыто. Высота шапки 200 пикселей.
  • Изображения в содержимом заданы так, что если ширина body становится меньше чем ширина изображения, то изображения начинают сжиматься и остаются всегда внутри body и не выступают за его пределы.

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

Было бы намного лучше показывать обрезанную версию изображения, на котором видны важные детали снимка, когда сайт отображается на узком экране, и, возможно, что-то среднее между обрезанным и оригинальным изображениями для экранов средней ширины, таких как планшеты – это известно как art direction problem.

Кроме того, нет нужды встраивать такие большие изображения на страницу, если она просматривается на маленьком экране мобильного устройства; это называется resolution switching problem — растровое изображение представляет собой точно-заданное количество пикселей по ширине и высоте; как мы успели заметить, когда рассматривали векторную графику, растровое изображение становится зернистым и выглядит ужасно, если оно отображается в размере большем, чем оригинальный (тогда как векторное изображение нет). В то же время, если изображение отображается в гораздо меньшем размере, чем оригинальный, это приведёт к напрасной трате трафика — пользователи мобильных устройств будут грузить большое изображение для компьютера, вместо маленького для их устройства. Идеально было бы иметь несколько файлов в разных разрешениях, и отображать нужный размер в зависимости от устройства, обращающегося к веб-сайту.

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

Можно предположить, что векторные изображения могли бы решить эти проблемы. В какой-то степени это так. У них небольшой вес и размер, поэтому их можно использовать почти в любом случае. Они хороши для простой графики, узоров, элементов интерфейса и т. д. Сложнее создать векторное изображение с большим количеством деталей, как, например, на фото. Растровые изображения (JPEG) для нашего примера подходят больше. 

Такого рода проблемы не было в начале существования веба, в первой половине 90-х годов – тогда единственными устройствами для просмотра веб-страниц были настольные компьютеры и ноутбуки, так что создатели браузеров и авторы спецификаций даже не задумывались о создании решения. Технологии отзывчивых изображений были реализованы недавно для решения проблем, указанных выше. Они позволяют вам предоставить браузеру несколько изображений, каждое из которых отображает одно и то же, но содержит разное количество пикселей (resolution switching), или разные изображения с отдельными областями основного изображения (art direction).

Примечание: Новые возможности обсуждаются в статье — srcset/sizes/<picture> — все они поддерживаются последними версиями современных настольных и мобильных браузеров (включая Microsoft Edge, но не Internet Explorer).

В этом разделе рассмотрим две вышеописанные проблемы и покажем, как их решить с использованием инструментов HTML <img>. Как показано на примере выше — изображение в заголовке используется только как украшение сайта и установлено как фоновое с помощью CSS. CSS больше подходит для адаптивного дизайна чем HTML, об этом поговорим в следующем модуле о CSS.

Разные разрешения: Разные размеры

Итак, какую проблему решают разные разрешения? В зависимости от устройства нужно отобразить одно и то же изображение, но разных размеров. Посмотрите на вторую картинку в примере. Стандартный элемент <img> обычно позволяет указать только один  путь к файлу:

<img src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Однако есть два новых атрибута — srcset and sizes — позволяющих добавить дополнительные изображения с пометками, чтобы браузер выбрал подходящее. Пример на Github: responsive.html (также смотри источник кода).

<img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
    
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

Атрибуты srcset и sizes кажутся сложными, но они не так плохи, если вы отформатируете их как в примере выше: каждая часть значения атрибута с новой строки. Значение состоит из списка элементов через запятую, каждый из которых включает три части. Давайте рассмотрим эти значения:

srcset включает названия изображений, среди которых браузер выберет нужное и их размеры. Перед каждой запятой части значения в таком порядке:

  1. Название изображения (elva-fairy-480w.jpg.)
  2. Пробел.
  3. Актуальная ширина картинки в пикселах (480w) — заметьте, что здесь используется w вместо px, как вы могли ожидать.  Эта настоящая ширина изображения, которая может быть просмотрена в свойствах картинки на вашем компьютере (например, на Mac нужно открыть картинку в Finder и нажать  Cmd + I , чтобы вывести информацию на экран).

sizes определяет перечень медиавыражений (например, ширину экрана) и указывает предпочтительную ширину изображения, когда определённое медиавыражение истинно — это то, о чём мы говорили выше. В нашем случае, перед каждой запятой мы пишем:

  1. Медиа-условие ((max-width:480px)) — вы можете больше узнать об этом в CSS topic, но сейчас давайте скажем, что медиа-условие описывает возможное состояние экрана. В этом случае, мы говорим «когда viewport width меньше или равен 480 пикселям».
  2. Пробел.
  3. Ширину слота (в оригинале «width of the slot»), занимаемую изображением, когда медиа-условие истинно. (440px)

Note: Для ширины слота, вы можете указать абсолютные значения (px, em) или значение относительно окна просмотра (vw), но НЕ проценты. Вы могли заметить, что у последнего слота нет медиа-условия — это значение по умолчанию, которое станет актуальным, если ни одно из предыдущих медиа-условий не будет истинно. Браузер игнорирует все последующие проверки после первого совпадения, так что будьте внимательнее к порядку их объявления.

Итак, с такими атрибутами, браузер сделает следующее:

  1. Посмотрит на ширину экрана устройства.
  2. Попытается определить подходящее медиа-условие из списка в атрибуте sizes.
  3. Посмотрит на размер слота к этому медиавыражению.
  4. Загрузит изображение из списка из srcset, которое имеет тот же размер, что и выбранный слот, или, если такого нет, то первое изображение, которое больше размера выбранного слота. 

И это всё! На текущий момент, если поддерживающий браузер с viewport width 480px загрузит страницу, медиа-условие (max-width: 480px) будет истинно, следовательно, будет выбран слот 440px, тогда будет загружено изображение elva-fairy-480w.jpg, так как свойство ширины (480w) наиболее близко значение 440px. Условно, изображение 800px занимает на диске 128KB, в то время как версия в 480px только 63KB — экономия в 65KB. Теперь представьте, что у вас страница, на которой много изображений. Используя это технику, вы обеспечите мобильным пользователям большую пропускную способность.

Старые браузеры, не поддерживающие эти возможности, просто проигнорируют их и возьмут изображение по адресу из атрибута src.

Note: В описании элемента <head> вы найдёте строку <meta name="viewport" content="width=device-width">: это заставляет мобильные браузеры адаптировать их реальный viewport width для загрузки web-страниц (некоторые мобильные браузеры нечестны насчёт своего viewport width, вместо этого они загружают страницу в большем viewport width, а затем ужимают её, что не очень хорошо сказывается на наших отзывчивых изображениях или дизайне. Мы расскажем вам об этом больше в будущем модуле.)

Полезные инструменты разработчика

Есть несколько полезных браузерных инструментов разработчика, чтобы помочь с определением необходимой ширины слотов и т. д., которые вам нужно использовать. Когда я работал над ними, я сначала загружал фиксированную версию моего примера (not-responsive.html), затем открывал Responsive Design View (Tools > Web Developer > Responsive Design View), который позволяем взглянуть на layout вашей веб-страницы как если бы они были просмотрены через устройства с различными размерами экрана.

Я устанавливал viewport width на 320px, затем на 480px; для каждой я обращался к DOM Inspector, кликал по элементу <img> в котором мы заинтересованы, далее смотрел размер во вкладке Box Model с правой стороны дисплея. Это должно дать вам необходимую ширину изображения

А дальше вы можете проверить работает ли srcset если установить значение viewport width таким каким вы хотите (например, установить узкую ширину), открыв Network Inspector (Tools > Web Developer > Network) и затем перезагрузить страницу. Это должно дать вам перечень ресурсов которые были загружены чтобы составить (собрать) web-страницу, и тут вы можете проверить какой файл изображения был выбран для загрузки.

Переключения разрешений: Одинаковый размер, разные разрешения

Если вы поддерживаете несколько разрешений экрана, но все видят ваше изображение в одном и том же размере на экране, вы можете позволить браузеру выбирать изображение с подходящим разрешением используя srcset с x-дескриптором и без sizes — более простой синтаксис! Найти пример как это выглядит можно здесь srcset-resolutions.html (смотрите также the source code):

<img srcset="elva-fairy-320w.jpg,
             elva-fairy-480w.jpg 1.5x,
             elva-fairy-640w.jpg 2x"
     src="elva-fairy-640w.jpg" alt="Elva dressed as a fairy">

В данном примере, к изображению применяется CSS таким образом, что оно имеет ширину в 320 пикселей на экране (также называемое CSS-пикселями):

В этом случае, нет необходимости в sizes — браузер просто определяет в каком разрешении отображает дисплей и выводит наиболее подходящее изображение в соответствии с srcset. Таким образом, если устройство, подключаемое к странице, имеет дисплей стандартного/низкого разрешения, когда один пиксель устройства представляет (соответствует) каждый CSS-пиксель, то будет загружено изображение elva-fairy-320w.jpg (применён x1, то есть вам не надо включать его). Если устройство имеет высокое разрешение, в два пикселя устройства на каждый CSS-пиксель или более, то будет загружено изображение elva-fairy-640w.jpg. 640px изображение имеет размер 93KB, тогда так 320px изображение — всего 39KB.

Художественное оформление

Подводя итоги, проблема художественного оформления заключается в желании изменить отображаемое изображение чтобы оно соответствовало разным размерам отображения изображения. Например, если на веб-сайте отображается большой пейзажный снимок с человеком посередине при просмотре в браузере на настольном компьютере, то при просмотре веб-сайта в мобильном браузере он уменьшается; он будет выглядеть плохо так как человек будет очень меленьким и его будет тяжело разглядеть. Вероятно будет лучше показать меньшую портретную картинку в мобильной версии на которой человек отображается в увеличении (в приближении). Элемент <picture> позволяет нам применять именно такое решение.

Возвращаясь к нашему оригинальному примеру not-responsive.html, мы имеем изображение которое очень нуждается в художественном оформлении:

<img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">

Давайте исправим это при помощи элемента <picture>! Так же как <video> и <audio>, элемент <picture> это обёртка содержащая некоторое количество элементов <source> которые предоставляют браузеру выбор нескольких разных источников, в сопровождении крайне важного элемента <img>. Код responsive.html выглядит так:

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>
  • Элемент <source> принимает атрибут media, который содержит медиа-условие; при помощи этих условий определяется, какое изображение будет выведено. В данном случае, если ширина viewport’a составит 799px или меньше, будет выведено изображение первого элемента <source>. Если ширина составит 800px и более — второго.
  • Атрибут srcset содержит путь изображения, которое будет выведено. Обратите внимание, что, как и в примере с <img> выше, <source> может принимать атрибуты srcset и sizes с несколько предопределёнными изображениями. Так вы можете не только поместить группу изображений внутри элемента <picture>, но и задать группу предписаний для каждого из них. В реальности вы вряд ли захотите заниматься этим очень часто.
  • Вы всегда должны использовать элемент <img>, с src и alt, прямо перед </picture>, иначе изображения не появятся. Это нужно на тот случай, когда ни одно из медиа-условий не удовлетворено (например, если бы вы убрали второй элемент <source>) или браузер не поддерживает элемент <picture>.

Этот код позволяет нам выводить отзывчивое изображение и на широких, и на узких экранах, как показано ниже:

Примечание: вам следует использовать атрибут media только при художественном оформлении; когда вы используете media, не применяйте медиа-условия с атрибутом sizes.

Почему это нельзя сделать посредством CSS и JavaScript?

Когда браузер начинает загружать страницу, он начинает загрузку изображений до того, как главный парсер начал загружать и интерпретировать CSS и JavaScript. В среднем, эта техника уменьшает время загрузки страницы на 20%. Но она не так полезна в случае с адаптивными изображениями, поэтому и необходимы такие решения, как srcset. Например, вы не могли бы загрузить элемент <img>, потом определить ширину вьюпорта при помощи JavaScript и динамически изменить источник изображения. Изначальное изображение было бы уже загружено к тому времени, как вы загрузили его меньшую версию, что плохо.

Смело используйте современные форматы изображений

Есть несколько новых форматов изображения (таких, как WebP и JPEG-2000), которым удаётся сохранять высокое качество при малом размере файла. Тем не менее, браузеры поддерживают их не полностью.

<picture> позволяет нам использовать их в старых браузерах. Вы можете прописать MIME-тип внутри атрибута type, браузер сразу определит файлы такого типа как неподдерживаемые:

<picture>
  <source type="image/svg+xml" srcset="pyramid.svg">
  <source type="image/webp" srcset="pyramid.webp">
  <img src="pyramid.png" alt="regular pyramid built from four equilateral triangles">
</picture>
  • Не используйте атрибут media, если вам не нужно художественное оформление.
  • В элементе <source> можно указывать путь к изображениям только того типа, который указан в type.
  • Как и в предыдущих примерах, при необходимости вы можете использовать srcset and sizes.

Самостоятельно создайте отзывчивое, художественно оформленное изображение для широких и узких экранов, используя <picture> и srcset.

  1. Напишите простую HTML-разметку.
  2. Найдите широкоформатное пейзажное фото с какой-нибудь яркой деталью. Создайте веб-версию изображения посредством графического редактора, потом обрежьте его, чтобы крупнее выделить деталь, и создайте второе изображение (примерно 480px достаточно).
  3. Используйте элемент <picture> для работы с художественно оформленной картинкой.
  4. Обозначьте несколько разных размеров для этой картинки.
  5. Используйте srcset/size для описания переключения при смене размеров вьюпорта

Примечание: Используйте инструменты разработчика, чтобы отследить смену размера, как было описано выше.

Это все для отзывчивых изображений — мы надеемся, вам понравилось играть с этими новыми технологиями. Напомним, что мы здесь обсуждали две различные проблемы:

  • Художественное оформление: Проблема, при которой вы хотите использовать обрезанные изображения для различных макетов — например, ландшафтное изображение для полных экранов на макете компьютера и портретное изображение, показывающее увеличенный основной объект, для мобильного макета. Всё это может быть решено с помощью <picture> элемента.
  • Переключение разрешений: Проблема, при которой вы хотите использовать файлы изображений меньшего размера на устройствах с узким экраном, поскольку им не нужны огромные изображения, как на настольных дисплеях, а также дополнительно, что вы хотите использовать изображения разного разрешения для экранов с высокой/низкой плотностью. Эту проблему можно решить с помощью векторной графики (SVG изображений), и srcset и sizes атрибуты.

Это так же подводит нас к окончанию целого модуля «Мультимедиа и встраивание»! Единственное, что вам осталось сейчас сделать перед тем, как двигаться дальше — это попробовать наше мультимедийное задание и посмотреть, как вы усвоили материал. Веселитесь!

Google Web Designer — Домашняя страница

Google Web Designer дает вам возможность создавать красивый, увлекательный контент HTML5. Используйте анимацию и интерактивные элементы, чтобы воплотить в жизнь свои творческие замыслы, и наслаждайтесь полной интеграцией с другими продуктами Google, такими как Google Диск, Дисплей и Видео 360 и Google Реклама.

Статическая панорама

Видео лайтбокс

Статические подсказки

Статические подсказки

лайтбокс карты Youtube

MARQUEE

Найдите необходимые инструменты, независимо от того, являетесь ли вы дизайнером или разработчиком: полный набор инструментов для дизайна и возможность напрямую редактировать HTML, CSS и JavaScript.Переключайтесь между представлением «Дизайн» и «Код», чтобы увидеть, как отображаются ваши изменения.

×

Google Web Designer

Примечание. При установке Google Web Designer будет добавлен репозиторий Google , поэтому ваша система будет автоматически поддерживать Google Web Designer в актуальном состоянии.Если вам не нужен репозиторий Google, выполните команду sudo touch / etc / default / google-webdesigner перед установкой пакета.

Принять и скачать

Принципы дизайна HTML

Принципы дизайна HTML

Аннотация

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

Статус этого документа

В этом разделе описывается статус этого документа на момент
его публикация. Другие документы могут заменять этот документ. Список
текущие публикации W3C и последняя редакция этого технического отчета
можно найти в технических отчетах W3C
индекс по адресу http: // www.w3.org/TR/.

Этот документ является первым общедоступным рабочим проектом «HTML Design
Принципы », разработанные HTML
Рабочая группа, часть деятельности HTML. Рабочая
Группа намеревается опубликовать этот документ как Рабочая группа
Примечание. Рабочая группа работает над новой версией HTML, которую еще нет.
опубликовано под TR. А пока вы можете получить доступ к черновику редактора HTML 5.
Подходящий форум для комментариев к этому документу: [email protected],
список рассылки с публичным архивом.

Решение о публикации документа было принято на основании опроса
члены рабочей группы HTML, результат 51 «Да»
голосов, 2 голоса «против» и 1 голос «формально против».

Конкретное зарегистрированное возражение подпадало под категорию
комментарий, который может быть рассмотрен в будущих черновиках — не критичный
причина отложить публикацию, и с пониманием того, что полный
консенсус не является предварительным условием для публикации, потому что решение
рабочая группа HTML по публикации документа отражает намерение
группы, чтобы дать сигнал сообществу начать тщательное рассмотрение
документ, и поощрять широкое рассмотрение документа внутри и вне
из W3C.

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

Этот документ был подготовлен группой, действующей до 5 февраля.
Патентная политика W3C 2004 г. Группа не ожидает, что этот документ
стать Рекомендацией W3C. W3C ведет публичный список любых раскрытий патентов, сделанных в
связь с результатами группы; эта страница также включает
инструкция по раскрытию патента.Лицо, имеющее фактическое
знание патента, который, по мнению человека, содержит существенные
В претензии (-ях) должна быть раскрыта информация в соответствии с разделом
6 Патентной политики W3C.

Содержание

1. Введение

В Рабочей группе HTML у нас есть представители многих различных
сообщества, включая WHATWG и другие рабочие группы W3C. В
Работа над HTML 5 в WHATWG и большая часть работы над различными W3C
стандарты за последние несколько лет были основаны на разных целях и
разные идеи того, что делает хороший дизайн.Чтобы добиться полезного прогресса, мы
необходимо иметь какое-то базовое соглашение о целях этой группы.

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

1.1. Соответствие документов
и реализации

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

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

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

2. Совместимость

Есть много способов интерпретации совместимости. Иногда условия
используются «обратная совместимость» и «прямая совместимость», но
иногда значение этих терминов может быть неясным. Принципы в
в этом разделе рассматриваются различные аспекты совместимости.

2.1. Служба поддержки
Существующее содержимое

Этот принцип применяется в первую очередь к поддерживаемому языку.

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

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

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

  • Зависит ли от функции значительное количество существующего контента
    или поведение?

  • Встречается ли какой-либо зависимый контент на особо популярных
    веб-сайты?

  • Действительно ли зависимое содержимое предназначено для потребления?
    чем происходит исключительно в тестовых примерах или примерах?

  • Является зависимым контентом в общедоступной сети, а не исключительно
    на внутренних сайтах с контролируемой пользовательской средой?

  • Зависимый контент в настоящее время работает должным образом в нескольких
    популярные пользовательские агенты, а не явно нацелены только на один конкретный
    пользовательский агент, или только очень старые или непопулярные по другим причинам?

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

2.1.1. Примеры

Многие сайты используют неправильную разметку, например, плохо вложенную
элементы ( a b c ), и оба автора
и у пользователей есть ожидания, основанные на обработке ошибок, используемой устаревшими
пользовательские агенты.Нам необходимо определить требования к обработке, которые остаются
совместимы с ожидаемой обработкой такого контента.

Некоторые сайты используют элемент
придавая презентационный эффект подчеркивания.

2.2. Градиентно деградируйте

Этот принцип применяется в первую очередь к соответствующему языку.

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

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

  • Текущие версии основных популярных веб-браузеров.
  • Очень популярные старые версии основных веб-браузеров.
  • Лучшие пользовательские агенты, разработанные для удовлетворения конкретных потребностей или решения
    специализированные рынки, такие как вспомогательные технологии, мобильные браузеры или
    пользовательские агенты, нацеленные на менее типичные носители, такие как текстовые терминалы или
    Распечатать.

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

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

  • Новый метод или атрибут сценария можно протестировать перед использованием в сценарии
    с использованием средств самоанализа ECMAScript.

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

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

Этот список не является исчерпывающим; в некоторых случаях немного сложнее
подходы более эффективны.

2.2.1. Примеры

Стандартное представление предлагаемых
нерелевантный атрибут можно эмулировать с помощью правила CSS
[нерелевантно] {дисплей: нет; } .

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

Предлагаемый метод getElementsByClassName ()
можно сделать значительно быстрее, чем найденные чистые реализации ECMAScript
в существующих библиотеках, но реализация на основе сценариев может использоваться, когда
родная версия недоступна.

Элемент может быть связан
с элементом и может содержать скрытый