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

15 образцовых примеров мобильного веб-дизайна

Сегодня многие компании уделяют созданию качественных мобильных ресурсов гораздо больше внимания, ведь по последним данным 80% интернет-пользователей применяют портативные устройства для поиска необходимой информации. Более того, маркетологи готовятся к большим изменениям в Google-алгоритме, которые вступили в силу 21 апреля 2015 года. В официальном блоге компании сказано, что теперь качество мобильной оптимизации ресурса будет во многом определять его позицию в поисковой выдаче.

Грядущий апдейт окажет на систему ранжирования гораздо больше влияния, чем те же Panda или Penguin, и именно поэтому совершенствование мобильного опыта должно стать вашим приоритетным направлением на ближайшее будущее. Согласно статье от Search Engine Land, посвященной данному обновлению, все сайты будут подвержены жесткой проверке на адаптивность к мобильным устройствам.

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

1. Shutterfly

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

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

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

2. Google Maps

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

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

3. Etsy

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

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

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

4. Elf on the Shelf

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

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

5. BuzzFeed

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

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

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

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

6. Evernote

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

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

7. Lenta.ru

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

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

8. Express

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

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

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

9. Nationwide Insurance

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

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

10. Zappos

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

Вот так выглядит шапка мобильного ресурса:

А здесь изображен футер:

11. ABC

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

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

12. Lean Labs

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

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

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

13. Pharmacy Development Services

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

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

14. SAP

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

15. KISSmetrics

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

Высоких вам конверсий!

По материалам: blog.hubspot.com 

05-05-2015

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Фон готов

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

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

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

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

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

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

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

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

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

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

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

6 простых правил для создания дизайна мобильных сайтов

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

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

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

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

1. Целевая аудитория

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

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

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

2. Ключевой контекст

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

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

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

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

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

4. Сделайте простой дизайн

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

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

5. Одна колонка

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

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

6. Социальные медиа

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

Вывод

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

Спасибо http://www.webdesignerdepot.com

Мобильная версия сайта или адаптивный дизайн: что выбрать?

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

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

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

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

… даже если открыть мобильную версию в браузере на компьютере

Плюсы

Мобильная версия – это самая старая технология, призванная облегчить жизнь пользователям мобильных устройств. Она появилась задолго до адаптивного дизайна, но до сих пор с ним конкурирует: Яндекс.Маркет, Tutu, Lamoda – эти и многие другие крупные бренды используют мобильные сайты с отдельным адресом.

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

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

Минусы

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

1. Ресурс имеет два отдельных адреса – десктопный и мобильный. Это неудобно с точки зрения SEO. Оптимизировать мобильный сайт придется отдельно от основного, и это создаст лишние проблемы.
2. Наличие двух адресов может огорчить не только SEO-специалистов, но и рядовых пользователей, которые могут запутаться в ссылках.
3. У контент-менеджеров с мобильной версией тоже прибавится работы, ведь наполнять оба сайта придется по отдельности.
4. Разработка второго мобильного сайта обойдется дороже, чем создание адаптивной версии.

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

Можно взаимодействовать с пользователями ПК и мобильных устройств, используя один единственный сайт. Для этих целей придумана адаптивная верстка. У таких сайтов в коде указано, как отображать интерфейс под разные размеры экранов. Адаптацию используют многие крупные бренды – например, Aviasales, «MВидео».

Cybermarketing тоже использует адаптивный дизайн

Плюсы

Адаптивная верстка сейчас широко распространена и у нее много преимуществ:

1. Интерфейс не меняется кардинально. Пользователи, привыкшие взаимодействовать с сайтом с компьютера, без труда будут ориентироваться на нем и со смартфона – потому что этот тот же самый сайт. Все блоки и элементы подчиняются единой иерархии, вне зависимости от габаритов экрана.
2. Адрес будет один на все случаи жизни – и для пользователей с ПК, и для пользователей со смартфонами. Это удобнее для SEO-продвижения: у вас не будет проблем с дублирующимся контентом, дополнительными затратами на наполнение, оптимизацию.
3. Единый адрес также более удобен для ваших клиентов, не возникнет лишней путаницы и трудностей с запоминанием.
4. Цена – еще одно преимущество адаптивного дизайна. Вписать в код опции для разных размеров экранов обойдется гораздо дешевле, чем создавать отдельный сайт под мобильные устройства.

Минусы

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

1. Загружаться такой сайт будет дольше, чем отдельная мобильная версия. Если у пользователя слабенький интернет, а у вас много тяжелого контента на сайте, эта мелочь может стать вполне реальной проблемой.
2. У пользователя не будет выбора: если отображение на мобильном ему по какой-то причине не понравится, он никак не сможет переключиться на тот интерфейс, который знал и любил на мониторе ПК.
3. Уместить целый десктопный сайт на маленьком экране сложно, интерфейс будет перегруженным и непонятным. Для удобства пользователей некоторые ненужные элементы скрывают при отображении на мобильных устройствах, это прописывается в коде. Но такой контент снова делает загрузку медленнее, а еще может вызвать сложности для SEO.

Альтернатива — респонсивный дизайн

Не так давно популярность начала набирать еще одна технология – Responsive Design + Server Side (или RESS). В таком случае разрабатывается два независимых шаблона – для ПК и для смартфонов, и они показываются пользователю в зависимости от того, с какого устройства он зашел. При этом URL-адрес остается одним и тем же. У таких сайтов нет проблем с медленной загрузкой, а пользователь может переключаться между версиями.

Основной недостаток технологии RESS – сложная и дорогостоящая разработка. По этой причине используют такой дизайн крайне редко.

Kudago – пример сайта с RESS (у десктопной и мобильной версий разный код, но одинаковый URL)

Что выбрать?

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

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

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

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

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

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

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

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

приложение, мобильная версия сайта или адаптивный дизайн?

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

Читайте,Сервисы электронной коммерции и маркетплейсы

Количество пользователей мобильных устройств в мире растет и, согласно прогнозам, к 2020 году 6,1 миллиарда людей или 70% населения Земли будут пользователями смартфонов. Это означает, что в какой бы сфере не работала ваша компания, самое время задуматься о том, как стать ближе пользователям мобильных устройств.

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

1. Разработка мобильной версии сайта
2. Создание мобильных приложений (для iOS, Android и, возможно, Windows Phone)
3. Дизайн сайта с использованием адаптивной верстки

Разберемся, что происходит в каждом из этих случаев.

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

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

Например, вот как выглядит сайт Amazon на ПК (обратите внимание на сложное меню):

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

Интересно, что в США самый популярный мобильный сайт — это Buzzfeed. За ним следуют Answers.com, Wikia, Urban Dictionary и Bustle. В то же время список самых популярных сайтов по общему интернет-трафику вполне предсказуем:

1. Google
2. YouTube
3. MSN
4. Facebook
5. Bing

Почему так получается? Ответ прост: у всех топовых веб-сайтов США есть собственное мобильное приложение, которым и пользуется большинство посетителей.

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

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

Разработка мобильных приложений

Мобильное приложение — это специальная программа, разработанная с учетом требований и возможностей конкретной платформы, например Android или iOS. Чтобы использовать ее, пользователям понадобится зайти в магазин приложений (Google Play или App Store), найти ее среди других и установить на свое устройство.

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

Как видно из графика, большая часть пользователей все еще на версиях KitKat, Lollipop и Jelly Bean, хотя для некоторых устройств сейчас уже доступна версия Marshmallow.

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

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

Что же мы все таки рекомендуем: мобильный сайт или приложение? Если позволяет бюджет, мы советуем сделать отдельный мобильный сайт и приложения для Android и iOS. Это позволит максимально охватить рынок мобильных устройств.

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

Разработка адаптивного дизайна

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

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

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

1. Требуется оптимизировать сайт для быстрой загрузки на мобильных устройствах.
2. Появляется необходимость готовить изображения разного размера для настольных и мобильных устройств.
3. Для устройств с маленьким экраном потребуется создать отдельное компактное меню.
4. Увеличивает время тестирования сайта.

