Раскрытие тайны адаптивного веб-дизайна

Чем именно является адаптивный дизайн (он же реагирующий и отзывчивый, — responsive web-design) и как создать адаптивный веб-сайт? В этом уроке объясняется концепция, а так же подробно показан процесс создания шаблона адаптивного веб-сайта.

Адаптивный веб-дизайн является горячей темой в наши дни, тем более что сайты должны адаптироваться к растущему числу мобильных устройств с их относительно небольшими экранами. Многие дизайнеры и разработчики хотят создавать новые сайты с использованием шаблона, основанного на быстром реагировании, или изменить существующие сайты, чтобы включить в них элементы быстрого реагирования.
Тем не менее, с первого взгляда вся эта тема может вызвать недоумение. Адаптивный дизайн является относительно новой идеей, которая быстро развивается. В ней довольно много запутанных терминов, таких как реагирующие шаблоны, адаптивные шаблоны, media queries и viewport’ы. С чего начать?
В этой статье вы получите короткое введение в мир адаптивнаго веб-дизайна. В…:

  • Узнаете, чем именно является адаптивный дизайн и почему это полезно
  • Посмотрите на разницу между терминами «реагирующий шаблон» и «адаптивный шаблон»
  • Возьмете существующий изменяющийся шаблон и превратите его в адаптивный шаблон, который будет хорошо смотреться на всех экранах, начиная от экрана мобильного телефона и заканчивая широкоформатным рабочим столом
  • Посмотрите, как media queries и мета тег viewport могут помочь вам построить адаптивные шаблоны.

Готовы исследовать мир адаптивного дизайна? Поехали!

Адаптивный дизайн в двух словах

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

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

Однако, в большинстве случаев, когда люди говорят о «адаптивном веб-дизайне», они имеют в виду главным образом первую из этих позиций: создание реагирующего шаблона, который сможет легко приспосабливаться к различным размерам экрана. На этом и будет сфокусирована данная статья.
В настоящее время большинство веб-сайтов предназначены для просмотра в браузерах настольных компьютеров с окном около 1000px в ширину. Если окно вашего браузера значительно меньше этого размера, то содержание страницы или выглядит сдавленным, или у вас появляется горизонтальная полоса прокрутки. Аналогичным образом, если вы выводите ваш браузер на широкоформатный экран, то содержание часто выглядит слишком растянуто по горизонтали, или появляется излишнее количество белого пространства на странице.
Например, посмотрите текущую схему elated.com на различных размерах браузера:

elated.com был предназначен для работы с окнами браузера, которые составляют около 1000 пикселей в ширину.

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

При ширине окна в 1600px появляется много неиспользуемого пространства по обе стороны шаблона.

elated.com представляет собой шаблон фиксированной ширины. Можно несколько улучшить ситуацию с помощью шаблона с изменяющейся шириной («резина»), где столбцы и элементы шаблона меняют свой размер пропорционально ширине браузера. Даже при этом, шаблон с изменяющейся шириной перестает справляться с задачей при очень малой или очень большой ширине экрана.
Так как сегодня используется много разных размеров экрана и ширины браузера, то веб-дизайнерам очень трудно удовлетворить всех пользователей, использующих традиционную технику.
Мобильные браузеры с их крошечными экранами между 320 и 768 пикселями в ширину делают ситуацию только хуже. Большинство современных мобильных устройств до некоторой степени позволяют обходить ограничения с помощью масштабирования и панорамирования веб-страниц при помощи пальцев. Однако нельзя уйти от факта, что просмотр традиционной веб-страницы, предназначенной для рабочего стола, на мобильном браузере является малоприятным делом.
Вы можете решить эту проблему путем создания двух веб-сайтов — один для настольных компьютеров и один для мобильных устройств — но тогда вам потребуется дополнительное время на разработку, а также вам придется поддерживать два набора шаблонов для вашего сайта.
Это объясняет, почему разработка адаптивного веб-дизайна является очень важным вопросом. При создании реагирующего дизайна вам нужно создать только одну версию вашего веб-сайта, которая будет прекрасно работать на всех устройствах, начиная от крошечных мобильных и заканчивая широкоэкранными компьютерами. Сайт реагирует по мере того, как изменяется экран или браузер, становится шире или уже, адаптируя свой шаблон соответствующим образом.

Реагирующий или адаптивный?

Возможно, вы слышали оба термина «реагирующий веб-дизайн» и «адаптивный веб-дизайн», используемые для описания веб-сайтов, которые адаптируются к различным размерам экрана. В чем разница?
По сути, оба эти термина описывают одну основную идею: шаблон сайта должен изменяться в зависимости от устройства, на котором он просматривается. Гарри Робертс (Harry Roberts) и Пол Гордон (Paul Gordon) оба в своих статьях говорят о том, что лучшим термином для описания такого шаблона является «адаптивный», так как веб-сайт действительно адаптируется к устройству, а не непрерывно реагирует на изменения в окружающей среде.
Гарри развивает эту точку зрения дальше, и предполагает, что сайты должны просто адаптировать свои шаблоны к небольшому и определенному набору размеров экрана, а не реагировать в непрерывном режиме на изменения пользователем его браузера пиксель за пикселем. Идея в том, что такой «адаптивный» дизайн проще построить, чем реагирующий дизайн.
Так что разница между этими двумя терминами довольно трудноуловима. Но большинству российских дизайнеров и разработчиков, кажется, больше нравится термин «адаптивный», по крайней мере, так было на момент написания статьи. Выбор за вами!

Пример не адаптивного шаблона

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

<!doctype html>
<html>
<head>
  <title>A Fluid Layout</title>
  <link rel="stylesheet" href="main.css" />
