11 шагов для создания мобильного сайта
Перво-наперво. Если ваш веб-сайт доступен и просматривается через мобильное устройство, это здорово. Тем не менее, вам еще предстоит проделать большую работу, прежде чем его можно будет объявить мобильным.
Мобильные пользователи должны не только иметь возможность просматривать ваш веб-сайт и читать ваш контент, но и иметь доступ ко всем его функциям.
За последние несколько лет количество пользователей мобильных устройств резко возросло, и они используют эти устройства для доступа в Интернет. Был момент, когда мобильные пользователи были счастливы иметь функциональные возможности текстовых сообщений, электронной почты, телефонных звонков и небольшого количества ограниченного серфинга. Сегодня ожидается, что они смогут делать почти все, что они делают на рабочем столе, на своих мобильных устройствах. Это включает:
- Исследование продуктов и услуг
- Смотрю видео
- Глядя на изображения и описания продуктов
- Покупки и совершение покупок
- Подписка на предложения
- Потребление новостей и другого контента
Если посетители вашего веб-сайта заметят, что они могут пользоваться только ограниченным пользовательским интерфейсом, есть большая вероятность, что они уйдут в другое место.
Если вы хотите оптимизировать свой веб-сайт, чтобы он действительно удобен для мобильных устройств, продолжайте читать. Эти 11 шагов помогут вам начать работу.
Вот простой, но очень важный тест, который каждый веб-дизайнер должен выполнять на каждой веб-странице, которую он разрабатывает. Откройте нужную веб-страницу на своем смартфоне. Теперь поместите это устройство в предпочитаемую «телефонную руку». Можете ли вы перемещаться по странице, не используя другую руку? Можете ли вы прочитать текст без необходимости увеличивать или уменьшать масштаб или без прокрутки? Если вы не можете сделать ни одну из этих вещей, пришло время внести некоторые изменения.
Один из ключевых факторов удобства использования мобильного устройства заключается в том, что для его работы требуется только одна рука. Чего вы не хотите делать, так это отнимать это удобство у людей, которым вы хотели бы приобрести ваши продукты и услуги.
2 Сосредоточьтесь на простоте
У пользователей настольных компьютеров может быть достаточно места и пропускной способности для видео, изображений и большого количества контента, но это не относится к вашим мобильным пользователям. Из-за этого вы должны сосредоточиться на создании чистого, простого дизайна, в котором функциональность важнее различных функций. Подумайте, что посетители вашего мобильного веб-сайта захотят увидеть и сделать в тот момент, когда они попадут на вашу домашнюю страницу. Убедитесь, что эти вещи сразу же доступны для них, когда ваш сайт открывается. Затем сосредоточьтесь на времени загрузки страницы. Только после того, как эти две вещи будут выполнены, вы должны решить, есть ли у вас место для другой функции.
3 Используйте адаптивную технологическую структуру
Фреймворки адаптивного дизайна чрезвычайно ценны для веб-дизайнеров, которые занимаются созданием мобильных веб-сайтов. По сути, такие инструменты, как Bootstrap, позволяют дизайнерам размещать элементы каждой веб-страницы в сетке. Затем размеры этой сетки можно настроить для различных размеров экрана. В результате текст, значки, изображения, кнопки и т. д. располагаются так, как должны быть. Это гарантирует, что у каждого пользователя будет одинаковый опыт, независимо от того, используют ли они настольный компьютер, ноутбук, смартфон или планшет. Более того, вам не нужно поддерживать отдельный веб-сайт для мобильных устройств.
4 Оптимизация изображений для мобильных устройств
Интернет для мобильных устройств просто медленнее, чем Интернет, предоставляемый кабельными и телефонными компаниями, а также другими поставщиками услуг. Два элемента, которые действительно могут повлиять на это, — это видео и изображения. Вы не хотите полностью удалять эти элементы. В конце концов, мобильные пользователи в целом действительно любят визуальный контент. Тем не менее, вы хотите оптимизировать как можно больше. Вот несколько шагов, которые вы можете предпринять, чтобы повысить скорость и производительность при использовании изображений:
- Предоставляйте пользователям версии изображений с более низким разрешением
- Оптимизация изображений для определенного размера устройства и соотношения сторон
- Примите во внимание JQuery, если JavaScript слишком громоздкий
5 Вместо текста, когда это возможно
Иконки работают хорошо, потому что они, по сути, являются формой сокращенной записи в Интернете, которая, как мы все согласились, означает определенные вещи. Например, кнопки социальных сетей мгновенно узнаваемы для всех, кто использует мобильные устройства в течение любого периода времени. То же самое относится и к кнопкам для отправки электронной почты, вызова или доступа к меню веб-сайта.
Использование этих удобных для мобильных устройств значков поможет вам достичь двух целей. Во-первых, вы экономите ценное место на экране, используя текст. В дополнение к этому вы также сообщаете людям, использующим ваш веб-сайт, что вы нашли время, чтобы учесть мобильных пользователей в своем дизайне.
6 Держите содержание коротким
Это область, в которой многие веб-дизайнеры и контент-маркетологи сталкиваются с некоторой дилеммой. Длинный контент становится все более и более популярным, особенно среди лиц, принимающих решения, но он просто не подходит для мобильных устройств. Вопрос в том, что лучше: ограничить или исключить длинный контент на мобильных устройствах или все равно разместить его там и оставить выбор потребления за пользователем? Лучший способ ответить на эти вопросы — принять во внимание типичное поведение мобильных пользователей.
Для вашего конкретного веб-сайта вы можете положиться на аналитику, чтобы получить представление о том, что делают ваши мобильные пользователи, а что нет. Тем не менее, мобильные пользователи, как правило, используют свои устройства для того, чтобы оставаться на связи в социальных сетях, просматривать новости, слушать музыку, делать покупки и читать контент, который, как правило, является более кратким, чем нет. Это не означает, что длинные форматы контента для мобильных устройств никогда не следует рассматривать. У него есть это место. Еще одно распространенное использование мобильных устройств — поиск решений проблем. Если у вас есть фрагмент длинного контента, который, например, может помочь мобильному пользователю решить проблему, вы должны сделать его доступным для него.
7 Сделайте контактную информацию и информацию о местонахождении легкодоступной
Если вы управляете веб-сайтом, который фокусируется на юморе, развлечениях, новостях, подборе актуального контента, знакомствах, или вы управляете платформой социальных сетей, люди могут заходить на ваш веб-сайт со своих мобильных устройств в целях серфинга. Если нет, велика вероятность, что человек, открывающий ваш веб-сайт с мобильного устройства, хочет связаться с вами или выяснить, где вы находитесь. Лучший способ помочь им — предоставить им эту информацию, как только откроется ваша домашняя страница.
Если у вас есть физическое местоположение, вы можете убедиться, что эта информация также включена в ваши целевые страницы. Если люди просматривают сайт после ответа на призыв к действию в одном из ваших объявлений, вы не хотите, чтобы им приходилось копаться, чтобы узнать, где именно вы находитесь.
8 Тщательно протестируйте взаимодействие с мобильным пользователем
Вот что нужно учитывать при разработке веб-сайтов, удобных для мобильных устройств:
- Есть разные размеры экрана
- Существуют различные операционные системы, работающие на мобильных устройствах.
- Пользователи могут заходить на ваш сайт с помощью различных интернет-браузеров.
Принятие во внимание всех этих трех фактов означает, что существует несколько возможных комбинаций операционных систем, размеров экрана и выбора браузера. Ваша цель, чтобы завершить свой следующий проект веб-дизайна, должна состоять в том, чтобы протестировать как можно больше возможных комбинаций, чтобы вы могли гарантировать, что каждый пользователь получит отличный мобильный опыт. Вы можете использовать приложение, такое как UxRecorder, чтобы помочь с некоторыми из этих тестов.
9 Используйте геолокацию
Геолокация чрезвычайно полезна для мобильных пользователей. Если вы внедрите эту технологию на своем веб-сайте, посетители смогут находить магазины рядом с ними, прокладывать маршруты от своего местоположения до вашего и проверять наличие продуктов в местном магазине. Как бизнес, вы сможете ориентировать контент конкретно на географическую область, делать предложения пользователям в определенных местах, устанавливать цены на товары в местной валюте и поощрять пользователей регистрироваться или добавлять свои идеи на сайтах социальных сетей, которые разделены по расположение.
10 Оптимизируйте свои формы для мобильных устройств
В идеале ни одна из ваших форм не должна быть чрезмерно длинной, и вы не должны использовать их, чтобы попытаться извлечь кучу информации от ваших пользователей в маркетинговых целях. Это раздражает и может помешать людям подписаться на ваши предложения. С мобильными пользователями это вдвойне верно. Вот почему очень важно, чтобы ваши формы были короткими, интуитивно понятными и чтобы их можно было быстро заполнить.
Вы можете сделать это, запросив только ту информацию, которая вам нужна, чтобы дать им то, на что они подписываются, предоставив им флажки и раскрывающиеся меню и используя их местоположение, чтобы заполнить некоторые поля для них.
11 Поощряйте обратную связь
Помните, что ваши пользователи не идут в ногу с «другими мобильными пользователями» или любой другой демографической группой. Они ваши клиенты и потенциальные клиенты, и у них есть уникальные потребности и поведение. Они частично обусловлены их собственными предпочтениями, а также их конкретными желаниями и потребностями, связанными непосредственно с использованием ими вашего веб-сайта.
Что это значит? Это означает, что вы можете создать идеальную для учебника версию мобильного веб-сайта, которая просто не очень хорошо работает для ваших пользователей. Вы также можете разработать веб-сайт, который, как настаивают SEO-специалисты и другие веб-дизайнеры, никогда не будет работать для ваших пользователей, который полностью соответствует потребностям вашей аудитории.
Вот почему так важно получать обратную связь от пользователей. Аналитика прекрасна, но она не заменит прослушивание того, что говорят клиенты. Вы можете использовать аналитику, чтобы определить, сколько людей проводит время на определенной странице. Чего аналитики не могут вам сказать, так это того, что они находятся на этой странице по необходимости, но ненавидят то, как она разработана. Потратьте время, чтобы прочитать комментарии, которые ваши посетители отправляют вам, и рассмотрите возможность создания опроса специально для мобильных пользователей. Затем вы можете использовать полученную от них информацию, чтобы определить, что работает нормально, а что следует пересмотреть.
Вывод
Не останавливайтесь на простой совместимости с мобильными устройствами. Воспользуйтесь преимуществами растущего числа мобильных пользователей и создайте пользовательский интерфейс, который действительно соответствует их желаниям, потребностям и ожиданиям. Мобильные пользователи больше не хотят иметь дело с веб-сайтами, которые достаточно хорошо работают на мобильных устройствах. Они требуют полной функциональности и функций, разработанных специально для них.
Независимо от того, разрабатываете ли вы новый веб-сайт или берете уже существующий на чертежную доску, возможно, пришло время рассмотреть стратегию Mobile First. В конце концов, разве это не хороший бизнес – в первую очередь учитывать самую быстрорастущую аудиторию?