Верстка сайта под мобильные устройства: Верстка для мобильных устройств / Хабр

Содержание

Верстка для мобильных устройств / Хабр

Общая информация

Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности HTML/CSS, а другая наоборот — либо не поддерживать, либо поддерживать неправильно.

Но большинство устройств среднего и уж тем более hi-end класса поддерживают HTML/CSS в той или иной степени. Таким образом, язык WML для разработки сайтов под мобильные устройства устарел и практически не используется. На смену ему постепенно приходит общепризнанный стандарт в разработке сайтов — XHTML/CSS. Кодировка — строго UTF-8 (No BOM).

DOCTYPE, используемый для мобильных устройств

Практически везде на известных мобильных сайтах, таких как Google, Яndex, используется DOCTYPE XHTML Mobile 1.0:

    <?xml version="1.0" encoding="UTF-8"?>
    <!DOCTYPE html PUBLIC "-//WAPFORUM//DTD XHTML Mobile 1.0//EN" "http://www.wapforum.org/DTD/xhtml-mobile10.dtd">

Также, иногда встречаются сайты с DOCTYPE XHTML Basic 1.1:

    <?xml version="1.0" encoding="utf-8"?>
    <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML Basic 1.1//EN" "http://www.w3.org/TR/xhtml-basic/xhtml-basic11.dtd">

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

Особенности верстки

Подключение CSS

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

    <style type="text/css">
        body {
            background-color: #E9E9CC;
            font-family: sans-serif;
            font-size: small;
            }
   </style>

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

Сокращенная запись свойств

Есть мнение, что стили вроде padding и margin нужно прописывать отдельно, используя padding-left, padding-top, margin-right и т.д. Точно так же следует поступать со всеми свойствами, которые имеют короткую запись. Например красный цвет фона стоит лучше записать как background-color: #ff0000;, а не background-color: #f00; и тем более не background: #f00;.

Фон элементов

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

Изображения

Все изображения на сайте желательно заключать в тег <img> и не забывать добавлять атрибут alt, потому что загрузка изображений на устройстве может быть отключена, и вместо него нужно вывести замену текстом, ну и в конце концов, — мы ведь XHTML используем. 😉 При подготовке изображений желательно ужимать их до минимального размера. При добавлении изображения в документ необходимо указывать его размеры атрибутами width и height.

В итоге, каждое изображение, вставленное в документ должно иметь вид:

    <img src="image.gif" alt="Текстовая замена" />

Таблицы

Старайтесь избегать сложных, в том числе вложенных таблиц, т.к. некоторые браузеры могут не справиться с их рендерингом и вывести кашу вместо таблицы. Также нельзя использовать атрибуты cellpadding и cellspacing, они не включены в DOCTYPE. И ни в коем случае не следует применять таблицы для верстки страниц. Таблицы не удобны в применении на маленьких экранах: чтобы прочитать объёмную таблицу, приходится применять горизонтальную прокрутку, чего тоже следует избегать учитывая, что разрешение экранов мобильных устройств несравнимо меньше, чем у настольного монитора.

Списки

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

Шрифты

Мобильные устройства в большинстве своем имеют очень плохую поддержку шрифтов, поэтому полагаться на то, что текст будет отображен именно тем шрифтом, который был задан в стилях не стоит. Но указывать хотя бы гарнитуру (serif или sans-serif) все равно нужно. Размер шрифтов желательно задавать в относительных единицах или, что еще лучше указывать аргументы свойства font-size в значениях small, medium, или large.

Плавающие элементы

Нельзя использовать плавающие элементы. Большинство браузеров просто не умеют их обрабатывать. Т.е. при создании верстки старайтесь не использовать такие свойства, как float, clear, overflow, clip.

Тестирование

Тестирование необходимо производить в нескольких режимах:

с загрузкой изображений и стилей

без загрузки изображений

без загрузки стилей

с полностью отключенными стилями и изображениями

Для тестирования сайтов удобно пользоваться эмулятором Opera Mini, а также встроенной функцией в Opera (для десктопа) в меню «Вид» -> «Небольшой экран».

Мобильные браузеры

Ссылки

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

Тема: Адаптивная верстка
Время ролика: 00:11:02
Cложность: легкая
Автор: Бернацкий Андрей

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

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

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

Тема: Адаптивная верстка
Время ролика: 00:33:22
Cложность: легкая
Автор: Бернацкий Андрей

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

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

Тема: Адаптивная верстка
Время ролика: 00:17:41
Cложность: легкая
Автор: Бернацкий Андрей

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

Тема: Адаптивная верстка
Время ролика: 00:13:55
Cложность: легкая
Автор: Бернацкий Андрей

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

Тема: Адаптивная верстка
Время ролика: 00:22:14
Cложность: легкая
Автор: Бернацкий Андрей

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

Основы мобильной вёрстки

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

В любом случае, требуется создавать мобильную версию сайта. Существует 3 способа построения мобильных версий:

Создание адаптивного дизайна.

Создание отдельной версии сайта для мобильных устройств.

RESS

В этой статье мы подробно рассмотрим все 3 способа, а также их основные преимущества и недостатки.

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

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

Пример использования медиа запросов:

Теперь давайте подробно рассмотрим преимущества и недостатки адаптивного дизайна.

Плюсы:

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

Простота использования фреймворков. Если вы используете Bootstrap или другой фреймворк, то разработка упрощается.

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