Кому в первую очередь нужен адаптивный дизайн? Корпоративным сайтам, блогам и новостным порталам — это те типы сайтов, которые пользователи привыкли пролистывать. Интернет-магазинам, у которых еще нет собственного приложения и мобильной версии сайта, тоже стоит задуматься об адаптивном дизайне. Хотя пока уровень конверсии для мобильных устройств ниже, чем для ПК и ноутбуков, количество заказов, осуществляемых со смартфонов и планшетов начинает расти: в 2014 году в США этот показатель составлял 19%, а в 2015 — уже 25%.

Студия stfalcon.com выполняет дизайн и разработку адаптивных сайтов и приложений для Android и iOS. Обратитесь к нам, и мы поможем вашей компании стать ближе пользователям мобильных устройств.

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

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

А каждый 3-й имеет мобильную версию, которая отображается некорректно.

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

Почему мобильная версия сайта так важна?

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

Но на что это влияет?

Многие даже не задумываются, насколько это важно.

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

Это подтверждают все мировые исследования.

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

По данным сomScore мобильный трафик вырос на 36% в период с 2011 по 2014 гг., а компьютерный – только на 10%.

Трафик с мобилок растет, и это неоспоримый факт.

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

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

Это же коснулось рынка E-commerce – тенденция трафика сказывается и на количестве продаж, и на сумме сделок.

Сумма проданных товаров, покупки которых совершаются с мобильных устройств, уже перевалила за 2 триллиона долларов в год по всему миру, и тенденция говорит напрямую: в 2021 году более 72% продаж и сделок будет совершаться не с десктопа, а именно с мобилок!

Ранее я работал в розничной торговле.

У моих партнеров был прекрасный сайт по оптовой торговле мобильными аксессуарами – революционный по технологиям.

Они продвинули свой сайт в 2016 году, и он занимал ТОП-позиции по нужным ключевым словам.

Но недавно я решил проверить его позиции по SEO – и ужаснулся: у сайта было всего 170 ключей в ТОП-100 в Google!

Я подумал, как это возможно?

Решил проверить, вдруг сайт не работает.

Взял свой айфон, вбил URL и сразу все понял.

Оказалось – его вебмастер не реализовал мобильную версию.

И апдейт Google в июле 2018 года прилично «покосил» его позиции.

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

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

Как так вышло?

Как оказалось, эта проблема не нова.

Google в июле 2018 года запустил mobile-first index – это алгоритм ранжирования в выдаче, который отмечает сайты на более высоких позициях, обладающие более удобной и легковесной мобильной версией своего контента.

Что это означает?

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

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

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

Но не стоит волноваться – Гэри Илш из Google подтвердил, что если пользователи будут просматривать Ваш контент во вкладках (то есть когда он создан для удобства, а не для SEO), он также будет участвовать в ранжировании сайта.

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

Согласно PageSpeed, скорость загрузки была почти 12 секунд!

И лишь после ее реализации и исправления органический трафик подскочил в разы!

Хотите, чтобы Ваша органика также начала активно расти?

Напишите мне, и я выясню ошибки Вашей мобильной версии и вышлю Вам список критичных ошибок на почту!

ГЛАВА 1:

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

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

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

И некоторые уже устарели.

А какая версия мобильной верстки у Вас?

Google предпочитает три способа реализации мобильной версии – адаптивный дизайн, динамический показ и наличие отдельной мобильной версии.

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

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

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

Google рекомендует реализовать именно этот вариант.

Как создать сайт на адаптивном дизайне?

Как говорит Google, у Вас есть два шага:

1. Сначала пропишите тег meta name viewport.
2. Затем изучите основы веб-дизайна в техподдержке.

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

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

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

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

В адаптации контента принимает участие код Javascript.

Сегодня существует два популярных способа реализации адаптивного дизайна через JS:

