Прежде всего, у современного сайта должна БЫТЬ мобильная версия, или, что еще лучше, — адаптивный дизайн сайта должен сразу идеально подстраиваться под различные типы устройств. Адаптивность вашего дизайна — это не только растягивание или сжимание размера картинок и шрифтов, но множество других вещей:
Размеры
Также не забудьте, что во все ваши интерактивные элементы: кнопки, пиктограммы, ссылки и т. д. — мог попасть пальцем не только искусный пианист, но довольно средний пользователь. Именно поэтому для мобильных версий крупная пиктограмма зачастую более удобный для тапа элемент, нежели тонкая короткая ссылка. Размер интерактивного элемента для вашего мобильного пользователя — имеет первостепенное значение!
Отступы
Расстояния между активными объектами также предельно важны. Нет ничего хуже, когда ссылки подтверждения и отмены операции находятся настолько близко, что клиент, желая выбрать согласие, — пальцем задевает заодно и опцию отказа. Пустоты между строками, кнопками, иконками в вашей мобильной версии должны занимать от 40% всего экранного пространства и даже больше.
Человек устроен так, что сливающие строки текста никто не станет читать, а в наехавшие один на другой пункты горизонтального меню — целиться пальцем.
Без клавиатуры хорошо!
Сегодня мобильные пользователи в большинстве своем крайне не любят лишний раз пользоваться виртуальной клавиатурой на телефоне. Поэтому вам стоит задуматься: "А сможете ли вы где-либо заменить стандартное поле ввода информации на более удобный элемент интерфейса? Например на так называемые ползунки
Не всегда это возможно, но стремиться к избавлению вашего клиента от регулярного набора букв и цифр на экране — это хорошее решение для улучшения качества юзабилити.
Минимум форматов и переходов
Также стоит упомянуть, насколько пользователям на телефоне бывает неудобно переходить от страницы сайта к скачиванию файла, к просмотру word-овского документа или к калькулятору, к записной книге контактов, к новой вкладке браузера — а затем возвращаться назад на вашу страницу. При первой же возможности нужно обязательно снижать количество лишних форматов, переходов, дополнительных загрузок в вашем типовом сценарии взаимодействия, оставляя для мобильной версии только самые необходимые действия.
Скорость загрузки
К сожалению, приходится признать, что скорость загрузки вашего сайта на телефон все еще остается принципиальным фактором в глазах многих пользователей. Несмотря на быстрое развитие сети 4G, достаточно много людей все еще сидят на довольно медленных подключениях к интернету, и поэтому вовсе не хотят слишком долго дожидаться загрузки всей вашей информации, медиафайлов и анимаций.
Вообще, мода на плоский дизайн в свое время получила такое широкое развитие отчасти еще и потому, что она значительно упрощает и облегчает визуальную составляющую дизайна, а значит даже с медленным соединением ваш потенциальный клиент гораздо скорее может изучить ваше предложение и перейти к совершению заказа.
Сторонние решения
Задумайтесь, удобно ли будет клиенту с недорогим смартфоном в руке пользоваться вашим онлайн-чатом или каждые 2 минуты закрывать выскакивающие на него окна с предложением перезвонить в течении 20 секунд? Конечно же нет, но он будет вынужден это делать, если вы не оставили ему выбора и более удобных инструментов взаимодействия. Или, что еще вероятне, покинет такой сайт, код которого чрезмерно напичкан сторонними продающими решениями, более пригодными для ПК-версии.
Сначала - мобильные!
Если же вы только планируете спроектировать ваш сайт, то четко следуйте правилу: "Сначала мобильные”. Ориентация прежде всего на мобильного пользователя очень поможет минимизировать требования к вашему дизайну, оптимизировать создающийся контент и последовательность действий, упростить сценарий взаимодействия, то есть попросту отсечь все лишнее.
При таком подходе уже гораздо проще будет перевести ваш лаконичный мобильный сайт к его десктопной версии. Более подробно данную методику проектирования описывает замечательная книга.