Шапка на телефоне — одна строка менюPhone header — one row of menu
· Открыть на сайтеOpen on the site
ЦельGoal
С телефона инвестор открывает страницу ради её содержимого — номеров, цен, фактов. Первый экран должен показывать их, а не меню; меню при этом остаётся под рукой и легко нажимается пальцем.On a phone an investor opens a page for its content — rooms, prices, facts. The first screen should show that, not the menu; the menu still stays at hand and is easy to tap with a finger.
ЗадачаProblem
На телефоне 390 px меню переносилось: по-русски «Метод» уходил на третью строку, и шапка занимала 128 px — 15% экрана; по-английски — 94 px. Пункты меню были высотой 31 px — меньше удобных для пальца 44 px.On a 390 px phone the menu wrapped: in Russian «Method» fell to a third line and the header took 128 px — 15% of the screen; in English 94 px. Menu items were 31 px tall — under the finger-friendly 44 px.
Как решилиHow it was solved
- Пять пунктов меню — одной строкой под названием сайта, на всю ширину; текст чуть мельче на узких экранах.The five menu items sit in one row under the site name, across the full width; the text is slightly smaller on narrow screens.
- Каждый пункт — высотой 44 px; текущий раздел отмечен полосой под словом.Each item is 44 px tall; the current section is marked with a bar under the word.
- На очень узких экранах (320 px) название сайта чуть мельче, чтобы кнопка «Мои параметры» осталась в его строке; меню не переносится, а при нехватке места прокручивается вбок, страница не сдвигается.On very narrow screens (320 px) the site name is slightly smaller so the «My details» button stays on its line; the menu does not wrap and, if short of room, scrolls sideways; the page does not shift.
- Итог: шапка 85 px на обоих языках при 390 и 320 px (было 128 / 94 при 390 и до 159 при 320); на компьютере без изменений.Result: an 85 px header in both languages at 390 and 320 px (was 128 / 94 at 390 and up to 159 at 320); unchanged on desktop.
До и послеBefore and after
