Мобильный дизайн статистика фото

Мобильный дизайн сайта: рекомендации и примеры

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

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

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

Ниже приведен мой список мобильных веб-проектов и не нужно:

1. Разрешение экрана

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

2. Держите его просто

Вы больше ограничены пространством на мобильных устройствах. Не загромождайте экран слишком большим количеством ссылок или графики. Убедитесь, что интерфейс не запутывает пользователя. Чем проще, тем лучше. Если у вас мало ссылок (или вы хотите, чтобы фотографии были в центре внимания), вы можете сфокусироваться на изображениях. Субару имеет очень хороший пример:

Мобильный дизайн Subaru фото

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

3. Варианты

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

4. Навигация и ссылки

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

5. Ввод текста пользователя

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

6. Всплывающие окна

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

7. Вспышка

Еще одна вещь, о которой следует помнить, – это тот факт, что мобильные устройства Apple не могут просматривать анимацию или движение на основе Flash. Он отображается как значок и большое пустое пространство. Многие флеш-ролики можно воссоздать с помощью HTML5 и Javascript, чтобы обеспечить тот же эффект, одновременно работ. Если вы можете, упростите слайд-шоу и включите только одно сильное изображение вместо пяти. Изображения резко повлияют на время загрузки веб-сайта.

Итог

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

Leave a Reply

Your email address will not be published. Required fields are marked *