Адаптация сайта под мобильные: основные методы

Разработка сайтов

viewport

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правило @viewport

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

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

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport. Данный метатег прописывается в <head> сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

XHTML

<meta name=»viewport» content=»name=value, name=value» />

1 <meta name=»viewport»content=»name=value, name=value» />

Рекомендуется записывать следующим образом:

XHTML

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />

1 <meta name=»viewport»content=»width=device-width, initial-scale=1.0″ />
  • width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
  • initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

Слева без мета-тега, справа с использованием мета-тега  viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли  условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

CSS

@media screen and (max-width: 1000px) {
.class {
свойство: значение;
}
}

1
2
3
4
5

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

.class {

свойствозначение;

}

}

  • @media – медиа – запрос;
  • screen – медиа – тип (также называют тип носителя);
  • max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
  • .class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

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

  • max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
  • min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

Значения, которые используются в медиа — функциях называют также  breakpoints (переломные или контрольные точки). В этих контрольных точках как Вы догадались, и меняется дизайн сайта.

  • 320px — мобильные
  • 480px — мобильные
  • 768px — планшеты
  • 1024px — планшеты, нетбуки
  • 1280px и более — персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

  • and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
  • not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
  • only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

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

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

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

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px / 768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

Если хотите разобраться в этом вопросе подробно то читайте в материале о размерах макета в адаптивном дизайне.

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

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

Отзывчивый, резиновый и адаптивный дизайн: особенности и отличия

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

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

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

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

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

Приоритет создания стилей

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

В настоящее время существует два основных подхода:

Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением)

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

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

Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.

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

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

Почему это плохо

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

  1. Так как большое количество трафика генерируется на мобильных устройствах, то у сайта должна быть версия, рассчитанная именно на мобильные устройства (и такая версия сайта будет удобнее, чем адаптивный дизайн). Адаптивный дизайн подразумевает, что вне зависимости от того, с какого устройства вы заходите на сайт, на ваше устройство будет загружен весь контент, вся информация, которая может быть совершенно не необходима в случае с мобильными устройствами, но в то же время вес сайта может быть критичен, если пользователь вышел в интернет в местности со слабым сигналом. То есть мобильная версия будет загружаться куда быстрее и выигрывать по времени загрузки у адаптивного сайта.
  2. При адаптивном дизайне пользователи не могут переключиться на полную версию. В то время как на сайтах для мобильных устройств внизу обычно есть возможность перейти на полную версию сайта. Чаще всего пользователи пользуются полной версией сайта, если привыкли посещать его с компьютера и видеть его десктопную версию – им проще в ней ориентироваться. И в этом случае им будет неудобно привыкать к новому, адаптивному дизайну сайта, который они увидят на экране мобильного телефона без возможности выбора. К тому же адаптивный дизайн может иметь какие-нибудь недоработки (которые вы не сразу заметите), а у пользователя даже не будет возможности перейти на полноценную версию.
  3. Мобильная версия, как правило, проще, и пользователь сможет быстрее там найти нужную информацию. А если не сможет – возвращаемся к предыдущему пункту – он может перейти на полную версию сайта.
  4. Если у вас уже есть сайт, то при переезде на новый, адаптивный дизайн вы можете потерять тот трафик из соц. сетей, который уже имеете. Поэтому если вы хотите сохранить этот трафик, вам будет удобнее сделать отдельную версию для мобильных телефонов. При этом разработка мобильной версии сайта может быть дешевле, чем разработка полноценного адаптивного сайта.
  5. Если основная часть посетителей вашего сайта заходит на него с десктопных устройств, есть ли смысл что-то менять? В первую очередь необходимо думать о бизнесе и лишь затем вносить изменения, а не переходить на адаптивную верстку только потому, что это «модно и современно».

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

Кстати, будет несправедливо не выделить тут заодно и минусы мобильной версии сайта (по сравнению с адаптивным дизайном). Это:

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