</head>
<body>

  <div id="header">
    <div class="inner">
      <h2>Header</h2>
    </div>
  </div>

  <div id="pageBody">

    <div id="nav">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">About</a></li>
        <li><a href="#">Store</a></li>
        <li><a href="#">Friends</a></li>
      </ul>
    </div>

    <div id="content">
      <div class="inner">

        <h1>Fluid Layout</h1>

        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum. Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>

        <p>Curabitur et leo dui, eu semper tellus. Vivamus aliquam, mi ultrices fringilla varius, augue nisl tincidunt elit, eu tincidunt ante metus ac mauris. Praesent congue blandit nunc, eu facilisis ligula faucibus sit amet. Proin eget turpis nulla. Phasellus mattis nisi a ante aliquet posuere. Vestibulum tortor quam, luctus imperdiet venenatis nec, molestie eu massa. Vivamus nec ipsum viverra augue aliquet bibendum. Morbi ac felis purus, sed vehicula mauris. Integer tempor mollis libero id hendrerit. Fusce sit amet urna quis justo varius pulvinar dapibus sed metus.

        <p>Ut vel mauris eu velit fringilla lobortis. Phasellus accumsan sem in nisl luctus gravida. Vestibulum vitae scelerisque eros. Nullam id leo erat, et congue elit. Nunc volutpat justo tempor magna pretium adipiscing. Vivamus eget massa odio. Suspendisse potenti. Aliquam erat volutpat. Proin faucibus leo vel sem lobortis sed hendrerit diam suscipit. Maecenas dignissim, neque sit amet tristique pulvinar, ipsum orci porttitor odio, ac auctor nunc mauris ac nisi. Sed vitae dui et urna mollis elementum et id purus. Suspendisse bibendum quam id lacus condimentum ut pharetra orci mollis. Curabitur et consequat nisi. Suspendisse dictum luctus neque, id tincidunt justo rutrum non. Aenean fringilla quam ac magna ornare vehicula.</p>

      </div>
    </div>

    <div id="sidebar">
      <div class="inner">

        <h2>About Us</h2>
        <p>Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Morbi ac felis purus, sed vehicula mauris.</p>

        <h2>Contact Us</h2>
        <p>Morbi ac felis purus, sed vehicula mauris.</p>

      </div>
    </div>

  </div>

  <div id="footer">
    <div class="inner">
      <h3>Footer</h3>
    </div>
  </div>

</body>
</html>

А вот файл CSS, main.css:

body {
  margin: 20px;
  padding: 0;
  font-family: "Georgia", serif;
  line-height: 150%;
}

h1 {
  line-height: 100%;
}

#pageBody {
  max-width: 1200px;
}

#header, #nav, #footer, h1, h2, h3 {
  font-family: Tahoma, Geneva, sans-serif;
}

#header {
  width: 100%;
  margin: 0;
  padding: 0;
}

#header .inner {
  margin: 0 0 20px 0;
  padding: 20px;
  color: #fff;
  background: #F38630;
}

#header a {
  display: block;
  float: right;
  color: #fff;
  font-weight: normal;
  font-size: 80%;
}

#content {
  float: left;
  width: 65%;
  margin: 0 0 20px 0;
  padding: 0;
}

#content .inner {
  margin-right: 20px;
  padding: 20px;
  color: #333;
  background: #E0E4CC;
}

#sidebar {
  float: right;
  width: 20%;
  margin: 0;
  padding: 0;
}

#sidebar .inner {
 margin-right: 20px;
  padding: 20px;
  color: #fff;
  background: #69D2E7;
  font-size: 85%;
}

#nav {
  float: right;
  width: 15%;
  margin: 0;
  padding: 0;
}

#nav ul {
  margin: 0;
  padding: 20px;
  list-style: none;
  color: #333;
  background: #A7DBD8;
  overflow: hidden;
}

#nav li {
  border-bottom: 1px solid rgba(255,255,255,.5);
}

#nav li:last-child {
  border-bottom: none;
}

#nav a {
  display: block;
  color: #fff;
  text-decoration: none;
  padding: 10px 0 10px 10px;
  font-weight: bold;
}

#nav a:hover {
  background: #bce5e3;
}

#footer {
  clear: both;
  width: 100%;
  margin: 0;
  padding: 0;
  color: #fff;
  background: #FA6900;
}

#footer .inner {
  padding: 5px 20px;
}

Этот шаблон достаточно прост. Он включает в себя:

  • Хедер, #header. Полоса простирается всю ширину окна.
  • Контент, # content. Эта область находится слева, и занимает 65% от ширины окна.
  • Сайдбар (боковая колонка), # sidebar. Это область находится справа от области основного содержания, и занимает 20% от ширины окна.
  • Меню навигации, #nav. Оно так же находится в правой части сайта, а именно справа от боковой панели. Оно занимает 15% от ширины окна.
  • Футер, #footer. Как и в заголовке, эта полоса простирается через всё окно.

Мы также обернули контент, сайдбар и навигацию в #pageBody div, которому мы даем максимальную ширину в 1200px, чтобы предотвратить слишком большое растяжение содержимого сайта на очень широких окнах браузера.

Демо

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

Изменяющийся шаблон хорошо подходит для относительно широких окон браузера.

Однако с узкими окнами изменяющийся шаблон перестает работать правильно.

Как сделать шаблон адаптивным

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

Понимание media queries

Ключом к созданию адаптивных шаблонов является стандарт CSS media queries. С помощью media queries вы можете создать множество наборов правил CSS, которые применяются только когда видимая область браузера находится в рамках определенной ширины или высоты, или в пределах диапазона заданной ширины / высоты. Например, при создании media query для окон, ширина которых менее 700 пикселей, можно применить набор пользовательских правил CSS, которые автоматически подстраивают элементы страницы, когда страница выводится на узкие окна браузера.
Media queries работают почти во всех современных браузерах, за исключением Internet Explorer 8 и его более ранних версий.
Вот некоторые media queries, которые, скорее всего, придется использовать при построении адаптивных шаблонов:

min-width: width
Применяется, если ширина окна больше или равна ширине шаблона

max-width: width
Применяется, если ширина окна меньше или равна ширине шаблона

min-device-width: width
Применяется при ширине экрана устройства больше или равной ширине шаблона

max-device-width: width
Применяется при ширине экрана устройства меньше или равной ширине шаблона

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