• Адаптация при помощи JS. В данном случае (его рекомендует Google) используется единый код HTML, JS и CSS. Механизм отображения и работы сайта уже прописывается непосредственно в JS.
• Комбинированный тип JS. В зависимости от использования разных устройств пользователю отправляется разный HTML-контент. JS определяет разрешение экрана и отправляет пользователям разные версии HTML-страницы. Для этих целей используется HTTP-заголовок Vary: User-agent.

Динамический показ

Этот вид мобильной версии работает немного иначе.

В данном случае пользователи, заходя на мобильную версию основного сайта, получают другой HTML-контент в зависимости от своего User-Agent.

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

Если коротко, он работает по следующему принципу:

• Распознается параметр Vary от конкретного User-Agent. Как только он распознан, нужная версия HTML отправляется пользователю.
• Для удобства загрузки используются куки (при повторном посещении страниц сразу грузится нужная версия).
• Важно правильно распознавать нужные User-Agent для корректной загрузки.
• Данный заголовок сканируется Googlebot и позволяет просканировать контент, который может быть показан.

Например, в этом скрине описан метод определения User-Agent и выбора HTML-контента, который нужно показать в зависимости от User-Agent.

Какие ошибки могут ждать вас?

• Актуальный список User-Agent. Всегда нужно поддерживать список версий и актуализировать контент HTML.
• Часто из-за ошибки отображения HTML-контента мобильная версия может быть выведена на десктоп, или планшетная версия – на мобилку.
• Использование технологии маскировки.

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

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

Если Вас уличат в клоакинге, это может стоить Вашему сайту позиций.

Мобильная версия сайта на разных URL

Наиболее старая версия мобильных версий сайта.

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

Мобильные версии традиционно располагали на поддоменах, и каждая страница находилась на разных версиях URL:

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

• На десктопной версии используйте атрибут Link с параметром rel=»alternate”, который будет указывать на аналогичную мобильную версию страницы.
• На мобильной версии пропишите атрибут Link с параметром rel=»canonical», который будет указывать на соответствующую десктопную страницу.

Например, так выглядит фрагмент кода на десктопе:

Google поддерживает возможность указания кода Alternate непосредственно в файлах карты сайта sitemap.xml.

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

И в карту сайта мобильные версии страниц не добавляются.

Что нужно учесть?

В первую очередь редиректы:

• Вы должны реализовать редирект пользователя автоматически на нужную версию страницы.
• Редирект можно прописать на уровне JS или в HTML.
• Редирект с десктопной версии страницы А должен вести на такую же страницу А в мобильной версии (как указано в иллюстрации):

Почему такая технология устаревает?

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

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

Мобильные страницы AMP

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

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

• AMP-страницы используются на уровне адаптивного дизайна и динамических мобильных версий.
• AMP-страницы могут отображаться в расширенных результатах выдачи (в каруселях, карточках).
• Такие страницы загружаются напрямую пользователю из кеша Google AMP. Страницы данного типа можно определить по характерному значку ⚡.

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

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

Какой тип контента может выводиться и как?

1. Материалы следующего формата: новостные статьи, записи в блоге, видеоматериалы. Если Вас интересует продвижение новостного сайта почитайте этот гайд.
2. Рецепты.
3. Меню ресторанов.

На примере – карусель для одного хоста по категории «Рецепты­».

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

Как реализовать AMP для своего сайта?

На ранжирование в Яндексе технология AMP не влияет.

У Яндекса реализован аналогичный функционал турбо-страниц.

Документацию по турбо-страницам можно изучить на сайте Вебмастера Яндекс.

ГЛАВА 2:

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

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

Но все ли из них являются информативными и достаточными?

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

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

Search Console – Google Вебмастер

Всю информацию можно изучить в Вебмастере Google – просто вставьте в поисковую строку URL страницы и изучите ошибки (если они есть).

В нашем случае их нет.

Проверьте ошибки кода, а также отображение непосредственно в Вебмастере.

Также важно, как Ваша страница отображается на скриншоте.

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

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

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

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

Для этого необязательно иметь доступ к Вебмастеру.

Используйте бесплатную утилиту проверки мобильной версии сайта от Google.

Сервис простой и понятный.

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

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

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

Проверка загрузки по мобильному трафику

Следует помнить, что мобильная версия должна быть не просто правильно сверстана.

Она также должна быть легковесной.

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

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

Проверить этот показатель поможет утилита TestMySite With Google (русская версия).

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

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

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

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

Очень полезно: если Ваши конкуренты грузятся долго, Вы можете быть в ТОПе и с 6-7 секундами, но иногда и 3 секунды – это мало.

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

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

Google Pagespeed Insights

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

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

С недавних пор его API перешло с 4-й версии на 5-ю, и он совместил функционал сервиса Lighthouse (который был доступен в Chrome по умолчанию по комбинации клавиш Shift+CTRL+I).

Поэтому теперь Lighthouse использовать отдельно нет смысла.

Работает он достаточно просто.

Исследование производится постранично – просто вставьте URL и дождитесь результата.

В итоговом окне выберите вкладку «Мобильные устройства» и изучите обнаруженные ошибки:

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

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

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

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

Эту ошибку подтвердил Джон Мюллер в своем твиттере:

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

I don’t know the details in this case, but generally speaking, these scores can change over time even without changes on your site, they’re not physical measurements. Use these tools to find ways to improve your site for users, don’t see them as the final goal.

— ? John ? (@JohnMu) 5 февраля 2019 г.

С сервисами по проверке мобильной версии у нас теперь проблем нет.

А какие же нас могут ждать ошибки?

ГЛАВА 3:

Технические ошибки в мобильной версии

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

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

Многие ошибки можно категоризировать по группам.

Закрыт доступ к JS/CSS/изображениям

Самой распространенной ошибкой может являться некорректная настройка файла Robots.txt.

Многие программисты могут по ошибке закрыть доступ к файлам стилей CSS, Javascript и изображениям Вашего сайта.

Это скажется на том, что робот GoogleBot сканирует Ваш сайт аналогично текущей версии Chrome – и тем самым увидит Вашу мобильную версию с ошибками.

Всегда проверяйте корректность настройки файла роботс.

Неподдерживаемые плагины

Мобильные устройства к 2019 году массово отказались от Flash.

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

И преуспел в продвижении более новой и революционной технологии – HTML5.

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

Не прописан viewport

Типичная ошибка, которая может повлечь некорректное отображение Вашего сайта.

Реализация адаптивной версии происходит при помощи метатега viewport.

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

Неверно задана ширина отображаемой области device-width

Задайте ширину экрана согласно максимальному разрешению мобильного устройства.

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

<meta name="viewport" content="width=device-width, initial-scale=1.0">
width=device-width

Контент шире экрана

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

Во всех прорисовках элементов старайтесь не использовать абсолютные значения ширины, а применяйте относительные значения в процентах (например width: 100% – ширина по всей области).

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

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

• Применяйте медиазапросы для определения максимальных значений отображаемых элементов (min-width, max-width, min-height и max-height).
• Применяйте различные стили CSS в зависимости от разрешения экрана и ориентации (портретной и десктопной).

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

Для масштабирования изображений используйте элемент <picture>.

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

Как его настроить – можно изучить в разделе Техподдержки.

Слишком мелкий шрифт

Есть общепринятая норма у веб-дизайнеров и верстальщиков, которая гласит: оптимальная длина строки на мобильном устройстве – 70 символов (8–10 слов).

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

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

Интерактивные элементы слишком близко

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

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

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

Поэтому старайтесь выдерживать отступы вне зависимости от размеров самих иконок.

Между нажимаемыми элементами также старайтесь выдерживать минимальное расстояние.

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

ВЫВОДЫ

Мобильная версия сайта – важный фактор ранжирования.

Алгоритм Mobile First прилично подпортил выдачу в Google большинства сайтов, а недавнее введение AMP-страниц изменило отображение мобильной выдачи в корне.

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

