Мобильный интерфейс

Мобильный интерфейс для веб-сайта не сильно отличается от интерфейса мобильных приложений. На снимке 5 основных особенностей мобильного дизайна пользовательского интерфейса.

Пример мобильного интерфейса для веб-сайта
Мобильный интерфейс для веб-сайта
  1. Меню веб-сайта не закрывает содержание страниц, в мобильном интерфейсе оно скрыто. Меню с ссылками открывается и скрывается после нажатия на иконку (гамбургер).
  2. Поле для поиска откроется в отдельном окне с фиксированной позицией после нажатия на иконку (лупа), таким способом можно получить больше свободного пространства, например для логотипа.
  3. Иконка три вертикальные точки для открытия дополнительных настроек, например фильтр, профиль, корзина, изменение размера шрифта, выбрать цвет фона и т.д.
  4. Блок с превью (предварительный просмотр) содержит миниатюру с заголовком описанием, звездочки и количество комментариев говорит о актуальности продукта, (особенно если цена договорная).
  5. Социальные кнопки не лишают пользователя возможности быстро поделится страницей в социальной сети.

«jQuery Mobile» в помощь.