От автора: в будущем в мире интернета ожидается постоянный прирост мобильного трафика. Значит, уже сейчас нужно уметь верстать так, чтобы ваш проект хорошо выглядел на всех устройствах. Решение давно найдено – адаптивная верстка сайта! О ней мы и поговорим.

2 способа угодить мобильным пользователям

Простейший способ определить, как сверстан сайт – это уменьшить размеры окна. Если появилась горизонтальная полоса прокрутки, значит это фиксированная верстка. Все размеры задавались, скорее всего, в пикселах. Удобно ли будет пользоваться таким сайтом пользователям на мобильных устройствах? Нет.

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

Рис. 1. Как видите, даже на мобильном телефоне webformyself неплохо отображается.

Адаптивность – начало пути

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

@media only screen and (max-width: 980px){}

@ media only screen and (max - width : 980px ) { }

Давайте разберемся подробнее с этой записью.

@media – собственно обозначение медиа-запроса

Screen – указываем, что это относится к экрану (тут можно также указать телевизор или проектор). Only – означает, что правила будут применены только к screen.

And (и) – добавление условия, для которого будет работать медиа-запрос. Условие добавляется в круглых скобках.

Max-width: 980px – само условие. Простым языком это означает, что медиа-запрос будет работать, когда ширина экрана составляет максимум 980 пикселей (то есть от 0 до 980рх). Если ширина больше 980, правила не сработают. Чаще всего здесь в качестве условия выступают max-width, min-width, max-device-width, min-device-width. Последние два означают, что правила будут работать только на самих мобильных устройствах (то есть при изменении ширины окна на компьютере горизонтальный скролл появится). Также можно указывать max-height, но это используют очень редко.

{} – в этих фигурных скобках как раз прописываются все css-правила. Их может быть сколько угодно. Приведу сразу пару примеров, чтобы вам было понятно:

@media only screen and (max-width: 980px){ .selector{background: black} } @media only screen and (min-width: 600px){ img{float: left} }

@ media only screen and (max - width : 980px ) { Selector { background : black } @ media only screen and (min - width : 600px ) { img { float : left }

Переводим на человеческий язык: если ширина окна меньше 980 пикселей, то к элементу с классом selector будет применено правило {background: black}. Еще более простым языком – фон этого элемента станет черным.

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

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

Рис. 2. Пример медиа-запроса, в котором прописываются правила для широкоэкранных мониторов.

Подробнее об адаптивности

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

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

Сложно ли освоить адаптивную верстку?

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

Как тестировать адаптивность

Проще всего делать это в браузере. Например, у меня в Google Chrome при нажатии F12 появляется отладчик. Попробуйте теперь изменить размеры окна. В правом верхнем углу вы увидите значение его ширины. Это очень удобно для того чтобы быстро проверить свою верстку. Еще я могу порекомендовать responsivetest.net. Сервис достаточно удобен и отлично проверяет адаптивность.

Рис. 3. При зажатии F12 появляется отладчик. Теперь в правом верхнем углу можно видеть текущую ширину окна при изменении.

Почему адаптивная верстка?

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

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

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

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

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

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

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

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

Пример стандартного сайта:

Попасть пальцем по пунктам довольно проблематично;

Нужно все время двигать вправо-влево, чтобы просматривать страницу.

Пример сайта с адаптивной версткой:

Перемещаемся только сверху вниз по экрану;

Нет необходимости изменять масштаб;

Все видно и логично понятно.

Как работает. Механизм

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

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

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

Стоит отметить отсутствие горизонтальной прокрутки. Для продолжения чтения контента достаточно только листать вниз. Сбиться невозможно.

Особенности

Используя данную технологию, дизайн сайта отличается следующими моментами:

• Минималистичный дизайн;
• Отсутствие больших фоновых изображений;
• Не используем Flash (Flash не совместима с мобильными устройствами);
• Количество визуальных элементов минимально, акцент только на главном;
• Меню имеет небольшую вложенность.

Вывод

Анализируя динамику роста мобильных устройств в интернет-трафике напрашивается вывод, что через 1-2 года более 90% активных пользователей интернета будут использовать мобильные устройства. Кто-то как второй гаджет для выхода в интернет, помимо ноутбука и компьютера, треть - как основной. Оставлять без внимания такую огромную, и что главное, еще пустую, нишу - огромное упущение.

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

Адаптивные сайты

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

Нашёл в сети интересный, бесплатный мини-курс по адаптивной вёрстке сайтов на основе HTML5 и CSS3. Изучил его.
** Скачать себе этот курс можно, заполнив верхнюю или нижнюю тестовую форму запроса. **

Новое в HTML5 и CSS3

Решил проверить, можно ли(?) сверстать адаптивный ко всем устройствам сайт, БЕЗ использования технологий HTML5 и CSS3 .

Верстал в кодировке «ANSI» , и с полной служебной записью: «HTML 4.01 Transitional» , вместо положенной по правилам HTML5:

Новые тэги: header, section, article не использовал. Оказалось, достаточно блочной вёрстки, как обычно на тэгах div .

Новый атрибут формы у тэгов input «placeholder» (подсказка) в браузере IE8 НЕ сработал. В остальных — работает .

Аналогично. Новый атрибут «типа» у тэгов input type=»email» срабатывает только в современных браузерах.

Атрибут «value» использовал по-прежнему для внесения значений в формы.

Самое главное! Сначала сайт верстается на обычном мониторе, а уже потом в тэг head вносится строчка кода:

Такая запись говорит браузеру (**так объясняется в курсе!), чтобы он правильно масштабировал контент страницы под используемое устройство .
Хотя, на самом деле, такая запись браузеру ровным счётом ничего не говорит . Это «обращение» к поисковикам.
А вот они уже о-о-очень «ревностно» относятся к наличию/отсутствию подобной записи в тэге head , особенно в последнее время. Проверено!

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

**К примеру. Проводя испытания такой строчки кода, я внёс её в неадаптированную страницу сайта, и … … … . И тут же быстро убрал!

Проверив на смартфоне её отображение, увидел, что браузер смартфона выдал «жуть», т.е. показал ПОЛНЫЙ РАЗМЕР страницы, снабдив возможностью длиннющего горизонтального скролла .

Новый атрибут для тэгов img «srcset» в испытываемой версии «HTML 4.01» не работает!

Напомню, и особо выделю, что я никаких медиа-запросов НЕ делал . Испытания же!

Примеры записей в таблице CSS

Прежде всего о том, какие(?) проверены свойства CSS и, как(?) они сработали.

Свойство background-size: cover; лучше НЕ использовать . Рисунки «режутся», т.е. выходят за пределы экранов мониторов. Приходится уменьшать масштаб, чтобы их увидеть целиком.

И напротив!

Свойство background-size: contain; работает ОТЛИЧНО! Во всех браузерах! Оптимально для «центровых » рисунков. Оно их великолепно масштабирует под любой размер монитора.

Аналогично.

Это же свойство background-size: contain; сработало ОТЛИЧНО и для «боковых » рисунков, т.е. левых/правых. Пробовал!

Боковые рисунки выводил через тэги span , прописав им float: left или right, но ГЛАВНОЕ!
Главное , что выводил рисунок, как фоновый на 2 символа неразрывного пробела , дав тексту размер, равный высоте фонового рисунка (** уменьшив размер текста, рисунок уменьшается пропорционально, без искажений).

Схемы вывода ниже.