• Используйте адаптивную верстку для реализации мобильной версии. Если у Вас ее еще нет, привлеките верстальщиков и программиста.
• Если Ваша CMS устарела, рекомендуем присмотреться к более новым.
• Не используйте технологию Flash на своем сайте.
• Старайтесь меньше скрывать текстовые области от пользователя.
• Не используйте технологию клоакинга. Вы рискуете потерять позиции своего сайта (отображая для гуглбота другой контент).
• Используйте тег viewport для реализации отображения устройства на всех версиях мобильных гаджетов. Старайтесь придерживаться относительных размеров ширины областей.
• Текстовые блоки старайтесь размечать по контрольным точкам чуть меньше ширины страницы. Оптимальная ширина строки для мобилок: 80 символов.
• Старайтесь использовать отступы для кликабельных элементов страниц.
• Старайтесь уйти от устаревших мобильных версий на отдельных URL.
• Проверяйте наличие мобильной версии в индексе в Вебмастере Google. Изучайте ошибки, почему мобильные версии выводятся некорректно.
• Для сканирования скорости загрузки в 3G и в WI-FI мобильных страниц, а также выявления ошибок в верстке Вам помогут три бесплатные утилиты от Google.
• Обязательно уделяйте внимание показателю отказов в Google-аналитике с мобильных устройств. Выделяйте плохие страницы и проверьте, где проблемы с отображением контента на мобилках.

А какие способы реализации мобильной версии сайта используете Вы на своем сайте?

Делитесь в комментариях!

15 крутых мобильных версий сайтов. На что влияет мобильная версия сайта, да и вообще, нужна ли она?

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

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

Появление новинок от Google повлияет на 40% мобильных поисковых запросов. Для сравнения: Panda оказала влияние лишь на 12% таковых, а Penguin затронуло около 4%.

Другими словами, если вы не будете с упорством работать над улучшением мобильных версий ваших сайтов, вы можете свалиться вниз в поисковых рейтингах. Как справедливо было замечено в статье сайта Search Engine Land об обновлении от Google: «… теперь никаких степеней мобильного дружелюбия. О вашем сайте будут судить просто: либо он дружественный к мобильным устройствам, либо нет».

 

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

1) Shutterfly

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

На своем мобильном сайте компания преследует две основные цели: 1) Пользователи легко находят информацию о своих предложениях; 2) Они продают эту информацию посредством красивых снимков.

 

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

 

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

 

2) Google Maps

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

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

 

3) Etsy

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

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

 

4) Elf on the Shelf

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

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

 

5) BuzzFeed

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

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

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

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

 

6) Evernote

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

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

 

7) Huffington Post

 

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

 

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

 

 

8) Express

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

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

 

9) Nationwide Insurance

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

 

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

 

10) Zappos

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

 

11) ABC

Телевизионная компания ABC известна такими популярных шоу, как «Dancing with the Stars», «Modern Family», и «Scandal». Люди, посещающие основную версию сайта, встречаются с массой опций: программой телепередач, перечнем обладателей Оскара, возможностью просмотра любимых телевизионных шоу, лентой новостей и т.п.

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

 

12) Lean Labs

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

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

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

 

 

13) Pharmacy Development Services

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

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

 

 

14) SAP

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

 

 

15) KISSmetrics

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

 

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

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

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

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

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

В дальнейшем Google будет продолжать поднимать планку только того, что он считает оптимизированным для мобильных устройств (включая время загрузки страницы), и отражать это в своих обновлениях алгоритмов. Так что, если вы не фокусировались на улучшении своего мобильного опыта, вам лучше расставить приоритеты сейчас, иначе ваш поисковый рейтинг действительно может пострадать. Кроме того, исследование HubSpot Research обнаружило, что половина потребителей в США выходят в Интернет на своих телефонах чаще, чем на компьютерах или планшетах.

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

Лучшие мобильные сайты