Разница между шириной шаблона и шириной устройства очень трудноуловима, но важна:
width — это ширина окна браузера. На браузерах обычных компьютеров, width, как правило, меньше ширины экрана. Тем не менее, на мобильных браузерах, width обычно больше ширины экрана, так как большинство мобильных браузеров используют «виртуальное окно», которое больше размеров экрана, что позволяет пользователю увеличивать и уменьшать масштаб изображения, а также перемещаться по области окна, перетаскивая изображения. Например, Mobile Safari использует виртуальное окно, ширина которого составляет 980px, хотя ширина экрана устройства IOS, как правило, составляет от 320 до 768px (в вертикальном режиме). Более подробно про окна вы узнаете далее.
device-width — это ширина экрана устройства. На настольном компьютере эта информация обычно не так важна для нас, как веб-разработчиков. Знать ширину экрана на мобильном устройстве может быть полезно, так как в таком случае вы сможете адаптировать шаблон, чтобы он соответствовал экрану устройства. Однако, если вы используете мета-тег viewport для блокировки ширины окна в соответствии с шириной экрана (подробнее об этом позже), то вы можете просто использовать width вместо device-width для достижения того же результата.

Другое трудноуловимое различие в том, что width (min-width/max-width) измеряется в пикселях CSS, в то время как device-width (min-device-width/max-device-width) измеряется в пикселях устройства. Когда страница увеличена до 100% на мобильном устройстве, то 1 CSS пиксель = 1 пикселю устройства. Однако если масштаб страницы уменьшен, тогда 1 CSS пиксель меньше 1 пикселя устройства. Дальнейшее развитие событий осложняется появлением дисплеев высокой чёткости, таких как Retina Display от Apple, в котором пиксель устройства может фактически вмещать более одного пикселя экрана! ( Это делает жизнь веб-разработчика легче, так как ему не нужно больше беспокоиться о том, будет дисплей устройства нормальной или же высокой плотности).

Адаптация к окнам шириной в 1000 или менее пикселей

Как уже отмечалось в статье ранее, наш резиновый шаблон хорошо работает для браузеров с широкими окнами, но контент, сайдбар и навигация начинают выглядеть скомкано, когда окно по ширине становится менее 1000px.
Давайте это исправим. Мы будем использовать media query, чтобы понять, является ли ширина окна меньше или равной 1000px. Если ширина именно такая, то мы поместим навигацию в верхней части боковой панели, а не с правой стороны. Затем мы можем сделать навигацию, боковую панель и содержание немного шире, так, чтобы все выглядело менее скомкано.
Вот CSS, чтобы сделать вышеописанное — можно добавить его либо в конце main.css, либо положить его в отдельный файл CSS, или же вставить его в head страницы:

/* если ширина окна <= 1000px ... */
 /*открываем media query*/
@media screen and (max-width: 1000px) {

  /* Делаем основной контент немного шире */

  #content {
    width: 75%;
  }

  /* Переносим навигацию наверх сайдбара */

  #nav, #sidebar {
    width: 25%;
  }

  /* Регулируем отступы сайдбара */

  #sidebar .inner {
    margin-right: 0;
    margin-top: 20px;
  }

}
 /*закрываем media query*/

Наборы правил внутри нашего media query запускаются при просмотре страницы на экране, если при этом ширина окна составляет 1000 или менее пикселей. Наборы правил выглядят следующим образом:

  • Первый набор правил растягивает ширину контента с 65% до 75%.
  • Второй набор правил ставит навигацию в верхнюю часть боковой панели, устанавливая ширину обоих элементов равной 25%.
  • Третий набор правил удаляет правое поле из содержания боковой панели и добавляет вместо этого верхнее поле, так, чтобы получилось некоторое пространство по вертикали между навигацией и сайдбаром.

Демо

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

Наш первый адаптивный шаблон по media query в действии. Вот первоначальный резиновый шаблон в окне шириной 800px…

… а вот адаптивный шаблон, также с шириной 800px. Обратите внимание, что навигация перемещена в положение над боковой панелью, создавая больше места для содержания.

Адаптация к окнам шириной в 700 или менее пикселей

По мере того, как окно сужается до ширины в 700px даже наши новые две колонки начинают выглядеть сжато:

При ширине в 500 пикселей наши две колонки адаптивного шаблона начинают выглядеть сплющено.
Чтобы решить эту проблему, мы можем использовать другой media query для того, чтобы переделать страничку в одну колонку для таких узких размеров окон. Вот CSS:

	/* если ширина окна <= 700px ... */
	  /*открываем media query*/
	@media screen and (max-width: 700px) {

	  /* Заполняем контентом всю ширину экрана */

	  #content {
	    width: 100%;
	  }

	  /* Удаляем правый отступ у контента */

	  #content .inner {
	    margin-right: 0;
	  }

	  /* Располагаем навигацию над контентом */

	  #nav {
	    float: none;
	    width: 100%;
	    margin-bottom: 20px;
	  }

	  /* Располагаем элементы навигации в строку */

	  #nav li {
	    float: left;
	    width: 24%;
	    border-bottom: none;
	    border-right: 1px solid rgba(255,255,255,.5);
	  }

	  #nav li:last-child {
	    width: 27%;
	    border-right: none;
	  }

	  #nav a {
	    text-align: center;
	    padding-left: 0;
	  }

	  /* Располагаем сайдбар под контентом*/

	  #sidebar {
	    float: none;
	    clear: both;
	    width: 100%;
	    margin: 20px 0;
	  }

}
 /*закрываем media query*/

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

  • Растягиваем контент на всю ширину окна и удаляем правый отступ
  • Перемещаем навигационное меню над контентом и растягивает его на всю ширину окна
  • Располагаем навигационные горизонтально, а не вертикально
  • Перемещаем сайдбар под контент и растягиваем его на всю ширину окна

Демо

На рисунке ниже показан новый шаблон с одной колонкой при просмотре в узком окне:

Создав еще один media query, мы можем переделывать наш шаблон снова, как только ширина окна становится менее 700 пикселей. Вот новый шаблон для просмотра в viewport с шириной в 500 пикселей.

Адаптация к viewports шириной в 480 или менее пикселей

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

/* Если ширина окна  <= 480px ... */

@media screen and (max-width: 480px) {

  body {
    margin: 0;
  }

  #header .inner {
    padding-top: 5px;
    padding-bottom: 5px;
  }

  #header .inner, #content, #nav, #sidebar {
    margin-bottom: 5px;
  }

  #nav ul {
    padding: 5px 7px;
  }

}

Эти наборы правил убирают белый отступ вокруг края страницы и уменьшают другие белые отступы с 20 пикселей до 5 пикселей, при условии, когда ширина окна уменьшается до 480 или менее пикселей. Они также слегка уменьшают отступы на заголовок и навигационные элементы.
Попробуйте этот шаблон в вашем браузере. Теперь он должен хорошо выглядеть при любой ширине браузера, начиная с 1600 пикселей и заканчивая 320 пикселями.
Демо

Изображения ниже показывают шаблон, просматриваемый на браузере шириной в 480 пикселей, до и после применения последнего media query.

При ширине окна в 480 пикселей, наш шаблон с одной колонкой теряет много ценного места на экране из-за ширины белого поля в 20 пикселей.

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

Работа с мобильными устройствами: viewport meta tag

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

На iPhone наш адаптивный шаблон ведет себя так, будто ширина окна чуть менее 1000 пикселей, а не 320 пикселей. Почему?

Как вы можете видеть, браузер iPhone уменьшил масштаб страницы, что делает текст маленьким и трудно читаемым. В данном случае сработал наш media query на «1000 или менее пикселей» — он уменьшил страницу до двух колонок, вместо трех, но при этом media query на «480 или менее пикселей» не запускается, хотя ширина экрана iPhone составляет всего 320px при вертикальном режиме и 480px — при горизонтальном. Что происходит?
Размеры retina-дисплеев iPhone 4 с высокой четкостью изображения составляют 640×960, а не 320×480. Тем не менее, из соображений совместимости, эти устройства по-прежнему сообщают о своих размерах экранов как о 320×480 пикселей, с точки зрения CSS.
Ответ заключается в трудноуловимом различии между окном и экраном мобильных устройств, которое вы кратко изучали ранее в разделе Понимание media queries.
iPhone, как и большинство мобильных браузеров, использует виртуальное окно, которое больше по размерам, чем физический экран. Это позволяет мобильным браузерам отображать веб-страницы, предназначенные для больших окон браузеров рабочих столов. Первоначально окно масштабируется таким образом, чтобы вся страница помещалась на экран. Затем пользователь может потянуть или дважды нажать на конкретную область окна, чтобы увеличить ее.
Окно iPhone шириной 980px прекрасно работает для большинства веб-сайтов, которые предназначены для просмотра на рабочем столе с разрешением монитора 1024×768. Вот почему наш media query «1000 или менее пикселей» запускается на iPhone. Тем не менее, мы создали реагирующий шаблон, который разработан специально, чтобы адаптироваться к маленьким экранам, со страницей, увеличенной до полного ее размера. Как мы можем сказать iPhone, что он должны использовать окно с шириной в 320 или 480 пикселей, что будет соответствовать размеру экрана, а не их виртуальному окну с шириной в 980 пикселей?
Вот тут-то и вступает в дело мета-тег viewport. Добавив этот тег для области head, можно управлять размером окна мобильного браузера.
В нашем случае мы хотим, чтобы ширина окна соответствовала ширине экрана устройства, и чтобы соблюдалось соотношение 1:1 между CSS пикселями страницы и пикселями экрана устройства. Мы можем сделать это с помощью двух значений в тегах viewport: первоначальный масштаб initial-scale и максимальный масштаб maximum-scale. Вот как это сделать:

<meta name="viewport" content="initial-scale=1, maximum-scale=1" />
  • initial-scale = 1 — этот показатель гарантирует, что страница, при самом первом ее просмотре будет полностью увеличена так, чтобы ширина окна совпадала с шириной экрана устройства при вертикальном режиме — например, 320 пикселей на iPhone и 768 пикселей на IPad.
  • maximum-scale = 1 — этот показатель предотвращает увеличение масштаба страницы больше, чем при соотношении 1:1 в дальнейшем, даже при повороте в горизонтальный режим. Другими словами, этот показатель заставляет iPhone увеличить ширину окна до 480px в горизонтальном режиме. Если мы не включим максимальную величину масштаба, то ширина окна будет 320px, как в вертикальном режиме, так и в горизонтальном режиме. Иногда это может быть именно то, что вы хотите получить, но в случае нашего адаптивного шаблона такой вариант может стать причиной слишком сильного растягивания содержания в горизонтальном режиме.

Теперь, при просмотре нашей страницы на iPhone в вертикальном режиме, ширина окна составляет 320px. При просмотре в горизонтальном режиме ширина составляет 480px. Это позволяет успешно задействовать наш media query «480 или менее пикселей», как вы можете видеть на изображении ниже:

С помощью мета-тега viewport вместе со значениями initial-scale и maximum-scale, мы можем убедить мобильные браузеры сопоставить ширину их шириной окна устройства, тем самым создавая правильный media query.
Если у вас есть мобильные устройства, такие как iPhone, IPad или телефон Android, вы можете посмотреть

Демо
Вы также можете точно контролировать ширину окна, используя значения, такие как width=500 (для 500px) и width=device-width (для ширины экрана устройства в вертикальном режиме). В зависимости от типа вашего шаблона, строгая настройка ширины может лучше вам подойти. Смотрите Safari Web Content Guide для получения дополнительной информации.

Резюме

