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

Содержание

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

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

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

Активная абонентская база мобильной передачи данных, мир, млн человек, 2007–2015 гг.

В связи с этим были разработаны новые алгоритмы для поисковых систем, а также введены дополнительные факторы ранжирования: теперь в поисковой выдаче учитывается то, насколько сайт является mobile-friendly (удобным для просмотра на мобильных устройствах). В Google алгоритм Mobile friendly был запущен 21 апреля 2015 года, в Яндексе — «Владивосток» 2 февраля 2016 года.

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

Как поисковики определяют, комфортна ли страница сайта для просмотра с мобильных устройств:

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

Что самое главное, поисковики оценивают веб-сайты однозначно — либо mobile-friendly, либо нет.

С помощью инструмента Google PageSpeed Insights (https://developers.google.com/speed/pagespeed/) можно определить, насколько быстро загружаются страницы сайта, а также их удобство использования. Оценка PageSpeed может составлять от 0 до 100 баллов по показателям «Скорость загрузки страниц» и «Удобство для пользователей», например:

Результаты от 85 баллов и выше считаются хорошими.

Если страница сайта не удовлетворяет требованиям сервиса, выдается отчет в виде рекомендаций по устранению проблем, например:

Каждая рекомендация имеет индикатор приоритета, соответствующий ее важности:

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

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

Чтобы понять, стоит ли адаптировать сайт для «мобильной» аудитории, необходимо проанализировать его в системах веб-аналитики (Яндекс.Метрике или Google Analytics) по посещаемости в разрезе устройств, с которых пользователи заходят на сайт. В случае если более 15% аудитории используют смартфоны или планшеты, рекомендуется разработать адаптивную верстку или мобильную версию. Здесь важно учитывать и трафик сайта. Например, для сайтов с большим количеством посетителей (от 1 000 000 и выше) данная планка снижается, так как нельзя пренебрегать таким большим сегментом трафика сайта.

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

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

«Особая примета» мобильной версии: при переходе на нее в адресной строке браузера меняется URL — к нему добавляется префикс «m.», например: m.example.ru.

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

Пример сайта с адаптированной мобильной версией: http://www.lamoda.ru/ (m.lamoda.ru).

Основные преимущества мобильной версии сайта

Малый вес и, как следствие, высокая скорость загрузки. Это существенно для пользователей, у которых низкая скорость доступа в интернет (GPRS или слабый 3G).
Наличие у пользователя выбора, какую именно версию просматривать (мобильную или основную).
Соответствие требованиям поисковых систем к удобству просмотра сайта на мобильных устройствах.

Недостатки мобильной версии

Если необходимо внести изменения на сайт, их придется вносить и на обычную версию сайта, и на мобильную, т. е. объем работ увеличивается в 2 раза.
При ее разработке зачастую приходится отказываться от части контента.
Так как мобильная и основная версия сайта находятся на разных доменах, она не улучшает поведенческие факторы основного домена, т. е. это будет минусом для SEO-оптимизации.

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

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

Вид на мониторе компьютера и на мобильном устройстве — адаптивная версия отличается от основной

Пример сайта с адаптивной версией: http://www.mvideo.ru/.

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

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

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

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

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

Что же лучше: адаптивная вёрстка для мобильных устройств или мобильная версия сайта?

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

Полезно 2

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

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

Так как мобильных устройств существует великое множество, то одна модель может поддерживать какие-либо возможности 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 (для десктопа) в меню «Вид» -> «Небольшой экран».

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

Ссылки

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

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

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

Объем мобильного трафика в мире колоссален и с каждым днем продолжает увеличиваться.

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

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

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

Галактическая подборка: 190 лучших книг по интернет-маркетингу

Как выглядит адаптивный сайт

Посмотрим на реальном примере, как выглядит адаптивный сайт на трех разных устройствах. Для примера возьмем сайт известного дизайнера Саймона Коллисона – colly.com.

Так адаптивный сайт отображается на разных устройствах: смартфонах (с горизонтальной и вертикальной ориентацией), десктопах и планшетах (также с горизонтальной и вертикальной ориентацией)

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

Зачем нужен адаптивный дизайн и адаптивная верстка

Устройства, с которых можно выходить в интернет, не ограничиваются десктопами и смартфонами. Необходимо учитывать, как сайт отображается и на других видах устройств, например, планшетах и умных телевизорах. Поправка на эти устройства появилась и во многих веб-аналитиках, в частности в Google Analytics и «Яндекс.Метрике»:

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

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

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

Сложности адаптивной разработки

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

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

Удобство / юзабилити для мобильных устройств / адаптивность – это отдельные факторы ранжирования, которые учитываются Google и «Яндекс». К ним можно отнести сразу несколько показателей:

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

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

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

Проверить адаптивность сайта можно прямо в браузере – без всяких дополнительных сервисов. Если вы используете Mozilla Firefox, достаточно воспользоваться сочетанием горячих клавиш Ctrl + Shift + M:

Проверить адаптивность сайта в Google Chrome можно, воспользовавшись сочетанием горячих клавиш Ctrl + Shift + I или просто нажав клавишу F12, затем – кликнуть по иконке эмуляции устройств (Toggle Device Toolbar):

Кроме этого, проверить адаптивность сайта можно при помощи инструмента «Проверка оптимизации для мобильных» от Google:

Какой экран учитывать изначально

Вопрос интересный. Есть два основных подхода.

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

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

Раньше наиболее распространенным способом разработки был второй вариант. Сегодня более актуален первый способ – эта концепция получила название Mobile First. Этот способ разработки является более логичным и простым изначально.

Основные правила адаптивного дизайна

Адаптивный дизайн подразумевает соблюдение нескольких основных «законов». Поговорим о самых главных из них подробнее.

Размеры макетов. Брейкпоинты

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

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

«Каноничные» значения для адаптивного дизайна следующие:

смартфоны: от 320 пикселей / 480 / выше;
экран монитора компьютера: от 1280 пикселей и выше;
планшеты: от 768 пикселей и выше;
нетбуки: 1024 пикселей.

Относительность координат, размеров и масштабов

Большое разнообразие экранов и типов устройств не позволяет использовать какие-либо точные единицы измерения. Когда мы говорим об адаптивном дизайне, то нужно понимать, что в качестве таких единиц используются относительные значение. Потому что на каждом экране существует своя собственная плотность пикселей, которая, естественно, соотносится и с его размером. Так, разрешение 360 x 240 пикселей будет абсолютно по-разному выглядеть на экране планшета и телевизора. Именно поэтому адаптивный дизайн использует относительные значения. Например: координаты/размеры/масштабы блока определяются по отношению к верхней границе или по отношению к любому другому элементу.

Вложенность

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

Поточность

Имеется в виду отсутствие сдвигов блоков. При приеме сайта обратите внимание: если блоки смещаются, то просмотр страницы становится настоящим испытанием.

Графические форматы

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

Шрифты

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

TTFB, или время ответа сервера: как увеличить скорость загрузки сайта

Мобильная версия: что учесть

Адаптивная верстка и мобильная версия – в чем разница

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

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

Мобильные версии сайтов: лучшие примеры

Технические требования: чеклист мобильной версии

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

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

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

Какое перенаправление теперь используется для создания редиректа на мобильную версию сайта? (должно использоваться 302-ое перенаправление)
Открыта ли индексация каскадных таблиц (CSS) в системном файле robots?
Активирована ли индексация JS?
Задействован ли viewport? Этот метатег используется для указания области экрана, которая видна без скролла страницы. Прописывается этот тег вместе с требуемыми параметрами (в Head-разделе).

При разработке мобильной версии ни в каком виде не должны использоваться Applet, Microsoft Silverlight, Flash.

Юзабилити: чек-лист мобильной версии

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

Мы видим, что здесь не нужно заполнять ФИО, город, адрес, e-mail – достаточно авторизоваться по номеру телефона и указать код из SMS. Если ваша форма заказа для нового покупателя содержит очень много полей, лучше сократить их до минимума, либо разбить заполнение формы на несколько экранов.

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

Шрифт не должен быть очень мелким. Минимальный размер символов – 12px: для чтения такого текста все еще придется напрячь глаза и сделать определенное зрительное усилие. Чтобы текст был читаемым и комфортным для глаз, лучше использовать размер от 14 до 16px.
Р асстояние между интерактивными элементами должно составлять минимум 28px (иначе по ним будет сложно нажимать на небольших экранах, кроме этого элементы могут накладываться друг на друга).
Размер кнопок: кнопки позвонить/заказать/узнать/купить должны быть достаточно крупными. Не делайте их слишком маленькими, иначе по ним будет сложно попасть.

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

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

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

Минусы адаптива – если страниц на сайте много и сайт тяжелый (неоптимизированный), то адаптив будет тормозить.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Адаптивная верстка сайтов | Сначала мобильные

С какой версии начинать разработку сайта: с мобильной или десктопной? Такой вопрос был задан в статье о медиа-запросах, используемых в адаптивной верстке.

Люк Вроблевски, автор книги «Сначала мобильные!», однозначно говорит, что начинать нужно с мобильных:

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

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

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

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

Кстати, по поводу картинок. Указанный мной ранее способ адаптации изображений не самый лучший:

img { max-width: 100%; }

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

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

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

Вы можете спросить: а зачем что-то еще прятать, ведь и так мобильная версия минимальная? А вот! Может быть и такое. Яркий пример тому — мобильная навигация. Это меню, спрятанное за иконкой-гамбургером, о котором вы все, наверняка, знаете и сто раз видели:

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

Согласитесь, что вставить в медиа-запрос короткий кусок кода типа:

#mobile-menu{display: none;}

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

Контент важнее навигации

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

Общее правило адаптивного дизайна гласит: контент всегда должен иметь приоритет над навигацией.

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

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

Надеюсь, вопрос исчерпан. В следующей статье мы поближе познакомимся с одним из трех китов адаптивной верстки — макетом на основе сетки (flexible gridbased layout).

Оставайтесь на связи, а еще лучше подпишитесь на обновления блога Вебсовет.

Адаптивная верстка сайтов | Введение
Адаптивная верстка сайтов | Медиа-запросы

Автор: Игорь Квентор
www.websovet.com

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

Cодержание:

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

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

Технологии прошлого, такие как например WAP, могли обеспечивать нормальную работу только сильно урезанных версий корпоративных ресурсов и практически не оставляли возможностей для реализации достойного дизайна, а также какой-либо функциональности, поэтому пользователи мобильных устройств не очень активно посещали их. Повышение посещаемости, кстати, стало одним из наиболее весомых факторов в пользу разработки мобильных версий сайтов. Если в 2015 году доля посетителей веб-ресурсов, заходивших с мобильного устройства (смартфона или планшета) в среднем составляла 35-40%, то к концу 2016 года она уже уверено подошла к отметке 55% и продолжает расти.

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

Наряду с удобством сайта для пользователей, которое повышает конверсию ресурса и лояльность со стороны покупателей, большое значение имеет приоритет таких ресурсов в поисковой выдаче. Google еще в 2015 году прямо заявил о своем намерении ранжировать адаптивные сайты в результатах поиска выше порталов, рассчитанных только на десктопную версию. Вывод же сайта в Топ-10 поисковой выдачи является конечной целью любого SEO-продвижения и обеспечивает рост продаж. Инструменты поискового продвижения как в Google, так и Yandex, объединяются в консоли, позволяющие проанализировать степень оптимизации веб-страницы относительно возможностей мобильных устройств.

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

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

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

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

Мобильная версия сайта и специализированное приложение

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

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

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

сложность и дороговизна разработки. Фактически речь идет о создании нового сайта с соответствующими затратами на дизайн и программирование;
отличающийся URL мобильного сайта – как правило, мобильная версия имеет приставку m. к существующему адресу (например, m.facebook.com) и требует редиректа для мобильных устройств;
необходимость двойной работы и двойного контроля за контентом сайтов. Мобильная версия должна обновляться одновременно с десктопной, иметь аналогичное наполнение и требует от контент-менеджера таких же трудозатрат.

Во втором случае речь идет о создании полноценного приложения-оболочки, разработанной под конкретную платформу устройства (Android, iOS, Windows Phone) или кросс-платформенное решение. Оно использует один и тот же программный интерфейс и средства работы с базой данных (прикладной программный интерфейс, Application Programming Interface, API), что и основной сайт, однако его дизайн органичнее смотрится, а и функционал лучше приспособлен для экранов смартфонов и планшетов. Плюсом такого решения являются все достоинства отдельной мобильной версии и единая точка управления контентом. Содержимое обновляется один раз в одном месте, а затем используется разными оболочками.

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

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

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

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

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

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

На сегодняшний день большинство новых сайтов разрабатывается и создается по принципу «mobile first». Это означает, что дизайн нового сайта отрисовывается в первую очередь так, как он выглядел бы на экране смартфона, затем планшетного ПК и уже после этого разрабатывается его десктопная версия. Затем по тому же принципу создается HTML-разметка страницы, что в силу определённых причин облегчает работу программисту. При помощи стилей CSS веб-странице придается вид в соответствие с разработанным дизайном и порядком создания веб-интерфейса (смартфон – планшет – десктоп).

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

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

Адаптация посредством языка Javascript

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

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

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

Динамически подгружаемая версия разметки

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

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

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

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

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

Особенности мобильной адаптации сайта

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

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

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

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

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

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

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

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

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

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

Адаптивный сайт или мобильная версия сайта — что выбрать?

18 авг. 2016 г. Видео блог saitologi

Всем привет! Меня зовут Тульчинский Иван, я руководитель веб-студии Saitologi. И сегодня мы поговорим с вами о том, что такое мобильная версия сайта, и каковы ее принципиальные отличия от адаптивной верстки.

Что такое Адаптивный сайт и Мобильная версия сайта?

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

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

Что лучше мобильная версия или адаптивная верстка и почему — давайте разберемся подробнее.

Прежде всего, определимся с вопросом «для чего это нужно?». Мобильная версия нужна, потому что в современности огромное количество людей выходит в интернет через мобильные устройства. И очень часто человеку нужно сделать заказ быстро с мобильного телефона. Если откроется компьютерная версия сайта, то есть вероятность, что будет настолько неудобно, что пользователь просто ее закроет. Допустим, человеку нужно вызвать такси из бара. Он вызовет его по мобильному телефону, найдя в поисковой выдаче или сайты или приложения, которые вызовут ему такси. Именно поэтому те услуги, которые заказываются с мобильных телефонов, обязательно должны иметь сайты с мобильной версией или с адаптивной версткой до мобильного телефона.

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

Адаптивная верстка имеет ряд преимуществ, в том плане, что такой сайт может подстраиваться под расширение экрана компьютера или экрана смартфона. Т.е. для телефонов с разным разрешением экрана будет разная подстройка. Где-то на малой версии может быть одна иконка, а на большей — две, например. В противовес этому мобильная версия загружается только, если на нее зайти с мобильного телефона, как правило, имеет одну модификацию и один размер. Она заранее рассчитана на определенную ширину. Да, мобильная версия загрузится и на экран другой ширины, но иконки и элементы не перестроятся более удобным образом. Так что в этом плане адаптивная верстка имеет большое количество преимуществ.

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

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

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

Что выбрать: адаптивный сайт или создание мобильной версии сайта?

Объясню таким образом: если вы заказываете 1 landing page, у которой не будет больше собратьев, вторых, третьих страниц и т.д., и вам нужно, чтобы он идеально открывался на всех мобильных телефонах (при этом лэндинг должен быть заточен только на контекстную рекламу, у него не будет никакого продвижения), пожалуйста, создавайте Адаптивную Версию. Если же вы хотите создать нормальный полноценный сайт, с множеством страниц, и при этом для каждой из них должна быть создана верстка для мобильного, планшета или компьютера, используйте разные версии своего сайта, Мобильную Верстку. В противном случае, после того, как вам создадут этот сайт, корректировать его будет невозможно. Стоит добавить лишнюю строчку в описание, и весь ваш сайт поедет.

Если я вас не до конца убедил, попробуйте зайти на сайт ВКонтакте, Facebook или YouTube с мобильного телефона. Это большие сайты. И они не адаптивные. Все перечисленные сайты имеют мобильные версии. Потому что сайты из 5 и более страниц, создать с хорошей адаптивной версткой настолько сложно, что за это никто не берется.

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

С вами был Тульчинский Иван.

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

Все, что вам нужно знать

Мобильный дизайн веб-сайта имеет важное значение.

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

«Мобильная связь становится не только новым цифровым центром, но и мостом в физический мир», — сказал Томас Хассон, вице-президент и главный аналитик Forrester Research. «Вот почему мобильная связь повлияет не только на ваши цифровые операции — она изменит весь ваш бизнес.”

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

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

Давайте перейдем к делу.

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

Начни бесплатно

Что такое веб-сайт, оптимизированный для мобильных устройств?

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

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

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

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

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

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

Важность мобильного дизайна веб-сайтов

Давайте перейдем к делу: в последнем квартале 2019 года на смартфоны пришлось целых 52.6 процентов мирового трафика веб-сайтов.

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

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

Как сказала Синди Шаффстолл, основатель маркетинговой компании Spider Trainers: «Мобильные устройства — это не будущее, это настоящее. Встречайтесь со своими клиентами в том месте, которое они выберут, а не там, где вам удобно ».

Мобильные устройства также меняют покупательские привычки.

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

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

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

В марте 2020 года Google заявил: «Для упрощения мы перейдем на индексирование с мобильных устройств для всех веб-сайтов.

Если вам интересно, что это означает, защитник разработчиков Google Джон Мюллер объясняет:

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

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

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

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

8 советов по дизайну от лучших мобильных веб-сайтов

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

1. Используйте большие кнопки

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

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

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

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

2. Сделайте текст достаточно большим для чтения

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

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

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

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

3. Упростите меню

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

На мобильных устройствах это не так — просто не хватает места.

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

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

Давайте посмотрим на хороший пример с одного из лучших мобильных веб-сайтов, Kylie Skin.

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

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

4. Обеспечьте простой и интуитивно понятный поиск

Функция поиска на вашем веб-сайте особенно важна для мобильных пользователей.

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

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

Пользователь Shopify Gymshark помещает функцию поиска в верхнюю панель страницы.Также имеется интуитивно понятная функция фильтрации, которая упрощает пользователям поиск определенных типов товаров.

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

5. Упростите контакт

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

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

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

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

6. Создавайте простые формы

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

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

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

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

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

Короче, убедитесь, что ваши формы короткие и понятные.

7. Создайте привлекательные призывы к действию

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

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

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

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

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

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

8. Избегайте всплывающих окон

Давайте посмотрим правде в глаза: большинство людей ненавидят всплывающие окна. Фактически, если вы введете в Google «Я ненавижу всплывающие окна», вы найдете почти 48 миллионов результатов.

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

В наши дни ваш рейтинг в поиске, вероятно, пострадает, если вы:

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

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

Межстраничные объявления, используемые для выполнения юридических обязательств, таких как проверка возраста, согласие на использование файлов cookie или GDPR.
Окна входа в систему для доступа к личному контенту, например электронной почте или контенту, защищенному платным доступом.
Маленькие баннеры, которые легко закрыть и «занимают достаточно места на экране», например баннеры для установки приложений, используемые в Chrome и Safari.

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

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

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

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

Резюме: Дизайн мобильного веб-сайта в 2021 году

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

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

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

Что вы думаете о дизайне мобильных сайтов? Пропустили ли мы какие-нибудь передовые практики мобильного веб-дизайна? Дайте нам знать в комментариях ниже!

Хотите узнать больше?

Все, что вам нужно знать

Мобильный дизайн веб-сайта имеет важное значение.

«Мобильная связь становится не только новым цифровым центром, но и мостом в физический мир», — сказал Томас Хассон, вице-президент и главный аналитик Forrester Research.«Вот почему мобильная связь повлияет не только на ваши цифровые операции — она изменит весь ваш бизнес».

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

Давайте перейдем к делу.

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

Начни бесплатно

Что такое веб-сайт, оптимизированный для мобильных устройств?

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

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

Важность мобильного дизайна веб-сайтов

Мобильные устройства также меняют покупательские привычки.

Если вам интересно, что это означает, защитник разработчиков Google Джон Мюллер объясняет:

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

8 советов по дизайну от лучших мобильных веб-сайтов

1. Используйте большие кнопки

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

2. Сделайте текст достаточно большим для чтения

3. Упростите меню

На мобильных устройствах это не так — просто не хватает места.

Давайте посмотрим на хороший пример с одного из лучших мобильных веб-сайтов, Kylie Skin.

4. Обеспечьте простой и интуитивно понятный поиск

Функция поиска на вашем веб-сайте особенно важна для мобильных пользователей.

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

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

5. Упростите контакт

6. Создавайте простые формы

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

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

Короче, убедитесь, что ваши формы короткие и понятные.

7. Создайте привлекательные призывы к действию

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

8. Избегайте всплывающих окон

В наши дни ваш рейтинг в поиске, вероятно, пострадает, если вы:

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

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

Межстраничные объявления, используемые для выполнения юридических обязательств, таких как проверка возраста, согласие на использование файлов cookie или GDPR.
Окна входа в систему для доступа к личному контенту, например электронной почте или контенту, защищенному платным доступом.
Маленькие баннеры, которые легко закрыть и «занимают достаточно места на экране», например баннеры для установки приложений, используемые в Chrome и Safari.

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

Резюме: Дизайн мобильного веб-сайта в 2021 году

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

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

Хотите узнать больше?

21 лучший пример эффективного дизайна мобильных сайтов [+ видео]

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

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

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

Бесплатный курс: элементы отличного веб-сайта входящего маркетинга

21 лучший пример дизайна мобильных веб-сайтов

Lyft
Яблоко
фиолетовый
Уорби Паркер
Уолт Дисней
Adobe
Домино
Слабина
Полоса
Маккинси
Atlassian
Квадрат
Фергюс
Abercrombie & Fitch
Бронирование.com
Texas Roadhouse
Бар Клондайк
Dove Men + Уход
Скрытая долина
Горная роса
Adidas

Скорее посмотреть? Видео ниже охватывает то же содержание, что и этот блог!

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

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

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

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

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

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

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

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

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

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

Мобильный веб-сайт

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

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

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

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

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

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

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

Мобильный сайт компании Walt Disney Company нацелен на систематизацию более корпоративных / деловых фактов о бренде, но не за счет отличного опыта.

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

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

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

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

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

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

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

Мобильный веб-сайт Domino призван упростить вам выполнение онлайн-заказов.

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

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

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

У них даже есть мобильный бот для заказов (по имени Dom), с помощью которого вы можете разместить свой заказ за вас.

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

Основная цель мобильного сайта

Slack — побудить пользователей зарегистрироваться и загрузить мобильное приложение.

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

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

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

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

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

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

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

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

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

Нажав на одну из статей, вы заметите, что они сделали размер шрифта довольно большим (18 пикселей) с удобной высотой строки, чтобы обеспечить удобочитаемость на мобильных устройствах.

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

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

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

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

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

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

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

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

13. Фергус

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

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

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

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

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

Abercrombie & Fitch использует базовую цветовую палитру в сочетании с красивой фотографией, чтобы привлечь внимание пользователя к продуктам, а не к элементам сайта.

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

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

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

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

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

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

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

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

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

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

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

Что бы вы сделали для бара «Клондайк»? Вы бы ездили по городу в поисках магазина, в котором продается ваш любимый товар? Если хотите, у вас будет больше возможностей, но мобильный веб-сайт Klondike Bar действительно помогает вам сократить время поиска.

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

Помимо предоставления информации о магазинах и питании для своих продуктов, Klondike также предлагает множество возможностей взаимодействия для пользователей, которые просто хотят побаловать себя разным контентом.У них есть пара разных уникальных маркетинговых видеороликов , которые можно посмотреть на сайте «Watch This!» страницу, чтобы облегчить это.

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

Dove Men + Care — еще один мобильный веб-дизайн, который действительно фокусируется на простоте для улучшения функциональности. Несмотря на то, что на главной странице минимальная навигация, Dove эффективно использует изображения для увеличения взаимодействия и привлечения людей к определенным продуктам.Подход Dove Men’s, ориентированный на продукты, распространяется по всему веб-сайту с помощью рекламных видеороликов и дополнительных материалов, которые можно найти на главной странице и в навигации по гамбургерам

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

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

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

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

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

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

Мобильный веб-дизайн

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

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

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

Мобильный веб-дизайн

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

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

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

Еда на вынос

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

21 Вдохновляющий и лучший мобильный дизайн веб-сайтов «SEOPressor — WordPress SEO Plugin

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

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

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

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

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

SEO Suite

1) BiQ Облако

