Как сделать разные версии сайта для телефона и для пк

Обновлено: 02.07.2024

Для просмотра на мобильных устройствах, используется метатег viewport. Он сообщает браузеру, каким образом нужно контролировать отображение сайта на мобильных устройствах (к ним так же относятся и планшетные компьютеры).

Этот метатег вставляют в контейнер head вашего сайта.

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

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

Ширина сайта на экранах мобильных устройств

Позволяет адаптировать ширину сайта под ширину экрана устройства

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

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

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

Высота сайта на экранах мобильных устройств

В некоторых мобильных браузерах при интерполяции страницы сайта высота сайта отображается не корректно.

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

Масштабирование сайта на экранах мобильных устройств

С помощью этого правила мы можем разрешать либо запрещать мастабирование страницы сайта.

Разрешить масштабирование на смартфоне:

Запретить масштабирование на мобильном телефоне:

Подитог

И так мы создали свой viewport и так же для него создали медиапзапрос

В наш медиазапросе создали необходимые для нас стили. Что у нас вышло видим на рис.3 либо по ссылке (заходим с мобильных устройств)

Viewport:

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

рис.1 Отображение сайта без метатега viewport

рис.2 Отображение сайта с атрибутом width=device-width

рис.3 Отображение сайта с атрибутом width=600

Верный viewport

Прошло уже 5 лет с момента первой нашей верстки под мобильные устройства и получили новый опыт. В итоге пришли к простому, но бронебойному viewport для сайтов:

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

Как сделать сайт адаптивным на все экраны?

Чтобы сделать сайт адаптивным на мобильное или стационарное устройство, нужно иметь представление о HTML5, CSS3 и JavaScript. Кроме общих знаний, требуется понимать основные принципы адаптивности.

Только с ними можно начинать делать верстку сайта:

Поточность — принцип отсутствия смещения информационных блоков во время просмотра сайта с мобильного устройства.
Относительность в измерении — принцип использования относительных единиц для установки размеров и координат верхней и нижней границы блока экрана ПК и дисплея смартфона.
Применение контрольных точек — принцип расположения элементов для разных экранов во избежание сдвига содержимого страниц сайта.
Принцип грамотного использования минимальных и максимальных значений. К примеру, если экран имеет ширину меньше 1000 пикселей, то контент размещают на весь экран. Иначе максимум ширина будет достигать 1000 пикселей.
Принцип вложенности объектов для предотвращения сложностей контроля за разными элементами сайта. Можно вложить их в один контейнер. Требуется для тех блоков, которые не нужно адаптировать под экран — кнопки с логотипами и др.
Использование одинаковых шрифтов во избежание перегрузки сайта.
Правильное применение растровой с векторной графикой. К примеру, если картинка состоит из множества деталей, следует делать ее в растровом формате и, наоборот, если она одна, то лучше использовать векторный формат. Однако стоит помнить о сжатии. Каждая картинка должна быть оптимизирована под новые браузеры.
Соблюдение макетных размеров и общих стандартов верстки сайта. Стандартными принято считать следующие разрешения, при которых не происходит смена дизайна и неправильное отображение сайта:
- для мобильных устройств – 320px, 480 px;
- для планшетных компьютеров – 768px;
- для нетбуков с некоторыми планшетами – 1024px;
- для ПК – 1280px и больше.

Видео инструкция: Как сделать адаптивный сайт в фотошопе.

Что менять в HTML и CSS коде?

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

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

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

В целом получаем готовый шаблон для одной картинки на сайт. Чтобы сделать мини-галерею прописываем следующие коды в HTML структуру:

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

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

Адаптивное меню

Чтобы сделать адаптивное меню, вначале нужно добавить мега тег meta viewport в раздел шапки. Этот тег нужен, чтобы меню корректно отображалось на любом экране.

Затем добавляем структуру меню по образцу ниже.

Дополнительная седьмая ссылка меню нужна для адаптации сайта под любое мобильное устройство. Далее добавляются стили в body. Это только для декоративных целей. Цвет можно использовать любой. Для примера возьмем бежевое меню. Под body добавляется тег nav. Он позволит сделать навигацию сайта. В этом теге размещаем основные ссылки меню.

Поскольку основных ссылок – 6 штук, то контейнер будет обладать шириной в 600 пикселей, а каждая ссылка – по 100 пикселей. Смотрите ниже.

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

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

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

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

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

В конце нужно сделать созданную шапку сайта адаптивной. Для этого нужно применить свойства justify-content со значением space-between.

В целом, работа окончена. Проверить итог работы можно через удобный сервис Google Mobile Friendly.

Гибкие изображения и видео

Сделать изображения с видео гибкими и адаптивными можно с помощью разных способов. Чтобы не использовать сложный атрибут srcset, рассмотрим примеры настройки картинок и видео через CSS. Для базового расположения одиночных картинок с записями или видео, нужно прописать следующую html и css структуру. Здесь элемент обозначения картинки уже будет адаптивным.

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