Недостатки:

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

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

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

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

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

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

Несмотря на то, что такой подход имеет существенные недостатки, он является самым популярным.

Мобильная версия сайта

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

Отдельная версия очень удобна для пользователя. Иногда мобильная версия намного удобнее чем адаптивный дизайн.

Мобильная версия является урезанной версией сайта, которая содержит наиболее полезную и необходимую информацию для пользователя.

Преимущества мобильной версии:

Сайт легко редактировать. Из-за того, что мобильная версия находится в отдельном HTML-документе, её можно свободно изменять, не меняя контент десктопной версии. Очень удобно, так как позволяет удалить весь ненужный функционал сайта.

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

Быстрота. Вот самое главное отличие от адаптивной версии — для загрузки сайта со смартфона не придется загружать все элементы сайта.

Можно перейти на основную версию сайта.

Недостатки:

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

Неудобство SEO-оптимизации. Ещё одним недостатком является то, что при SEO-оптимизации сайта приходится использовать дополнительные meta-теги. Кроме того, за счет нескольких страниц, работа над оптимизацией сайта будет проходить намного дольше.

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

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

RESS

RESS — Responsive Design + Server Side. Данный метод менее популярен нежели два вышеперечисленных, но не менее удобен. Компания-гигант Google, в своих разработках, старается использовать RESS.

Как и остальные методы, RESS имеет свои преимущества и недостатки.

Преимущества:

Меньшее потребление ресурсов. В случае необходимости, из HTML-документа удаляются ненужные скрипты. Это помогает освободить ресурсы мобильного устройства — CPU, ОЗУ, кэш-память.

Верстка для определенного устройства. Это очень сложный элемент, но он позволяет создавать уникальные элементы для каждого устройства. Например, на сайте можно разместить GooglePlay и iTunes, которые будут отображаться на Android и Apple устройствах.

Возможность оптимизации HTML и CSS кода.

Недостатки RESS

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

Проблемы с определением устройства. Данный метод введен относительно недавно, а значит имеет некоторые ошибки. У некоторых пользователей возникала такая проблема: «мобильное устройство не определено». Надеемся, в будущем данная проблема будет решена.

Если сравнивать 3 метода разработки, то RESS является наилучшим, но для него потребуется намного больше сил. Из-за больших затрат данный метод используется только крупными компаниями.

Заключение

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

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

Теги:

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

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

Хьюстон, у нас проблема

Самый простой способ проверить адаптацию сайта под мобильные устройства – открыть его на этих самых мобильных (смартфон, планшет). Явные признаки проблем:

Сайт или какие-то его части (картинки, таблицы) не помещаются целиком в экран:

Всё слишком мелкое, не получается с первого раза попасть пальцем в кнопку или ссылку:

Приходится прокручивать несколько экранов шапки (или фильтров), чтобы добраться до контента:

Всплывающие баннеры (более 50% экрана), либо слишком много рекламы:

Если смартфона под рукой нет или он не подключен к сети, можно воспользоваться онлайн-сервисами с обычного компьютера:

1. Mobile Friendly от Google: https://search.google.com/test/mobile-friendly

Вбиваем адрес сайта, жмем «Проверить», видим результат:

2. Проверка мобильных страниц от Яндекса: https://webmaster.yandex.ru/site/tools/mobile-friendly/ (если ваш сайт уже добавлен в Яндекс.Вебмастер)

Выбираем адрес сайта, жмем «Проверить», видим результат:

3. Проверка в браузере в Инструментах разработчика

Открываем сайт в браузере и в меню (браузера) ищем пункт «Дополнительные инструменты» – «Инструменты разработчика». Либо жмем на клавиатуре F12. Если не сработало F12, жмем сочетание клавиш CTRL + Shift + I. Справа или внизу браузера нам откроется Панель разработчика, на ней жмем на иконку переключения на мобильные устройства и выбираем модель смартфона, на которой хотим проверить сайт:

Ключ на старт

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

Для разработки макета сайта для мобильных можно обратиться:

– К профессиональным дизайнерам. С ними сразу оговорите, для каких размеров экрана вам нужны макеты (например, 320 пикселей в ширину для смартфонов и 768 пикселей в ширину для планшетов) и для каких разделов сайта (например, главная страница, типовая внутренняя страница, список статей в блоге и статья блога). Что еще стоит проверять, принимая макет от дизайнера, читайте в статье.

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

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

Поехали!

Приступаем к адаптации сайта под мобильные.

Шаг 1. Указываем тег Viewport

Нам нужно сообщить браузеру, что контент нашего сайта будет подстраиваться под ширину устройства (обычного компьютера, планшета или смартфона) и должен показываться в оригинальном масштабе. Для этого добавляем мета-тег viewport в секцию <head> в коде сайта (можно поставить перед тегом title):

<meta name=»viewport» content=»width=device-width, initial-scale=1″>
<title>Автосервис Mr Red: ремонт и обслуживание автомобилей в Красноярске</title>

Здесь:
width=device-width – говорит браузеру, что ширина его окна должна быть равна ширине устройства,
initial-scale=1 – сайт нужно показать в обычном масштабе (без увеличения или уменьшения).

Если не указать тег viewport, то браузер будет по умолчанию считать ширину контента равной стандартной ширине для десктопа (1024 пикселя) – и на телефоне с шириной 340 пикселей ваш сайт будет уменьшен в 3 раза. Поэтому чтобы адаптивная верстка сработала, обязательно прописываем viewport с device-width.