В этой статье вы изучили концепцию адаптивного веб-дизайна и опробовали несколько способов создания адаптивного дизайна. Что вы узнали:

  • Основная идея адаптивного веб-дизайна: создание сайтов, которые легко приспосабливаются к различным размерам экранов и устройств.
  • Трудноуловимое различие между терминами «адаптивный веб-дизайн» и «адаптивный веб-дизайн».
  • Как конвертировать стандартный резиноый шаблон в адаптивный шаблон, который адаптируется к различным размерам браузера.
  • CSS media queries и их роль в адаптивных шаблонах.
  • Как установить размер окна мобильного браузера с помощью мета-тега viewport.

Я надеюсь, что статья оказалась вам полезной, и что она раскрыла некоторые тайны адаптивного веб-дизайна. Удачи!

via

Читателям также нравится:

Обратите внимание!

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

Комментарии

  1. 06 Фев
    Юрий

    УРРРРРААААА!
    Громадное спасибо, земной поклон, всяческие респекты плюс бронзовый памятник из золота вам поставить в каждом областном центре!
    Буду делиться ссылками везде, где только можно.
    Вы, кстати, авангард в этой теме. Так держать!

  2. 06 Фев
    naikom

    Спасибо)

  3. 09 Фев
    Ян

    Хорошая статья! Спасибо!

  4. 09 Фев
    дарья

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

  5. 11 Фев
    Настя Манно

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

  6. 11 Фев
    naikom

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

  7. 12 Фев
    WarEnek

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

  8. 12 Фев
    naikom

    Ну… мне это не кажется пустой тратой времени) http://bit.ly/xvqIcl — вот, к примеру, динамика роста переходов с iPhone/iPad на мой блог.

  9. 12 Фев
    Юрий

    2WarEnek:
    «тратить время под надстройку под девайсы в наше время роскошь.»
    Не согласен в принципе. Роскошь — это экономить время и средства на интернет-проекты, слепленные местными «джамшутами» из шаблонов, «на коленках, за еду». Отсутствие вкуса и технологическая безграмотность заказчиков, вкупе с немыслимой дешевизной изготовления, диктуют некий стандарт УГ. Из которого, к сожалению, и состоит подавляющее большинство сайтов в Сети.
    Победить мы это не можем. Но! Можем постепенно прививать потребителю пристрастие к технологической безупречности и удобству пользовательских интерфейсов. С помощью подобных технологий, в том числе.

  10. 12 Фев
    naikom

    А еще мы можем делать это, чтобы выгодно отличаться от других)

  11. 17 Фев
    OPener

    Замечательная статья, naikom! Впервые зашёл к вам на сайт и понял, что останусь с вами надолго.

    «А еще мы можем делать это, чтобы выгодно отличаться от других» — классные слова.

    Поэтому мы и с вами.

  12. 17 Фев
    naikom

    И это очень хорошо)

  13. 25 Фев
    Андрей

    Заказывал интернет магазин у http://radugastudio.ru Нарисовали макет все не как я хотел, не установили прием платежей. И такая низкая цена вообще удивила, скупой платит дважды. Всем кто хочет эксклюзивный дизайн не рекомендую! Еще и спамом закидывают по всем сайтам

  14. 12 Мар
    svoi-sait

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

    Михаил, я собираюсь делать редизайн одного из моих сайтов. Новый дизайн ориентирован на будущее (опять переделывать через 3 года нет желания).
    Собираюсь сделать дизайн Адаптивный -
    @media screen and (max-width: 1000px) — 2 колонки
    @media screen and (max-width: 1240px) — 3 колонки

    для IE8 и младше фиксированный width: 1240px

    И для мобильных устройств — PDA версию.

    Правильный ли мой выбор?

  15. 12 Мар
    naikom

    Не имею представления, в ваш вопрос нужно вникать, а этого сделать я не готов) Как совет — посмотрите как делаются другие подобные шаблоны.

  16. 24 Мар
    Борис

    Вот один из первых отечественных респонсив-сайтов http://www.printweek.ru. Обратите внимание — ребята реализовали весьма сложную верстку и кучу специальных вещей типа форм. Это вам не готовые шаблоны из трех страниц с темфореста.

  17. 24 Мар
    Юрий

    2Борис:
    Лихо! Спасибо за ссылку. Интересно, что за ребята. Полез в код, автор указан как http://www.fruitware.ru/ — сайт в разработке. Как всегда — мы, сапожники, — босиком! ))

  18. 21 Июн
    Валдис

    Интересная статья спасибо! Прочитав ее хочется себя попробовать в реагирующем дизайне!:)

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

  19. 01 Авг
    FreeM

    Серьёзная статья, спасибо. Видел такое на зарубежных блогах, у нас — впервые)

  20. 20 Авг
    assert

    спасибо за статью!как раз только начал разбираться с адаптивной версткой! только вот какой вопрос интересует: как быть если я хочу чтобы на сайте был не просто фоновый цвет а фоновая картинка?

  21. 16 Окт
    Виталий

    Статья помогла и статья хорошая! Так почему же я её читаю с горизонтальной полосой прокрутки?? а?

  22. 16 Окт
    naikom

    @Виталий
    Ну у меня не реагирующий дизайн
    На каком устройстве читаете?

  23. 02 Ноя
    bob

    Пора обратить внимание и на адаптацию к сверхшироким мониторам. На практике вся адаптация это 1024-1366 пикселя информации и две полосы пустого места. Нигде не встечал решений как перестроить контент в две и более колонки чтобы это хорошо выглядело без лестницы.

  24. 27 Дек
    Егор

    Несмотря на то, что статья в целом познавательная, мы заказали сделать сайт у http://www.rightup.ru/ .Причем мы сайт делали с нуля. Ребята молодые, но их мне тоже порекомендовали. Была парочка косяков — сайт криво пошел на макбуке, но и эту проблему они быстро порешали.

  25. 27 Дек
    naikom

    @Егор
    «Несмотря на то, что статья в целом познавательная, мы заказали сделать сайт у Васи» ) О чем коммент то?

  26. 31 Дек
    Вова

    Спасибо. Отличная статья! Все чётко !

  27. 15 Апр
    Александр

    Огромное спасибо! Лучшая статья из всех, что я находил. Всё четко, понятно, без лишней воды. Автору респектос =)

  28. 25 Апр
    MACKHater777

    Круто и так далее. Но правильный сайт на таком не постоишь. Мы пойдем другим путём (В. И. Ленин)!!!

  29. 28 Май
    Дима

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

  30. 28 Май
    naikom

    @Дима
    нет, к сожалению, времени переделывать дизайн блога

    возможна конечно, но как — не могу сказать

  31. 30 Май
    Vashkivtsi.com

    Огромное спасибо за статью очень полезна статья

  32. 18 Июн
    Анна

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

  33. 18 Июн
    naikom

    Думаю, обычный ресайз

  34. 06 Авг
    Андрей

    А вот как адаптивный дизайн выглядит в работе — http://www.autoscar.ru , можно заходить с любого устройства, планшет, смартфон, и разные разрешения экрана. К стати рекламные блоки там тоже адаптивные.

  35. 11 Авг
    Paul

    супер!просто супер статья!

  36. 14 Авг
    Не важно

    naikom, слайдер глючит при смене разрешений.

  37. 14 Авг
    Не важно

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

  38. 20 Сен
    Михаил

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

  39. 23 Ноя
    Fruitware

    2Борис — Спасибо за упоминание нас (http://fruitware.ru) как разработчиков Printweek.ru
    Сайт делался 2 года назад и реально был одним из первых аналогов boston glob в рунете. С тех пор многое изменилось, появилось намного больше опыта и понимания, как в респонсиве, так и в веб-приложениях.

  40. 31 Дек
    Sergey Kochegarov

    http://mobithinking.com/sites/mobithinking.com/files/ch9_mobile_sites_and_responsive_design.pdf страница 83.
    Responsive design – responsive design allows web pages to
    be displayed differently on different devices by adjusting the
    layout and page elements shown. These adjustments are made
    within the browser.
    ● Adaptive design – adaptive design allows for a specific version
    of a web page to be sent to a specific device or browser. Once
    the device and/or browser is known, only the relevant version
    of the web page is sent to the browser.

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

    Решение очевидно это сайты основанные на RESS – responsive web design with server-side components. Такие решения создают необходимую версию сайта для устройств отображения без верстальщиков. Все получается автоматом.

    Примером такого решения является MobiCot — PHP Mobile Content Management Framework http://www.cotonti.mobi

  41. 19 Янв
    Fruitware

    @Sergey Kochegarov вы немного ошибаетесь. Нет проблем создать при помощи JS, HTML и CSS сделать различные версии, различные ссылки на изображения и манипуляции с DOM-структурой сайта.
    Это НЕ добавляет нагрузки для мобильных устройств, не увеличивает объёмы траффика и скорость загрузки.

  42. 08 Фев
    Ярослав

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

  43. 16 Фев
    Сергей

    Спасибо за статью. Именно то, что искал — все по полочкам. Попробую применить на практике.

  44. 02 Апр
    Виталий

    Спасибо за статью! С нее я начал понимать основы адаптивной верстки. Позже конечно почитал оригинал Итана Маркотта. Насколько я понимаю, здесь описываются подходы отзывчивой верстки, что является составляющей адаптивного диайна. А один из принципов адаптивного дизайна «сначала мобильные (mobile first)». Чего тут нет. Поэтому, просто нужно понимать разницу.

  45. 17 Май
    Михаил

    Спасибо громадное!)))Разрабатывал мобильную версию и никак не мог подогнать под размер дисплея,но после прочтения данной статьи всё сделал за «пару кликов»))

  46. 21 Май
    Александр

    Одна из лучший статей на эту тему в рунете

  47. 06 Сен
    Елена

    А вот как адаптивный дизайн выглядит в работе у нас — журналкрым.рф , можно его посмотреть с любого устройства, планшета, смартфона, или любого другого разрешения экрана, и даже с Motorola 176×220. Рекламные блоки на сайте также адаптивные.

    Спасибо за статью и возможность прокомментировать! Удачи!

  48. 01 Окт
    Александр

    жаль, что тема «картинки» не раскрыта. и ещё интересует возможность скрытия части контента при мобильном просмотре.

  49. 30 Ноя
    максим

    Здравствуйте, сайт на 4 колонках http://micro-chip.com.ua/ новичек в этой верстке, подскажите куда что вставлять для адаптации, заранее спасибо!!!?

  50. 30 Ноя
    максим

    К сожалению сайт я скрыл от просмотра, скажите када открыть

  51. 09 Дек
    максим

    Подскажите как сделать сайт адаптивным?

  52. 22 Дек
    Павел

    Таким людям только книги писать.Все понятно и доходчиво, ..Спасибо.

  53. 08 Янв
    Reboox

    Понравилась статья. спасибо!

  54. 20 Фев
    Kolass

    Хорошо разжалованная информация про адаптацию. Решил свой сайт сделать для планшетов доступным к нормальному отображению, а Ваша статья — самое то, что мне требовалось! Большое спасибо!