Что касается трехколоночного макета, структура кодов остается такой же. Следует только выбрать ширину сформированного базового контейнера не трех изображениях или видео. Для этого нужно поставить показатели ширины картинок примерно 1/3 ширины контейнера:

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

Чтобы реализовать задуманное, нужно только расставить в body медиа-запросы и указать тип носителя, для которого будут они применяться. Выглядит все следующим образом:

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

Как сделать адаптивный фон

Чтобы установить адаптивный фон, следует проделать ряд простых шагов:

Сделать подборку подходящего качественного изображения с высоким разрешением, и пропорциональным образом сделать его меньше с помощью любого графического редактора. Затем загрузить его на сервер в папку картинок.
Создать body стилей и между тегами и вставить стили, прописав в них метатег viewport, чтобы превратить изображение в фоновое.
Прописать путь к папке стилей и его полное название.
Проверить результат, делая больше и меньше размеры окон.

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

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

Подробнее про адаптивность и отзывчивость дизайна сайта.

Преимущества Тильды заключаются в следующем:

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

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

Работа с Adobe Muse

Как и Тильда, Adobe Muse является еще одним удобным и современным конструктором начинающего и опытного вебмастера. Он позволяет сэкономить много времени на адаптивности. Все, что требуется от вебмастера, – поработать в редакторе с интерфейсом, а коды сгенерирует система.

Преимущества работы с Adobe Muse следующие:

Возможность сделать шаблон сайта без сложностей;
Упрощенное создание адаптивного сайта (стандартный сайт можно сделать за 2 часа);
Широкий функционал интерфейса;
Понятная и быстрая работа с HTML5 и CSS3.

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

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

Чтобы проверить настройку адаптивности сайта и его правильного отображения на всех устройствах, можно воспользоваться браузером или специальным сервисом Google Mobile Friendly (Google Search Console).

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

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

При оптимизации сайта для мобильных устройств в WordPress самым простым решением будет изменение темы на адаптивную либо установка плагина для мобильной версии. При использовании темы с адаптивным дизайном ресурс выглядит таким образом в полной версии:

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

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

Также для Wordpress можно использовать следующие плагины:

Google Accelerated Mobile Pages (AMP) — библиотека с открытым программным кодом, помогающая создавать быстро загружающиеся упрощенные версии страниц сайта, которые хорошо выглядят на смартфонах.

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

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

Помимо указанных, можно использовать следующие плагины:

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

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

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

Согласно рекомендациям Google, чтобы поисковики не считали контент на мобильной версии дублированным, необходимо в код каждой страницы полной версии добавить:

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

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

Как создать мобильную версию сайта

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

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

Тенденции веб-дизайна

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

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

Большинство смартфонов имеют расширение 320 пикселей. Многие ориентируются на 240. Чтобы все элементы были в рамках страницы, нужно установить 100% в табличке стилей CSS, тогда они будут подстраиваться под ширину экрана.

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

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

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

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

Как сделать адаптивную верстку

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

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

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

Правила верстки

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

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

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

Самым распространенным способом мобильной верстки является создание макета с одной колонкой. При этом весь контент нужно разделить на отдельные блоки. Например:

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

Что касается разрешения для адаптивной верстки, то нужно просмотреть аналитику самых популярных моделей разных устройств или зайти на Firefox -> Открыть меню -> Разработка -> Адаптивный дизайн. Кроме того, можно использовать растягивание с шагом по 100 пикселей.

Удачные примеры адаптивных сайтов:

New Adventures In Web Design Conference 2012

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

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

Adaptive Web Design – рекламный сайт книги, которая ответит на все вопросы об адаптативном дизайне. Естественно, выполнен сайт на высшем уровне.

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

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

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

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

Преимущества и недостатки этих способов разработки

Преимущества	Недостатки
Адаптивный дизайн	● Удобство разработки. Вся структура сайта подстраивается под разную ширину экранов;

● Не нужно писать сайт с нуля, достаточно внести изменения в CSS и HTML;

● Простая поддержка такого продукта;

● Наличие одного адреса позитивно сказывается на продвижении сайта.

● Удобен для пользователей;

Заключение

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

Учитывая нынешние тенденции использования мобильных устройств, создание мобильной версии просто необходимо, так как большинство пользователей заходят в Интернет через гаджеты. Если у вас ограниченный бюджет и вы не хотите тратить деньги на создание мобильного приложения для вашего сайта — компания Google рекомендует новую технологию Progressive Web App или прогрессивные веб-приложения.

Технология позволяет совместить качества мобильного сайта и приложения. Пользователь заходит на сайт и сразу же получает предложение установить его на рабочем столе. Установка происходит по одному клику (ярлык сохраняется на рабочем столе). PWA занимает минимум места (до 200 Кб) и не тратит ресурсы мобильного устройства, работает в режиме оффлайн и при плохой Интернет-связи, автоматически обновляет контент при наличии хорошего интернет-соединения, загружается мгновенно (!).

Читайте также: