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