ограничение информации

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

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

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

Вернемся к адаптивному дизайну.

Создание адаптивной сетки по шагам

Шаг 1. Получаем заказ, изучаем макет от дизайнера

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

Пример макета с 3 видами размеров

Шаг 3. Прописываем стили и создаём сетки

Указываем стили всем элементам в CSS. Верстаем сетки, используя инструменты Grid или Flexbox. В зависимости от вида сетки выбирается одно или другое свойство.

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

Пример CSS Grid Layout

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

Пример CSS Flex Layout

  • Когда использовать флексы, а когда гриды
  • Флексы для начинающих

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

Шаг 4. Добавляем вьюпорт

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

Атрибут означает, что размер сайта на устройстве равен размеру в пикселях, который указаны в CSS.

Атрибут говорит о том, что сайт на устройстве будет выглядеть именно так, как описано в CSS, один к одному.

Шаг 5. Указываем стили для планшетной версии сайта

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

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

Пример сетки на разных устройствах:

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

Использование @media screen

Теперь самое интересно. Сейчас будем использовать @media screen основу адаптивного дизайна.

Но для начала хочется сказать, что в @media screen задаются желаемые разрешения устройств. Их существует множество, вот самые популярные: 320px, 480px, 600px, 768px, 900px, 1200px. В нашем примере мы будем использовать только два разрешения, это 1024px и 768px. Таким образом если разрешение устройства меньше чем 1024px будут задаваться свойства, которые заданы в @media screen. Так же точно и с разрешением 768px.

Вот как выглядит правило @media screen в стилях CSS:

@media screen and (min-width:200px) and (max-width:1024px) {

}

Как видите, что мы задали max-width:1024px, данное значение говорит браузеру с какого разрешения применять правило. А min-width:200px не даст сузить сильно сайт. Между этими скобками {} мы пишем новые свойства классам, которые задали в стилях для шаблона.

Адаптивный дизайн или мобильная версия, что лучше

Упоминая адаптивную верстку, разработчики имеют в виду 2в1: дизайн для десктопных и мобильных устройств заключен в один флакон, а подстраивание выполняется автоматически. Мобильная версия функционирует на поддомене (самый распространенный вариант .m), создается отдельный сайт с самостоятельными параметрами аналитики, администрирования и другими показателями. С технической точки зрения десктопная и мобильная версия – два отдельных сайта, имеющих индивидуальные верстку, URL-адрес и наполнение.

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

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

768px

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

@media screen and (min-width:100px) and (max-width:768px) {

#wrapper #colLeft {
 float:none;
 width:100%;
 margin-right:0px;

 }

#wrapper #colRight {
 margin-left:0px;
 margin-top:25px;
 float:none;
 width:100%;

 }

}

Для главного контента #colLeft мы задали ширину в 100%, для того чтобы он растянулся на весь экран, также убрал выравнивание по левому краю float:none, для того чтобы сайдбар #colRight съехал под главный контент.

Для сайдбара, тоже задал ширину в 100% и убрал выравнивание. А так же сделал отступ сверху, чтобы он немного отделялся от контента margin-top:25px;

Вот что у меня получилось:

Предисловие

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

Глава 2. Особенности адаптивного дизайна

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

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

Что касается меню — желательно сократить количество вкладок, меню должно соответствовать разрешению экрана.

  • легкость;
  • акцент на главном;
  • универсальность.

Какие бывают типы HTML-макетов сайтов?

Для начала небольшая ремарка. В этой конкретной статье, HTML-макетами мы будем называть готовые сверстанные HTML-страницы, а не PSD-макеты.

Я рассмотрю фиксированные, резиновые, адаптивные, отзывчивые и смешанные HTML-макеты. В конце подведу итог.

Фиксированные макеты (static, fixed)

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

