Как адаптировать сайт под мобильные устройства css

Media queries CSS как АДАПТИРОВАТЬ сайт

МОБИЛЬНАЯ ВЕРСИЯ горизонтального меню | Адаптируем меню на чистом CSS

CSS3 Медиа-запросы (Media queries CSS), позволяют реализовать как адаптивный веб-дизайн так и всякого рода оформление. В данном материале по свешенным Media queries мы реализуем пример как делаются адаптивные сайты.

See the Pen aVRZxO by Denis (@Dwstroy) on CodePen.

Из видео вы узнаете:

что такое Media queries и его составляющие элементы;
как формируется медиа запросы;
рассмотрим практически пример адаптивного дизайна сайта.

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

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

Медиа запрос состоит

@media screen and (max-width: 480px) < h1 < font-size: 25px; >>

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

Типы носителя

В се запросы начинаются с правила @madia , далее идет условие, в котором пишем тип носителя (screen) , он позволяет получить точную информацию, на каком устройстве открыта данная страница. Помимо этого типа имеются и другие носители как print , all и speech .

Типы носителей включают в себя

all – Подходит для всех видов устройств. Это значение используется по умолчанию.
print – Просмотр на экране страничек в режиме предварительного просмотра печати.
screen – Просмотр на экране цветных компьютерных мониторах.
speech — Речевые синтезаторы, а также программы для воспроизведения текста вслух. Сюда, например, можно отнести речевые браузеры.

В CSS2.1 имелись несколько дополнительных типов, но они приняты устаревшими и в Media Queries 4 не задействованы.

Устаревшие типы носителей:

braille — Устройства, основанные на системе Брайля, которые предназначены для чтения слепыми людьми.
embossed — Принтеры, использующие для печати систему Брайля.
handheld — Смартфоны и аналогичные им аппараты.
projection – Проекторы.
tty — Устройства с фиксированным размером символов (телетайпы, терминалы, устройства с ограничениями дисплея).
tv – Телевизоры.

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

Логические операторы

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

К примеру, and , эквивалентно «И» , и в этом случае если одно из условий будет не истиной значить и все выражение, является ложью.

Следующий оператор «запитая» , которая эквивалентна «ИЛИ» , и в данном случае если одно из условий верное, значит выражение является истиной.

Оператор not отрицание, а only позволяет скрыть стиль от всех браузерах, которые не поддерживают данное условие.

Логические операторы:

and – Связывает друг с другом разные условия (эквивалентно «и»);
not – Позволяет сработать медиа запросу в противоположном случае (эквивалентно «отрицание»);
only – Скрывает стили для браузера, которые не поддерживают данные условия;
, — Запятая работает по аналои с логическим оператором or (эквивалентно «или»);

Условие медиа запроса

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

Самые распространенные условия это максимальная и минимальная ширина max-width min-widt

Прописав ( max-width: 480px ), сам стиль в нутрии скобок будет применен в том случае, когда ширина экрана менее 480 пикселей.

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

width min-width max-width – ширина;
height min-height max-height – высота;
device-width min-device-width max-device-width – ширина на устройстве;
device-height min-device-height max-device-height orientation — высота на устройстве;
aspect-ratio min-aspect-ratio max-aspect-ratio – соотношение сторон;
device-aspect-ratio min-device-aspect-ratio max-device-aspect-ratio — соотношение сторон на устройстве;
resolution min-resolution max-resolution – разрешение экрана (количество пикселей);
color min-color max-color – количество бит на каждые из цветных компонентов устройства вывода;
color-index min-color-index max-color-index – количество записей в таблице подставноки цветов;
monochrome min-monochrome max-monochrome – количество битов на пиксель монохромного устройства;
scan grid – сетка сканирования;

Описываем основную структуру в HTML и CSS

Теперь рассмотрим, как это выглядит в действительности на примере создания простенького каркаса сайта.

Создаем пять блоков, шапка сайта header , верхнее меню top_menu , левый сайт бар sideLeft , область для контента content и подвал footer .

