первый экран уже собран) перед сдачей открываю его на 320, 390, 800 и 1280
Четыре числа до файлов
Своего телефона мало. Это одно окно. У вас на столе ноутбук. У клиента часто другой телефон, уже или шире.
Перед файлами я открываю первый экран на четырёх ширинах. 320. 390. 800. 1280. Это ширина окна в пикселях. Не диагональ и не «ну вроде влезло».
Так закрывал первый экран услуги «Строительный контроль». На нём заголовок услуги и польза. Рядом основания доверия. Опыт. Инженерная команда. СРО. ISO. Обследованные объекты. Логотип в SVG и фирменная палитра. География. Ссылка на ISO. В инженерной подаче крупный заголовок и строительный визуал.
Блоков много. На узком окне они встают столбиком. На широком собираются в ряд. Пока не увижу все четыре ширины, файлы рано отдавать.
Как собрать сам заголовок, у меня есть отдельный разбор. Здесь линейка. Смысл уже лежит на экране. Я смотрю, цел ли он, когда окно другое.
320. Нижняя полка
320 — самая узкая из четырёх. С неё начинаю. Если здесь спокойно, более широкий телефон обычно тоже держится. Наоборот не работает. На 390 бывает ровно, а на 320 уже едет край.
Заголовок смотрю первым. «Строительный контроль» не должен стать лесенкой, где в строке сидит одно слово. Крупный набор инженерной подачи на 320 переносится часто. Перенос нормальный. Лесенка из коротких обрубков — нет.
Дальше кнопка. Она остаётся кнопкой. Слово на ней читается целиком. Край кнопки не уезжает за окно. Горизонтальной прокрутки на первом экране нет. Палец не ищет, куда делась половина фразы.
Основания доверия на 320 становятся списком. Опыт, команда, СРО, ISO, объекты. Список можно. Плохо, когда этот список выталкивает кнопку так далеко, что первый взгляд видит только абзац. Услугу и следующий шаг человек должен увидеть без долгого листания.
Длинные слова проверяю отдельно. «Обследованные» легко упирается в край, если размер букв ещё от широкого окна. Короткое «СРО» и «ISO» тонут, если их уменьшили до подписи. И длинное слово, и короткое остаются словами.
Логотип на узкой ширине съедает строку. SVG тянется. Широкий знак оставляет заголовку крошки. Знак меньше. Заголовок читается. Палитра не заливает кнопку так, что её не отличить от фона.
География и ссылка на ISO — короткие строки. На 320 они липнут к кнопке или прячутся под визуалом. Зона ссылки должна попадаться пальцем. Не соседний блок.
390. Телефон, который чаще в руке
390 шире трёхсот двадцати на семьдесят пикселей. На бумаге мелочь. В строке первого экрана это другая ширина фразы.
Заголовок, который на 320 занял три строки, здесь часто встаёт в две. Кнопка получает нормальную ширину. Визуал снизу уже не почтовая марка. Каждую ширину открываю отдельно. Спокойная 390 не закрывает вопрос по 320. Спокойная 320 не закрывает 390.
Семидесяти пикселей хватает на новую дыру. Отступ, который спасал узкое окно, на 390 даёт пустой бок. Кнопка перестаёт быть на всю колонку и липнет влево. Доверие хочется поставить в два столбца. Два столбца на телефоне превращают «СРО» и «ISO» в крошки. Пока подписи короткие, оставляю один столбец.
Строительный визуал на 390 либо живёт под текстом, либо его режет край. Обрезанная схема хуже, чем схема ниже заголовка. Человек видит обрубок и не понимает, что перед ним. Целиком и ниже — рабочий вариант.
800. Здесь включаются две колонки
800 — не телефон стоймя и не ноутбук на весь стол. Планшет. Или окно, которое не развернули. Эту ширину пропускают чаще всего. Смотрят свой телефон и сразу широкий экран.
Здесь экран норовит стать широким раньше времени. Текст слева, визуал справа. На «Строительном контроле» справа как раз схема и крупный заголовок. Если разделить слишком рано, схема сжимается в печать. Заголовок получает короткую строку. Три слова и большие дыры между ними.
Если оставить одну колонку, страница выглядит как растянутый телефон. Поля по бокам пустые. Польза сидит узкой полосой по центру. Ширина есть. Первый взгляд её не берёт.
Доверие на 800 уже можно в ряд. Пять отметок. Смотрю, чтобы ряд не превратился в пять точек. И чтобы одна отметка не перескочила на вторую строку в одиночку.
Кнопка в двух колонках часто остаётся под левым текстом и тонет. В одной колонке плавает в пустоте. На 800 должно читаться то же, что на 320. Какая услуга. Зачем она. Почему вам можно верить. Куда жать.
1280. Окно, в котором откроют файл
1280 — обычный ноутбук. Здесь собирается вид, который ждут в файле. Крупный заголовок. Строительный визуал. Логотип. Палитра. География на своём месте.
У широкого окна свои поломки. Заголовок одной строкой на всю ширину, между словами провалы. Кнопка уезжает в угол и выглядит чужой. Визуал накрывает ссылку на ISO или строку географии. Пустые поля такие большие, что экран кажется пустым, хотя блоки на месте.
PNG и PDF открывают на компьютере. Легко оставить в голове только 1280. Файл красивый. Телефон откроют уже после сдачи. Поэтому 1280 у меня в том же проходе, что и 320. Не вместо него.
Сверяю текст. Тот же заголовок услуги. Те же основания. Та же кнопка. Один экран на всех четырёх окнах.
Сначала ширины, потом PNG и PDF
Порядок фиксированный. Сначала правки смысла. На этом экране это заголовок услуги, география, СРО, ссылка на ISO, палитра и SVG-логотип. Потом четыре ширины уже на актуальном виде. Потом файлы.
Отдаю PNG и PDF того, что только что открывал. Не файл, снятый до правки географии. И не четыре отдельных файла «на каждый телефон». Один актуальный экран. Он держит 320, 390, 800 и 1280.
Если на 320 поехала кнопка, чиню экран и прохожу ширины снова. В файл кладу экран, на котором все четыре спокойные.
Про подачу «Строительного контроля» у меня есть отдельный разбор. Там смысл и доверие. Здесь линейка, без которой я этот экран не отдаю.
Проверьте у себя
Откройте первый экран на четырёх ширинах. 320, 390, 800, 1280. В браузере ширину можно задать числом. Не только со своего телефона.
- На каждой ширине одной фразой понятно, что вы продаёте.
- Кнопка следующего шага видна. Слово на ней целое.
- Вбок страница не едет.
- Заголовок не распался на одно слово в строке.
- Знак не съел заголовок и не слился с кнопкой.
- Короткие поводы доверия читаются. Это слова, не серая пыль.
- Длинное слово не упирается в край и не обрезано.
- На 800 схема не стала почтовой маркой в узкой колонке.
- На 1280 нет провалов между словами и кнопки, потерянной в углу.
- Узкое окно и широкое говорят одно и то же.
Если на 390 ровно, а на 320 уже режется край, чиню до рекламы. Объявление как раз приведёт человека на узкое окно.
Частые вопросы
Хватит своего телефона?
Нет. Ваш телефон — одна ширина. Часто она рядом с 390. 320 уже. 800 и 1280 телефон не покажет, пока вы сами не сузите окно или не откроете ноутбук. На сдаче я смотрю все четыре. Галочку «с телефона открылось» вместо них не ставлю.
Планшета под рукой нет. 800 можно пропустить?
Не пропускаю. Сузьте окно на ноутбуке примерно до 800. Здесь страница часто делится на две колонки. Схема мельчает, кнопка остаётся в левой половине. Телефон этого не покажет. Ноутбук на весь экран тоже.
PDF уже красивый. Зачем ещё телефоны?
PDF открывают на компьютере. Это вид около 1280. Человек с рекламы часто приходит с телефона. PNG и PDF я отдаю после четырёх ширин. Красивый файл, у которого на 320 обрезана кнопка, отдавать рано.
Так смотреть весь сайт?
Первый экран закрываю этим набором. Корзина, форма и каталог живут своими шагами. Про корзину на телефоне у меня отдельный разбор. Перед файлами первого экрана мне нужны 320, 390, 800 и 1280. Смысл на месте. Кнопка на месте. Край на месте.
Если хотите, чтобы я посмотрел ваш случай, посмотрите услуги и цены.