BiQ Cloud — это новейший революционный инструмент SEO, который выступает за демократизированное ценообразование! Это означает, что вместо дорогостоящей ежемесячной подписки вы «платите только за те функции SEO, которые используете!»

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

• Выбор и размер шрифта легко читаются на небольших мобильных экранах
• Кнопки идеального размера для сенсорных устройств
• Четкие изображения и копии
• Хорошее количество пробелов
• Четкие и очевидные CTA
• Хорошее использование акцентных цветов

Бонус: попробуйте сами — получите бесплатную учетную запись на BiQ и получите все основные продукты, ориентированные на SEO, в ОДНОМ месте,

Автомобильная промышленность

1) Тесла Моторс

Tesla была в авангарде автомобильной промышленности (IMO), и приятно знать, что на их веб-сайте не говорится об обратном.

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

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

Рейтинг Alexa: 1, 769

Бизнес

2) Bloomberg Business

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

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

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

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

Рейтинг Alexa: 334

Компьютеры

3) MailChimp

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

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

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

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

Alexa Рейтинг: 457

4) Microsoft

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

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

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

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

Рейтинг Alexa: 31

Типовой проект

5) Абдузидо

Abduzeedo — блог о дизайне.

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

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

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

Рейтинг Alexa: 40, 030

Образование

