|
главная > блог > UI и супер-адаптивная верстка
UI и адаптивная верстка для десктопа и смартфона
1. Основы удобства: зрение и размер шрифта.
Чтобы удобно было читать такст на экране, он не должен быть слишком мелким.
Что такое не слишком мелкий? Опыт пользователей закреплен в еще советском ГОСТе для полиграфии: книги, газеты и журналы должны быть напечатаны шрифтом не менее 10 кегля. Рекомендуемые размеры основного текста 10-12 кегль. Для пожилых людей и детей рекомендуется 13-14 кегль. Разберемся с кеглем:
Т.е. шрифт для чтения книги (держим в руках, расстояние 40см от глаз) должен быть не менее 3.7мм, это значит, что строчные буквы должны быть высотой не менее 2.3 мм. Тогда будет приемлимо по удобству. Чуть крупнее - еще лучше.
Эргономика, удобство чтения зависит от углового (по высоте) размера букв: т.е. от расстояния до книги и физического размера буквы. Пересчитаем для современных электронных устройств:
Картинка выше выплнена с сохранением реальных пропорций. Серая сетка - по 10см.
Серая зона - наибольший популярный размер книги, смартфона, ноутбука, монитора (в продаже на Яндекс-Маркете). Черная зона - наименьший популярный размер. В табличке слева представлены расчетные размеры минимального шрифта с учетом типовых расстояний до носителя текста.
Проверяя свой веб-сайт, вы можете взять линейку и сравнить с рекомендованными размерами.
Удобные размеры шрифта:
Книги:
расстояние 40см
высота 20-30см
10 кегль
шрифт 3.7мм
строчные 2.3мм
Смартфоны:
расстояние 30см
высота 13-18см
шрифт 2.7мм
строчные 1.7мм
Ноутбуки 14"-18"
расстояние 55см
высота 18-24см
шрифт 5мм
строчные 3.2мм
Мониторы 24"-30"
расстояние 75см
высота 31-40см
шрифт 7мм
строчные 4.3мм
2. Дизайн макетов и верстка под смартфоны.
Кроме проблемы не сделать шрифт слишком мелким, для смарфтфонов есть еще и задача не сделать слишком мелкими кликабельные зоны элементов. Удобная для пользователя, эргономичная зона касания - 1х1 см. Это размер связан с размером пальца. Именно такая зона должна выделяться под каждый кликабельный элемент. И между ними должно оставлять расстояния. Зона 1х1см была прописано, например, в гайдах для разработчиков компании Нокия.
Существует отдельная "проблема больших пальцев" - в этом случае рекомендуется выделять на каждый кликабельный элемент зону 2х2см.
Типовым решением была адаптивная верстка с учетом разных разрешений экранов смартфонов. Однако, на сегодняшний день этот подход не обеспечивает удобство для пользователей, поскольку при одном физическом размере экрана его разрешение на разных смартфонах может отличаться более чем в два раза.
Например, ширина разрешение экрана самого популярного размера смартфонов 6.5" варьируется от 720px до 1644px (Яндекс-Маркет, начало 2023г). Т.е. более чем в два раза. Соответственно, ориентируясь на разрешение в пискселах невозможно обеспечить удобный интерфейс по минимальному размеру шрифта и размеру кликабельных элементов.
Есть красивое решение - сверстать единую мобильную версию в точных размерах в px (например, под 720px по ширине) и добавить тег: meta name="viewport" content="width=720".
В результате браузеры самостоятельно отмасштабируют страницу под смартфон. Физические размеры экранов смартфонов отличаются незначительно, по сравнению с отличием в разрешениях (как вы видели на схеме выше и видите на схеме ниже). Поэтому страница будет одинаково удобна пользователям разных моделей смартфонов с разным разрешением экранов. Почему 720px - таково популярное физическое разрешение по ширине экранов многих смартфонов. Следующиее популярное разрешение по ширине 1080px.
Пример макетирования под реальные размеры смартфонов. Синие крестики - сетка 1см. Отмасштабируйте изображение на вашем мониторе так, чтобы 1см на экране совпал с 1см на линейке.
На картинке представлены несколько размеров экранов популярных смартфонов. Самый популярный на конец 2020 года - 6.5 дюймовый экран. Самый большой в магазине DNS - 7". Однако следует учитывать, что много пользователей пользуются смартфонами с меньшими размерами экранов.
Как вы видите, размеры иконок четко соответствуют размеру 1х1см.
Их и следует использовать в разработке мобильного интерфейса.
За минимально допустимые размеры кликабельных элементов можно принять дефаултные размеры виртуальной клавиатуры на соответствующем смартфоне.
Сравните с этими размерами свой макет и доведите кликабельные элементы до удобного пользователю размера.
На изображении вы видите 2 варианта напки сайта.
Вариант 1 сверстан масштабируемой версткой не завясящей от разрешения:
Размеры элементов заданы в пикселах на макете 720px шириной.
В коде задан параметр viewport=720.
Как вы видите, с увеличением физического размера экрана смартфона удобство для пользователя только возрастает и приближается к рекомендованному стандарту только на больших смартфонах.
Вариант 2 сверстан под устаревший маленький смартфон с зависимость от разрешения экрана. Наиболее удобна данная верстка только на устаревшем маленьком смартфоне. С увеличением физического размера смартфона usability интерфейса (удобство для пользователя) - падает, элементы становятся всё мельче и не используется возможность их укрупнить.
3. Дизайн макетов и верстка под десктопы и ноутбуки.
При адаптации под различные экраны ноутбуков и десктопов традиционная веб-разработка пошла путем изменения размеров элементов под различниые разрешения мониторов. В основном дизайнеры делают макеты под два разрешения: под условно "небольшое" (планшеты и небольшие ноутбуки) и под все остальные мониторы. При этом на одном разрешении (например, 1366px по ширине) - сайт смотрится удобно, а при увеличении разрешения (при сохранении физического размера экрана) - сайт растягивается по ширине за счет растяжения элементов или боковых полей.
Это было приемлимо, когда ноутбуки и десктопы имели незначительные варианты по разрешению. Но сейчас варианты разрешения монитора увеличиваются и ноутбуки одного размера экарана могут отличаться разрешением в несколько раз. На начало 2023г. на рынке широко представлены:
- ноутбуки типовых размеров с разрешением от 1280 до 3840 пикселов по ширине;
- мониторы с разрешением от 1280 до 7680(31") пикселов по ширине.
На начало 2023г. самый популярный в продаже размер монитора 27" имеет ширину разрешения от 1920px до 5120px - т.е. разрешение различается более чем в два раза. Соответственно, делать макет ориентируясь на разрешение - нереально.
Поэтому многоие сайты выглядят неудобно на мониторах большого разрешения - слишком мелкие элементы и тексты. Пример:
Для своих проектов эту проблему я решаю следующим образом:
1. Попиксельный дизайн-макет делается таким образом, чтобы макет под смартфон и макет под десктоп соответствовали друг другу без необходимости менять пиксельные размеры элементов, например карточки товара и размера изображения в ней. Это минимизирует время на дальнейшую верстку, необходимый CSS и размеры подготовленных изображений. Что позволяет достигать высокого быстродействия, нужного для SEO продвижения.
2. В CSS прописываю параметры необходимые для мобильной версии.
3. Десктопная версия дизайн и попиксельная верстка под ширину 1920px. Для десктопной версии добавляю в CSS блок @media screen and (orientation: landscape) , куда прописываю необходимые изменения. Поскольку попиксильный десктопный дизайн изначально во многом совпадает с мобильным - изменения в CSS минимальны.
4. Для масштабирования десктопной версии под разные рамеры мониторов весь вывод делается в обертке DIV id="pageContent" с CSS: #pageContent{ transform-origin:0% 0%};
5. Эмуляцию viewport-поведения обеспечивает CSS. Для расчета коэффициента масштабирования использую следующий скрипт:
function funAddScreenWidth(){
var screenWidthByJS = window.innerWidth;
var koefZoom = screenWidthByJS/1920;
document.styleSheets[0].insertRule("#pageContent{ transform:scale("+koefZoom+"); }");
}
function funResizeWindow(){
var screenWidthByJS = window.innerWidth;
var koefZoom = screenWidthByJS/1920;
document.getElementById('pageContent').style.transform = 'scale('+koefZoom+')';
}
if( screen.width>screen.height ) {
funAddScreenWidth();
window.addEventListener("resize", funResizeWindow);
}
Получается следующий результат - сайт смотрится одинаково удобно на разных десктопах и ноутбуках, время на адаптивную верстку сокращается:
При этом на физически больших мониторах всегда есть возможность перетянуть, изменить размер окна браузера с сохранением отображения сайта на всю ширину окна.
|