Затем определим для них стили

Для header назначим свой цвет, укажем ширину в 100%, высоту в 200 пик. и закруглим углы.

.header

Верхнему меню назначим, свой цвет, ширину в 100%, сделаем отступ сверху в 5 пик., высоту в 50 пик.

.top_menu

Сайт бару, прописываем свои стили и прижмем его к левому краю:

.sideLeft

Далее для области под контент пишем свои стили:

.content

И завершающий блок это футер, делаем его на всю ширину в своем цвете:

.footer

Из-за того что sideLeft и content являются плавающими элементами за счет float , нужно сбросить обтекание этих блоков при помощи clear:both; .

Создадим класс и вставим дополнительный блок с этим классом:

.clear

У нас получился такого рода резиновый шаблон сайта, условно разделенный на блоки.

Подключаем CSS media queris

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

.wrapper

Затем для всех медиа запросов создадим отдельный файл media-queries.css , который подключим после основного стиля.

Размер экрана меньше 992px

Открываем файл media-queries.css на редактирование, и напишем свое условие для дестопных экранов.

Начинаем с правила @media , скрываем стиле для браузеров которые их не поддерживают only , затем пишем носитель screen и логический оператор and « И », далее условие максимально ширины в 992 пик. то есть если страничка будет меньше данной ширины тогда применим наши стили.

Затем, в фигурных скобках описываем стили для данного расширения:

/* Medium Devices, Desktops */ @media only screen and (max-width : 992px)

Ширину обертки уменьшим на 750 пик.

.wrapper

Поменяем у блоков цвет, а у footer немного уменьшим высоту:

.wrapper < width: 750px; >.header < background: #a1ece5; >.top_menu < background: #64f1eb; >.sideLeft < background: #80e47e; >.content < background: #f0f1ef; >.footer < background: #9ea424; height: 45px; >>

Размер экрана меньше 768px

Затем опишем медеа запрос для средних экранов, таких как планшеты. Я скопирую предыдущий стили, заменю максимальную ширину на 768 пик. и в нем опишу стили для данного расширения экрана.

/* Small Devices, Tablets */ @media only screen and (max-width : 768px)

Обертку уменьшаем до 450 пик.

.wrapper

У header поменяем цвет, его высоту, и сделаем радиус в 3 пик.

.header

Тоже самое проделаем с top_menu

.top_menu

Левый сайт бар, меняем цвет, делаем по всей ширине, уменьшаем отступ до 4 пик. убираем обтекание.

.sideLeft

Для наглядности добавим в сайт бар дополнительные блоки и оформим их надлежащим образом.

Убираем высоту .sideLeft

Для блока под контент, меняем цвет, делаем ширину в 100%, отступ в 4 пик, уменьшаем высоту и убираем обтекание.

.content

Затем footer немного уменьшим по высоте, цвет и отступ немного подкорректируем:

.footer

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

Затем опишем общие стили, и скроем их:

.top_menu < background: #87c5ff; width: 100%; margin-top: 5px; height: 50px; position: relative; >.knopka < display: none; width:32px; height: 21px; top: 2px; left: 6px; background: #6d6e6d; border-radius: 2px; position: absolute; >.lan

Размер экрана меньше 480px

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

/* Extra Small Devices, Phones */ @media only screen and (max-width : 480px)

Делаем обертку в 320 пик.

.wrapper

У остальных блоков поменяем цвет.

.header < background: #3dfff2; >.top_menu < background: #328e8d; >.sideLeft < background: #91b399; >.content < background: #f2f4f2; >.footer < background: #6d6e6d; >>

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

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

Подключаем Media Queries Javascript

Медио запросы не поддерживаются браузером Internet Explorer 8 и более ранних версий, для них нужно подключить дополнительный Javascript файл css3-mediaqueries.js .

Ссылка на скачивания — архив файлов с урока

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

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

Как адаптировать сайт под мобильные: ТОП-10 способов

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