6) Оксфордский словарь

Если на вашем телефоне нет словарного приложения и вам нужно найти значение сложного слова, вы можете посетить множество веб-сайтов, например Merriam-webster, Collins или Cambridge Dictionary. Однако я бы порекомендовал Оксфордский словарь только потому, что он немного лучше разработан для мобильных устройств.

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

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

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

Рейтинг Alexa: 3,067

Мода

7) Nike

Когда дело доходит до дизайна, Nike всегда впечатляет.

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

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

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

Рейтинг Alexa: 464

8) Без резьбы

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

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

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

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

Рейтинг Alexa: 14,745

Игры

9) Покемон

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

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

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

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

Рейтинг Alexa: 6, 144

Здоровье

10) Весонаблюдатели

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

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

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

Рейтинг Alexa: 4,143

Дом

11) Квартирная терапия

Апарт-терапия — журнал о дизайне интерьеров.

Почему это красиво и удобно для мобильных устройств: Веб-дизайн

Apartment therapy так же прекрасен, как и его вдохновение в дизайне интерьера. Чистый и просторный.

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

Рейтинг Alexa: 2,119

Дети и подростки

12) Лего

Lego — самая популярная в мире игрушка, которая нравится как детям, так и взрослым. Имея в качестве целевой аудитории две разные возрастные группы, они должны найти баланс в обращении к обеим.

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

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

