При разработке сайта для различных пользователей и устройств следует учитывать не только макет и графический дизайн, но и содержание.
Как люди читают в интернете
В руководстве по написанию текстов, принятом в правительстве США, кратко изложены ожидания пользователей от материалов, размещаемых в интернете:
Исследования показывают, что люди не читают веб-страницы, а просматривают их бегло . В среднем, люди читают только 20–28% содержимого веб-страницы . Чтение с экрана намного медленнее, чем чтение с бумаги. Люди бросят ваш сайт и покинут его, если информация не будет легкодоступной и понятной.
Как писать тексты для мобильных устройств
Сосредоточьтесь на теме и изложите историю в самом начале. Чтобы текст хорошо воспринимался на разных устройствах и экранах, убедитесь, что основные мысли изложены в начале: как правило, в идеале в первых четырех абзацах, примерно в 70 словах .
Задайте себе вопрос, чего люди хотят от вашего сайта. Пытаются ли они что-то узнать? Если люди посещают ваш сайт в поисках информации, убедитесь, что весь ваш текст направлен на то, чтобы помочь им достичь своей цели. Пишите в активном залоге , предлагайте действия и решения.
Публикуйте только то, что хотят ваши посетители, и ничего лишнего.
Исследования правительства Великобритании также показывают, что:
Другими словами: используйте простой язык, короткие слова и простые предложения — даже для грамотной, технически подкованной аудитории. Если нет веской причины этого не делать, сохраняйте разговорный тон. Старое правило журналистики гласит: пишите так, как будто вы разговариваете с умным 11-летним ребёнком.
Следующий миллиард пользователей
Сокращенный подход к написанию текста особенно важен для читателей на мобильных устройствах и имеет решающее значение при создании контента для недорогих телефонов с небольшими экранами, требующими большей прокрутки, а также с дисплеями более низкого качества и менее отзывчивыми экранами.
Большинство из следующего миллиарда пользователей, которые выйдут в онлайн, будут иметь недорогие устройства. Они не захотят тратить свой трафик на чтение длинного и сложного контента и, возможно, будут читать не на своем родном языке. Сокращайте текст: используйте короткие предложения, минимум знаков препинания, абзацы не более пяти строк и заголовки в одну строку. Рассмотрите возможность адаптивного текста (например, использование более коротких заголовков для небольших экранов), но помните о недостатках .
Минималистичный подход к тексту также упростит локализацию и интернационализацию вашего контента, а также повысит вероятность того, что ваш контент будет цитироваться в социальных сетях.
В итоге:
- Не усложняйте.
- Уменьшите беспорядок
- Переходите к сути дела.
Удалите ненужный контент
В байтовом выражении веб-страницы большие и продолжают увеличиваться в размерах .
Технологии адаптивного дизайна позволяют отображать разный контент для небольших экранов, но всегда разумно начинать с оптимизации текста, изображений и другого контента.
Пользователи интернета часто ориентированы на действие, "наклоняясь вперед" в поисках ответов на свой текущий вопрос, а не откидываясь назад, чтобы погрузиться в чтение хорошей книги.
Джекоб Нильсен
Задайте себе вопрос: чего люди пытаются достичь, посещая мой сайт?
Помогает ли каждый компонент страницы пользователям достичь своей цели?
Удалите лишние элементы страницы.
Согласно данным HTTP Archive , HTML-файлы составляют почти 70 000 записей и более девяти запросов на каждую веб-страницу.
Многие популярные сайты используют несколько тысяч HTML-элементов на странице и несколько тысяч строк кода, даже на мобильных устройствах. Чрезмерный размер HTML-файла может не замедлять загрузку страниц , но большой объем HTML-кода может быть признаком раздувания контента: большие файлы .html означают больше элементов, больше текстового контента или и то, и другое.
Уменьшение сложности HTML-кода также снизит вес страницы, поможет в локализации и интернационализации, а также упростит планирование и отладку адаптивного дизайна. Для получения информации о написании более эффективного HTML-кода см. раздел «Высокопроизводительный HTML» .
Каждый шаг, который вы заставляете пользователя выполнить, прежде чем он получит пользу от вашего приложения, обойдется вам в 20% потери пользователей.
Габор Челле, Twitter
То же самое относится и к контенту: помогите пользователям как можно быстрее найти то, что им нужно.
Не стоит просто скрывать контент от пользователей мобильных устройств. Стремитесь к единообразию контента , поскольку попытка угадать, какие функции пользователи мобильных устройств не заметят, обречена на провал. Если позволяют ресурсы, создавайте альтернативные версии одного и того же контента для разных размеров экрана — даже если только для наиболее важных элементов страницы.
Рассмотрим вопросы управления контентом и рабочих процессов: приводят ли устаревшие системы к устаревшему контенту?
Упростите текст
Поскольку веб-технологии все чаще используются на мобильных устройствах, вам необходимо изменить свой стиль письма. Пишите проще, избегайте лишней информации и переходите к сути дела.
Удалите лишние изображения
Изображения могут быть красивыми, интересными и информативными, но они также занимают место на странице, увеличивают её вес и количество запросов файлов. Задержка ухудшается по мере ухудшения качества связи , а это значит, что избыток запросов файлов изображений становится всё большей проблемой по мере перехода веб-технологий на мобильные устройства.
Изображения также потребляют энергию. После экрана радио является вторым по величине источником разряда батареи. Чем больше запросов к изображениям, тем больше используется радио, тем чаще разряжается батарея. Даже простое отображение изображений требует энергии — и это пропорционально размеру и количеству. Ознакомьтесь с отчетом Стэнфордского университета « Кто убил мою батарею?»
Если есть возможность, удалите изображения!
Вот несколько предложений:
- Рассмотрите варианты дизайна, в которых изображения полностью отсутствуют или используются экономно. Только текст может быть прекрасен ! Спросите себя: «Чего хотят добиться посетители моего сайта? Помогают ли изображения в этом процессе?»
- Раньше было принято сохранять заголовки и другой текст в виде графических изображений. Такой подход плохо реагирует на изменения размера области просмотра и увеличивает вес страницы и задержку. Использование текста в качестве графического изображения также означает, что поисковые системы не смогут его найти, и он будет недоступен для программ чтения с экрана и других вспомогательных технологий. Используйте «настоящий» текст, где это возможно — веб-шрифты и CSS могут обеспечить красивую типографику.
- Для градиентов, теней, закругленных углов и фоновых текстур используйте CSS вместо изображений — эти функции поддерживаются всеми современными браузерами . Однако имейте в виду, что CSS может быть лучше изображений, но все равно может наблюдаться снижение производительности и скорости рендеринга , особенно значительное на мобильных устройствах.
- Фоновые изображения редко хорошо отображаются на мобильных устройствах. Вы можете использовать медиа-запросы , чтобы избежать использования фоновых изображений в небольших окнах просмотра.
- Избегайте изображений на заставке.
- Используйте CSS для анимации пользовательского интерфейса .
- Изучите глифы; используйте символы и значки Unicode вместо изображений, при необходимости — веб-шрифты.
- Рассмотрите шрифты с иконками ; это векторная графика, которую можно масштабировать до бесконечности, и весь набор изображений можно загрузить в одном шрифте. (Однако следует учитывать следующие моменты .)
- Элемент
<canvas>можно использовать для создания изображений в JavaScript из линий, кривых, текста и других изображений. - Встроенные SVG-изображения или изображения с Data URI не уменьшат вес страницы, но могут снизить задержку за счет уменьшения количества запросов к ресурсам. Встроенные SVG-изображения отлично поддерживаются мобильными и настольными браузерами , а инструменты оптимизации могут значительно уменьшить размер SVG. Аналогично, Data URI также хорошо поддерживаются . Оба типа изображений могут быть встроены в CSS.
- Рекомендуется использовать
<video>вместо анимированных GIF-файлов. Элемент video поддерживается всеми мобильными браузерами (кроме Opera Mini).
Для получения более подробной информации см. разделы «Оптимизация изображений» и «Удаление и замена изображений» .
Разрабатывайте контент, который будет хорошо отображаться на экранах разных размеров.
«Создавайте продукт, а не переосмысливайте его для маленьких экранов. Отличные мобильные продукты создаются, а не портируются».
Разработка и дизайн мобильных приложений, Брайан Флинг
Отличные дизайнеры не "оптимизируют для мобильных устройств" — они мыслят адаптивно, чтобы создавать сайты, которые работают на самых разных устройствах. Структура текста и другого контента страницы имеет решающее значение для успеха на разных устройствах.
Многие из следующего миллиарда пользователей, которые выйдут в онлайн, будут использовать недорогие устройства с небольшим экраном. Чтение на экране с низким разрешением (3,5 или 4 дюйма) может быть утомительным.
Вот фотография, на которой они запечатлены вместе:
На большом экране текст мелкий, но читаемый.
На маленьком экране браузер отображает макет правильно, но текст нечитаем, даже при увеличении масштаба. Изображение размыто и имеет «цветовой оттенок» — белый цвет не выглядит белым — что делает контент менее разборчивым.
Разработка контента для мобильных устройств
При разработке дизайна для различных экранов учитывайте не только макет и графический дизайн, но и контент, используйте реальный текст и изображения, а не контент-заглушки .
«Содержание предшествует дизайну. Дизайн без содержания — это не дизайн, это украшение».
Джеффри Зельдман
- Размещайте наиболее важный контент вверху страницы, поскольку пользователи, как правило, читают веб-страницы по F-образной схеме .
- Пользователи посещают ваш сайт с определенной целью. Спросите себя, что им нужно для достижения этой цели, и избавьтесь от всего остального. Тщательно уберите визуальные и текстовые излишества, устаревший контент, лишние ссылки и прочий хлам.
- Будьте осторожны с иконками для обмена в социальных сетях; они могут загромождать макет, а код, отвечающий за их отображение, может замедлить загрузку страницы.
- Создавайте адаптивные макеты для контента, а не для устройств с фиксированными размерами экрана.
Тестовое содержимое
- Проверьте читаемость на экранах меньшего размера, используя инструменты разработчика Chrome и другие инструменты эмуляции .
- Протестируйте свой контент в условиях низкой пропускной способности и высокой задержки ; опробуйте контент в различных сценариях подключения.
- Попробуйте читать и взаимодействовать с контентом на недорогом телефоне.
- Предложите друзьям и коллегам попробовать ваше приложение или сайт.
- Создайте простую тестовую лабораторию для устройств. В репозитории GitHub , посвященном мини-лаборатории мобильных устройств Google, есть инструкции по созданию собственной лаборатории. OpenSTF — это простое веб-приложение для тестирования веб-сайтов на различных устройствах Android.
Вот как работает OpenSTF:
Мобильные устройства все чаще используются для потребления контента и получения информации — не только как устройства для общения, игр и просмотра медиаконтента.
Это делает все более важным планирование контента таким образом, чтобы он хорошо работал на различных экранах, а также расстановку приоритетов при проектировании макета, интерфейса и взаимодействия для разных устройств.
Понимание стоимости данных
Веб-страницы становятся все больше.
Согласно данным HTTP Archive , средний вес страницы на миллионе ведущих сайтов сейчас превышает 2 МБ.
Пользователи избегают сайтов или приложений, которые кажутся им медленными или дорогими, поэтому крайне важно понимать стоимость загрузки компонентов страницы и приложения.
Уменьшение размера страницы также может быть выгодным. Крис Захариас с YouTube обнаружил, что при уменьшении размера страницы просмотра с 1,2 МБ до 250 КБ:
Иными словами, уменьшение веса страницы может открыть совершенно новые рынки .
Рассчитайте вес страницы
Существует ряд инструментов для расчета веса страницы. Панель «Сеть» в инструментах разработчика Chrome отображает общий размер всех ресурсов в байтах и может использоваться для определения веса отдельных типов ресурсов. Вы также можете проверить, какие элементы были загружены из кэша браузера.
Firefox и другие браузеры предлагают аналогичные инструменты.
WebPagetest предоставляет возможность тестирования первой и последующих загрузок страниц. Вы можете автоматизировать тестирование с помощью скриптов (например, для входа на сайт) или используя их RESTful API . Следующий пример (загрузка developers.google.com/web ) показывает, что кэширование прошло успешно и что последующие загрузки страниц не потребовали дополнительных ресурсов.
WebPagetest также предоставляет информацию о размере и распределении запросов по MIME-типам.
Рассчитать стоимость страницы
Для многих пользователей передача данных — это не просто затраты байтов и снижение производительности, это ещё и деньги.
Сайт What Does My Site Cost? позволяет оценить фактические финансовые затраты на загрузку вашего сайта. Гистограмма ниже показывает, сколько стоит (при использовании предоплаченного тарифного плана) загрузка amazon.com .
Следует иметь в виду, что это не учитывает доступность по цене в зависимости от дохода. Данные с сайта blog.jana.com показывают стоимость данных.
| Тарифный план на 500 МБ данных стоимость (доллары США) | Минимальная почасовая оплата заработная плата (долл. США) | Оплата за отработанные часы для тарифного плана на 500 МБ данных | |
| Индия | 3,38 доллара | 0,20 доллара | 17 часов |
| Индонезия | 2,39 доллара | 0,43 доллара | 6 часов |
| Бразилия | 13,77 долларов | 1,04 доллара | 13 часов |
Проблема «тяжелого» размера страницы актуальна не только для развивающихся рынков. Во многих странах люди используют мобильные тарифы с ограниченным объемом данных и будут избегать вашего сайта или приложения, если сочтут его тяжелым и дорогим. Даже «безлимитные» тарифы на мобильный и Wi-Fi трафик обычно имеют лимит, превышение которого блокирует или ограничивает скорость передачи данных. По этим причинам лучше всего максимально прозрачно сообщать о том, сколько данных потребляет ваша страница. В следующей статье в блоге представлены конкретные рекомендации: Укрепление доверия посредством прозрачности затрат
Главный вывод: вес страницы влияет на производительность и влечет за собой затраты. Оптимизация эффективности контента показывает, как снизить эти затраты.