Шаг 2. Обновляем стили сайта

Берем макеты сайта для мобильных устройств и добавляем в стили сайта дополнительные правила для отображения блоков на разной ширине экрана:

/*
  … стандартные правила CSS …
  например, выводим карточки товаров по 4 в ряд
*/
@media (max-width:768px) {
  /*
    … правила для планшетов …
    выводим карточки товаров по 2 в ряд
  */
}
@media (max-width:320px) {
  /*
    … правила для смартфонов …
    выводим карточки товаров по 1 в ряд
  */
}

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

Что чаще всего делают дополнительные стили:

– Уменьшают число блоков в одном ряду. Например, на обычном компьютере выводится 4 блока в ряд (карточки товаров). Очевидно, что на экране телефона 4 карточки просто не поместятся в 1 ряд, так что здесь будем показывать по одной карточке.

– Скрывают какие-то блоки (совсем или под ссылку «Развернуть»). Например, у товара внушительное описание, которое на компьютере занимает почти целый экран. На телефоне такое описание может занять до 10 экранов. Их придется долго и нудно пролистывать, чтобы добраться до отзывов о товаре. Чтобы не нагружать пользователя, покажем на мобильных первый абзац описания, а остальной текст спрячем под ссылку «Показать все». Кто захочет прочитать полное описание, развернет его, в то время как все остальные будут избавлены от долгого пролистывания.

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

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

Шаг 3. Дорабатываем дизайн сайта

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

– Шапка сайта и меню. Если просто переместить все строчки в шапке сайта друг под друга (чтобы поместилось в ширину), то на телефоне такая шапка займет весь экран. Переходя по страницам сайта, человек будет вынужден раз за разом пролистывать экран с этой шапкой. Добавьте сюда 5-6 пунктов меню – и пользователь никогда не долистает до контента.

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

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

Шаг 4. Сокращаем количество рекламы и всплывающих окон

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

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

Шаг 5. Сокращаем количество контента

Если на сайте есть контент, который вы полностью скрываете от мобильных пользователей (не под кнопки «Подробнее», «Фильтр» и прочие, а совсем скрываете), то нет смысла вообще загружать этот контент на мобильное устройство – это дополнительный «вес» страницы, и он будет увеличивать драгоценное время загрузки сайта.

Пример: в статье на Хабре, открываемой с обычного компьютера, комментарии к статье загружаются сразу же в конце страницы – https://habr.com/company/mosigra/blog/427133/. А если открыть эту статью с мобильного, то страница будет содержать только текст статьи, без комментариев (и они не скрыты, они просто не выводятся для мобильных устройств). Под текстом статьи стоит кнопка «Комментарии», и по ней уже можно попасть на отдельную страницу с комментариями к статье. Конкретно для Хабра, где статьи часто и весьма охотно комментируют, это может экономить 3-5 секунд от загрузки страницы.

Для разграничения контента программист может как написать свой модуль, так и воспользоваться одним из готовых решений по определению типа устройства (например, MobileDetect). Во многие CMS такая функция уже встроена по умолчанию (например, wp_is_mobile в WordPress).

Шаг 6. Проверяем все страницы

Если на сайте до 200 страниц – лучше действительно отсмотреть их все. Потому что 20 карточек товаров могут отображаться нормально, а в описание 21-й кто-нибудь вставил видеоролик и прописал у него строго ширину в 900 пикселей – и вот этот ролик уже не помещается в экран мобильного.

Впрочем, если у вас тысячи страниц, то отсматривать каждую – не такая уж полезная трата времени. Тогда стоит проверить только важные страницы (продающие страницы, страницы с высоким трафиком и т.п.), и по 10-20 страниц в каждом разделе сайта (в каталоге товаров, в списке статей и т.д.).

Итог

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

Если стремление адаптировать свой сайт к мобильным есть, а умения нет – обращайтесь к нам, поможем с адаптивностью.

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

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

От автора: Интересуешься версткой сайта под мобильные устройства? Скачай бесплатный видеокурс по основам адаптивной верстки сайта. Уже сегодня ты создашь свой первый сайт, который будет красиво отображаться на ЛЮБОМ устройстве. Узнай основные секреты самого перспективного направления сайтостроения. Пошаговые уроки в наглядном формате видео. Выполняй адаптивную верстку под заказ и зарабатывай приличные деньги.

Урок 1. Введение

Тема: адаптивная верстка

Время ролика: 00:11:02

Cложность: легкая

Автор: Бернацкий Андрей

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

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

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

Урок 2. Медиа-запросы

Тема: адаптивная верстка

Время ролика: 00:33:22

Cложность: легкая

Автор: Бернацкий Андрей

Урок 3. Адаптивные изображения

Тема: адаптивная верстка

Время ролика: 00:17:41

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Cложность: легкая

Автор: Бернацкий Андрей

Урок 4. Практический пример. Часть 1

Тема: адаптивная верстка

Время ролика: 00:13:55

Cложность: легкая

Автор: Бернацкий Андрей

Урок 5. Практический пример. Часть 2

Тема: адаптивная верстка

Время ролика: 00:22:14

Cложность: легкая

Автор: Бернацкий Андрей

Ваши пожелания, отзывы и рекомендации оставляйте в комментариях!

JavaScript. Быстрый старт

Изучите основы JavaScript на практическом примере по созданию веб-приложения