Alexa Рейтинг: 1,289

Журнал

13) Быстрая компания

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

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

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

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

Рейтинг Alexa: 2,533

Музыка

14) MTV

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

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

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

Рейтинг Alexa: 4,143

Новости

15) Mashable

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

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

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

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

Alexa Рейтинг: 278

Отдых

16) Airbnb

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

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

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

Alexa Рейтинг: 315

Наука

17) Популярная наука

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

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

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

Alexa Рейтинг: 5,197

Покупки

18) Etsy

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

Почему это красиво и удобно для мобильных устройств: Мобильный веб-сайт

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

Alexa Рейтинг: 144

19) Общество6

Society6 — это одноранговый магазин, где артисты могут продавать свои работы.

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

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

Рейтинг Alexa: 4,492

Спорт

20) Страва

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

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

Их мобильный веб-сайт никогда не бывает скучным и всегда эффективным.

Рейтинг Alexa: 1,441

Итак, это 20 самых красивых

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

Сообщите мне, если у вас есть лучший мобильный дизайн веб-сайта.

Этот пост был первоначально написан Чжи Юань и опубликован 5 октября 2015 года. Последний раз он был обновлен 18 мая 2020 года.

Ссылки по теме:

Обновлено: 31 октября 2021 г.

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

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

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

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

