Настольная книга веб-дизайнера. Практический курс по веб-дизайну и проектированию сайтов

Десктоп (настольный компьютер): 1920 пикселей (будут поля слева и справа)

Планшет вертикально: 768 пикселей, Ipad: 1024 пикселя

Мобильные телефоны: 320 пикселей, см.рис.113.

Рис.113. Ширина дизайна сайта для разных устройств

Но, кроме ширины, в дизайне мобильной версии надо еще задать длину, как правило, она равняется длине экрана конкретного устройства. См. рис.114.

Рис.114. Размеры экранов мобильных устройств

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

3. Чем отличается мобильная версия от адаптивной?

Мобильная версия может полностью отличаться от основного сайта: от общей концепции до наполнения блоков контентом. Мобильная версия – это отдельный сайт, со своим адресом, интерфейсом и зачастую заметно измененной структурой. Это полноценный второй сайт со своей вёрсткой. В ссылке вы обычно видите букву “m” или “mobile”, а далее следует привычный адрес ресурса (например, m.imagika.ru). Среди плюсов – быстрая загрузка и возможность переключаться между версиями. Трудности могут возникнуть с SEO и с отсутствием единого адреса.

Мобильная версия располагается на поддомене. Поддомен – это «подсайт», говоря простым языком. Он работает как самостоятельный ресурс, но все же является частью основного сайта, расположенном на домене.

Адаптивный дизайн – это не другой сайт, а тот же, но свёрстанный так, что открывается нормально на любых экранах. Он по информации не отличается от обычного десктопного сайта. Мобильная же версия может содержать меньше информации, быть лаконичнее. Адаптивный сайт – это единственный сайт, который приспосабливается под размеры экрана. В коде прописано, какие блоки и как показывать на разных устройствах.

Плюсы: один адрес и удобство разработки. Минусы: долгая загрузка и предопределенная судьба пользователя: он не сможет поменять интерфейс, если тот покажется неудобным.

Респонсивный дизайн или RESS (Responsive design + Server side), он же «отзывчивый» дизайн. Сайт тоже один, но в нем заложено несколько независимых шаблонов для разных устройств. Плюсов много – единый адрес, быстрая загрузка, возможность переключиться на десктоп с мобильного устройства. Минусы – дорогая и сложная разработка.

И мобильная версия, и адаптивный дизайн создаются с одной целью – сделать сайт удобным для пользователей, которые заходят на него со смартфонов, планшетов и других гаджетов, отличных от десктопа.

Какой метод выбрать – это зависит от проекта, над которым вы работаете. Адаптивный дизайн отлично подойдет для небольших сайтов и интернет-магазинов. Мобильная версия подойдет для тех ресурсов, где важна высокая скорость загрузки: социальные сети, почта, новостные каналы.

4. Что нужно учесть при разработке мобильной версии

1. Иерархия контента

Экран смартфона можно поделить на зоны восприятия, основное внимание попадает на центральную часть, где и следует располагать самые важные элементы.

Пространство над и под основным содержанием для контента имеет второстепенную важность.

Самая верхняя часть экрана используется для неважной информации и элементов.

Также есть правило «большого пальца», поскольку большинство людей касаются дисплея только им. В зависимости от того, как большинство людей держит смартфон, есть зоны, до которых легко и сложно «добраться».

Используйте легкодоступные зоны для расположения важного контента.

2. Ширина контента

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

Чем меньше экран, тем меньше колонок можно эффективно отразить.

3. Удобный шрифт

Чтобы пользователю не приходилось увеличивать или уменьшать масштаб, используйте подходящий размер шрифта. Минимальный размер основного текста может быть в пределах от 16 рх (пикселей) до 18 рх.

Apple в руководстве Human Interface Guidelines рекомендует 17 рх.

Google в Material Design рекомендует 16 рх.

Но если буквы очень тонкие, можно сделать и 18 рх.

Выбирайте шрифты, которые хорошо масштабируются и состоят в одном семействе. Например, Noto Serif и Noto Sans, создатели делают так, чтобы они хорошо сочетались между собой. Не используйте на сайте больше 2 типов шрифтов, это будет замедлять загрузку сайта.

4. Размеры меню