Узнать подробнее

Фреймворк Bootstrap 4. Быстрый старт

Изучите основы Bootstrap 4 на практическом примере по верстке блога с нуля!

Смотреть

как нарисовать сайт для мобильного устройства — руководства на Skillbox

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

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

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

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

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

Поэтому для создания мобильной версии выбирают минимальное устройство в своем классе. Можно отталкиваться от ширины экрана для первых моделей iPhone — 320px.

Создаем в Sketch новый артборд с шириной 320px. Для этого выбираем Insert → Artboard или просто клавишу A на клавиатуре, а затем выбираем нужное разрешение. Подойдет шаблон Mobile с шириной в 320px.

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

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

Длинный артборд для мобильного

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

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

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

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

Рисуем три линии (Insert — Shape — Line). Вокруг них добавляем прямоугольник (Insert — Shape — Rounded).

Готовое бургер-меню

Кнопку с обратным звонком и телефон можно поместить внутри раскрывающегося меню — так мы сэкономим место.

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

Переносим контент

После этого адаптируем изображение под мобильный макет — уменьшаем размеры.

Десктопная и мобильная версии главного экрана

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

Второй экран сайта — описание строительного блока и его основные преимущества. Разместим их один под другим.

Сначала дорисуем серый фон

Чтобы увеличить длину фона в мобильной версии, редактируем контур. Кликаем несколько раз по серому контуру, пока не появятся направляющие.

Выделяем узловые точки

Затем тянем их вниз курсором.

Фон готов

Переносим изображение блока и текст. Кегль шрифта и размер изображения оставляем таким же.

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

Переносим иконки

Похожим образом располагаем и остальные элементы: слайдеры, кнопки, карточки.

Чтобы сделать мобильный макет удобным для пользователя, нужно:

упрощать интерфейс сайта,
располагать блоки один под другим,
следить за масштабом шрифтов и картинок.

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

Доля мобильных устройств в интернете растет с каждым годом, поэтому все сайты должны быть хорошо адаптированы под маленькие экраны. Узнать, как создать мобильную версию сайта и упростить интерфейс без вреда для юзабилити, можно на курсе «Веб-дизайн с 0 до PRO» от Skillbox.

Курс «Веб-дизайн с 0 до PRO»

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

Живая обратная связь с преподавателями
Неограниченный доступ к материалам курса
Стажировка в компаниях-партнёрах
Дипломный проект от реального заказчика
Гарантия трудоустройства в компании-партнёры для выпускников, защитивших дипломные работы

Как сделать один сайт для всех устройств (Responsive Web Design) / Хабр

Вчера была опубликована хорошая статья «Веб-дизайн. Каждому устройству свое представление». Несмотря на неплохие размышления, к сожалению, вывод в ней довольно глупый. А именно:

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

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

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

Это скриншот из презентации «Beyond the mobile web by yiibu» (очень рекомендую).

Во-вторых, если вы не facebook или yandex, скорее всего, вы не потянете создание и поддержку разных версий сайта для каждого устройства. Да и это не имеет особого смысла. Потому что ситуация становится похожа на реалии пятнадцатилетней давности. Тогда делали сайт «под браузер», а сейчас автор предлагает делать сайт «под устройство».

Как сделать один сайт для всех устройств

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

Сейчас можно сделать 1 сайт с единственной версткой, который будет работать на устройствах, начиная с телефонов, заканчивая огромными телевизорами. Например, yiibu.com или alistapart.com (поуменьшайте окно браузера):

Все это называется «Responsive Web Design»

Responsive состоит из следующих техник:

Резиновый макет на основе пропорций (fluid grid)

Основная идея — формула для вычисления пропорций в процентах «target / context = result». Например, у нас есть макет psd с шириной 1000px. В нем есть два блока: один слева шириной 270px, другой справа 730px. Сверстаем мы их так:

.leftcolumn {
width: 27%; /* 270px / 1000px = 0,27 */
float: left;
}

.rightcolumn {
width: 73%; /* 730px / 1000px = 0,73 */
float: right;
}

Если внутри левого столбца будет еще один блок и, скажем, на макете он шириной в 170px, то для него поменяются цель и контекст, и код будет выглядеть вот так:

.leftcolumn .some-div {
width: 62,962963%; /* 170px / 270px = 0.62962963 */
float: left;
}

На хабре был перевод оригинальной статьи Ethan Marcotte «Fluid Grids».

Резиновые изображения (fluid images)

Подстраивают свои размеры под блок родителя. Основная идея в неочевидном применении свойства { max-width: 100% }. Изображение с img { max-width: 100% } никогда не вылезет из своего блока-родителя.

Если блок-родитель меньше, чем размеры img, то изображение пропорционально уменьшится. Этот принцип применим как для img, так и для embed, object, video.

Подробная оригинальная статья «Fluid Images».

Media queries

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

Например, так:

/* начало css */

Здесь базовые стили для глупых браузеров. Например, для телефонов не high-end уровня. Pocket Internet Explorer для Windows Mobile 6.5 здесь же :).

@media only screen and (min-width: 480px) {

Здесь стили более разумных, но все еще мобильных устройств. Android, iPhone и так далее.

}

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

Планшеты в режиме portrait.

}

@media only screen and (min-width: 992px) {

Планшеты в режиме landscape, нетбуки, ноутбуки, десктоп.

}