01. Думайте наперед — определите свою цель сейчас и на будущее

Устройства меняются, но цели должны оставаться неизменными (источник изображения: http://www.flickr.com/photos/adactio/6153481666)

Мы в то время, когда технологические достижения в дизайне мобильных веб-сайтов происходят быстро и постоянно появляются новые игроки. Посмотрите, как появился первый iPad летом 2010 года, а Apple Watch — в 2015 году; Можно с уверенностью предположить, что даже через два года все будет совсем иначе, чем сегодня.

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

02. Знайте свою целевую аудиторию и то, что они используют.

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

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

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

Узнайте, как ваша аудитория взаимодействует со своими устройствами (источник изображения: http://www.flickr.com/photos/jorgeq82/4732700819)

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

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

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

04. Понимание задач и контекста

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

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

05. Старайтесь избегать индивидуального мобильного сайта

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

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

06. Сохраняйте тот же основной контент

Контент — это основа вашего мобильного предложения (источник изображения: http: // www.flickr.com/photos/sepblog/3649959481/)

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

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

07. Оптимизация для мобильных устройств

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

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

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

Посмотрите на точки входа для пользователей (источник изображения: http://www.flickr.com/photos/slieschke/2202041617)

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

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

А, BlackBerry 9780. Classic

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

10. Рассмотрите различные типы приложений.

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

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

11. Соблюдайте рекомендации и шаблоны пользовательского интерфейса

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

12. Учитывайте обратную совместимость и фрагментацию

Учитывайте фрагментацию (источник изображения: http://developer.android.com/about/dashboards/index.html)

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

13. Определите свою сетку и точки останова

Определите свою сетку (источник изображения: http://foundation.zurb.com/docs/layout.php)

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

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

14. Сначала мобильные или настольные компьютеры — с чего начать

С чего начать? (источник изображения: http://www.flickr.com / photos / chr / 5805931302 /)

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

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

15. Определите свою стратегию стекирования контента

Определите свою стратегию стекирования контента

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

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

16. Не забывайте о навигации.

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

17. Не бойтесь бросать вызов тому, что уже есть

Бросьте вызов тому, что уже есть (источник изображения: http://www.flickr.com/photos/nhuisman/3168683736)

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

18. Не каждая страница / экран нуждается в каркасе / дизайне

Не все нужно разрабатывать (источник изображения: http://www.flickr.com/photos/saucef/7184615025/)

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

19. Совместная работа в разных дисциплинах

Совместная работа дает множество преимуществ (источник изображения: www.flickr.com/photos/enriquemendez/5069887958)

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

20. Прототип, тестирование и итерация

A / B-тестирование может быть бесценным (источник изображения: http: // www.flickr.com/photos/nomadic_lass/5598218199)

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

21. Быстрая доставка контента

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

22. Ограниченное количество слоев для облегчения навигации

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

23. Дизайн с точки зрения пользователя

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

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

24. Выберите правильный веб-шрифт

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

25. Не зацикливайтесь на разных устройствах

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

26. Тестирование, тестирование, тестирование

Тестирование — секрет отличного приложения

Существует так много различных платформ, что практически невозможно протестировать на всех возможных комбинациях смартфона и операционной системы; новые устройства Android поставляются почти еженедельно, не говоря уже о Windows Mobile, iOS, Blackberry OS и Cyanogen OS. Однако важно проводить тестирование на нескольких устройствах, и вы должны стремиться сделать это повторяющимся, непрерывным процессом.Нет ничего хуже, чем проектировать только для iOS, а затем в конце сборки обнаружить, что устройства Android не будут отображать вашу страницу так, как задумано.

27. Учитывайте время автономной работы

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

28. Примите и примите ограничения

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

29. Минимизируйте ввод текста

На большинстве телефонов и планшетов можно относительно легко набрать несколько предложений или абзацев, но это не совсем весело. Это также довольно прерывистый процесс на современных устройствах с сенсорным экраном, поскольку виртуальная клавиатура появляется поверх веб-контента. Чтобы уменьшить разочарование пользователей, постарайтесь свести к минимуму объем ввода текста, который вам требуется в веб-формах, а там, где это действительно необходимо, убедитесь, что вы учитываете практические аспекты: никто, скорее всего, не наберет сочинение на 2000 слов в Safari на iPhone!

30.Люблю темп изменений

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

Соавторы : Дин Эванс, Анна Дальстрем и Сэм Хэмптон-Смит

Это обновленная версия статьи, ранее размещенной на Creative Bloq.

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

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

Чтобы сделать ваш сайт WordPress мобильным, вам необходимо:

Поймите, почему так важен адаптивный веб-дизайн
Пройдите тест Google для мобильных устройств
Используйте адаптивную тему WordPress (или создайте свою)
Рассмотрите удобные для мобильных устройств плагины WordPress
Используйте оптимизированные для мобильных устройств дополнительные модули
Думайте в терминах адаптивных медиа
Расставьте приоритеты по производительности сайта

Готовы? Давайте нырнем!

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

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

Помимо UX, есть еще одна важная причина, по которой ваш сайт должен быть оптимизирован для мобильных устройств: Google.Начиная с 2015 года (год «Mobilegeddon»), Google осуществил капитальный пересмотр своего алгоритма поиска, чтобы поощрять сайты, которые считаются «оптимизированными для мобильных устройств». Изменение сводилось к одному важному моменту данных: реагирует ли ваш веб-сайт.

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

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

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

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

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

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

Симпатичный маленький инструмент, правда? Что ж, становится еще лучше.

Для всех вас, разработчиков, Google также выпустил Mobile-Friendly Test API, который позволяет тестировать URL-адреса с помощью автоматизированных инструментов. Преимущество этого заключается в том, что вы можете быстро протестировать больше страниц, но вы также можете отслеживать самые важные страницы на своем сайте, не обращаясь постоянно к браузеру вручную. Счет!

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

3. Используйте (или создайте) адаптивную тему WordPress

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

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

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

Лучшие темы WordPress для мобильных устройств

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

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

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

Не знаете, с чего начать? Разместив свой сайт WordPress на Flywheel, вы получите бесплатный доступ к более чем 30 темам StudioPress премиум-класса (включая Genesis Framework!) Вместе с вашим тарифным планом. Эти темы полностью адаптивны, поэтому они будут отлично смотреться на любом устройстве, к тому же вы можете легко переключаться между ними (вместо того, чтобы чувствовать себя застрявшим на «единственной» премиальной теме, которую вы решили приобрести).

Как создать собственную адаптивную тему WordPress

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

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

Существует также функция Live Links, которая генерирует общий URL-адрес на локальный сайт. Это позволяет вам отправить его клиенту или загрузить на свой телефон, чтобы вы могли легко проверить, как сайт выглядит на мобильном устройстве.

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

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

4.Используйте адаптивные плагины

Плагины

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

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

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

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

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

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

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

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

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

6. Разработайте стратегию для адаптивных медиа

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

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

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

7.Приоритет производительности сайта

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

Изображения — это большая часть уравнения производительности, но ваш код и хост WordPress также играют большую роль.

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

Что касается вашего хоста WordPress, убедитесь, что вы используете качественного партнера, который включает в себя такие услуги, как технология кэширования, CDN и инфраструктура, поддерживаемая надежными поставщиками, такими как Google Cloud Platform.Если вы размещаете свой сайт на Flywheel, вы настроены во всех этих областях. Кроме того, мы даже предлагаем нашу надстройку Performance Insights, которая поможет вам сделать еще один шаг в устранении неполадок, чтобы убедиться, что ваш сайт работает наилучшим образом на всех устройствах.

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

Получите доступ к 30+ премиум (и мобильным!) Темам StudioPress

Сэкономьте время (и деньги!), Разместив хостинг на Flywheel и получив доступ к темам StudioPress и Genesis Framework.Темы полностью адаптивны и легко настраиваются, что позволяет сэкономить время при создании сайта, удобного для мобильных устройств. Кроме того, мощная платформа Flywheel будет поддерживать производительность вашего сайта на высоком уровне, обеспечивая высокую скорость загрузки страниц и высокий рейтинг вашего сайта.

Эта статья была впервые опубликована 22-17-2017. Последнее обновление 10-2-2020.

Desktop и Mobile: три ключевых отличия в дизайне веб-сайтов

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

1. Организация содержания

Один из самых сложных элементов дизайна для мобильных устройств — это вопрос о том, как должен быть организован контент. Потребности пользователей мобильных устройств могут отличаться от потребностей пользователей настольных компьютеров.Или их потребности могут быть одинаковыми (или похожими), но их поведение при просмотре будет меняться в зависимости от того, какое устройство они используют. При разработке для мобильных устройств первоочередной задачей должна быть организация контента веб-сайта для удовлетворения потребностей мобильных пользователей. Контент должен располагаться вертикально, чтобы соответствовать узкой ширине мобильных устройств. Настольные устройства имеют портретную ориентацию, поэтому контент может растягиваться на экране, и часто несколько сообщений или изображений могут комфортно жить в таком большом пространстве. Мобильные устройства обычно используются в портретной ориентации (а меньшие экраны означают, что даже в ландшафтном режиме горизонтальное пространство ограничено).Продавец очков Warby Parker меняет порядок содержимого с горизонтального на вертикальное при просмотре на мобильном устройстве. Еще одна вещь, о которой следует подумать, — это то, какой контент отдавать в приоритет. Отличаются ли потребности ваших мобильных пользователей? Если это так, стоит подумать о разработке для мобильных устройств таким образом, чтобы приоритет был отдан потребностям этих пользователей, а не просто копировать сайт для настольных компьютеров, что, скорее всего, было разработано для пользователей настольных компьютеров. В первые дни мобильного веб-дизайна, когда наши телефоны были менее сложными, и нам было неудобно использовать их для выполнения более сложных действий, было обычным делом вырезать большую часть или большую часть контента веб-сайта и запускать мобильный сайт с помощью barebones. о том, что, казалось, мобильный пользователь хотел бы знать.В 2017 году такой подход больше не приемлем. Сегодняшние мобильные пользователи хотят иметь на своих телефонах те же возможности просмотра, что и на настольных компьютерах. Кроме того, мобильные устройства являются единственным или основным устройством для многих людей, поэтому полностью работоспособный мобильный сайт может быть единственным способом охватить часть пользователей. Сеть культовых студий велоспорта Soul Cycle позволяет пользователям записываться на занятия как на компьютере, так и на мобильном устройстве. В мобильной версии макет контента выровнен по вертикали.

2. Заполнение формы

Как маркетологи, мы тратим много энергии на оптимизацию наших веб-форм для максимальной конверсии.Мы знаем, что плохо спроектированная форма гарантированно убьет конверсию. То же самое, конечно, и с мобильным телефоном. Формы должны быть разработаны специально, чтобы пользователям мобильных устройств было проще их заполнять. Вертикальное выравнивание Угадай, что? Вся эта штука с вертикальным выравниванием? Это относится и к формам. Принцип тот же — мобильным пользователям сложно и утомительно прокручивать вперед и назад по горизонтали, чтобы заполнить форму. Чтобы максимально упростить процесс заполнения формы для мобильных браузеров, убедитесь, что поля формы выровнены по вертикали.Equinox изменяет порядок полей формы для удобного заполнения на мобильных устройствах. Интеллектуальный текст Помогите своим пользователям, предоставив варианты прогнозирования для полей с множеством потенциальных ответов. Предлагаемые прогнозы позволяют пользователям быстро перемещаться по форме и сокращают вероятность опечаток, которые чаще встречаются при наборе текста большими пальцами на маленьком экране. Kayak.com предлагает интеллектуальный текст для определения пункта отправления и пункта назначения при поиске рейса пользователя. Свернуть поля Поскольку заполнение форм на мобильных устройствах, как правило, довольно обременительно, вы хотите максимально упростить его, сократив количество полей.Для этого вам следует запросить у пользователя только ту информацию, которая абсолютно необходима для завершения транзакции. Дополнительная информация о пользователе может быть удобна для вашей компании, но не за счет конверсии. По возможности вы должны стараться использовать одно поле для ввода. Причина опять же в том, что мобильных пользователей раздражает необходимость перепрыгивать через большое количество полей. Если вы можете объединить несколько полей в одно, это хорошая идея.

3. Меню

Форматирование меню, безусловно, является ключевым отличием настольных компьютеров от мобильных. На настольных компьютерах часто встречаются мегаменю с множеством категорий и подкатегорий. Этот тип настройки отлично подходит для пользователей настольных компьютеров, у которых достаточно большие экраны, чтобы они могли читать текст в этих меню и могли легко нажимать на текстовые ссылки. Другое дело, конечно, на мобильных устройствах, потому что экраны маленькие, а большие пальцы (относительно) большие. Мобильные меню должны разрабатываться с учетом этих факторов.Это означает одноуровневые меню с большим текстом или кнопками и вертикальное выравнивание для меню с множеством параметров. На настольном сайте J.Crew есть большие мегаменю с множеством категорий. На мобильных устройствах меню сворачивается, а затем расширяется по мере того, как пользователь сужает категорию. Это ни в коем случае не исчерпывающий список всех функций мобильного веб-сайта, которые должны отличаться от настольной версии, но мы считаем, что эти функции являются тремя из самых важных.

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

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

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

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

Основные преимущества мобильной версии сайта

Недостатки мобильной версии

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

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

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

Что же лучше: адаптивная вёрстка для мобильных устройств или мобильная версия сайта?

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

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

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

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

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

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

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

Изображения

Таблицы

Списки

Шрифты

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

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

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

Ссылки

Адаптивная верстка или мобильная версия: сравниваем достоинства и недостатки

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

Как выглядит адаптивный сайт

Зачем нужен адаптивный дизайн и адаптивная верстка

Сложности адаптивной разработки

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

Какой экран учитывать изначально

Основные правила адаптивного дизайна

Размеры макетов. Брейкпоинты

Относительность координат, размеров и масштабов

Вложенность

Поточность

Графические форматы

Шрифты

Мобильная версия: что учесть

Адаптивная верстка и мобильная версия – в чем разница

Технические требования: чеклист мобильной версии

Юзабилити: чек-лист мобильной версии

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

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

Адаптивная верстка сайтов | Сначала мобильные

Контент важнее навигации

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

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

Cодержание:

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

Мобильная версия сайта и специализированное приложение

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

Адаптация посредством языка Javascript

Динамически подгружаемая версия разметки

Особенности мобильной адаптации сайта

Поделиться

Адаптивный сайт или мобильная версия сайта — что выбрать?

Что такое Адаптивный сайт и Мобильная версия сайта?

Что лучше мобильная версия или адаптивная верстка и почему — давайте разберемся подробнее.

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

Что выбрать: адаптивный сайт или создание мобильной версии сайта?

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

Все, что вам нужно знать

Что такое веб-сайт, оптимизированный для мобильных устройств?

Важность мобильного дизайна веб-сайтов

8 советов по дизайну от лучших мобильных веб-сайтов

1. Используйте большие кнопки

2. Сделайте текст достаточно большим для чтения

3. Упростите меню

4. Обеспечьте простой и интуитивно понятный поиск

5. Упростите контакт

6. Создавайте простые формы

7. Создайте привлекательные призывы к действию

8. Избегайте всплывающих окон

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

Резюме: Дизайн мобильного веб-сайта в 2021 году

Хотите узнать больше?

Все, что вам нужно знать

Что такое веб-сайт, оптимизированный для мобильных устройств?