Добро пожаловать на мой новый сайт:
Я начал думать над новым дизайном много лет назад, но в конце лета наконец сел доделывать, и вот — открываю. Работы ещё много, но я решил, что лучше докручивать по живому, чем тянуть много месяцев. Там внутри большой задел на будущее развитие.
Зацените адаптив от 320 до 3200 и хитрую навигацию по проектам.
Адаптив
Вот как ведёт себя адаптив на сегодняшний день (кое-что ещё буду допиливать постепенно):
Посмотрите, сколько всяких мелочей происходит, чтобы в каждом размере всё смотрелось хорошо и нигде нельзя было подумать, что это какой-то «неправильный» размер.
Обычно делают типа «телефон», «десктоп поуже» и «десктоп пошире», а что там между — ну как пойдёт. Особенно достаётся всяким ширинам типа 800, на них вообще никто не смотрит. А тут нет никакого «между», есть просто континуум. Смотришь на сайт на телефоне горизонтально? Ну ок, всё равно получай идеальный вариант.
Отдельно зацените меню:
Во-первых, при сужении экрана строки становятся выше, чтобы на мобиле пальцем было проще попадать. Причём там плавная кривая, чтобы нельзя было заметить, что вот с какой-то ширины они вдруг резко начали расти. И разумеется, если открыть даже на большом тач-экране, расстояния всё равно будут большими.
Во-вторых, зацените как пункт «Илья Бирман» залипает наполовину. Фотка остаётся, чтобы всегда была ссылка на главную, а остальное начинает прокручиваться под неё, чтобы на тесной ужине́ больше влезало.
На горизонтальном Айфоне в качестве полей используется место под камерой и такое же симметрично справа, чтобы максимум полезной ширины отдать контенту и не городить ещё дополнительные поля к этому (как делают почти все остальные). При этом всё, что прокручивается, спокойно вылезает в эти поля, не беда.
Оказывается, оно вмещается даже в часы:
Тоже всё прокручивается так же. Я сам удивился, это мне в комментариях показали. Прикольно! Правда, там не всё работает, и теперь появился соблазн докрутить. Но часы рендерят так, как если бы ширина была 320, так что никаких новых приёмов там не применяется.
Навигация
Что касается навигации, то проблема в том, что многообразие моих продуктов, проектов и затей ну никак не ложится в классическую древовидную структуру сайта. Вот есть какой-нибудь Вайрлесс-диджей:
Он вроде и продукт, но и как пример работы над интерфейсом его хочется показать. В то же время, у меня есть разные другие штуки про музыку, и хочется их всех как-то объединить в тему «штуки про музыку». Поэтому у меня страница может находиться сразу в нескольких разделах меню и состоять из нескольких строчек, провязывающих её с другими страницами. Это не говоря о том, что, как видите, она ещё сама может разделяться на подстраницы с версиями или подразделами.
Или вот взять схему челябинских трамваев:
Это, конечно, схема, и хочется её показать в контексте других схем. Но она ведь и одна из работ, что я делал для Челябинска, и хочется показать её среди других работ для Челябинска. И вот теперь я так могу сделать.
Зацените, что происходит при переключении между страницами, когда связи с другими меняются. Например, с этой страницы схемы трамваев можно уйти в адресные таблички, и тогда она уже провяжется с другими адресными табличками; а можно — в знак выделенки, и тогда она уже провяжется с другими знаками.
Ещё моментик на стыке адаптива и навигации: когда любой строчке меню не хватает ширины и она прокручиваеся, она всегда изначально подкручивается так, чтобы выбранный пункт меню был виден. Поэтому на телефоне всегда сразу видно, где ты.
Ну и в концах страниц проектов теперь тоже есть ссылки на связанные проекты:
Расскажите, какие видите косяки в каких случаях.