Значит, уже сейчас нужно уметь верстать так, чтобы ваш проект хорошо выглядел на всех устройствах. Решение давно найдено — адаптивная верстка сайта! О ней мы и поговорим. Простейший способ определить, как сверстан сайт — это уменьшить размеры окна. Если появилась горизонтальная полоса прокрутки, значит это фиксированная верстка. Все размеры задавались, скорее всего, в пикселах. Удобно ли будет пользоваться таким сайтом пользователям на мобильных устройствах? По сути, есть два решения этой проблемы. Первый — создать разные версии верстки для ПК, для планшетов и для мобильных телефонов. Именно так сделано, например, в социальной сети Вконтакте. Второй вариант — сделать адаптивную верстку. Такой сайт будет реагировать на изменение ширины окна. Этот вариант сегодня применяется все чаще и чаще. Адаптивная верстка ничем не отличается от обычной за исключением того, что в таблицу стилей добавляются медиа-запросы, где прописываются стили для разной ширины экрана. Иногда их выносят в отдельный css-файл, а иногда пишут в конце основной таблицы стилей. Screen — указываем, что это относится к экрану тут можно также указать телевизор или проектор. Only — означает, что правила будут применены только к screen. And и — добавление условия, для которого будет работать медиа-запрос. Условие добавляется в круглых скобках. Простым языком это означает, что медиа-запрос будет работать, когда ширина экрана составляет максимум пикселей то есть от 0 до рх. Если ширина больше , правила не сработают. Чаще всего здесь в качестве условия выступают max-width, min-width, max-device-width, min-device-width. Последние два означают, что правила будут работать только на самих мобильных устройствах то есть при изменении ширины окна на компьютере горизонтальный скролл появится. Также можно указывать max-height, но это используют очень редко. Их может быть сколько угодно. Приведу сразу пару примеров, чтобы вам было понятно:. Переводим на человеческий язык: Еще более простым языком — фон этого элемента станет черным. До вас уже дошла вся гениальность этого способа верстки? По сути, с помощью медиа-правил вы можем скорректировать существующие или дописать новые css-правила. Таким образом, вы сможем реализовать полностью адаптивный шаблон. Пример медиа-запроса, в котором прописываются правила для широкоэкранных мониторов. Это понятно, но как сделать адаптивную верстку сайта самому? Для этого вам явно недостаточно прописать те два примера. Надеюсь, на них вы поняли суть, но толку от них немного. Нам нужна реальная польза. А ее вы можете получить из курса по практике верстки под мобильные устройства. Но это если браться за адаптивность по-серьезному. Дело в том, что поскольку курс платный, то после его изучение вы сами сможете учить других адаптивной верстке. Если вам нужно что-то попроще, просто чтобы разобраться, то этот бесплатный мини-курс подойдет вам гораздо лучше. Он состоит из пяти видеоуроков, из которых вы сможете разобраться с основами. Курс очень легкий, информация подобрана специально для новичков. В то же время, вы сможете посмотреть на несколько практических примеров, так что после его изучение сами сможете адаптировать простой макет. Когда я только начинал изучение веб-технологий, я даже толком незнал, что такое адаптивная верстка сайта. Сделать такое самому не представлялось возможным. Страх — наш главный враг. Оказалось-то все достаточно просто. И сейчас, когда я порой просматриваю код адаптивных шаблонов, я понимаю, насколько порой легко реализовывается адаптивность. Проще всего делать это в браузере. Например, у меня в Google Chrome при нажатии F12 появляется отладчик. Попробуйте теперь изменить размеры окна. В правом верхнем углу вы увидите значение его ширины. Это очень удобно для того чтобы быстро проверить свою верстку. Еще я могу порекомендовать responsivetest. Сервис достаточно удобен и отлично проверяет адаптивность. При зажатии F12 появляется отладчик. Теперь в правом верхнем углу можно видеть текущую ширину окна при изменении. Вначале статьи я говорил о том, что существует и другой способ угодить мобильным пользователям — разработать отдельно версии для различных устройств. А вы как думаете, какой способ проще? Реализовать адаптивность намного легче. Это всего лишь пару сотен дополнительных строк кода, а не отдельная версия сайта, которая зачастую сильно отличается по дизайну. Как показывает практика, мобильные версии для своих сайтов делают только крупные компании, которые могут себе позволить потратить больше денег на разработку проекта. Для всех остальных адаптивная верстка является тем, к чему нужно стремиться уже сейчас. А поскольку мобильный трафик будет только расти, занимайтесь ее реализацией уже сейчас. А заодно подписывайтесь на наш блог, чтобы улучшать свои знания в сайтостроении. Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3. Подскажите как растянуть input формы поиска на всю высоту div. Сам div размеров не имеет, растянут по высоте посредством padding в меню. Ваш e-mail не будет опубликован. Можно использовать следующие HTML -теги и атрибуты: Spam Protection by WP-SpamFree. Обучение для новичков Уроки и статьи Премиум уроки Наши курсы Форум. Как видите, даже на мобильном телефоне webformyself неплохо отображается. Адаптивность — начало пути Адаптивная верстка ничем не отличается от обычной за исключением того, что в таблицу стилей добавляются медиа-запросы, где прописываются стили для разной ширины экрана. Самые свежие новости IT и веб-разработки на нашем Telegram-канале. Практика HTML5 и CSS3 с нуля до результата! Получите бесплатный пошаговый видеокурс по основам адаптивной верстки с полного нуля на HTML5 и CSS3 Получить. Похожие записи Анимация в CSS3 Как делать красивые css3 кнопки Структура html5 страницы Как использовать в html 5 data-атрибуты и другие новые атрибуты HTML 5 теги — обзор основных элементов новой технологии Как сделать в html5 меню HTML5 элементы — новые теги Адаптивный шаблон сайта на html5 — то, что должен иметь любой современный сайт Шапка сайта в css — как ее сделать Основные css-свойства — что нужно знать при работе с css. Комментарии 2 Ильдар в Добавить комментарий Отменить ответ Ваш e-mail не будет опубликован. Нажимая на кнопку "Подписаться", я даю согласие на рассылку , согласие на обработку персональных данных и соглашаюсь c политикой конфиденциальности. Верстаем адаптивно, просто, быстро! Препроцессоры Sass и Less. Интернет магазин на Joomla! Обучающие материалы Обучение для новичков Уроки и статьи Премиум уроки Курсы. Связь Служба поддержки Форум RSS Feed. Информация Отказ от ответственности Политика конфиденциальности Согласие с рассылкой Правообладатели Наши проекты Публичная оферта. Читая этот сайт вы даете свое согласие на использование файлов Cookie. В противном случае покиньте этот сайт.
Адаптивная вёрстка сайта позволяет веб-страницам автоматически подстраиваться под экраны планшетов и смартфонов. Мобильный интернет-трафик растёт с каждым годом и чтобы эффективно обрабатывать этот трафик, нужно предлагать пользователям адаптивные сайты с удобным интерфейсом. Поисковые системы используют ряд критериев для оценки адаптивности сайта при просмотре на мобильных устройствах. Google старается упростить пользование Интернетом для владельцев смартфонов и планшетов, отмечая в мобильной выдаче адаптированные под мобильные устройства сайты специальной пометкой mobile-friendly. Проверить отображение страницы на мобильных устройствах можно на сервисах Яндекс. Вебмастер и Google Developers. Адаптивная вёрстка предполагает отсутствие горизонтальной полосы прокрутки и масштабируемых областей при просмотре на любом устройстве, читабельный текст и большие области для кликабельных элементов. С помощью медиазапросов можно управлять компоновкой и расположением блоков на странице, перестраивая шаблон таким образом, чтобы он адаптировался под разные размеры экранов устройств. Основные приёмы создания адаптивного сайта приведены в статье Отзывчивый и адаптивный дизайн сайта. В адаптивном дизайне ширина основного контейнера и столбцов сетки фиксируется с помощью значений в px. Рассматриваемый в данном уроке приём адаптивной резиновой вёрстки отлично сработает на двухколоночном шаблоне, сделав сайт адаптивным и удобным для просмотра на мобильных устройствах. Шаблон предполагает различную компоновку основного содержимого страниц, в этом уроке будет разобрана вёрстка главной страницы. Страница состоит из трёх основных блоков: В качестве переломных точек дизайна возьмём px и px. В первой точке скроем верхнее меню и переместим сайдбар под контейнер с постами. Во второй точке изменим расположение элементов шапки, отменим позиционирование кнопок социальных сетей в постах и отменим обтекание столбцов подвала страницы. В подвале страницы разместим информацию о копирайте, кнопки социальных сетей и ссылку на электронную почту:. По поводу удобочитаемых шрифтов в понимании Яндекса. На сайте стоит 13px. Яндекс видимо ни хера не видит и объявляет: Увеличьте ваш шрифт не менее 12px. Если слепой ведет слепого то куда он его заведет. По поводу этого поста. Идея конечно хорошая, но мое мнение, что блог, это не совсем то, что действительно нужно для адаптивного макета. Блог, предпочтительно делать нормальным без адаптивной верстки. Не буду заверять, что это для всех блогов. А вот типичный интернет магазин, где на странице карточки товара, нужно отсекать все лишнее, это действительно надо бы делать, чтобы клиент не отвлекся на неудобства и не психанул и не передумал покупать. А блоги, они не стоят того, чтобы их делать адаптивными. Всем остальным пользователям как-то по бинг-бонгу есть он или нет. Тем более что и в европе, это уже становится не актуально, у них сейчас другие цели, чтобы пользователь не выходя в интернет мог на своем компе найти то, что его интересует и просмотреть в пределах своего компа не выходя в сеть. Может это будет не совсем так, но что-то где-то так. Да и сайты в будущем будут совершенно другие, абсолютно не то. Правильно замечено, что число устройств с разными разрешениями экранов растет. Поэтому, адаптивная верстка рано или поздно не справится с этой задачей, как например невозможно было справиться с такими изобретениями века как ИЕ6 ИЕ7 ИЕ8 ИЕ9. Все костыли, которые пытались подставлять работали на разных операционных системах по разному и не решали в целом задачи. Так и с нарастающим использованием устройств с самыми разнообразными экранами, адаптивная верстка будет как в поговорке — одно лечит другое калечит. Еще раз подчеркиваю, что адаптивная верстка нужна, но не как окончательный вариант создания современных сайтов, а как один из вариантов решать какие небольшие задачи в макете сайта, применяя ее там, где это действительно нужно и оправданно. Не думаю, что в варианте с блогом, это будет оправданно. Локальное применение это дело, а делать все сайты полностью адаптивными лишь потому что кому-то взбрела идея в голову брать это за окончательный вариант создания сайта адаптивную верстку от и до, не есть разумно. Не совсем поняла насчёт размеров шрифта для Яндекса. Насчёт оптимизации под мобильные устройства смотрите картинки. Не знаю, какой алгоритм у Яндекса, но то, что разные шрифты одного размера отображаются на экране разным размером, это факт. Если по какой-то причине браузер пользователя не сможет отобразить текст указанным шрифтом, текст будет отображён шрифтом arial размером 14px. Ну вот этого яндекс не понимает. Там стоит якобы умная система, дающая рекомендации, а там просто для всех не задач, стоит один и тот же ответ. Они забраковали файл image-sitemap. А оказалось что их роботы просто не знают такого файла. Насчёт региональной выдачи вы правы, логика отличается, так как жёсткая конкуренция и преобладающее количество привередливых пользователей мобильного интернета только в столице. И если вы обратили внимание, то сайты, адаптированные под мобильные устройства лучше ранжируются когда вы заходите в интернет с мобильных устройств. Просто я не согласен с предисловием. Я так понял что будет продолжение по другим страницам этого сайта? Посмотрите статистику Яндекса по развитию интернета в регионах России https: Люди во всех регионах России стали пользоваться мобильными устройствами чаще для выхода в интернет. Детально ещё не прорабатывала, будет страница с видео, галерея для портфолио, одиночная запись, страница со слайдером и может что-то ещё. Конечно, для тех, кто пользуется готовыми шаблонами эти уроки не столь полезны, но я хочу детально разобрать, как собираются страницы, как позиционируются и элементы, как создаются адаптивные страницы. Вы все правильно делаете. Продолжайте и не обращайте внимания на непонимающих Вас людей. Большинство оценит и поддержит. Главное не останавливайтесь и следуйте к своей цели. Это Вам подарок за ваши труды. Этого фото нет в интернете, потому что это мое личное фото. На заставке мобильного смотрится просто отлично. Верхнее меню при нажатии на кнопку показывается-скрывается с помощью jQuery скрипта. Чтобы работали методы, которые используются в скрипте, нужно подключить библиотеку jQuery к веб-странице. Плагин prefixfree автоматически добавляет к названию css3-свойств соответствующие браузерные префиксы для поддержки этих свойств во всех браузерах. Поэтому можно писать свойства без префиксов. Плагин определяет версию браузера пользователя и если она не поддерживает какое-то свойство, автоматически добавит префикс. Адаптивная верстка в правильном ее понимании — это способ решить отдельные проблемы, если есть какой-то коммерческий интерес. Если это какой-то учебный сайт или блог, то смысла нет в такой адаптивной верстке. И уж если владелец сайта работает на адсенс, то там еще сложней с их блоками. Тупо делать адаптивный сайт для пользователей от декстопов до моторолы px — не вижу смысла. Адаптивные блоки AdSense — https: Адаптивные сайты — это дополнительный трафик на ваш сайт, поэтому в условиях большой конкуренции этот факт игнорировать нельзя. Попробовал поставить это меню на вордпресс и что-то не понял, почему оно не работает. Короче отказался и сделал на css. Даже лучше получилось в том плане, что не перекрывает экран. Очень полезный материал, ровно как и сайт. У меня возникла проблема с кнопкой меню, которая появляется при ширине px — при клике на кнопку меню ничего не происходит. Код полностью взял из этого поста, ничего не изменял. Также добавил в папку с исходниками файлы: Firefox, Chrome — результат одинаковый, кнопка меню не работает. Есть ли еще какие-нибудь идеи? Я предполагаю, что вы два раза добавили скрипт: Материал хороший, спасибо Но есть одно замечание: Проверил страницу из примера гугловским сервисом:. Главная ошибка это подключение скриптов вначале страницы и не оптимизированные изображения но это ладно, не важно. Все же лучше избегать этих скриптов и пойти другим путем. Знаете, на днях тестировала гугловские рекомендации, так вот даже если у вас в head есть только одна ссылка на файл. Также предлагаю скачать оптимизированные по мнению гугла картинки и посмотреть, что это вообще. Все скрипты в подвал — сомнительная рекомендация и практически не осуществимая для большинства сайтов. А теперь предлагаю ознакомиться с результатами теста другого сервиса. Добавил еще три пункта меню-стало их Шесть! Но в мобильной кнопочке показываются только эти ТРИ что в шаблоне — как ее заставить подтянуть новые пункты? Блог Портфолио Об авторе Про меня Про Вас. В исходный код просто добавил пару строк — на сайте они есть — а через кнопочку на маленьких экранах только первые три -новые пункты не появляются кеш точно не причем.. Вспомнила, для мобильного меню задана высота, равная высоте трёх пунктов menu. Вы можете поставить произвольное большое число или равное высоте пяти пунктов https: Извините, не искал, возможно решение под рукой. Не, видимо не поняли друг друга. Сайт на html только. Есть ли команда в css отключающая скрипт, прописанный в html, для определенных устройств разрешение? Я вроде нашел то что скинул, а ещё варианты? А разве меню не должно находится внутри. Не очень хорошо понимаю как пустой класс может скрыть элементы в него не входящие, кроме пустого. Не должно, при клике на кнопку меню выполняется функция, которая может делать всё что угодно с любым элементом на странице. HTML5 BOOK HTML CSS JS Типографика Уроки Вёрстка SEO CSS-справочник CSS-свойства. Вперёд FotoJet — онлайн-сервис для создания коллажей и графического дизайна. Я проверял свой сайт где у меня стоит размер шрифта 13px в таблице. Яндекс тупит как всегда: Посты будут без шапки и подвала и правого блока? Однозначно это будет уникально, полезно и востребовано. Ну и пища для новых идей. Вы верно предположили, спасибо! Проверил страницу из примера гугловским сервисом: Не видя кода, сложно определить ошибку. Блог Портфолио Об авторе Про меня Про Вас В исходный код просто добавил пару строк — на сайте они есть — а через кнопочку на маленьких экранах только первые три -новые пункты не появляются кеш точно не причем.. Нашел вот такое вот решение. Речь идет об анимации с помощью скрипта? Пока до ГУРУ анимации на чистом css не дошел. Тогда вам надо через настройки плагина отключать анимацию. На почту скиньте архив сайта, посмотрю позже. Семантические элементы HTML5 1. Необязательные теги HTML5-разметки 1. Контентная модель HTML5 CSS 2. Блочные и строчные элементы 2. CSS-текст CSS-текст часть 2 CSS-текст часть 3 2. Выражения в JavaScript 3. Циклы JavaScript jQuery 3. Введение в jQuery 3. Чтение и изменение CSS-свойств, классов и атрибутов 3. Обход DOM и выборка HTML-элементов 3. Методы объекта window 3. Селекторы jQuery Веб-типографика 4. Пять принципов выбора и использования шрифтов 4. Выбираем шрифт для сайта 4. Свежие записи Нестандартные блоки на сайте Красивая форма для сайта Идеи для интернет-магазина: RU разрешено исключительно при указании индексируемой ссылки со словом "Источник" на сайт или на страницу, содержащую этот материал.
Адаптивная вёрстка: что это и как использовать
https://gist.github.com/7e364e94ec9b8509de1cfc6ed6baa154
Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы
https://gist.github.com/c2185838950a241dc9ac9a7c8b5a5aa7
Что такое адаптивная верстка
https://gist.github.com/9189222d4c54b13e710c95aa319fa1e4
Адаптивная верстка сайта
https://gist.github.com/d759b1fe32d0d051344a820e54193383
Адаптивная вёрстка сайта, урок первый. Вёрстка главной страницы
https://gist.github.com/95237f36500596ed3a0d85aef028a5b8