@media only screen and (min-width: 1382px) {

Десктоп с большими разрешениями, телевизоры.

}

/* конец css */

media queries понимают все разумные браузеры. Для ie же есть Respond.js

Mobile first

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

Так глупые браузеры без media queries получат самый простой контент (например, на мобильных телефонах). А более продвинутые поймут и отрисуют страницу, беря во внимание media queries.

Подробнее о Mobile first

Ссылки

1. Русскоязычный блог о Responsive Web Design

2. Единственная хорошая книга на эту тему — «Responsive Web Design». Написана Ethan Marcotte, который в общем и положил начало адаптивным макетам. После ее прочтения многое прояснится.

Адаптивный дизайн в CSS (thesitewizard.com)

Использование медиа-запросов и области просмотра для мобильного дизайна

Кристофер Хенг, thesitewizard.com

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

Предварительные требования

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

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

Адаптивный веб-дизайн

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

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

Преодоление настроек мобильного устройства по умолчанию: окно просмотра

В целях этой статьи, чтобы избежать необходимости уточнять все, что я говорю, делая вещи еще более многословными, чем нужно,
Я буду использовать следующее сокращение. Когда я говорю здесь «настольный» или «компьютер», я имею в виду настольный или портативный компьютер, а не
смартфон или планшет (хотя последние два тоже компьютеры). И когда я говорю «мобильное устройство», я имею в виду
мобильный телефон, планшет с маленьким экраном и тому подобное, а не портативный компьютер (хотя последний тоже портативный).Без этого сокращения статью будет еще труднее читать, чем сейчас, с несколькими
предложения, чтобы объяснить, что я имею в виду, когда говорю эти термины. Я также склонен использовать «смартфон» как синоним «мобильное устройство».
здесь, чтобы статья не казалась слишком однообразной.

Браузеры современных мобильных телефонов написаны с учетом того, что веб-сайты традиционно предназначены для компьютеров.
мониторы. Таким образом, он приспосабливается, делая вид, что веб-сайт имеет экран размером с компьютер, и масштабирует все, чтобы оно соответствовало.
в этом.Например, Safari на iPhone 5 делает вид, что у него по умолчанию ширина экрана 980 пикселей, хотя
реальный размер — 320 пикселей (в портретном режиме). Итак, если вы разрабатываете веб-сайт с фиксированной шириной (скажем) 730 пикселей,
вся его ширина уместится на экране вашего мобильного телефона, даже если последний не такой широкий. Браузер выполняет
это за счет уменьшения размера вашего веб-сайта, чтобы все стало действительно маленьким. Если пользователю нужно что-то прочитать,
им придется увеличивать соответствующие части.Вы можете увидеть этот эффект, перейдя в
Демонстрационная страница фиксированной ширины на вашем смартфоне.
Эта конкретная страница имеет фиксированную ширину 730 пикселей и специально разработана так, чтобы не адаптироваться к вашему
использование мобильного телефона.

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

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

Если вы хотите быть ориентированными на будущее, вам теоретически необходимо добавить эквивалентный код CSS в свою таблицу стилей.

@viewport {
ширина: ширина устройства;
зум: 1,0;
}

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

Если вы хотите протестировать его в Internet Explorer 10, 11 и Microsoft Edge, потому что вы включили средство в
свои предпочтения, вы также должны добавить следующее.(Свойство масштабирования еще не реализовано.)

@ -ms-viewport {
ширина: ширина устройства;
}

Префикс « -something- » (например, « -ms- » для Microsoft, « -webkit- » для Google,
« -moz- » для Mozilla и т. Д.) — это метод, используемый поставщиками браузеров для добавления поддержки экспериментальных вещей, которые
пока официально не добавлены в стандарты. Они делают это, потому что если они добавят, скажем, @viewport преждевременно,
с использованием метода предварительных стандартов, который все еще обсуждается и обсуждается, и окончательный стандарт в конечном итоге заканчивается
различное значение для этих свойств, то веб-сайты, которые зависят от предварительного стандарта написания @viewport
сломается.Это приводит к нечестивому беспорядку, когда поставщики браузеров должны решать, как интерпретировать правила на веб-сайте.
поскольку некоторые сайты будут полагаться на предстандартную семантику, а другие — на официальную. И веб-мастера не будут
могут решить проблему, кодируя вещи так или иначе, поскольку они не могут контролировать,
посетители используют браузер до или после стандартов. Поэтому решение состоит в том, чтобы предложить версию с префиксом,
и включить только тот, без префикса, когда стандарты будут установлены.

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

Ключ, который открывает адаптивный дизайн в CSS: медиа-запросы

Теперь, когда у нас есть браузер мобильного телефона, чтобы воздерживаться от изменения размеров вещей за нашей спиной, мы должны адаптироваться к его
маленький экран вручную.Хотя это кажется шагом назад, на самом деле это позволяет нам
более подходящим способом, чем автоматическое устройство телефона: например, мы можем изменить размер вещей, которые могут быть
измененный размер (например, изображения), оставляя в покое другие, размер которых не должен изменяться (например, слова). Чтобы освободить для этого место,
мы можем отправить элементы, которые не так важны, в нижнюю часть экрана. Например, если вы прочитаете какой-нибудь
в статье на сайте thesitewizard.com, включая эту, на мобильном телефоне, вы обнаружите, что мое меню навигации (т. е.
список кнопок), который обычно находится в левом столбце в браузере рабочего стола, располагается внизу страницы.
на смартфоне.Я решил, что, поскольку пользователь находится на этой странице, его основная цель — прочитать
статья. Поэтому я помещаю статью вверху, чтобы посетители могли сразу к ней перейти.

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