В 2016 году считается, что такие макеты — пережитки прошлого. Раньше, когда веб-технологии еще не получили достаточного развития, ширина вебстраниц была продиктована разрешением популярных экранов устройств пользователей: 800х600, 1024х768, 1200х800 и так далее.

Даже сейчас можно встретить фиксированную ширину макетов сайтов, скажем, в 960 пикселей. Такой макет можно было бы использовать 10 лет назад, но сейчас…

Резиновые макеты (liquid)

Резиновый или тянущийся («жидкий» от англ. liquid) макет — такой макет сайта, при котором контент сайта может принимать размер любого экрана пользователя. Достигается это за счет того, что величины структурных элементов сайта выражаются не в абсолютных показателях (px), а в относительных (%). Т.е., допустим, ширина элемента в css так и прописывается: не 560px, а 50%.

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

Адаптивные макеты (adaptive)

Не путайте с адаптивным веб-дизайном, позже я объясню почему и покажу разницу.

Адаптивный макет базируется на использовании медиа запросов css (css media queries) — так контент адаптируется под разные экраны.

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

Т.е. несколько контрольных точек задают фиксированное положение и размеры контента на разных экранах.

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

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

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

Отзывчивые макеты (responsive)

В данной классификации макетов, отзывчивые макеты идут еще дальше адаптивных: используют «резину» вместо статики — «%» вместо «px».

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

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

Смешанные макеты (adaptive + responsive)

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

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

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

Иногда такой подход используется для адаптации и оптимизации существующего макета под мобильные устройства. В этом случае его называют «mobile last».

Итог

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

Вот о веб дизайне и поговорим. Сначала об отзывчивом, потом о «mobile first» и концепции постепенного улучшения, потом об адаптивном веб-дизайне.

Ну и в самом конце отвечу на некоторые вопросы об адаптивных макетах сайтов.

Оцените статью

Адаптация сайта под мобильные: основные методы

Дизайн

viewport

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Правило @viewport

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

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

Мedia query и viewport в адаптивном дизайне

Для того чтобы сообщить браузеру как отобразить размеры страницы и изменить ее масштаб используется метатег viewport. Данный метатег прописывается в <head> сайта. Он позволяет разработчикам установить ширину экрана для устройств, которая прописана в css.

Записывается мета тег viewport так:

XHTML

<meta name=»viewport» content=»name=value, name=value» />

1 <meta name=»viewport»content=»name=value, name=value» />

Рекомендуется записывать следующим образом:

XHTML

<meta name=»viewport» content=»width=device-width, initial-scale=1.0″ />

1 <meta name=»viewport»content=»width=device-width, initial-scale=1.0″ />
  • width=device-width — означает что ширина страницы сайта устанавливается в соответствие ширине экрана устройства.
  • initial-scale=1.0 — данный атрибут скажет браузеру установить соответствие масштаба 1:1 для пикселей, что означает не масштабировать.

Слева без мета-тега, справа с использованием мета-тега  viewport.

Также для мета-тега могут устанавливаться другие атрибуты и параметры.

Media Queries

В разработке адаптивных сайтов главную роль играют css3 media queries (медиа — запросы). Медиа – запросы включают в себя медиа — тип (принтеры, смартфоны, экраны, телевизоры, проекторы и др.) и условия, которое может принимать в свою очередь истину или ложь (true, false). В зависимости от того верный ли медиа — тип и выполняется ли  условие будут применяться различные стили css. Если будет верно, то будут применяться те стили, которые прописаны в этом медиа – запросе, если же будет ложным, то будут применяться обычные стили css.

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

Записывается следующим образом:

CSS

@media screen and (max-width: 1000px) {
.class {
свойство: значение;
}
}

1
2
3
4
5

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

