Учитывая все текущие разговоры о мобильных веб-сайтах и адаптивном дизайне, вполне возможно, что ваша компания или ваши клиенты планируют перейти в мобильное пространство.
Создание дружественного для мобильных устройств веб-сайта означает переосмысление процесса проектирования для различных экранов на нескольких мобильных платформах. В то время как планшеты могут обрабатывать весь ваш веб-сайт, экраны смартфонов ограничены с точки зрения пространства, и ваша задача — предоставить их владельцам совершенно другой пользовательский интерфейс, который, несомненно, должен быть положительным.
То, как вы этого достигнете, может включать много разных шагов и подходов. Однако, по моему опыту, появились некоторые основные рекомендации, общие для почти всех проектов, связанных с дизайном для мобильных устройств. Вот 10 советов, которые могут вам помочь.
1. Сохраняйте это простым.
Имейте в виду, что простота является абсолютной необходимостью для мобильного сайта. Даже для сайта с настольным компьютером перегруженность контентом часто не годится. Но когда мобильный сайт тяжелый, это вовсе не означает дружелюбие. И чрезмерно усложнить мобильный сайт намного проще.
2. Будьте кратки.
Какова цель дизайна мобильного приложения или мобильного сайта? Таким образом пользователи получают доступ к ним так быстро, насколько это возможно, с минимальным количеством нажатий, ударов и необходимого внимания. Если экран можно пропустить, пропустите его — на мобильном сайте не должно быть ничего лишнего.
3. Откройте дверь.
Но прежде чем ваши посетители начнут просматривать ваш сайт, они должны войти в него. Поскольку сервер идентифицирует мобильные устройства, убедитесь, что мобильные посетители автоматически перенаправляются на мобильную страницу.
4. Рассмотрим контекст.
Выбирая функции и контент для своего сайта, не спешите, продумайте их, подумайте, что понадобится вашим посетителям и что они будут искать. Это может быть функция прямого общения между вами и вашими посетителями (телефонный номер, возможность звонка по клику, функция онлайн-бронирования / бронирования и т. Д.). Это может быть список основных услуг с информацией; Вы можете предоставить пользователям места в случае необходимости. Вы сами определяете, что необходимо в вашем конкретном бизнесе, и на которое сначала нужно обратить внимание мобильных посетителей. Помните, что действия, которые человек может захотеть предпринять при использовании своего мобильного телефона, не обязательно совпадают с действиями при использовании настольного компьютера дома или ноутбука в офисе. В то же время, в мобильной версии не нужно долго загружать биос и другой вторичный контент.
5. Держите это коротким.
Не допускайте слишком много ввода текста для пользователей. Это довольно серьезная проблема в мире планшетов, не говоря уже о смартфонах, где набирать текст, превышающий твит, сообщение или комментарий, очень больно. Даже если вам по какой-то причине требуется заполнить форму, например, зарегистрироваться, убедитесь, что она короткая — логин / адрес электронной почты и пароль или что-то еще. Каждое дополнительное поле снижает удовлетворенность пользователя.
6. Бренд это.
Конечно, вы хотите, чтобы дизайн вашего сайта демонстрировал ваш бренд с логотипом, цветами и стилем, чтобы он был мгновенно узнаваемым. Всегда есть способ аккуратно включить их в дизайн, не нанося ущерба удобству использования.
7. Не переполняйте.
Не планируйте размещать слишком много информации на одной странице экрана. Это возвращает нас к переполнению интерфейса и усложняет навигацию. Любой посетитель должен иметь возможность легко просматривать страницы вашего сайта без какого-либо давления на внимание.
8. Будьте ясны.
Держите ваши мобильные страницы как можно более четкими. Если необходимо получить доступ к полной информации по какой-либо проблеме, может быть ссылка на полную версию вашего сайта.
9. Дизайн для экрана.
Ваши дизайнеры проконсультируют вас по вопросам выбора внешнего вида вашего мобильного сайта. Это такие правила, как правильный размер кнопок и промежутки между ними (для предотвращения нажатия неправильной кнопки); избегать перегрузки страниц различными изображениями; или оставить эти навязчивые всплывающие окна. Все эти и другие предложения сделают ваш сайт более привлекательным, потому что здесь привлекательность означает удобство в использовании.
10. Тест на совместимость.
Определите диапазон устройств, чтобы ваш веб-сайт мог быть должным образом протестирован на них: различные устройства, версии операционной системы и разрешения экрана. Компании-разработчики имеют хранилище мобильных устройств для тестирования, поэтому вам остается только выбрать.
Если вы примете все или даже большинство из этих рекомендаций, вы значительно упростите дизайн для мобильных устройств.
И если вам понравилось читать этот пост, вы полюбите Learnable ; место, чтобы узнать новые навыки и приемы у мастеров. Участники получают мгновенный доступ ко всем электронным книгам и интерактивным онлайн-курсам SitePoint, таким как адаптивный веб-дизайн Jump Start .
Комментарии к этой статье закрыты. У вас есть вопрос о разработке мобильных веб? Почему бы не спросить об этом на наших форумах ?