Медиа-запрос в таблице стилей выглядит примерно так:

@media screen и (max-width: 320px) {
/ * CSS для экранов размером 320 пикселей или меньше будут помещены в этот раздел * /
}

Любой CSS, заключенный в фигурные скобки теста « @media screen и (max-width: 320px) », будет
применимо только к экранам с максимальной шириной 320 пикселей.Вы, конечно, не ограничены тестированием шириной
320 пикселей. Последнее — просто фигура, которую я выбрал для этого примера. Вы можете протестировать min-width и
max-width любого размера. Вы даже можете проверить диапазон размеров, например, в следующем коде.

@media screen и (min-width: 320px) и (max-width: 640px) {
/ * для экранов с шириной не менее 320 пикселей, но не более 640 пикселей * /
}

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

/ * код, который здесь, до первого блока @media, будет применяться к любому размеру экрана * /
#somethingorother {
ширина: 800 пикселей;
}

@media screen и (max-width: 320px) {
/ * вступает в силу для экранов, размер которых меньше или равен 320 пикселей * /
#somethingorother {
width: 120px;
}
}
@media screen и (min-width: 321px) и (max-width: 480px) {
/ * вступает в силу для экранов от 321 до 480 пикселей (включительно) * /
#somethingorother {
width: 320 пикселей;
}
}
@media screen и (min-width: 481px) {
/ * вступает в силу для экранов размером не менее 481 пикселя * /
#somethingorother {
width: 480px;
}
}

/ * приведенный здесь код будет применяться к любому размеру экрана * /

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

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

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

Тестирование портретного и ландшафтного режима с помощью медиа-запросов

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

экран @media и (ориентация: книжная) {
/ * … * /
}
экран @media и (ориентация: альбомная) {
/ * … * /
}

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

Другие полезные функции в медиа-запросах

Помимо вышеуказанного, вы также можете вставить тесты для минимальной высоты (т. Е. Минимальной высоты), максимальной высоты
(максимальная высота), ширина и высота .

Кроме того, вы можете начать медиа-запрос с « только », как в следующем фрагменте:

Только экран @media и (max-width: 480 пикселей) {
/ *… * /
}

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

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

@media not (max-width: 639px) {
/ * Правила CSS для любого устройства, ширина которого превышает 639 пикселей * /
}

(Обратите внимание, что, поскольку я не указал « экран » в приведенном выше примере, это подразумевает « все »
что означает все устройства.)

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

Разрешение / ширина экрана мобильного устройства

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

240 пикселей (старый портретный режим Android)
320 пикселей (iPhone 3-5 и iPhone SE в портретном режиме)
375 пикселей (iPhone 6, 6s, 7, 8 и X портрет)
384 пикселей (Android Nexus портрет)
414 пикселей (iPhone 6 Plus, 6s Plus, 7 Plus и 8 Plus, портретная ориентация)
480 пикселей (iPhone 3 и 4 альбомный режим)
568 пикселей (iPhone 5 и iPhone SE в горизонтальной ориентации)
600 пикселей (Android Nexus в альбомной ориентации, Kindle в портретной ориентации)
667 пикселей (iPhone 6, 7 и 8 в альбомной ориентации)
736 пикселей (iPhone 6 Plus, 7 Plus и 8 Plus в альбомной ориентации)
768 пикселей (iPad портрет)
812 пикселей (iPhone X, альбомная ориентация)
1024 пикселей (iPad, альбомная ориентация)

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

Обратите внимание, что вам не обязательно следовать моей системе разделения CSS на 629 пикселей.Это просто цифра, которую я использовал
потому что, похоже, он отлично работает с контентом thesitewizard.com. На самом деле, если я правильно помню, я видел сайт,
переключился на мобильный макет только на 480 пикселей, а другой переключился на разные макеты в зависимости от того,
Экран имел 940, 640 или 520 пикселей по горизонтальной оси. Я рекомендую вам не слепо следить за размером других сайтов
условия: используйте номер, соответствующий вашему контенту, протестируйте и измените его соответствующим образом.

Совместимость с веб-браузерами

Средство медиа-запросов, которое позволяет нам тестировать размер экрана, появилось позже на сцене веб-браузера.То есть CSS существовал уже много лет, прежде чем в стандарт были включены средства условного
применять определенные правила к определенным размерам экрана. Таким образом, очень старые браузеры не поддерживают эти функции.

Что касается смартфонов, насколько мне известно, медиа-запросы поддерживаются только в браузерах Android, начиная с
с версией 2.1, на iPhone Safari 3.2 и новее, Blackberry 7 и новее, Opera Mobile 12 и новее, Opera Mini 8,
и Internet Explorer («IE») для мобильных устройств 10 и более поздних версий.

Что касается браузеров для настольных ПК / ноутбуков, поддержка, похоже, началась с IE 9, Firefox 3.5, Safari 4 и Chrome 4.
Поскольку Microsoft Edge изначально был основан на коде IE 11, он всегда имел поддержку медиа-запросов.

Учитывая вышесказанное, насколько безопасно использовать медиа-запросы на вашем сайте?