.class {

свойствозначение;

}

}

  • @media – медиа – запрос;
  • screen – медиа – тип (также называют тип носителя);
  • max-width: 1000px – условие, которое должно выполняться (в нашем случае стили будут применяться, если ширина окна меньше ширины 1000px);
  • .class – прописываются соответствующие селекторы (классы, id) в которых свойствам задаются новые значения.

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

  • max-width: width — означает, что если ширина окна браузера меньше заданной ширины, то выполняется условие и применяются соответствующие стили (пример: max-width: 768px, означает, что если ширина окна браузера меньше 768px то следует использовать стили, указанные в медиа — запросе).
  • min-width: width — означает, что если ширина окна браузера больше заданной ширины, то условие выполняется, и применяются указанные стили в запросе (пример: min-width: 480px).

Но также могут использоваться и другие функции: color, device-width, grid, height, orientation: landscape, orientation: portrait, resolution и другие.

Значения, которые используются в медиа — функциях называют также  breakpoints (переломные или контрольные точки). В этих контрольных точках как Вы догадались, и меняется дизайн сайта.

  • 320px — мобильные
  • 480px — мобильные
  • 768px — планшеты
  • 1024px — планшеты, нетбуки
  • 1280px и более — персональные компьютеры.

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

В медиа – запросах также применяются и логические операторы такие как:

  • and – логическое И, применяется для объединения нескольких условий (пример: @media print and (color) { … }).
  • not – логическое НЕ, применяется для отрицания условия (пример: @media not all and (color) { … }).
  • only – применяется для старых браузеров, не поддерживающих медиа — запросы (пример: @media only screen and (max-width: 1300px) { … }).

Media queries прописываются в конце файла стилей, после всех основных стилей css.

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

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

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

Если следовать принципу сначала мобильные то будут такие размеры разрешений, под которые необходимо разрабатывать макет 320px / 480px / 768px / 1024px / 1280px может быть и больше зависит от задач.

Картина выглядит примерно, таким образом, но зачастую под какие-то разрешения нет необходимости создавать макет, к примеру, под 480px. если макет не ломается на промежутке 768 — 320px.

Если хотите разобраться в этом вопросе подробно то читайте в материале о размерах макета в адаптивном дизайне.

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

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

Отзывчивый, резиновый и адаптивный дизайн: особенности и отличия

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

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

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

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

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

Приоритет создания стилей

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

В настоящее время существует два основных подхода:

Mobile first — подход при котором разработка сайта начинается и ориентирована на пользователей мобильных устройств. В первую очередь описываются стили, предназначенные для смартфонов, а затем дизайн дорабатывается для планшетных устройств и настольных компьютеров (начинается с размещения основной функции, а затем постепенно добавляются дополнительные элементы для более высоких разрешений, часто это называют progressive enhancement — прогрессивным улучшением)

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

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

Desktop first — подход при котором разработка ведется для для многофункциональных проектов, ориентированных на пользователей настольных компьютеров. В первую очередь описываются стили, предназначенные для компьютеров, а затем дизайн дорабатывается для планшетных устройств и смартфонов. При использовании этого подхода Вы первоначально доводите до максимума и совершенства дизайн и функционал Ваших страниц, а затем адаптируете его под новые разрешения и устройства, удаляя при этом необходимые колонки, перестраиваете стили и позиционируете отдельные блоки, изменяете шрифт и тому подобное. Переход к меньшему разрешению часто называют изящной деградацией — graceful degradation, при которой происходит скрытие и обертывание элементов, пытаясь сохранить при этом как можно больше исходного функционала. Как правило, деградация с настольной версии на мобильную приводит к сбоям в работе пользователей, это связано с тем, что некоторые настольные технологии просто не поддерживаются на мобильных устройствах и должны быть заменены резервным решением, которое, вероятно, будет сложным и дорогостоящим для реализации. Крупные компании зачастую создают дополнительно отдельное приложение для Android или iOS для основных функций, которые будут служить для оптимизации работы мобильных пользователей.

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

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

