Акция
Акция

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

В гонке за внимание пользователей интернета мобильные устройства давно обогнали ПК – к концу 2021 года на них приходилось около 83 % трафика в России. И это неудивительно, телефон всегда рядом, верный «подручный», который помогает легко общаться, быстро находить нужные товары и услуги, адрес магазина и номер для связи.

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

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

С чего начинается текст для мобильной версии сайта

Удобство восприятия основано на:

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

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

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

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

Что меняется, когда мы заходим на сайт со смартфона

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

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

У вас всего 72 секунды, чтобы заинтересовать пользователя

Именно столько в среднем длится мобильная сессия, тогда как за ПК – 150 секунд. Экран меньше, времени – тоже. И если придется по 3–4 раза прокручивать вниз, чтобы добраться до выгодного предложения и важной информации, терпения уже не останется. Главное хочется узнать здесь и сейчас без поисков по всей странице.

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

Вот так выглядят поисковые запросы с компьютера:

Поисковые подсказки с компьютера

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

Поисковые подсказки с мобильного

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

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

Текст в мобильной версии сайта, главные преимущества

Главные преимущества расположены на первом экране, если прокрутить далее – увидим больше.

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

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

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

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

Страница без адаптации под мобильные

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

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

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

Главная страница

Цель главной страницы – кратко познакомить пользователя с вашим предложением, продуктом или услугой. Стандартный объем: 2000–2500 символов с пробелами.

Главная страница

Предоставление услуг

  1. УТП, выгодное предложение, краткая информация о ценах
  2. Примеры работ
  3. Преимущества с точки зрения выгод для клиента
  4. Схема работы, если есть своя специфика
  5. Основной текст, все, что поможет закрыть вопросы потенциального клиента
  6. Контакты, физический адрес

Интернет-магазин

  1. Товары со скидками и по акции, УТП
  2. Основные или наиболее популярные категории товаров
  3. Преимущества с точки зрения выгод для клиента
  4. Схема работы, кратко об оплате и доставке
  5. Основной текст
  6. Контакты, физический адрес, если есть магазины

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

Как это выглядит на ПК:

Пример главной страницы услуг

Преимущества на главной странице услуг

Основной текст на главной странице

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

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

Текст в мобильной версии сайта, преимущества

Страницы каталога

Цель страницы каталога: кратко рассказать о товарах или услугах раздела. Стандартный объем текста – 1500-2000 символов, но не меньше, чем у конкурентов в ТОПе.

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

Страница каталога в ПК версии

Далее идут товары, а уже ниже – текст:

Текст на странице каталога с ПК

Мобильная версия сайта, первый экран каталога

Как выглядит текст в мобильной версии сайта, каталог

Карточка товара

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

Если интересно, у нас есть отдельная статья об оформлении карточек.

Пример карточки товара

А уже после – основной текст с подробным описанием. Объем: 500–1500 символов для товаров, от 1500 символов – для услуг.

Пример текста для карточки товара

И в мобильной версии:

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

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

Страница о компании

Страница о компании призвана повысить доверие, объем текста в среднем 1500–2000 символов, можно описать историю создания и рассказать об опыте. Лучше всего наглядно представить информацию: фотографии сотрудников и офисов, сертификаты и лицензии.

Пример страницы о компании

Пример страницы о компании, мобильная версия

Доставка и оплата

В тексте для страницы «Доставка и оплата» важно четко обозначить условия и варианты, визуально выделить каждый пункт. Объем – 1500–2000 символов в среднем.

Страница Доставка и оплата

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

Текст Доставка и оплата в мобильной версии со спойлерами

Контакты

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

Пример страницы с контактами

Страница с контактами, мобильная версия

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

  1. Привлечь внимание

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

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

    Например, здесь ее не хватает:

    Неудачный пример первого экрана

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

    Первый экран мобильной версии, преимущества слиплись

    Более информативный пример:

    Информативный пример первого экрана сайта

    Понятна сфера деятельности компании, есть кнопка для расчета стоимости, номера для связи.

    Длина текста в мобильной версии – 138 знаков, последнее предложение можно и убрать («Ваш груз – Наша забота»).

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

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

    Первый экран

    Услуги

    Показываем продукт лицом, если есть что-то бесплатное (выезд специалиста на объект, например) – предлагаем сразу.

    Магазин

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

    Пример магазина, есть предложение со скидками:

    Первый экран на примере интернет-магазина

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

    А здесь упор на стоимость услуг:

    Первый экран с упором на стоимость

    Текст в мобильной версии сайта, упор на цену

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

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

  2. Учесть объем строк и абзацев

    Объем одной строки на смартфоне – не более 30–40 символов. Убедитесь, что заголовки занимают не больше трех, в противном случае их лучше сократить.

    Короткие абзацы воспринимать легче, оптимальный объем – 3–5 строк.

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

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

    Большой абзац текста в мобильной версии

  3. Сделать так, чтобы читать было легко, расставить акценты

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

    1. Почему важна мобильная типографика

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

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

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

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

      Для экранов лучше подходит шрифт без засечек. Вот так делать не стоит:

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

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

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

      С компьютера текст с преимуществами

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

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

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

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

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

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

    2. О цветах и фоне

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

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

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

      Текст сливается с фоновым изображением, вид с ПК

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

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

      Текст не сливается с фоном, пример ПК

      Хороший пример оформления в мобильной версии

    3. О расстоянии между абзацами

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

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

      Оформление текста в мобильной версии, внешние отступы больше внутренних

      Оптимальное расстояние между абзацами – 2,5 (или 250 %).

  4. Графическая информация – это важно

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

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

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

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

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

    Картинка плохо сочетается с деятельностью компании

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

    Единообразные иконки

    Еще пример иконок в одном стиле

    И в мобильной версии сайта.

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

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

  5. Детально обо всем – внизу

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

    Текст за спойлерами в мобильной версии сайта

  6. ЦД: я все прочитал, и что мне теперь делать?

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

    Пример кнопки на первом экране ПК и в мобильной версии:

    Целевое действие на первом экране

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

    В середине страницы:

    Целевое действие в середине страницы

    Целевое действие в середине страницы в мобильной версии сайта

    И внизу:

    Целевое действие в конце страницы

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

В сухом остатке

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

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

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

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

© 1PS.RU, при полном или частичном копировании материала ссылка на первоисточник обязательна.

Понравилась статья?

8 чел. оценили, средняя оценка 5

Чек-лист по оптимизации мобильного сайта

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

Получить чек-лист
Комментарии для сайта Cackle

Популярные статьи

Все популярные статьи »

Проверить позиции сайта

Запросы для проверки
Регион для проверки
Акция

Полетели к ТОПу!

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

Более 250 000 человек уже с нами!
Или подпишитесь на нас:

Летим с нами в ТОП

Подписывайтесь на рассылку и получайте практические советы по продвижению сайта

Ваш email

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

Я уже с вами

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

×

Тяните за рычаг
и выигрывайте классные подарки

Главный приз – бесплатное продвижение сайта в течение 1 месяца!

Введите свой email и нажмите на кнопку

Да вы настоящий везунчик!

Активировать выигрыш

Повезет в любви! =)

Но не вешайте нос – попытайте удачу еще раз.

Сыграть заново

Закрыть и не показывать больше