Многое зависит от демографии вашего сайта. Например, если на вашем сайте много
люди, использующие телефоны с IE Mobile 9 и более ранними версиями, вероятно, захотят поддержать их.
Это не невозможно, поскольку ранние версии IE позволяют использовать
условные комментарии,
где вы можете включить правила, которые будут отображаться только ими, а не другими браузерами. Как таковой,
эти браузеры можно обнаружить
не прибегая к медиа-запросам.
Кроме того, вы можете использовать JavaScript для определения размера экрана и соответствующей настройки таблицы стилей.
В Интернете есть даже бесплатные скрипты JavaScripts, которые реализуют медиа-запросы в ранних версиях IE,
хотя я не пробовал ни одного из них и поэтому не могу за них поручиться.
Если на ваш сайт очень мало посетителей, использующих такие старые мобильные браузеры, вам нужно решить, хотите ли вы
потрудитесь создать решение специально для них. Вы можете обнаружить, что время и усилия, которые вам нужно потратить,
непропорционально количеству людей, которым это действительно выгодно. И со временем это число будет только уменьшаться.
Таким образом, вы можете просто разрешить таким пользователям просматривать ваш сайт, используя таблицу стилей по умолчанию (которую все
все равно бы увидел, прежде чем вы вдруг решили создать мобильную версию).

Следующая глава

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

Авторские права © 2016-2020 Christopher Heng. Все права защищены.
Получите больше бесплатных советов и подобных статей,
по веб-дизайну, продвижению, доходам и написанию сценариев, с https://www.thesitewizard.com/.

Адаптивный макет для мобильных экранов: введение, советы и примеры

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

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

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

Как работает адаптивный дизайн

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

Адаптивный дизайн — это создание однородного взаимодействия независимо от размера экрана браузера или устройства. Я нашел прекрасный пример из «A List Apart», чтобы проиллюстрировать свою точку зрения, который также включает динамические изображения.

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

Почему дизайн для мобильных устройств?

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

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

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

Скорее всего, ваш веб-сайт не будет работать на 100% на каждом устройстве с каждым браузером. Но вы можете настроить таргетинг на большинство, основываясь на средней ширине экрана. В старых моделях iPhone используется разрешение экрана 320 × 480, что не так уж и невероятно. Я бы сделал снимок с минимальной шириной 240 пикселей или даже меньше, если вам это удастся.

Удаление масштаба по умолчанию

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

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

Это известно как метатег области просмотра , который устанавливает некоторые пользовательские переменные в содержимом. У Apple есть страница документации, посвященная нескольким другим метатегам, на которые вы должны обратить внимание, хотя они предназначены специально для веб-сайтов на iOS. Значение в исходном масштабе важно, так как по умолчанию на вашем веб-сайте будет установлен полный 100% масштаб.

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

Динамическое масштабирование изображения

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

 img {максимальная ширина: 100%; }

Стандартным правилом CSS является применение свойства максимальной ширины ко всем изображениям. Поскольку они всегда будут установлены на 100%, вы никогда не заметите искажений. Когда пользователь изменяет размер окна браузера меньше, чем может обработать ваше изображение, оно автоматически настраивается на 100% ширину с уменьшенным масштабом. Проблема в том, что Internet Explorer не может понять это свойство, поэтому вам нужно будет составить таблицу стилей для IE с шириной : 100%; .

Гибкие изображения также возможны, если вы используете плагины JavaScript или jQuery. Есть несколько действительно умных разработчиков, которые потратили время на создание невероятно адаптивного графического контента. Этот поток — лишь один из многих в Stack Overflow, который предлагает диковинный, но удобный подход к решению ошибок IE6 / 7.

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

Трогательный дизайн

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

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

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

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

Пользовательские макеты CSS

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

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

Включение / выключение дополнительного содержимого

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

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

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

Использование медиа-запросов

Если на экране мобильного устройства будет нарушен макет из 2 или 3 столбцов, вы получите все области контента, расположенные друг над другом. Может показаться, что весь сайт истекает кровью и может выглядеть очень запутанным без выделенных блоковых областей.Лучше всего добавить нижнюю границу в каждый столбец, только для мобильных устройств, используя внешнюю таблицу стилей, например mobile.css .

С этими новыми стилями ваш контент разбивается на делимые разделы. Атрибут media выше специально разработан для ориентации на старые устройства iPhone в альбомной ориентации. Но это также будет применяться к устройствам с экранами меньше 480 пикселей.Используйте это в своих интересах, чтобы вы могли определить, в какой момент макет «распадается».

Есть еще несколько опций, которые вы можете использовать для определения ориентации устройства. Это фантастическое руководство по CSS-медиа может дать вам несколько идей. Кроме того, новый мобильный проект 320 и выше предлагает шаблон для мобильных стилей CSS @media . Их можно включить непосредственно в один и тот же файл mobile.css и применять правила для многих различных устройств.

/ * Смартфоны (портрет и пейзаж) ----------- * /
@media только экран
и (минимальная ширина устройства: 320 пикселей)
and (max-device-width: 480px) {
/ * Стили * /
}

/ * Смартфоны (альбомная ориентация) ----------- * /
@media только экран
and (min-width: 321px) {
/ * Стили * /
}

/ * Смартфоны (портрет) ----------- * /
@media только экран
and (max-width: 320px) {
/ * Стили * /
}

/ * iPad (портрет и пейзаж) ----------- * /
@media только экран
и (минимальная ширина устройства: 768 пикселей)
and (max-device-width: 1024px) {
/ * Стили * /
}