Почему это плохо

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

  1. Так как большое количество трафика генерируется на мобильных устройствах, то у сайта должна быть версия, рассчитанная именно на мобильные устройства (и такая версия сайта будет удобнее, чем адаптивный дизайн). Адаптивный дизайн подразумевает, что вне зависимости от того, с какого устройства вы заходите на сайт, на ваше устройство будет загружен весь контент, вся информация, которая может быть совершенно не необходима в случае с мобильными устройствами, но в то же время вес сайта может быть критичен, если пользователь вышел в интернет в местности со слабым сигналом. То есть мобильная версия будет загружаться куда быстрее и выигрывать по времени загрузки у адаптивного сайта.
  2. При адаптивном дизайне пользователи не могут переключиться на полную версию. В то время как на сайтах для мобильных устройств внизу обычно есть возможность перейти на полную версию сайта. Чаще всего пользователи пользуются полной версией сайта, если привыкли посещать его с компьютера и видеть его десктопную версию – им проще в ней ориентироваться. И в этом случае им будет неудобно привыкать к новому, адаптивному дизайну сайта, который они увидят на экране мобильного телефона без возможности выбора. К тому же адаптивный дизайн может иметь какие-нибудь недоработки (которые вы не сразу заметите), а у пользователя даже не будет возможности перейти на полноценную версию.
  3. Мобильная версия, как правило, проще, и пользователь сможет быстрее там найти нужную информацию. А если не сможет – возвращаемся к предыдущему пункту – он может перейти на полную версию сайта.
  4. Если у вас уже есть сайт, то при переезде на новый, адаптивный дизайн вы можете потерять тот трафик из соц. сетей, который уже имеете. Поэтому если вы хотите сохранить этот трафик, вам будет удобнее сделать отдельную версию для мобильных телефонов. При этом разработка мобильной версии сайта может быть дешевле, чем разработка полноценного адаптивного сайта.
  5. Если основная часть посетителей вашего сайта заходит на него с десктопных устройств, есть ли смысл что-то менять? В первую очередь необходимо думать о бизнесе и лишь затем вносить изменения, а не переходить на адаптивную верстку только потому, что это «модно и современно».

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

Кстати, будет несправедливо не выделить тут заодно и минусы мобильной версии сайта (по сравнению с адаптивным дизайном). Это:

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

ограничение информации

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

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

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

Вернемся к адаптивному дизайну.

Создание адаптивной сетки по шагам

Шаг 1. Получаем заказ, изучаем макет от дизайнера

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

Пример макета с 3 видами размеров

Шаг 3. Прописываем стили и создаём сетки

Указываем стили всем элементам в CSS. Верстаем сетки, используя инструменты Grid или Flexbox. В зависимости от вида сетки выбирается одно или другое свойство.

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

Пример CSS Grid Layout

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

Пример CSS Flex Layout

  • Когда использовать флексы, а когда гриды
  • Флексы для начинающих

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

Шаг 4. Добавляем вьюпорт

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

Атрибут означает, что размер сайта на устройстве равен размеру в пикселях, который указаны в CSS.

Атрибут говорит о том, что сайт на устройстве будет выглядеть именно так, как описано в CSS, один к одному.

Шаг 5. Указываем стили для планшетной версии сайта

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

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

Пример сетки на разных устройствах:

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

Использование @media screen

Теперь самое интересно. Сейчас будем использовать @media screen основу адаптивного дизайна.

Но для начала хочется сказать, что в @media screen задаются желаемые разрешения устройств. Их существует множество, вот самые популярные: 320px, 480px, 600px, 768px, 900px, 1200px. В нашем примере мы будем использовать только два разрешения, это 1024px и 768px. Таким образом если разрешение устройства меньше чем 1024px будут задаваться свойства, которые заданы в @media screen. Так же точно и с разрешением 768px.

Вот как выглядит правило @media screen в стилях CSS:

@media screen and (min-width:200px) and (max-width:1024px) {

}