Оставить комментарий:

Anti-Spam Protection by WP-SpamFree


  • Kevin Durant Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Nike Lebron James Shoes
  • Derrick Rose Shoes
  • D Rose Shoes
  • KD 7 Shoes
  • Kobe X Shoes
  • Kobe 10 Shoes
  • KD 7
  • Kevin Durant Shoes
  • KD Shoes
  • Nike KD Shoes
  • Kobe 10 Shoes
  • Discount Kobe Shoes
  • Kobe Shoes
  • Kobe Bryant Shoes
  • KD 7 Shoes
  • Kyrie Irving Shoes
  • Lebron 12
  • Lebron James Shoes
  • Lebron Shoes
  • Nike Free
  • Nike Free Run
  • Air Max Shoes
  • Cheap Air Max Shoes
  • Lebron James Jersey
  • Kobe Bryant Jersey
  • Kevin Durant Jersey
  • Air Jordan Shoes
  • Michael Jordan Jersey
  • Blake Griffin Shoes
  • Russell Westbrook Shoes
  • Rose Shoes
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Shoes
  • Kyrie 1 Shoes
  • Nike Free 5.0
  • Nike Free 5
  • kevin durant shoes
  • kd 7
  • kd new shoes
  • KD Shoes
  • Kyrie 1
  • Jeremy Scott shoes
  • Jeremy Scott Adidas
  • Tenis Adidas Springblade
  • Kevin Durant Shoes
  • Kobe Bryant Shoes
  • KD Shoes Store
  • KD Sneakers
  • Lebron Basketball Shoes
  • Adidas Porsche Design
  • kd shoes
  • Cheap Herve Leger Dress
  • Cheap Lebron Shoes
  • Adidas Porsche Design
  • Lebron James Shoes
  • Coach Retail Store
  • nba jerseys
  • louis vuitton handbags
  • Cheap Lebron 11
  • Kobe Bryant Shoes
  • Kevin Durant Shoes
  • louis vuitton belts
  • kobe shoes
  • Lebron James Shoes
  • Kevin Durant Shoes
  • Los Angeles Clippers Jerseys
  • Toronto Raptors Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • KD Shoes
  • Lebron James Shoes
  • KD 7
  • Westbrook Shoes
  • Lebron Shoes
  • Lebron James Shoes
  • Air Max Shoes
  • kobe bryant shoes
  • Derrick Rose Shoes
  • Rose Shoes
  • KD 7
  • Kobe X
  • Kobe 10
  • Lebron Shoes 12
  • kyrie irving shoes
  • Nike KD Shoes
  • Cheap Nike Free
  • Nike Free
  • Lebron 12 Shoes
  • Cheap Air Max
  • Cheap Lebron Jerseys
  • Kobe Bryant Jerseys
  • Kevin Durant Jersey
  • Kobe Shoes
  • Griffin Shoes
  • Michael Jordan Jerseys
  • Kobe Jerseys
  • Lebron Jerseys
  • Kobe Bryant Jerseys
  • Lebron James Jerseys
  • Cheap Supra Shoes
  • Supra Shoes
  • Nike Kyrie 1
  • Nike Free Shoes
  • Nike Free Run
  • KD shoes
  • Kyrie 1 Shoes
  • Kevin Durant Shoes
  • Jeremy Scott Wings
  • Jeremy Scott Shoes
  • Lebron James Shoes
  • Adidas Porsche Design
  • Kobe Shoes
  • Cheap Kevin Durant Shoes
  • Kevin Durant Shoes
  • Lebron 11
  • Porsche Design Adidas
  • Cheap KD Shoes
  • Lerbon James Sneakers
  • Cheap KD Shoes
  • Herve Leger Dress
  • Lebron Shoes
  • Porsche Design Shoes
  • Lebron Shoes
  • Nike Shoes
  • Cheap Coach Bags
  • louis vuitton purses
  • cheap nba jerseys
  • Lebron James Shoes
  • Cheap Kobe Shoes
  • Kobe Shoes
  • KD Shoes
  • KD Shoes
  • Sacramento Kings Jerseys
  • Washington Wizards Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Lebron 11
  • Kobe Shoes
  • cheap kobe shoes
  • lebron 12 shoes
  • James Shoes
  • Lebron Shoes
  • Rose Shoes
  • Derrick Rose Shoes
  • Kobe 9
  • NIke KD
  • KD VII
  • KD Shoes 2015
  • kyrie shoes
  • Air Max 90
  • Air Max Shoes Sale
  • Nike Free Shoes
  • Nike Free Run 2
  • Lebron 12
  • Lebron Jerseys For Sale
  • Cheap Kobe Jerseys
  • KD Jersey
  • Jordan Jersey
  • Jordan Griffin Shoes
  • Kobe Bryant Jersey
  • Lebron James Jersey
  • Supra Footwear
  • Supra Shoes
  • KD Shoes
  • Kyrie irving Shoes
  • Nike Free Run Shoes
  • nike free run 5.0 women
  • KD Shoes
  • Kyrie Irving Shoes
  • Kevin Durant Shoes
  • KD Shoes
  • Kobe Shoes
  • Kobe Shoes
  • Adidas Wings
  • Kobe Bryant Shoes
  • Porsche Design Adidas
  • Cheap Kobe Shoes
  • KD 6
  • Cheap Westbrook Shoes
  • Kevin Durant Shoes
  • Adidas Porsche Shoes
  • Cheap Lebron James Shoes
  • Kevin Durant Shoes
  • Herve Leger Outlet
  • Lebron James Shoes
  • Adidas Porsche Design Bounce
  • Nike Lebron Shoes
  • Coach Outlet
  • nba jerseys for sale
  • louis vuitton bags
  • Air Jordan 29
  • Nike Lebron Shoes
  • Nike Kobe Shoes
  • Cheap Kobe Shoes
  • Cheap KD Shoes
  • KD 6
  • Utah Jazz Jerseys
  • Philadelphia 76ers Jerseys
  • Air Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron New Shoes
  • James Shoes
  • Cheap Lebron 11
  • Lebron James Shoes
  • KD 7
  • Adidas Rose Shoes
  • Rose 5
  • NIke KD 7
  • irving shoes
  • KD Shoes
  • Kobe 9
  • Air Max 95
  • Air Max 2014
  • Nike Free 3.0
  • Nike Free Run 3
  • lebron shoes for sale
  • kobe 2014
  • Cheap Lebron James Shoes
  • Kobe Jerseys
  • Kevin Durant Jerseys
  • Jordan Jerseys
  • Cheap Griffin Shoes
  • Jordan Westbrook Shoes
  • Kobe Jersey
  • Lebron Jersey
  • Supra Online
  • Supra Shoes
  • Kyrie 1
  • Irving Shoes
  • Kyrie Shoes
  • Nike Kyrie 1
  • KD Shoes 2015
  • Kobe Shoes 2015
  • Kobe Shoes 2015
  • Kevin Durant Shoes
  • Nike KD Shoes
  • Nike Kobe Shoes
  • Nike Kobe Shoes
  • Adidas Jeremy Scott
  • Adidas Jeremy Scott
  • KD Shoes
  • Adidas Springblade Shoes
  • Kevin Durant Shoes
  • nba jerseys 2015
  • Porsche Design Shoes
  • KD 6
  • KD Shoes Sale
  • Lebron James Shoes
  • Lebron James Shoes
  • Cheap KD Basketball Shoes
  • Herve Leger Bandage Dress
  • Adidas Porsche Bounce Shoes
  • Cheap Lebron Shoes
  • Cheap Coach Handbags
  • Louis Vuitton Bags Women
  • louis vuitton outlet
  • Kobe Shoes
  • Cheap Jordan Shoes
  • Lebron Shoes
  • Lebron Shoes Sale
  • Kobe Shoes Sale
  • Kobe Bryant Shoes
  • Lebron James Shoes
  • KD 6 Shoes
  • Boston Celtics Jerseys
  • New Orleans Pelicans Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Lebron James Shoes
  • Lebron 12
  • Cheap Lebron Shoes
  • Lebron Basketball Shoes
  • Cheap Lebron Shoes
  • D Rose Shoes
  • Rose 5.0
  • KD Shoes
  • kyrie irving shoes
  • Nike Air Max Shoes
  • Nike Air Max
  • Nike Free 5.0
  • Nike Free Womens
  • nike lebron 12
  • kobe shoes 2014
  • Cheap Lebron Shoes
  • KD 7 EP
  • KD 2014
  • Kevin Durant Shoes
  • Lebron Jerseys
  • Lebron James Jerseys
  • Kobe Bryant Jersey
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • KD Jerseys
  • Cheap Jordan Jerseys
  • Hyperdunk Griffin Shoes
  • Westbrook Shoes 2015
  • Nike Kobe Jersey
  • Lebron Jersey For Sale
  • Nike Supra
  • Supra Shoes
  • Kyrie 1
  • nike free run 5.0 women
  • nike free run women
  • Cheap Kyrie 1
  • Cheap Kyrie Shoes
  • Kyrie Shoes 2015
  • Adidas Shoes
  • Lebron Shoes
  • Porsche Design Shoes
  • Kobe 8
  • KD Shoes
  • Cheap Kevin Durant Shoes
  • Lebron Shoes
  • nba jerseys 2014
  • kd Shoes nba
  • Herve Leger Bandage Dress
  • Nike Lebron 11
  • louis vuitton sale
  • Kobe Bryant Shoes
  • Air Jordan Shoes
  • Cheap Lebron James Shoes
  • Kobe Shoes Sale
  • Lebron Shoes
  • Miami Heat Jerseys
  • Los Angeles Lakers Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Westbrook Shoes Sale
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Cheap Lebron Shoes
  • Lebron James Shoes
  • Lebron James Shoes Sale
  • Lebron James Jerseys
  • Cheap Rose Shoes
  • Rose 5 Shoes
  • Nike Free 6.0
  • Nike Free Sale
  • Kyrie Shoes Sale
  • KD Shoes
  • Air Max 2014
  • Air Max 90
  • cheap lebron shoes
  • lebron shoes
  • Lebron James Jersey
  • Lebron Shoes
  • Cheap KD Jerseys
  • Kevin Durant Jersey For Sale
  • Kobe Shoes
  • Jordan Jersey sale
  • Jordan Blake Griffin Shoes
  • Russell Westbrook Shoes Sale
  • official supra shoes
  • Porsche Design Shoes
  • Cheap Jeremy Scott Wings
  • Kobe Shoes sale
  • Lebron Shoes
  • Herve Leger Sale
  • nba jerseys sale
  • Coach Wallets
  • cheap louis vuitton handbags
  • Air Jordan
  • Nike Lebron Shoes Sale
  • Kobe 9
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • nike free run 5.0 men
  • nike free shoes on sale
  • Supra Shoes
  • LV Handbags Men
  • Kevin Durant Shoes
  • KD VI
  • Adidas Shoes
  • San Antonio Spurs Jerseys
  • Chicago Bulls Jerseys
  • kd 6
  • kd 7
  • kobe 9
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1
  • Kevin Durant Shoes
  • Lebron Shoes Sale
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron James Shoes
  • Rose New Shoes
  • Rose Shoes 2015
  • Lebron Shoes 2015
  • Lebron 12
  • Lebron Jerseys sale
  • Nike kyrie shoes
  • Adidas Derrick Rose
  • Adidas Store
  • Adidas Shoes
  • Adidas Derrick Rose
  • lebron james shoes
  • Nike Kyrie Shoes
  • Kyrie irving Shoes For Sale
  • Lebron James Jersey
  • Kobe Bryant Jerseys
  • Kobe Jerseys For Sale
  • Kobe Jerseys Sale
  • Supra Shoes
  • Russell Westbrook Shoes
  • Kobe Jersey Sale
  • Cleveland Cavaliers Lebron Jersey
  • OKC Jersey
  • Nike Lebron Shoes
  • Lebron James Basketball Shoes
  • Kevin Durant Shoes
  • Herve Leger Bandage
  • Griffin Shoes Sale
  • nba jerseys store
  • Lebron Shoes 2014
  • cheap louis vuitton bags
  • Cheap Kobe Jersey
  • Lebron Jersey 23
  • Jordan Shoes
  • official nba jerseys
  • NBA Stars Basketball Shoes
  • KD Shoes
  • Air Max Shoes 90
  • Air Max 95
  • KD 2014 Shoes
  • KD For Sale
  • Nike Shoes
  • Nike Free
  • Kyrie 1
  • Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving Shoes
  • Irving Shoes
  • Phoenix Suns Jerseys
  • Customized NBA Jerseys
  • Jordan Shoes
  • kd 6
  • kd 7
  • kobe 9
  • Bulls Jordan Jersey
  • Kyrie 1
  • Nike Kyrie 1
  • Kyrie 1 Shoes
  • Kyrie Irving 1