(Источник: Hardboiled CSS3 Media Queries)

Полезные инструменты

Витрина: красивый адаптивный дизайн

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

висит на луне

Macdonald Hotels

CSS-уловки

Хэппи Ког

Тейксидо

CSS Wizardry

Информационные архитекторы

ИСКУССТВО = РАБОТА

Жесткий веб-дизайн

Sony США

Будущее

Мы не можем перестать думать

Аутентичные вакансии

Дизайн колбочек

320 и более

Вилка CMS

Счастливый бит

Electric Pulp

Реквизит Foster

Плексический

Торты Прити

Больше опасностей

Информационный центр стоматологии

ribot — дизайн интерфейса

Привет Фишер

Саммит социальных маркетологов

Уильям Чете

Шерстяной робот

Meltmedia

Как просмотреть мобильную версию сайтов WordPress с рабочего стола

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

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

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

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

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

Более 50% посетителей вашего сайта будут использовать свои мобильные телефоны для доступа к вашему сайту. Около 3% будут использовать планшеты.

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

На самом деле, мобильные устройства настолько важны, что Google теперь использует индекс «сначала мобильные» для своего алгоритма ранжирования веб-сайтов.

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

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

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

Видеоурок

Подписаться на WPBeginner

Если вам не нравится видео или вам нужны дополнительные инструкции, продолжайте читать.

1. Использование настройщика тем WordPress

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

Просто войдите в свою панель управления WordPress и перейдите на экран Внешний вид »Настройка .

Это откроет настройщик тем WordPress. В зависимости от того, какую тему вы используете, в левом меню вы можете увидеть немного разные параметры:

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

Примечание: Синие символы редактирования присутствуют только в средстве предварительного просмотра. Вы не увидите их на своем действующем сайте.

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

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

2. Использование режима устройства Google Chrome DevTools

В браузере

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

Просто откройте браузер Google Chrome на рабочем столе и перейдите на страницу, которую хотите проверить.

Это может быть предварительный просмотр страницы вашего сайта или даже сайт ваших конкурентов.

Затем вам нужно щелкнуть правой кнопкой мыши на странице и выбрать «Проверить».

С правой стороны откроется новая панель, например:

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

Затем нажмите кнопку «Переключить панель инструментов устройства», чтобы перейти к мобильному представлению.

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

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

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

Этот круг можно перемещать с помощью мыши, чтобы имитировать сенсорный экран мобильного устройства.

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

Над мобильной версией вашего сайта вы увидите некоторые дополнительные параметры.

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

Как создать контент для мобильных устройств в WordPress

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

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

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

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

Отличный способ создавать мобильные всплывающие окна и формы для привлечения потенциальных клиентов — использовать OptinMonster. Это самый мощный плагин для всплывающих окон WordPress и инструмент лидогенерации на рынке.

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

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

Бонус: Ознакомьтесь с нашей подборкой лучших бизнес-телефонных услуг, чтобы вы могли добавить кнопку «Щелкни для вызова» для мобильных пользователей.

Если вам понравилась эта статья, то подпишитесь на наш канал YouTube для видеоуроков по WordPress. Вы также можете найти нас в Twitter и Facebook.

Оптимизация вашего веб-сайта для мобильных устройств

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

Адаптивные веб-сайты предоставляют только ограниченное количество вариантов отображения, но по мере увеличения количества мобильных устройств возрастает спрос на более гибкие типы отображения. Многие операторы веб-сайтов предпочитают адаптивный дизайн, который также основан на медиа-запросах CSS3. Как и в случае с адаптивным дизайном, сервер доставляет один и тот же HTML-код на все устройства. Это означает, что сайт доступен во всех вариантах макета по одному и тому же URL-адресу .Но в отличие от адаптивного дизайна, адаптация к размеру экрана устройства осуществляется плавно, без жесткой сетки определенных окон просмотра. Это позволяет мобильному сайту полностью использовать все доступное пространство на экране устройства. Из-за сложности адаптивного дизайна запуск веб-сайта по этому принципу утомительно и дорого. Контент, как и макет, должен быть гибким. Текстовые сегменты, изображения, видео и таблицы должны работать как на смарт-телевизорах, так и на мобильных телефонах.Вместо разработки собственного дизайна многие операторы веб-сайтов предпочитают использовать системы управления контентом , — такие как WordPress, Joomla, Drupal и Typo3. Эти проекты с открытым исходным кодом зависят от крупных сообществ пользователей и разработчиков и предлагают широкий спектр готовых шаблонов дизайна с адаптивным дизайном, некоторые из которых можно использовать бесплатно.

Преимущества:

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

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

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

Google предпочитает адаптивный дизайн.

Недостатки:

Реализация адаптивного дизайна стоит дорого (особенно когда речь идет о уже существующих проектах).

Контент сложных веб-страниц не всегда так просто перенести на маленькие дисплеи.

Мобильные устройства загружают тот же объем данных, что и настольные ПК. Таким образом, время загрузки страницы на мобильных устройствах обычно ниже, чем на отдельных мобильных веб-сайтах.

Апрель 2024
Пн	Вт	Ср	Чт	Пт	Сб	Вс
1	2	3	4	5	6	7
8	9	10	11	12	13	14
15	16	17	18	19	20	21
22	23	24	25	26	27	28
29	30