1. Затвор
2. Карты Google
3. Типовая форма
4. Etsy
5. Адриан Зумбруннен
6. Эльф на полке
7. BuzzFeed
8. Evernote
9. пикселей
10. Huffington Post
11. Экспресс
12. Национальное страхование
13. Squaredo
14. Zappos
15. ABC
16. Бережливые лаборатории
17. SAP
18. KISSmetrics
19. idig Marketing
20. Индия МАРТ
21. Мелисса Гриффин

1.Shutterfly

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

Shutterfly на своем мобильном веб-сайте выполняет две ключевые задачи:

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

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

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

2. Карты Google

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

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

3. Типовая форма

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

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

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

4. Etsy

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

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

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

5. Адриан Зумбруннен

Это личный сайт Адриана Замбруннена, UX-дизайнера, писателя и спикера. Когда вы посетите его веб-сайт, вы сразу заметите в нем что-то очень уникальное: это разговорный веб-сайт .

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

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

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

6. Эльф на полке

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

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

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

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

7. BuzzFeed

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

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

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

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

8. Evernote

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

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

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

9. Pixelgrade

Тема Pile от

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

10. Huffington Post

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

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

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

11. Экспресс

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

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

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

12. Национальное страхование

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

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

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

13. Squaredot

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

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

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

14. Zappos

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

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

15. ABC

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

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

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

16. Бережливые лаборатории

Lean Labs — это маркетинговое агентство, которое создает привлекательные, гибкие и высококонверсионные веб-решения. (Они также были показаны в популярном сериале ABC « Shark Tank ».) Люди там проделывают огромную работу по обеспечению бесперебойной работы своих мобильных пользователей, особенно в том, что касается их дизайнерских приемов и того акцента, который они уделяют своим «10x». формула «, которая становится очевидной для посетителей через несколько секунд после перехода на свой мобильный сайт.

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

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

17. SAP

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

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

18.KISSmetrics

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

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

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

19.idig Marketing

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

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

20. IndiaMART

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

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

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

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

21. Мелисса Гриффин

Мелисса Гриффин — консультант по контент-маркетингу для блогеров и предпринимателей.Ее веб-сайт, созданный с использованием WP Engine, начинается с целевой страницы, которая адаптирует опыт посетителя к его или ее конкретным потребностям как владельца бизнеса.

Яркий желтый фон

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

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

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

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

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

«Мобильная связь становится не только новым цифровым центром, но и мостом в физический мир», — сказал Томас Хассон, вице-президент и главный аналитик 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 году

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

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

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

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

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

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

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

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

«Мобильная связь становится не только новым цифровым центром, но и мостом в физический мир», — сказал Томас Хассон, вице-президент и главный аналитик 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 году

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

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

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

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

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

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

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

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

«Мобильная связь становится не только новым цифровым центром, но и мостом в физический мир», — сказал Томас Хассон, вице-президент и главный аналитик 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 году

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

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

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

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

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

Что делает хороший мобильный сайт? | Основы Интернета | Разработчики Google

Дженни Гоув — руководитель исследования UX в Google, где она занимается исследованиями смартфонов. Она получила докторскую степень в Саутгемптонском университете, Великобритания.

Google и AnswerLab провели научное исследование чтобы ответить на этот вопрос.

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

Исследование проводилось в рамках 119-часовых личных сессий юзабилити с участники в США. Участников попросили выполнить ключевые задачи в разнообразный набор мобильных сайтов. Были включены пользователи iOS и Android, а пользователи протестировали сайты на собственных телефонах. Для каждого сайта участникам было предложено озвучивать свои мысли вслух по мере выполнения задач, ориентированных на конверсию, таких как совершая покупку или бронируя бронирование.

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

Домашняя страница и навигация по сайту

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

Призывы к действию держать в центре внимания

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

DO : Сделайте все наиболее распространенные задачи ваших пользователей доступными. НЕ : тратьте драгоценное пространство в верхней части призывы к действию, например «узнать больше».

Меню должно быть коротким и приятным

DO : Меню должно быть коротким и понятным.

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

Упростите возврат на домашнюю страницу

DO : Упростите возврат на главную страницу.

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

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

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