10 методов, как оптимизировать сайт под мобильные устройства

Использование тега Viewport.
Отсутствие горизонтальной прокрутки.
Крупный размер шрифта.
Крупные значки.
Контрастный текст.
Настройка Gzip-сжатия.
Открытые для роботов стили CSS.
Быстрая загрузка сайта с мобильных.
Всплывающие окна не закрывают контент.
Ширина картинок и полей ввода 100%.

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

№1. Использование тега Viewport

Адаптивность подразумевает, что масштаб сайта будет автоматически меняться в зависимости от размеров пользовательского экрана. По умолчанию веб-браузеры воспринимают ширину контента равной ширине десктопной версии страницы (1024 пикселя), поэтому на мобильных устройствах неадаптированные ресурсы уменьшены в несколько раз. Если вы уже оптимизировали CSS-файлы, но браузер продолжает уменьшать/увеличивать контент, внедрите специальный метатег в HTML-код проекта. Обычно его размещают в блоке :

Где viewport — название тега, device-width — указание, что ширина браузерного окна должна быть равна ширине устройства, а 1 означает необходимость использования оригинального масштаба. Таким образом вы сообщите браузеру, что сами адаптируете контент под размеры гаджета и ему не нужно менять масштаб, чтобы уместить все в область просмотра.

№2. Отсутствие горизонтальной прокрутки

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

№3. Крупный размер шрифта

Вчитываться в мелкий текст на телефоне никто не захочет — особенно люди с проблемами зрения. Адаптировать сайт под мобильные устройства — значит, в том числе, сделать текстовую информацию удобочитаемой. Увеличьте шрифт, чтобы пользователям не приходилось масштабировать страницу или напрягать глаза в попытке различить маленькие буквы. Для iOS-гаджетов стандарт обычного текста — 17pt, для Android — 13sp.

Рекомендуется также оптимизировать высоту строки (примерно 140% от кегля текста). Оптимально, если в длину она будет около 50–60 символов с пробелами.

№4. Крупные значки

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

№5. Контрастный текст

Черный шрифт на белом фоне — стандарт, который можно и нужно нарушать. Не стоит использовать резко контрастные цвета, чтобы, опять же, лишний раз не нагружать зрение пользователя. Например, вместо строгого черно-белого сочетания выберите темно-серый с белым. Человек может и не заметить разницы, но его глаза скажут вам спасибо. То же касается и обратной ситуации: белое на черном воспринимается еще хуже, поэтому для «темной темы» лучше подобрать разные оттенки серого. В интернете есть немало сервисов, которые помогают найти хорошие цветовые сочетания для адаптации текста на мобильных устройствах.

№6. Настройка Gzip-сжатия

Как мы уже сказали, оптимизировать нужно не только клиентскую, но и серверную часть. Технология gzip позволяет сжимать контент и целые страницы, чтобы ускорить их передачу браузеру. Настройте ее на своем сервере, чтобы перед отправкой файлы уменьшались в объеме, а после их получения пользователем — восстанавливались до привычного размера. Это рабочий способ адаптировать загрузку сайта под мобильные устройства, ведь так они будут тратить меньше трафика. Gzip-сжатие поддерживают все популярные веб-браузеры, так что проблем с ее внедрением возникнуть не должно.

№7. Открытые для роботов стили CSS

Поскольку сайт адаптируют через файлы стилей (.CSS), нужно, чтобы боты поисковых систем могли их просканировать. Без этого краулеры могут решить, что ресурс не адаптивен, а значит, следует понизить его в выдаче при запросах с мобильных устройств. Правила для индексирующих роботов обычно прописывают в robots.txt. Файл с таким именем находится в корневом каталоге проекта. Если его там нет, создайте новый, впишите туда разрешение на сканирование CSS- и JavaScript-файлов (через директиву allow), а затем загрузите на сервер. Это позволит оптимизировать проект не только для пользователей с гаджетами, но и для разных систем поиска.

№8. Быстрая загрузка сайта с мобильных