Как видите, что мы задали max-width:1024px, данное значение говорит браузеру с какого разрешения применять правило. А min-width:200px не даст сузить сильно сайт. Между этими скобками {} мы пишем новые свойства классам, которые задали в стилях для шаблона.

Адаптивный дизайн или мобильная версия, что лучше

Упоминая адаптивную верстку, разработчики имеют в виду 2в1: дизайн для десктопных и мобильных устройств заключен в один флакон, а подстраивание выполняется автоматически. Мобильная версия функционирует на поддомене (самый распространенный вариант .m), создается отдельный сайт с самостоятельными параметрами аналитики, администрирования и другими показателями. С технической точки зрения десктопная и мобильная версия – два отдельных сайта, имеющих индивидуальные верстку, URL-адрес и наполнение.

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

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

768px

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

@media screen and (min-width:100px) and (max-width:768px) {

#wrapper #colLeft {
 float:none;
 width:100%;
 margin-right:0px;

 }

#wrapper #colRight {
 margin-left:0px;
 margin-top:25px;
 float:none;
 width:100%;

 }

}

Для главного контента #colLeft мы задали ширину в 100%, для того чтобы он растянулся на весь экран, также убрал выравнивание по левому краю float:none, для того чтобы сайдбар #colRight съехал под главный контент.

Для сайдбара, тоже задал ширину в 100% и убрал выравнивание. А так же сделал отступ сверху, чтобы он немного отделялся от контента margin-top:25px;

Вот что у меня получилось:

Предисловие

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

Глава 2. Особенности адаптивного дизайна

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

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

Что касается меню — желательно сократить количество вкладок, меню должно соответствовать разрешению экрана.

  • легкость;
  • акцент на главном;
  • универсальность.

Какие бывают типы HTML-макетов сайтов?

Для начала небольшая ремарка. В этой конкретной статье, HTML-макетами мы будем называть готовые сверстанные HTML-страницы, а не PSD-макеты.

Я рассмотрю фиксированные, резиновые, адаптивные, отзывчивые и смешанные HTML-макеты. В конце подведу итог.

Фиксированные макеты (static, fixed)

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

В 2016 году считается, что такие макеты — пережитки прошлого. Раньше, когда веб-технологии еще не получили достаточного развития, ширина вебстраниц была продиктована разрешением популярных экранов устройств пользователей: 800х600, 1024х768, 1200х800 и так далее.

Даже сейчас можно встретить фиксированную ширину макетов сайтов, скажем, в 960 пикселей. Такой макет можно было бы использовать 10 лет назад, но сейчас…

Резиновые макеты (liquid)

Резиновый или тянущийся («жидкий» от англ. liquid) макет — такой макет сайта, при котором контент сайта может принимать размер любого экрана пользователя. Достигается это за счет того, что величины структурных элементов сайта выражаются не в абсолютных показателях (px), а в относительных (%). Т.е., допустим, ширина элемента в css так и прописывается: не 560px, а 50%.

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

Адаптивные макеты (adaptive)

Не путайте с адаптивным веб-дизайном, позже я объясню почему и покажу разницу.

Адаптивный макет базируется на использовании медиа запросов css (css media queries) — так контент адаптируется под разные экраны.

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

Т.е. несколько контрольных точек задают фиксированное положение и размеры контента на разных экранах.

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

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

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

Отзывчивые макеты (responsive)

В данной классификации макетов, отзывчивые макеты идут еще дальше адаптивных: используют «резину» вместо статики — «%» вместо «px».

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

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

Смешанные макеты (adaptive + responsive)

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

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

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

Иногда такой подход используется для адаптации и оптимизации существующего макета под мобильные устройства. В этом случае его называют «mobile last».

Итог

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

Вот о веб дизайне и поговорим. Сначала об отзывчивом, потом о «mobile first» и концепции постепенного улучшения, потом об адаптивном веб-дизайне.

Ну и в самом конце отвечу на некоторые вопросы об адаптивных макетах сайтов.

Оцените статью