live.miripiruni.org

Тогда бы я обязательно подправил стили для главной страницы:

h1 img{font:4.3em "Arial Narrow",serif}

Чтобы, пока картинка с новым логотипом грузится или отключена совсем, все мальчики и девочки видели альтернативный текст не гарнитурой serif (как это происходит сейчас), а гарнитурой, максимально похожей на ту, что используется в лого.

Левая часть с Arial Narrow, правая — с serif.

Жаль, что псевдокласс :first-letter можно применять только к блочным элементам. А так хорошо смотрелась бы красная буква «Я» в альтернативном тексте.

Мелочь, но приятно.

Привет! У меня в вам вопрос: сколько времени вы тратите на типовые операции при верстке? Например, часто дизайнеры рисуют блок с сервисной навигацией, в которой обычно один и тот же набор иконок. Отличаются такие менюшки только внешним видом, да и то не сильно. Если вам часто приходится верстать такие навигации, то как вы поступаете? Вот мой метод. Попробуйте посмотреть с отключенными картинками и CSS.

Преимущества такого способа

1. Доступность навигации при серфе без картинок и без CSS.
2. Красивая семантически логичная разметка
3. Легкое редактирование иконок (они объединены в один gif файл)

В таком способе нет ничего нового или экстраординарного, но надеюсь он окажется кому-нибудь полезен. Замечу также, что таким методом можно сверстать не только блок с домиком, картой сайта и фидбеком, но и для любой другой блок похожего типа.

Но вот такого я никак не ожидал… Вот те на…

Как и обещал в самом начале, я проделал довольно большую доскональную разборку кода движка e2. Что-то изменил, что-то добавил и что-то выкинул. Мотивация моих действий и стремлений была такой: сделать доступный (во всех смыслах) блог, с современным кодом, идущим в ногу с развитием веб-стандартов. Не просто вылизать код на главной странице для зеленого света валидатора, чтобы влепить кнопки и информеры w3.org для китча, а показать на практике каким может быть блог усилиями одного заинтересованного человека.

Внесенные изменения

1. Прикрутил микроформат rel-tag.
2. Добавил rel-bookmark к ссылкам на заметки и комментарии.
3. Полностью пересмотрел код главной страницы, вот кое-что из проделанного:
   • Sidebar теперь переехал в самый конец кода, пропустив вперед посты.
   • Форма логина больше не присутствует в коде на обычных страницах — думаю не нужно грузить ее HTML посетителям моего блога. Они все равно ей не пользуются.
   • Списки стали списками: теги и действия с заметками.
   • Выкинул лишнее (типа     и ненужных классов visible).
   • Переделал header. Теперь там появился симпотичный домик, если навести на логотип находясь не на главной.
4. Добавил fieldset и legend к формам.
5. Посещенные ссылки теперь бледнеют.
6. Все ссылки на сторонние сайты теперь помечены значком.
7. Долго бился над зеленым светом XHTML Strict для всех уголков блога. Сложно, потому что не весь HTML код можно исправить — часть генерится движком, код которого закрыт.
8. Добавил иконки для ссылок «теги» и «избранное».
9. Добавил иконку для АйФона (спасибо за модную фитчу, pepelsbey)
10. Перелопатил код дерева комментариев.
11. Переделал форму написания нового комментария.

Работы продолжаются…

Движок этого сайта был сделан, судя по верстке, во времена, когда у всех были мониторы с разрешением 800×600, а разрешение экрана 1024×768 было только у богачей или профессионалов компьютерной индустрии. Сегодня сайт сверстан далеко не в ногу со временем.

Я уже давно высказывался, что пора бы обновить интерфейс и верстку. Переделать явно неудачные страницы с сообщениями, настройками и прочими ляпами в интерфейсе. Аудитория сайта огромная и все пользуются таким не совершенным проектом видимо потому, что жажда общения затмевает любые неудобства и несовершенства сайта.

Многие даже и не подозревают, что можно сделать гораздо лучше, удобнее, человечнее. Тогда общение станет еще комфортнее и приятнее. Не придется скролить полосу прокрутки на каждой странице, не придется напрягаться и выискивать нужную информацию среди монотонного шума из букв и разлинованных блоков, придет наконец долгожданное избавление от ненужных нажатий на кнопку «ответить» только для того, что бы начать писать сам текст ответа…

Что получилось?

На первый взгляд может показаться, что сайт просто стал занимать 100% ширины окна браузера. Это так, но это не было моей единственной и главной целью. Основное, что мне хотелось изменить — это постараться сделать более умный, приятный, человечный интерфейс для столь часто используемого многими людьми сайта.

Что сделано?

1. Верстка сайта адаптирована под современное разрешение мониторов.
2. За счет увеличения площади занимаемой сайтом в окне изменен набор на всем сайте: чуть увеличен кегль и интерлиньяж, а сама гарнитура заменена на Arial. Мне кажется так заметно лучше. Особенно большое спасибо скажут люди с не самым идеальным зрением.
3. Пункты вертикального меню теперь, как им и подобает, начинаются с большой буквы.
4. В поле поиска теперь запросто целиком вмещаются имя и фамилия человека которого вы ищете.
5. Вместо кучи-малы теперь можно видеть приятный и четкий список групп, в которые вступил владелец страницы.
6. Кнопки постраничной разбивки сообщений на стене наконец-то покинули территорию отведенную для первого сообщения на стене и теперь находятся чуть выше поля где идут сообщения.

   

7. Выкинут информационный шум со стены сообщений. Теперь легким и не принужденным движением глаз можно считывать те послания, которые находятся на стенах.
8. В меню слева выкинуты бесконечные повторения «Моя», «Мои», «Мои», «Мои», «Мои»…
9. Постраничная навигация на сайте стала боллее удобной.
10. Изменены страницы входящих и исходящих сообщений.

Полный лог изменений веду на странице проекта.

Как можно сделать такой внешний вид?

Очень просто. Вам потребуется браузер Mozilla Firefox и add-on Stylish. Если всего этого добра у вас пока нет, то скачайте и установите (все абсолютно просто и бесплатно).

Если эти вещи у вас уже есть, то нужно добавить в Stylish’e в домен vkontakte.ru CSS код, который лежит здесь. Там же я обновляю логи того, что сделано.

В планах: проработать остальные страницы сайта и задействовать использование этих стилей в Operе и остальных браузерах. Продолжение следует…

При условии, что контраст между фоном и цветом блоков не очень сильный, можно использовать такой метод без использования картинок.

Вот пример того как это может выглядеть:

Здесь 3 блока: первые два получились из двух вложенных тегов div, а последний состоит из трех. Думаю, ничего сверхестественного в таком способе нет, но все же выложу его, вдруг кому пригодится. Два дива и все готово. А вот господа из mail.ru, например, так не поступили и грузят картинки.