Еще одно условие для хорошего адаптива — высокая скорость загрузки (в пределах 2–3 секунд). Как правило, на телефонах контент грузится дольше, чем на компьютерах, поэтому обязательно проверьте время загрузки сайта в специальном сервисе (например, в PageSpeed Insight). Там вы узнаете, какие элементы «съедают» больше всего трафика при открытии с мобильных устройств, и сможете оптимизировать их для улучшения этого показателя. Обычно первым делом адаптируют изображения: сжимают, конвертируют в более легкий формат, уменьшают размер. Графический контент очень много весит, поэтому, оптимизировав его, вы существенно ускорите загрузку и, соответственно, сделаете веб-ресурс более удобным.

№9. Всплывающие окна не закрывают контент

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

Адаптируя проект, следите за тем, чтобы поп-апы занимали менее 50% экрана и легко закрывались. Это также поможет оптимизировать его под поисковые системы — из-за назойливой рекламы боты часто оценивают ресурс, как некачественный.

№10. Ширина картинок и полей ввода 100%

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

.header

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

То же самое необходимо проделать с полями ввода: если их не адаптировать, то вводить информацию на вашем сайте станут только самые терпеливые. Добавьте в CSS-файл следующий код:

input, textarea

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

Заключение

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

Как ускорить загрузку сайта: ТОП-10 способов

Скорость работы сайта является одной из важнейших характеристик, по которым оценивают его качество. Если страница быстро загружается, то пользователи не покидают ее сразу. А когда уменьшается процент отказов, налаживаются и поведенческие факторы, что впоследствии приводит к улучшению ранжирования и повышению позиций в поиске. Отсюда увеличение трафика, конверсии и продаж. Между ожиданием и более быстрым ресурсом человек обычно выбирает второе. Чтобы удовлетворить клиентов и роботов, необходимо ускорить загрузку в среднем до 2–3 секунд. Особенно этот показатель важен для посетителей с мобильных устройств. В статье мы дадим десять общих советов о том, как увеличить скорость загрузки сайта.

Самостоятельное SEO-продвижение сайта: инструкция для новичков

Поисковая оптимизация (Search Engines Optimization, SEO) — это процесс улучшения сайта таким образом, чтобы он соответствовал требованиям и критериям качества поисковых систем (ПС). Представительство ресурса в поиске играет важную роль для его продвижения, поскольку именно выдачи Яндекса и Google являются главными источниками органического трафика в рунете. В базах поисковиков хранятся сотни миллионов веб-сайтов, и чтобы попасть на первые страницы результатов ранжирования, оптимизаторы настраивают и продвигают свои проекты самостоятельно. Если этого не делать, сами алгоритмы SE (Search Engine) не поднимут сайт на верхние позиции. В статье говорим о том, как настроить SEO самому за 10 шагов.

Увеличение конверсии сайта: ТОП-10 способов

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

Нажмите дважды, чтобы увеличить

Как адаптировать сайт под мобильные устройства: методы и примеры

Адаптация сайта для мобильных устройств позволяет охватить больше аудитории и увеличить доход от продаж товаров или услуг, поскольку в России мобильный трафик с 2016 по 2021 год вырос на 545%. В статье расскажем, как адаптировать сайт под мобильные устройства, поделимся онлайн-сервисами и плагинами.

Что такое адаптивный сайт

Адаптивный дизайн

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

Для чего нужна адаптация

Версии сайта на разных устройствах

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

Поисковые системы и ранжирование

Адаптивная верстка сайта

В Яндексе и Google адаптивность – один из факторов, влияющих на позицию сайта в поисковике. Системы оценивают, насколько быстро пользователь закрывает страницу. Если это происходит сразу после ее открытия, это значит, что человека не устроил формат отображения. Такие сайты теряют свои позиции в топе.

Влияние на конверсию

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

Рекламные кампании

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

Виджет обратного звонка для сайта

Повысьте конверсию сайта на 30%
Новым клиентам 50 минут в подарок