Графики климата читаются на телефонеClimate charts are readable on a phone
· Открыть на сайтеOpen on the site
ЦельGoal
Инвестор, который хочет сам приезжать в свой номер, смотрит на странице города температуру воздуха и моря, осадки и загрузку отелей по месяцам и сразу находит свой месяц. Это сценарий «Отдых в своём номере» из задачи сайта.An investor who wants to stay in their own room checks the city page for air and sea temperature, rainfall and hotel occupancy by month and finds their month at once. This is the «Holiday in my own room» scenario of the site's brief.
ЗадачаProblem
Графики рисовались картинкой шириной 640 и пропорционально сжимались под экран. На телефоне подписи месяцев и делений получались размером 6 px — прочитать «янв», «фев» или «20°» было невозможно, только открыть таблицу. На компьютере подписи были 9,5 px. Нормальный минимум для текста — 11–12 px.The charts were drawn as a 640-wide picture and scaled down to the screen. On a phone the month and tick labels came out at 6 px — «Jan», «Feb» or «20°» were unreadable; only the table helped. On desktop the labels were 9.5 px. The usual minimum for text is 11–12 px.
Как решилиHow it was solved
- Каждый график рисуется в двух вариантах — широком для компьютера и узком для телефона; на экране показывается подходящий. Подписи остаются ~12 px, а не сжимаются вместе с картинкой.Each chart is drawn in two variants — a wide one for desktop and a narrow one for phones; the right one is shown. Labels stay at ~12 px instead of shrinking with the picture.
- Касается всех графиков страницы города: температура воздуха и моря, осадки, загрузка отелей. Данные, таблица и источники не менялись.This covers all charts on a city page: air and sea temperature, rainfall, hotel occupancy. The data, the table and the sources did not change.
- Итог: самая мелкая подпись на телефоне 11,7 px вместо 6,2, на компьютере 11,7 вместо 9,5; графики на телефоне стали выше — 186 px вместо 114.Result: the smallest label is 11.7 px instead of 6.2 on a phone and 11.7 instead of 9.5 on desktop; phone charts are taller — 186 px instead of 114.
До и послеBefore and after