DO : Акции должны легко отклоняться и не отвлекать опыт. НЕ : Межстраничные объявления (иногда называемые дверным хлопком) часто раздражают пользователей и сделать использование сайта болью.

Поиск по сайту

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

Сделать поиск по сайту видимым

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

DO : Сделать поиск видимым НЕ : Скрыть поиск в меню переполнения

Обеспечение релевантности результатов поиска по сайту

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

DO : Macy’s возвращает только детские товары. НЕ : возвращать результаты для всего, что содержит слово ребенок.

Применение фильтров для сужения результатов

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

DO : Упростите фильтрацию. НЕ : Скрыть функцию фильтра.

Направляйте пользователей по улучшению результатов поиска по сайту

DO : Помогите пользователям найти то, что они ищут, направляя их в правильном направлении.

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

Торговля и преобразование

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

Позвольте пользователям исследовать, прежде чем они совершат

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

DO : Разрешить пользователям просматривать сайт без входа в систему. НЕ : Разместите логин или регистрацию слишком рано на сайте.

Разрешить пользователям совершать покупки в качестве гостей

DO : Разрешить пользователям совершать покупки с гостевой учетной записью.

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

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

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

Используйте кнопки вызова для сложных задач

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

Упростите завершение на другом устройстве

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

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

Форма записи

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

Оптимизация ввода информации

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

Выберите самый простой ввод

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

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

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

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

Минимизация ошибок формы с помощью маркировки и проверки в реальном времени

DO : Четко маркируйте входы.

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

Дизайн эффективных форм

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

Удобство использования и форм-фактор

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

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

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

Не заставляйте пользователей увеличивать масштаб изображения пальцем

Пользователям удобно прокручивать сайты по вертикали, но не по горизонтали. Избегайте больших элементов фиксированной ширины. Использовать CSS медиа-запросы применять разные стили для разных экранов.Не создавайте контент, который хорошо отображается только при определенных ширина области просмотра. Сайты, которые заставляют пользователей выполнять горизонтальную прокрутку, не Google Mobile-Friendly Test, что может негативно повлиять на их поисковый рейтинг.

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

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

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

Сообщите пользователям, какая ориентация работает лучше всего

DO : Сообщите пользователю, какая ориентация работает лучше всего.

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

Держите пользователя в одном окне браузера

DO : Macy’s удерживает своих пользователей на своем сайте, предоставляя купоны на сайте.

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

Избегайте маркировки «весь сайт»

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

Объясните, зачем вам нужно местоположение пользователя

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

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

Обратная связь

Была ли эта страница полезной?

Есть

Что было самым лучшим на этой странице?

Это помогло мне выполнить мои цели

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

Там была информация, которая мне была нужна

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

Имеет точную информацию

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

Легко читалось

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

Что-то еще

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

№

Что было самым плохим на этой странице?

Это не помогло мне выполнить мои цели

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

Отсутствовала необходимая мне информация

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

Он имел неточную информацию

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

Было трудно прочитать

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

Что-то еще

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

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

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

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

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

Чтобы вдохновить вас лучшим дизайном мобильных веб-сайтов, вот список из 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 получил это право, разместив акции вместе с заголовками.

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

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 года.

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

Обновлено: 27 марта 2021 г.

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

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

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

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

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

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

1. Lyft
2. Яблоко
3. фиолетовый
4. Варби Паркер
5. Уолт Дисней
6. Adobe
7. Домино
8. Slack
9. Полоса
10. Mckinsey
11. Atlassian
12. Квадрат
13. Фергюс
14. Abercrombie & Fitch
15. Бронирование.com
16. Texas Roadhouse
17. Бар Клондайк
18. Dove Men + Уход
19. Скрытая долина
20. Mountain Dew
21. Адидас

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

Исследование показало, что 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 также хорошо поработал над расширением своей домашней страницы, включив в нее категории продуктов, по которым пользователи могут фильтровать.Вместо того, чтобы использовать мобильное меню, вы можете искать определенную категорию продуктов прямо на домашней странице, чтобы быстрее перейти к нужному продукту.