Отзывчивый веб-дизайн - [15]
Насущные проблемы
Итак, мы определили основные визуальные неполадки. Однако нужно смотреть на проблему шире. Как только мы меняем оригинальное разрешение, сетка оказывает нежелательное воздействие на контент. Ее пропорции ограничивают содержание при низких разрешениях и окружают его пустым пространством – при высоких.
Причем эта проблема возникает не только с гибкими макетами. Ни один дизайн, фиксированный или гибкий, не сможет масштабироваться вне контекста, для которого он спроектирован.
Так как же нам сделать дизайн, который будет адаптироваться к изменениям разрешения экрана и размеров области просмотра? Как сделать так, чтобы страница оптимизировалась в соответствии с браузером и устройством, на котором ее просматривают?
Другими словами, как сделать наш дизайн более отзывчивым?
Навстречу отзывчивости
К счастью, Консорциум Всемирной паутины (World Wide Web Consortium, W3C) уже некоторое время занимается этой проблемой. Но чтобы лучше понять решение, которое в результате было представлено, обратимся к предыстории.
Знакомьтесь: медиатипы
Первым шагом в решении проблемы стали медиатипы (media types), часть спецификации CSS2 (http://bkaprt.com/rwd/24/). Вот как они первоначально описывались:
Иногда таблицы стилей для различных медиатипов могут иметь одинаковое свойство, но требовать разных значений для этого свойства. Например, свойство font-size можно использовать как для монитора, так и для вывода документа на печать. Эти два медиатипа отличаются друг от друга и требуют разных значений для одного и того же свойства; документ обычно имеет больший шрифт на мониторе, чем на бумаге. Поэтому это нужно отобразить в таблице стилей или в разделе таблицы, применяемой к определенным медиатипам.
Ничего не понятно, да? Давайте попробуем разобраться без нагромождения терминов.
Вы писали когда-нибудь стили для печати (http://bkaprt.com/rwd/25/)? Тогда вы, наверное, знакомы с понятием разработки для различных видов медиа. Даже идеальное браузерное отображение не делает никакой разницы между десктопными браузерами и принтерами или между мобильными устройствами и голосовым браузером. Чтобы решить эту проблему, W3C создала список медиатипов (http://bkaprt.com/rwd/26/) для классификации каждого браузера или устройства по медиакатегориям. Медиатипы могут принимать значения: >all, braille, embossed, handheld, print, projection, screen, speech, tty и >tv.
С некоторыми из этих медиатипов, как, например, >print, screen или даже >projection, вы уже работали. Некоторые другие – >embossed (для брайлевских принтеров) или >speech (для голосовых браузеров и интерфейсов) – встречаются впервые. Но все эти медиатипы созданы с одной целью: чтобы мы могли лучше проектировать дизайн для каждого типа браузера или устройства, просто загружая нужный CSS. Следовательно, устройство с экраном будет игнорировать CSS, созданный для медиатипа >print, и наоборот. А для стилевых правил, которые применимы ко всем устройствам, в спецификации создана супергруппа >all. На практике это означает правку >media-атрибута ссылки:
>
>
>
А также создание блока >@media в таблице стилей и его привязку к определенному медиатипу:
>@media screen {
>body {
>font-size: 100 %;
>}
>}
>@media print {
>body {
>font-size: 15 pt;
>}
>}
В любом случае спецификация предлагает браузеру определить, к какому медиатипу он относится. («Я десктопный браузер! Я отношусь к медиатипу >screen», «Я пахну чернилами и тонером: я тип >print», «Я браузер видеоконсоли: я тип >tv» и т. д.) Загрузив страницу, браузер будет отображать только тот CSS, который относится к определенному медиатипу, и игнорировать все остальные. И – в теории – это потрясающая идея.
Но теория – это, наверное, последнее, что нужно занятому по горло веб-дизайнеру.
Неправильное распределение типов
Когда на сцене появились все эти браузеры для устройств с маленькими экранами, как, например, телефоны или планшеты, с ними пришли и проблемы. В соответствии со спецификацией решить эти проблемы несложно, нужно просто создать таблицу стилей для медиатипа >handheld:
>
>
>
Проблемы скорее кроются в нас самих, по крайней мере, частично. На первых мобильных устройствах не было эффективно работающих браузеров, поэтому мы просто игнорировали их, разрабатывая вместо этого таблицы стилей для медиатипов >screen или >print. А когда такие браузеры появились, в Сети не было достаточно CSS-файлов типа >handheld. В результате многие разработчики мобильных браузеров решили использовать таблицы стилей для медиатипа >screen.
А растущий диапазон мобильных устройств еще больше усложняет дело. Сможет ли одна и та же таблица стилей решить все проблемы для iPhone и для телефона пятилетней давности?
Знакомство с медиазапросами
К счастью, организация W3C включила в спецификацию CSS3 синтаксис медиазапросов, усовершенствовав методологию медиатипов. Медиазапросы позволяют не только ориентироваться на конкретный класс устройств, но и анализировать физические характеристики устройства, использующегося для отображения страницы (
В борьбе за лидерство на рынке победят только те, кто обладает хитростью, гибкостью и адаптивностью ниндзя. Перед вами книга, которая поможет обойти конкурентов и стать любимым сервисом или брендом вашей ЦА. Хотите превращать клиентов в фанатов, увеличить продажи, предсказывать и задавать тренды? Узнайте, какие ниндзя-техники помогут вам в этом.
Данное издание представляет собой руководство для тех, кто изучает тему лидерства и хочет выработать продуктивную модель влияния на окружающих. В соответствии с центральной концепцией книги поведение человека складывается из трех уровней: видимой деятельности, сознательного мышления и подсознательных ценностей, убеждений, представлений и ожиданий от окружающего мира. Любое влияние на человека естественным образом затрагивает все три уровня, но в разном соотношении. Концепция «лидерства третьего уровня» применяется в программах обучения руководителей в различных странах мира.
Блестящий придворный и знаток людей Ларошфуко говорил в свое время: «Свет чаще награждает видимость достоинств, нежели сами достоинства». Но как же действовать подлинно талантливому человеку, которого не замечают на фоне более уверенных соперников? Джек Нэшер, профессор менеджмента и всемирно известный эксперт в области деловых коммуникаций, призывает освоить стратегии общения, свойственные профессионалу, который впечатляет своей компетентностью и привык греться в лучах славы. Читателю предлагается «пересоздать» себя: усовершенствовать внешний облик, подобрать уместный гардероб, грамотно организовать рабочее пространство, заучить поведение, характерное для лидеров, и бесстрашно выступать с самопрезентацией перед коллегами и партнерами.
Предлагаемая книга является практическим руководством по совершенствованию систем обучения, развития потенциала личности и организации с помощью активных тренииговых форм. В ней раскрываются вопросы профессиональных качеств тренера, его креативных и функциональных возможностей, перспектив развития карьеры и самостоятельного бизнеса, принципов и способов обучения личности и коллектива, процессов разработки и проведения тренингов, навыков оценки и самооценки проводимых изменений. Данное руководство станет полезным источником информации для всех, кто связан с профессиональной необходимостью обучения других людей.
Бак Роджерс занимал десять лет пост вице-президента IBM по маркетингу. В своей книге он показывает, как корпорация изо дня в день ведет свой бизнес,как реагирует на изменениярынка, как добивается решения самых сложных задач, следуя трем простым принципам:– главным капиталом корпорации являются не деньги и недвижимость, а люди,– продажей должен заниматься каждый сотрудник, независимо от должности – покупатель превыше всего,– основа всего – стремление к совершенству.
В книге рассказывается история главного героя, который сталкивается с различными проблемами и препятствиями на протяжении всего своего путешествия. По пути он встречает множество второстепенных персонажей, которые играют важные роли в истории. Благодаря опыту главного героя книга исследует такие темы, как любовь, потеря, надежда и стойкость. По мере того, как главный герой преодолевает свои трудности, он усваивает ценные уроки жизни и растет как личность.