Как адаптировать сайт под мобильные устройства?
Для адаптации используют @media запросы CSS . Синтаксис такой:
@media(Условие)
@media(max-width: 992px) < /*Стили, на устройствах с максимальной ширеной экрана 992 пикселя и меньше */ >@media(max-width: 768px) < /*Стили, на устройствах с максимальной ширеной экрана 768 пикселей и меньше */ >@media(max-width: 500px) < /*Стили, на устройствах с максимальной ширеной экрана 500 пикселей и меньше */ >Это стандартная сетка из bootstrap. Почитать про эту библиотеку можете тут Можно подключив ее к сайту и немного переписать верстку, но это тяжелая библиотека и там много лишнего. Многие от нее отказываются. Почитать про медиа-запросы можно, например, тут или тут.
Еще стоит почитать про подходы к адаптивной верстке mobile-first и desktop-first. Сравнивают их во многих статьях, например, тут.
Также стоит отметить, что если вы используете медиа-запросы, то их надо группировать, чтобы Ваш сайт лучше работал. И тут два варианта:
- Писать только один экземпляр медиа-запроса, как выше и в конце файла css , что не всегда удобно.
- Использовать сборщики с предустановленными плагинами, которые автоматизируют рутинные задачи верстки (подключение и конвертация шрифтов, сжатие картинок, группировка медиа-запросов, подстановка префиксов для разных браузеров). Я использую для этого сборку gulp с плагином gulp-group-css-media-queries и некоторыми другими. Хороший гайд по настройке найдите в ютубе, сборок тьма. Есть еще сборщик webpack, говорят он лучше, точно новее, но с ним не работал, так как привык к gulp.
Правило @media CSS для адаптации сайтов под мобильные устройства.
Подробнее про работу со свойством @media смотрите в этом курсе.
При верстке сайтов, которые должны быть адаптированы под мобильные устройства возникает необходимость того, чтобы одни правила CSS применялись для больших мониторов, а другие для узких (мобильных устройств).
Каким образом можно решить такую задачу?
На самом деле, технология CSS имеет средства, которое позволяют применять различные стили для устройств с разной шириной экрана монитора.
Это становится возможным с помощью медиа-правил.
Синтаксис здесь следующий:
@media тип_устройства оператор (медиа_функция)
Для адаптивной верстки достаточно пока использовать следующее выражение:
@media all and (max-width : значение_в_пикселях) Свойства CSS . >
Оно означает, что для всех устройств, у которых ширина экрана менее какого либо значения в пикселях, должны применяться правила CSS в фигурных скобках.
Давайте посмотрим на конкретном примере, каким образом работает данное правило.
Подробнее про работу со свойством @media смотрите в этом курсе.
Чтобы оставить сообщение, зарегистрируйтесь/войдите на сайт через:
Как адаптировать свой сайт
под мобильные устройства
что нужно знать, чтобы самому адаптировать свой сайт.
Доля мобильного трафика постоянно растёт и уже превышает десктопный. Мобильная или адаптивная версия сайта уже не просто прихоть поисковых гигантов, а коммерческая необходимость. Выбрать мобильную или адаптивную версию сайта — выбор лично каждого. Факторов для выбора достаточно, но статья, всё же, не о том 🙂
Сделать свой сайт адаптивным можно самостоятельно, или можно привлечь к этой работе людей с опытом. Как привлечь или выбрать профессионала рассказывать не буду, расскажу, как сделать адаптивную версию самому.
Для начала нужны базовые знания в HTML и CSS. Т.е. нужно знать где, что и, главное, как можно изменять.
Знания HTML
Знания HTML нужны, в основном, для 2-х вещей:
- — знать куда поставить метатег viewport;
- — для понимания того какие теги есть на странице, как они себя ведут и как взаимодействуют с другими тегами.
Метатег viewport
Метатег viewport используется для связи размеров экрана пользователя и экрана браузера. На странице его вставляют внутри тега , где также находятся теги с названием страницы, описанием и прочими сервисными метатегами.
Базовый вариант для вставки выглядит так:
meta name="viewport" content="width=device-width, initial-scale=1.0" />
Эта запись буквально означает приравнять ширину окна браузера к ширине экрана устройства и установить масштаб станицы 1:1. Надо сказать, что запись про масштаб не будет работать, если пользователь намеренно указал у себя в настройках другой масштаб.
Иногда в метатег добавляют запись
maximum-scale=1.0, user-scalable=no
Я бы не рекомендовал это делать, хотя для iPhone часто приходится так делать. Пользователю не всегда может быть удобен выбранный нами для адаптивной версии размер картинок и шрифта. И пользователь должен иметь возможность увеличить страницу, не влезая в настройки браузера.
Детальнее о том, что такое viewport и как он работает расписывать не буду. Для самостоятельной адаптации сайта текущего знания достаточно.
Чтобы самостоятельно установить этот тэг нужно в шаблонах сайта найти место где заполняется шапка HTML-кода и где могут находятся теги и . Для поиска проще всего использовать поиск имени тега по файлам или (первого может и не быть).
Знания CSS
Здесь немного сложнее.
В теории при помощи только CSS можно переместить любой блок на странице в любое место. Но на практике нужно учитывать большое количество нюансов, чтобы это сделать.
Для начала, чтобы сделать базовую адаптацию нужно понимание того как работают css селекторы и в чём их разница. Самые простые селекторы могут быть такие:
- a — все теги на сайте (все ссылки);
- .classname — все элементы со значением ;
- #id — все элементы со значением .
Знание селекторов нужно для того, чтобы понимать какие элементы будут изменены, если Вы пропишете свойства для конкретного селектора.
Так же нужно знать какие есть значения у свойств:
- position — позиционирование элемента на странице;
- float — выравнивание элемента на странице (это если просто);
- width — ширина элемента;
- height — высота элемента;
- margin — внешние отступы;
- padding — внутренние отступы;
- font-size — размер шрифта;
- line-height — высота строки.
Это минимум который нужно знать и понимать. Да, только с этими знаниями результат будет не самым идеальным, но его, всё же, можно получить. В процессе адаптации Вам все равно придётся замечать и изучать другие свойства, но без знаний свойств из этого списка начинать не имеет большого смысла.
Media queries
Есть ещё одно свойство в CSS, без знания которого процесс адаптации сайта под мобильные устройства очень усложняется. Это — медиа-запросы (media queries).
@media print
Внутри этих запросов и пишется основной CSS-код для разных разрешений экранов. Обычно для адаптации сайта в медиа-запросах достаточно указывать только ширину экрана.
Ширину можно указывать как до определенного размера экрана
@media only screen and (max-width:767px) . >
так и после определенного размера экрана.
@media only screen and (min-width:768px) . >
Или можно указать промежуток
@media (mim-width:480px) and (max-width:768px) . >
Точки переключения свойств могут быть любые, на Ваше усмотрение, но плодить их сильно тоже не стоит. Большинство свойств CSS-селекторов наследуется вложенными элементами. И с каждый новый медиа-запрос или селектор будет затруднять дальнейшую работу по изменению внешнего вида сайта и созданию его адаптированной версии. В bootstrap, например, используются три точки переключения стилей: 768px, 992px и 1200px. Здесь ещё надо сказать, что минимальный размер экрана на данный момент — это 320px (например, такой размер экрана у iPhone 5), т.е. меньше этого значения прописывать стили не имеет большого смысла. Это не означает, что нет мобильных устройств с меньшим разрешением, просто их относительно мало.
Все стили стоит прописывать в файлах *.css. Есть, конечно, и другие места, но для их использования нужны уже другие знания и делать это нужно осторожно. А если Ваши разработчики используют препроцессоры для стилей, то придётся ещё прочитать и про них (в смысле про препроцессоры, хотя про разработчиков почитать тоже стоит, может есть повод поздравить кого-то с днём рождения).
О чём нужно помнить
Нужно помнить, что пользование сайтом на мобильных устройствах не такое, как на компьютерах. Например, часто взаимодействие с сайтом происходит одной рукой и даже одним большим пальцем.
Например, эффект наведения, как таковой, отсутствует на touch-устройствах, и если у Вас меню открывается по наведению мыши, то его работоспособность обязательно придётся проверять на реальных устройствах. А эффекты наведения, такие как подсветка ссылок и кнопок, желательно вообще отключать для мобильных устройств.
Всё это базовые знания, которые неизменно пригодятся для создания адаптивной версии сайта. Но очень часто этого недостаточно, т.к. не всегда всё на сайте удаётся так просто ужать, уменьшить и передвинуть. На сайте всегда найдутся какие-нибудь динамические блоки типа каруселей, сложных меню и всплывающих окон. Вот в такие моменты базовых знаний становится недостаточно. Здесь уже будут нужны знания JavaScript и серверных языков (на котором написан сайт).
На этом пока всё. Хорошей Вам адаптивной версии!
PS2:> Вы всегда можете обратиться к нам, если нужна профессиональная помощь или консультация по адаптации Вашего сайта.
Как адаптировать сайт под мобильные: ТОП-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 эффективных методов, которые вы сможете протестировать и выбрать для своего веб-ресурса.
Нажмите дважды, чтобы увеличить