Почти каждый новый клиент в эти дни хочется мобильную версию своего веб-сайта.Это практически важно после всех: один дизайн для BlackBerry, другой для iPhone, IPAD, нетбук, Kindle — и все разрешения экрана должны быть совместимы, тоже.В ближайшие пять лет мы, скорее всего, нужно рассчитывать на ряд дополнительных изобретений.Когда безумие остановить?Этого не произойдет, из course.
В области веб-дизайна и развития, мы быстро добраться до такой степени, что не в состоянии идти в ногу с бесконечными новых резолюций и устройств.Для многих веб-сайтов, создание веб-сайта Версия для каждого разрешения и нового устройства будет невозможно, или по крайней мере непрактично.Должны ли мы просто страдают от последствий потери посетителей с одного устройства на пользу получения посетителей от другого?Или есть другой вариант
Отзывчивый веб-design является подход, который предполагает, что проектирование и разработка должна реагировать на user’ поведения и окружающей среды на основе размера экрана, платформа и ориентации.Практика состоит из смеси гибких сетей и макетов, изображений и разумного использования CSS запросы средств массовой информации.Когда пользователь переключается с их ноутбук iPad, веб-сайт должен автоматически переключаться для размещения на разрешение, размер изображения и сценариев способностей.Другими словами, сайт должен иметь технологии для автоматического respond с предпочтениями пользователя.Это устранило бы необходимость в различных проектирования и разработки фазы для каждого нового гаджета на market.
Концепция реагирования Web Design
Этан Marcotte написал вступительную статью о подходе “, Отзывчивый веб-Design” для A List Apart.Это связано с понятием реагировать архитектурного дизайна, в результате чего помещение или пространство автоматически настраивается на количество и поток людей в нем:
“ Недавно возникающих дисциплины под названием “реагировать архитектуры” начал спрашивать, как физического пространства могут реагировать на присутствие людей, проходящих через них.Благодаря комбинации встроенных робототехники и растяжение материалов, архитекторы экспериментируют с художественными установками и стеновых конструкций, что изгиб, изгиб и расширяться, поскольку толпы приблизиться к ним.Датчики движения могут быть соединены с системами климат-контроля для регулировки температуры помещения и освещения, как это наполняет людей.Компании уже дали “технологии смарт-стекло”, которая может автоматически становятся непрозрачными, когда пассажиры комнате достигает определенного порога плотности, давая им дополнительный слой privacy.”
Пересадка этой дисциплине на веб-дизайне, и у нас есть аналогичные тем не менее совершенно новые идеи.Почему мы должны создать пользовательский веб-дизайн для каждой группы пользователей, ведь архитекторы не проектировать здание дляРазмер каждой группе и типу, который проходит через это?Как реагировать архитектура, веб-дизайн должен автоматически регулировать.Она не требует бесчисленных заказных решений для каждой новой категории users.
Очевидно, что мы не можем использовать датчики движения и робототехники для достижения этой цели путем здании будет.Отзывчивый веб-дизайн требует более абстрактным мышлением.Тем не менее, некоторые идеи уже практикуется. Жидкость макеты, запросы средств массовой информации и сценариев, которые можно переформатировать веб-страницы и наценки усилий (или automatically)
Но отзывчивый веб-дизайн является не только о регулируемым разрешением экрана и автоматически изменять размер images, а о совершенно новый способ мышления о дизайне.Let’ поговорим обо всех этих функций, а также дополнительные идеи в процессе становления.
Настройка экрана Resolution
С более устройства поставляются различные разрешения экрана, определения и ориентации.Новые устройства с новыми размерами экрана появляются каждый день, и каждое из этих устройств могут быть в состоянии обрабатывать изменения в цвете размеров, функциональности и даже.Некоторые из них в пейзаж, портрет другие, третьи даже полностью кв.Как мы знаем из ростом популярности iPhone, IPad и продвинутых смартфонов, многие новые устройства могут переключаться с книжной на альбомную по прихоти пользователя.Каким является одним проектировать для этих ситуациях
В дополнение к проектированию и для пейзажа и портрета (и включения этих направлений возможного переключения в одно мгновение после загрузки страницы), мы должны рассмотреть сотни различных размеров экрана.Да, можно сгруппировать их в основных категориях, дизайн для каждого из них, и сделать каждый проект гибким, как это необходимо.Но это может быть подавляющим, и кто знает, что использование цифры будут через пять лет?Кроме того, многие пользователи не максимизировать их browsers, которая сама по себе оставляет слишком много места для разнообразия среди экране sizes.
Morten Hjerde и несколько его коллег определены статистические данные о примерно 400 devices проданы в период между 2005 и 2008 годами.Ниже приведены некоторые из наиболее распространенных:
С тех пор даже больше устройств пришли out.Очевидно, что мы не можем продолжать создавать собственные решения для каждого из них.Итак, как мы имеем дело с ситуацией
Часть Решение: Гибкий Everything
Нескольких летназад, когда гибкие макеты были почти «люкс» для веб-сайтов, единственные вещи, которые были гибкими в конструкцию были макет столбцов (структурных элементов) и текст.Изображения могут легко сломаться макеты, и даже гибкие структурные элементы сломал форме макета при нажатии достаточно.Гибкие проекты были не так уж и гибкие, они могли давать или принимать несколько сотен пикселей, но они часто не могли отрегулировать в диапазоне от большого экрана компьютера netbook.
Теперь мы можем сделать вещи более гибкими.Изображения могут быть автоматически скорректированы, и у нас есть обходные пути, так что макеты никогда не ломаются (хотя они могут стать сплющенные и неразборчивой в процессе).Хотя это не полное исправление, решение дает нам гораздо больше возможностей.Это идеально подходит для устройств, переход от портретной ориентации в альбомную в одно мгновение или при переключении пользователей с большим экраном компьютера iPad.
В статье Итан Маркотт, он создал веб-дизайна образца, который показывает это лучше, гибкая планировка:
Вся конструкция представляет собой прекрасный микс из жидкости grids жидкости images и умные наценки, где это необходимо.Создание жидкости сетей является довольно распространенной практикой, и есть ряд методов для создания жидкости изображений:
- Скрытие и выявление Части Images
- Создание Раздвижные композитный Images
- переднем плане изображения, которые масштабам с Layout
Для получения дополнительной информации о создании жидкости веб-сайтов, не забудьте взглянуть на книгу “ Гибкая веб-дизайна: создание жидких и упругих Макеты с CSS” по Зоя Микли Gillenwater, и скачать образец главы “. Создание гибких Images“Кроме того, Зои предоставляет следующие обширный перечень учебных пособий, ресурсов, вдохновения и передовой практики создания гибких сетей и макеты: “. Основные ресурсы для создания жидких и упругих Layouts”
Хотя с технической точки зрения все это легко можно, это не только о подключении этих функций в и делается.Посмотрите на логотип в этой конструкции, например:
Если размеров слишком малы, образ, казалось бы, низкого качества, но сохраняя название сайта видны и не обрезка его покинуть это важно.Таким образом, изображение делится на две части: одна (иллюстрации) установить в качестве фона, который будет обрезать и сохранить его размера, а другой (названия) размера proportionally.
<h1 id="logo"><a href="#"><img src="site/logo.png" alt="The Baker Street Inquirer" /></a></h1>
Выше, h1 элемент содержит иллюстрации в качестве фона, и изображение выравнивается по фон контейнера (рубрика)
Это только один пример такого рода мышления, которая делает реагировать Веб-дизайн по-настоящему эффективной.Но даже с умным исправления, как это, макет может стать слишком узким или коротким, чтобы выглядеть правильно.В приведенном выше примере логотипа (хотя она работает), идеальным вариантом было бы, чтобы не обрезать половину иллюстрации или сохранить логотип от того, настолько мала, что она становится неразборчивой и “плавает” вверх.
Гибкий Images
Одна из основных проблем, которую необходимо решить с отзывчивым веб-дизайна работает с изображениями.Есть ряд методов, чтобы изменить размер изображения пропорционально, и многие из них легко сделать.Самым популярным вариантом, отмечается в статье Итан Маркотт на жидкости images но сначала экспериментировал с от Ричард Rutter, является использование CSS в max-width для легкой fix.
img { max-width: 100%; }
Пока никакой другой ширины на основе стилей изображения, изменить это правило, каждое изображение загружается в оригинальном размере, если область просмотра становится более узким, чем оригинальная ширина изображения. максимальный width образа установлен на 100% ширины экрана или браузера, поэтому, когда, что 100% сужается, так что делает изображение.По существу, как Джейсон Григсби noted “ Идея жидкости изображений является то, что вы доставить изображения при максимальном размере они будут использоваться в.Вы не объявите высоты и ширины в коде, но вместо этого позволить браузеру изменить размер изображения по мере необходимости, используя CSS, чтобы направлять их относительной size”.Это отличный и простой способ изменить размер изображения beautifully.
Заметим, что max-width является не поддерживается в IE, но хорошие использование width: 100% решит проблему аккуратно в IE конкретных стилей.Еще одна проблема в том, что, когда размер изображения слишком малы в некоторых старых браузеров в Windows, рендеринг не ясно, как это должно быть.Существует JavaScript, чтобы решить эту проблему, хотя, найденные в Этан Маркотт в article.
В то время как выше, является большим быстрых решений и хорошего начала реагировать изображения, разрешение изображения и время загрузки должна быть основным соображениям.В то время как изменение размера изображения для мобильных устройств может быть очень простой,если исходный размер изображения предназначены для больших устройств, это может существенно замедлить время загрузки и занимают место unnecessarily.
Responsive накаливания группы Images
Эта техника, представленная накаливания группы, берет этот вопрос на рассмотрение и не только изменяет размер изображения пропорционально, но уменьшается разрешение изображения на небольших устройствах, поэтому очень больших изображений не тратить пространство без необходимости на маленьких экранах.Отъезд демонстрационную страницу here.
Эта техника требует несколько файлов, которые доступны на Github.Во-первых, файлов JavaScript ( RWD-images.js), . Htaccess файлов и файлов изображений ( rwd.gif).Тогда, мы можем использовать только немного HTML ссылаться как на больших и малых разрешение изображения: во-первых, небольшое изображение, с r префикс уточнить, что она должна отвечать, а затем ссылкой на больших изображений.через data-fullsrc.
<img src="smallRes.jpg" data-fullsrc="largeRes.jpg">
data-fullsrc является пользовательский атрибут HTML5, определенные в файлы, связанные с выше.Для любой экран, который является более широким, чем 480 пикселей, тем больше разрешение изображения ( largeRes.jpg) будет загружать; небольших экранов не нужно будет загружать большие изображения, и поэтому изображение меньшего размера ( smallRes.jpg) будет load.
Файл JavaScript вставляет элементной базе, что позволяет страницу, чтобы отделить реагировать изображения от других и перенаправляет их по мере необходимости.При загрузке страницы, все файлы будут переписаны в их первоначальной форме, и только большие или маленькие изображения загружаются по мере необходимости.С другими методами, все более высокое разрешение изображений должно было бы быть загружена, даже если больше версий никогда не будет использоваться.В частности, для веб-сайтов с большим количеством изображений, этот метод может быть значительно сэкономить полосу пропускания и загрузки time.
Эта техника полностью поддерживается в современных браузерах, таких как IE8, Safari, Chrome и Opera, а также мобильных устройств, которые используют эти же browsers (iPad, iPhone и т.д.).Старые браузеры Firefox и ухудшают красиво и по-прежнему размера, как можно было бы ожидать реагировать изображения, кроме того, что обе резолюции загружаются вместе, так что в конце пользу сохранения пространства с этой техникой является void.
Stop изображения симулятор iPhone Resizing
Одна хорошая вещь о iPhone и IPod Touch является то, что веб-дизайн автоматически масштабировать в соответствии с крошечным экраном.Полноразмерный дизайн, если не указано иное, просто сократится пропорционально на крошечный браузер, без необходимости прокрутки или мобильной версии.Затем пользователь может легко увеличивать и уменьшать масштаб, как necessary.
Существовал, однако,выдать этот симулятор создан.Когда отзывчивый веб-дизайн взлетели, многие заметили, что изображения были еще меняется пропорционально страницы, даже если они были специально сделаны для (или в противном случае может соответствовать) крошечном экране.Это, в свою очередь, уменьшено текст и другие elements.
(Изображение: Подумайте Vitamin | Сайт ссылается: 8 Faces)
Потому что это работает только с симулятором Apple, мы можем использовать Apple-специфический мета-тег, чтобы решить проблему, поместив его below веб-сайта <head> раздел.Благодаря Подумайте статьи Витамин на изображении resizing, у нас есть мета-тег ниже:
<meta name="viewport" content="width=device-width; initial-scale=1.0">
Установка initial-scale до 1 переопределяет настройки по умолчанию, чтобы изменить размер изображения пропорционально, оставив их как есть, если их ширина такая же, как ширина устройства (как в портретном или Пейзаж режим).Документации Apple, имеет гораздо больше информации о окна мета tag.
Custom Layout Structure
Для резкие изменения размеров, мы можем захотеть изменить структуру в целом, либо через отдельную таблицу стилей или, что более эффективно, с помощью запроса CSS средствами массовой информации.Это не должны быть хлопотно, большинство стилей могут оставаться прежними, в то время как конкретные таблицы стилей могут наследовать эти стили и перемещать элементы с поплавками, ширины, высоты и так on.
Например, мы могли бы иметь один основной таблицы стилей (который также будет по умолчанию), которая будет определять все основные структурные элементы, такие как #wrapper #content #sidebar #nav, наряду сцвета, фоны и типографии.По умолчанию гибкой ширины и плавает также может быть defined.
Если стилей сделан макет слишком узкие, короткие, широкие и высокие, мы могли бы обнаружить, что и переключиться на новую таблицу стилей.Эта новая таблица стилей ребенок будет принимать все из таблицы стилей по умолчанию, а затем просто пересмотреть макета structure.
Здесь style.css (по умолчанию) Содержание:
/* Default styles that will carry to the child style sheet */
html,body{
background...
font...
color...
}
h1,h2,h3{}
p, blockquote, pre, code, ol, ul{}
/* Structural elements */
#wrapper{
width: 80%;
margin: 0 auto;
background: #fff;
padding: 20px;
}
#content{
width: 54%;
float: left;
margin-right: 3%;
}
#sidebar-left{
width: 20%;
float: left;
margin-right: 3%;
}
#sidebar-right{
width: 20%;
float: left;
}
Вот mobile.css (ребенок) содержания:
#wrapper{
width: 90%;
}
#content{
width: 100%;
}
#sidebar-left{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
#sidebar-right{
width: 100%;
clear: both;
/* Additional styling for our new layout */
border-top: 1px solid #ccc;
margin-top: 20px;
}
Медиа Queries
CSS3 поддерживает все те же типы СМИ, как CSS 2.1, такие как screen print и handheld, но добавил десятки новых функций средств массовой информации, в том числе max-width device-width orientation иcolor.Новые устройства, изготовленные после выхода CSS3 (например, Ipadи Android устройств), безусловно, поддерживают средства массовой информации возможности.Таким образом, называя СМИ запроса с использованием функций CSS3, нацеленные на эти устройства будет работать нормально, и он будет проигнорирован, если доступ к старый компьютер браузер, который не поддерживает CSS3.
В статье Итан Маркотт, мы видим пример запроса СМИ в действии:
<link rel="stylesheet" type="text/css" media="screen and (max-device-width: 480px)" href="shetland.css" />
Этот запрос СМИ довольно очевидны: если браузер отображает страницы на экране (а не печать и т.д.), и если ширина экрана (не обязательно просмотра) составляет 480 точек или меньше, а затем загрузить shetland.css.
Новых функций CSS3 также orientation (портрет против ландшафт), device-width min-device-width и многое другое.Посмотрите на “ Ориентация СМИ Query” для получения дополнительной информации о настройке и ограничение ширины на основе этих запросов СМИ features.
Можно создать несколько таблиц стилей, а также основные изменения макета определены в соответствии диапазонах шириной — даже пейзаж портрет против ориентации.Не забудьте обратить внимание на раздел статьи Этан Маркотт, озаглавленный “ Знакомства СМИ query” Для примеров и более тщательной explanation.
Несколько запросов массовой информации могут также быть удалены право в единую таблицу стилей, которая является наиболее эффективным вариантом при использовании:
/* Smartphones (portrait and landscape) ----------- */
@media only screen
and (min-device-width : 320px)
and (max-device-width : 480px) {
/* Styles */
}
/* Smartphones (landscape) ----------- */
@media only screen
and (min-width : 321px) {
/* Styles */
}
/* Smartphones (portrait) ----------- */
@media only screen
and (max-width : 320px) {
/* Styles */
}
Код выше из бесплатных шаблонов для нескольких запросов средств массовой информации между популярными устройствами Энди Кларк.Увидеть различия между этим подходом и в том числе различных стилей файлы в наценкой, как показано на сообщение “ Hardboiled CSS3 Media Queries“.
CSS3 Media Queries
Выше приведены несколько примеров того, как средства массовой информации запросов, как от CSS 2.1 и CSS 3 может работать.Давайте теперь рассмотрим некоторые конкретные инструкции по проезду для использования CSS3 Media Queries для создания веб-дизайна реагировать.Многие из этих видов использования актуальна и сегодня, и все, безусловно, будет использоваться в ближайшем future.
мин-ширина и макси-width Свойства делать то, что они предлагают.min-width собственности устанавливает минимальный браузера или ширину экрана, что определенный набор стилей (или отдельных таблиц стилей) будет применяться к.Если что-то ниже этого предела, стиль ссылка листа или стили будут проигнорированы.max-width собственность делает как раз наоборот.Все, что выше максимально браузера или ширине экрана указано не будет применяться к соответствующим СМИ query.
Примечание В приведенных ниже примерах, которые мы используем синтаксис для запросов СМИ, которые могли бы быть использованы все в одной таблице стилей.Как уже упоминалось выше, наиболее эффективный способ использования средств массовой информации запросов, чтобы разместить их все в одной таблице стилей CSS, с остальными стилями для сайта.Таким образом, несколько запросов не должны быть сделаны для нескольких стилей sheets.
@media screen and (min-width: 600px) {
.hereIsMyClass {
width: 30%;
float: right;
}
}
Класс, указанный в запросе СМИ выше (hereIsMyClass) будет работать только в том случае, еслибраузере или ширине экрана выше 600 пикселей.Другими словами, этот запрос СМИ будет работать, только если минимальная ширина составляет 600 pixels. (Таким образом, 600 пикселей или шире)
@media screen and (max-width: 600px) {
.aClassforSmallScreens {
clear: both;
font-size: 1.3em;
}
}
Теперь, с использованием max-width, этот запрос СМИ будут применяться только к браузеру или экран шириной с максимальной шириной 600 пикселей и narrower.
Хотя приведенные выше min-width и max-width можно применить к любой размер экрана или браузера ширины, иногда мы хотели бы запрос СМИ, что имеет отношение к устройству шириной в частности.Это означает, что даже если браузер или другой области просмотра сведено к минимуму, чтобы что-то меньше, запрос СМИ будут по-прежнему применяться к размеру фактических устройства. мин-устройства ширину и макси-устройства width Свойства СМИ запроса являются большими для ориентации некоторых устройств с множеством размеров, не применяя те же стили для других размеров экрана в браузере, который имитирует устройства size.
@media screen and (max-device-width: 480px) {
.classForiPhoneDisplay {
font-size: 1.2em;
}
}
@media screen and (min-device-width: 768px) {
.minimumiPadWidth {
clear: both;
margin-bottom: 2px solid #ccc;
}
}
Есть и другие трюки с запросами средств массовой информации для решения конкретных устройств.Томас Майер написал две короткие фрагменты и объяснения для ориентации iPhone и IPad только:
Для Ipad В частности, есть также свойство СМИ запроса называется orientation.Значение может быть как пейзаж (горизонтальная ориентация) или портретной (вертикальной ориентации)
@media screen and (orientation: landscape) {
.iPadLandscape {
width: 30%;
float: right;
}
}
@media screen and (orientation: portrait) {
.iPadPortrait {
clear: both;
}
}
К сожалению, это свойство работает только на iPad.Когда определения ориентации iPhone и других устройств, использование max-device-width и min-device-width должны сделать trick.
Есть также много запросов СМИ, что смысл, когда combined.Например, min-width и max-width запросы средств массовой информации объединяются все время, чтобы установить стиль, характерные для определенных range.
@media screen and (min-width: 800px) and (max-width: 1200px) {
.classForaMediumScreen {
background: #cc0000;
width: 30%;
float: right;
}
}
Код выше в этом запросе средствах массовой информации распространяется только на экране браузера и шириной от 800 до 1200 пикселей.Эффективно использовать эту технику, чтобы показать определенное содержание или целые боковые панели в макете в зависимости от того, сколько горизонтальное пространство available.
Некоторые дизайнеры предпочли бы, чтобы ссылка на отдельный стиль sheet по определенным запросам средств массовой информации, что вполне нормально, если организационные выгоды перевешивают эффективность теряется.Для устройств, не включайте ориентации или для экранов которого браузера шириной не может быть изменен вручную, с помощью отдельной таблицы стилей должны быть fine.
Вы можете, например, разместить запросы средств массовой информации все в одной таблице стилей (см. выше) для таких устройств, как iPad.Поскольку такое устройство можно переключать с портретной на ландшафтную в одно мгновение, если бы эти два запросы средств массовой информации были помещены в отдельную таблицу стилей, сайт придется звонить каждый файл стилей каждый раз, когда пользователь переключается ориентации.РазмещениеСМИ запроса как для горизонтальной и вертикальной ориентации Ipad в том же файле таблицы стилей будет гораздо более efficient.
Другим примером является гибкая конструкция предназначена для стандартного экрана компьютера с изменяемыми размерами браузера.Если браузер можно вручную изменять размеры, размещение всех переменных запросы средств массовой информации в одну таблицу стилей бы best.
Тем не менее, организация может быть ключом, и дизайнер, возможно, пожелают определить запросы средств массовой информации в стандартном HTML теги ссылка:
<link rel="stylesheet" media="screen and (max-width: 600px)" href="small.css" /> <link rel="stylesheet" media="screen and (min-width: 600px)" href="large.css" /> <link rel="stylesheet" media="print" href="print.css" />
JavaScript
Еще один метод, который может быть использован, является наличие, особенно в качестве резервного для устройств, которые не поддерживают все варианты CSS3 СМИ запроса.К счастью, есть уже готовые библиотеки JavaScript, что делает старыми браузерами (IE 5, Firefox 1, Safari 2) поддержка CSS3 Media Queries.Если вы уже используете эти вопросы, просто взять копию библиотеки, и включить его в наценкой. css3-mediaqueries.js
Кроме того, ниже приводится фрагмент образца JQuery, который определяет ширину браузера и изменение стилей соответственно — если кто-то предпочитает более практический подход:
<script ...
Если вы хотите прочитать полностью статью, посетите сайт наших спонсоров