Сделал на сайте небольшой рестайлинг, который коснулся в основном блога и форума. Вспомнил заржавевшие CSS'ные скиллы :-).

Как водится, я готов послушать критику, но, как опять-таки водится, вряд ли она на что-то повлияет :-). Не потому что я такой упрямый (хотя поэтому тоже), а в основном потому что обычна она сводится к вкусовому восприятию, а мне больше интересна критика технологическая. Ну и кроме того, контент всегда важнее оформления.

Итак вкратце, что поменялось:

Если кому-то вдруг станет интересно посмотреть в несжатые стили, то вот они: layout-general.css, layout-specific.css, fonts.css, colors.css, misc.css.

Комментарии: 28 (особо ценных: 1)

  1. ildus

    а буквица ничего была, у себя в блоге собираюсь сделать )

  2. astur.net.ru

    На форуме читать труднее стало. И заголовки съезжают в зависимости от наличия эльфа.

  3. Ivan Sagalaev

    И заголовки съезжают в зависимости от наличия эльфа.

    Я думаю прикрутить туда какой-нибудь гостевой placeholder...

  4. Михаил Гранкин

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

  5. Тормоз

    Внешне минималистично смотрится, но код портит впечатление. ОК, технологическая критика :) Илья, вот зачем тебе дивная обёртка id='meta' + class='meta' (id+class само по себе странно), если внутрь всё равно вкладываешь ещё и блочный абзац?

    В комментах тоже лишние элементы. И ещё непонятно, почему ты тоже повторюшничаешь как и все, пишешь DOCTYPE html вместо doctype HTML. Мелочь, конечно, но она настольно вопиюще нелогичная и постоянно всеми перенимаемая друг у друга, что просто режет глаза.

    Почему обычное слово заглавными, а сокращение маленькими? :)

  6. A.I.

    Особо ценный комментарий

    Стили для мобильных устройств сейчас принято делать с помощью CSS Media Queries https://developer.mozilla.org/en/css/media_queries. Указываешь минимальный размер экрана (или куча других критериев) и дополнительные стили к этому условию. Например:

    @media handheld, screen and (max-device-width: 481px), screen and (max-width: 39em) {
        /* Стили для мобильников и просто маленьких устройств */
    }
    
  7. Анатолий

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

  8. www.google.com/profiles/scrptn

    Иван Сагалаев: вот техническая критика: всегда добавляйте <meta charset="utf-8"> в начало блока <head> - т.е. до любых отображаемых данных, включая заголовок. Это в целях безопасности - помните о UTF-7!

    Также желательно добавлять аттрибут lang="ru-RU" к тегу <html>.

    Замечания по CSS:

    • margin-top: 2em; margin-bottom: 2em; —> margin:2em 0; и аналогичные случаи
    • font: normal medium Trebuchet MS, Tahoma, sans-serif; - в таких случаях вокруг названий шрифтов из нескольких слов ставятся кавычки: font: normal medium 'Trebuchet MS', Tahoma, sans-serif;. Кроме того могу порекомендовать посмотреть на безопасные font stacks и правила их составления. Хорошим вариантом будет 'Trebuchet MS', 'Lucida Sans Unicode', 'Lucida Grande', 'Lucida Sans', Arial, sans-serif;
    • vertical-align и указание высоты блоков - это очень плохие практики и дурной тон. Правило такое: ширину задает CSS, высоту - содержимое
    • если вам нужно для множества блоков сделать clear: both;, то делайте один класс .clear и лепите его в разметку - это значительная экономия траффика по сравнению с описанием множества правил CSS. Хотя тут можно спорить о поддерживаемости такого кода, так что это просто альтернативный взгляд
    • вообще, мне показалось, что многие правила дублируются без отрой необходимости

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

    Тормоз: принято писать именно "DOCTYPE html", хотя на работоспособность это вроде бы никак не влияет. От заглавных букв HTML я бы все же воздержался.

    A.I.: поддерживаю, и добавлю про css3-mediaqueries-js для IE и старых браузеров.

    Анатолий: в целом поддерживаю замечание, хотя в этом блоге порядок комментариев интуитивный, они отображаются в порядке их чтения.

  9. Тормоз

    Кроме сортировки время комментариев позволяет понять, насколько оживлённая здесь дискуссия.

  10. s-chistovich

    Ваня, а зачем вообще управлять размером шрифта? Пусть браузер сам решает. Но если чо, яндексовая определялка юзер-агентов доступна через XML-API, можешь её прикрутить.

    "Минимализм", на мой взгляд, вредный. Такое впечатление, что шапка где-то спряталась. Нервирует.

  11. s-chistovich

    Ваня, а что это мой юзернейм не подтаскивается? Что там, какие-то микроформаты нужны? Давай завтра сделаем.

  12. Тормоз

    Блин, я преступно перепутал имя. Иван, прошу прощения, очень некрасиво получилось. Какая-то логическая опечатка.

    Dmitry Scriptin, вот именно что "принято", но кем и почему?

  13. Герасимов Константин

    Честно говоря, не сильно помню предыдущую версию, недавно подписался, но как то скудновато получается.

    Если вы хотите сделать версию для "маленьких" устройств, сделайте отдельную версию, а не "убивайте" существующую. Нужно, нужно что то сбоку, я хочу еще поклацать, а так сразу и не знаю уже и куда ;)

  14. tonsky.livejournal.com

    Минимализм одобряю, вот еще совет: дату «04.09.2010» легче читать, когда она записана как «4 сентября 2010». Иван, если не секрет, против спама принимаете какие-то меры? Или чистите вручную?

  15. tonsky.livejournal.com

    Комментарий ждёт проверки

    Вопрос про спам отпал :)

  16. Ivan Sagalaev

    Дату меня очень заленило форматировать. К сожалению, в Джанго до сих пор нет из коробки слово "сентября", есть "Сентябрь" — а это некрасиво. Ну я и оставил, как есть.

    А для антиспама тут работает вариант антиспамного конвейера, который я когда-то для форума делал. С той разницей, что комментарии от неизвестных людей отправляются на премодерацию в любом случае.

  17. admin

    Иван, не кодь где не надо. и не ломай то, что работает. =)

    Теперь, при чтении комментариев в форуме, глаз спотыкается о ники, даты и стрелочки рейтинга. Раньше было удобнее, когда комментарии шли подряд, а вся мета располагалась в отдельной колонке слева.

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

    Реально бы хотелось увидеть ленту последних комментов (без необходимости переключаться в представление rss ;) ) и всплывающий хелп по предлагаемым форматам bbcode и markdown.

  18. ildus

    еще хотелось бы добавление отдельных комментов и постов в избранное

  19. tonsky.livejournal.com

    Иван, я тоже так рассуждал, когда на Джаве писал, а на Питоне, где сниппеты в пять строчек укладываются, я их себе тащу или пишу за три минуты без всякой задней мысли или сожаления, что нестандартное что-то использую или велосипедю. Какая, в сущности, разница, главное, что задача решена.

    MONTHS = (u'января', u'февраля', u'марта', u'апреля', u'мая', u'июня', 
              u'июля', u'августа', u'сентября', u'октября', u'ноября', u'декабря')
    @register.filter
    def ru_date(dt):
        if dt.date() == date.today():
            return u'Сегодня в %2i:%02i' % (dt.hour, dt.minute)
        return '%s %s %s' % (dt.day, MONTHS[dt.month-1], dt.year)
    

    Еще, мне кажется, было бы круто ссылки на предыдущий пост и на следующий поставить в блоге, вдруг кто-то увлечется и будет подряд читать.

  20. Ivan Sagalaev

    ildus, вам нужен delicious :-)

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

  21. grey3.livejournal.com

    Минимализм хорош лишь до определённого предела. На наладонниках должен быть свой дизайн - и он плохо смотрится на нормальных экранах.

    И ещё о вредном минимализме. Вот в следующей теме был английский коммент - и я понял, что есть английский вариант. Добавил ручками '/en' - да, есть! А вот в этой теме - есть ли английский текст? Не видно! Не буду же я каждый раз руками ссылку править? Поэтому оОочень нужно для постов с двумя языками добавлять где-то вверху справа видимую ссылку [en] (а на английской версии [ru]). Ну и, естественно, не добавлять в случае отсутствия другого языка.

  22. GrAndSE

    Минимализм - хорошо, но чрезмерно увлекаться не стоит. Выглядит в принципе приятно, даже чего-то такого самому захотелось, но пользоваться стало не совсем удобно.

    С одной стороны читать посты в блоге удобней, когда только одна колонка, но навигация стала менее удобна - лично я на автомате раз пять пытался клацнуть по названию поста и удивлялся, почему я еще не на главной странице. После пары секунд думания, я начинал искать ссылку, и еще через пару секунд мне доходило, куда же стоит клацать. Может как-то стоит назвать ссылку иначе? "На главную", или что-то типа того.

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

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

  23. Ivan Sagalaev

    Поэтому оОочень нужно для постов с двумя языками добавлять где-то вверху справа видимую ссылку [en] (а на английской версии [ru])

    Вот этого я серьёзно не понимаю... Я пишу статьи на двух языках не ради того, чтобы их было два, а потому что одним людям удобно читать на одном, другим — на другом. В чём смысл читать сразу два языка?

  24. grey3.livejournal.com

    Вот этого я серьёзно не понимаю... В чём смысл читать сразу два языка?

    В том, чтобы совершенствовать свои навыки перевода! :-)

    Очень уж мало мест, где один и тот же текст был бы сразу на двух языках. А автопереводчику, особенно на иностранный, доверять сложно... попробуйте перевести гуглом туда и обратно и посмотрите какая жуть чаще всего получается!

    И ещё о минимализме: читая комменты без дат на старые посты, не видно сколь активно шло обсуждение: за день всё обсудили или за год накопилось... а это иногда интересно. И некропостинг тоже не всегда вреден. Верните даты! Это ж не отдельный запрос, а лишь уже имеющееся поле! И строчка-то заглавная с именем автора всё равно есть - неужели там дата не помещается?! 8-O

    Особенно интересны даты комментов в Учебнике... до сих пор иногда туда заглядываю. Не планируете HTML5&CSS3 добавить?

  25. grey3.livejournal.com

    Жаль что здесь корректировать свой коммент нельзя, приходится новый писать... В предыдущем, для ясности, вместо "свои" следует писать "свои (читательские)".

    И чисто технологическая критика: на главной странице блога в правом столбце с комментариями (где кстати дата и время комментов есть!) появилось жутко длинное имя автора - гугловский OpenID в комменте на "разминку" - и очень некрасиво налезло как раз на дату и время поста. Почему оно не откусилось, не съехало ниже, а именно наложилось сверху до нечитаемости куска с пересечением? (впрочем к моменту когда вы это будете тестить оно с первой страницы наверняка пропадёт, а скриншот мне лень выкладывать куда-то... )

    Ага, проверил сейчас в Осле7 - так там дизайн другой виден! Дата и время во всех случаях спущены вниз от строки автора, вдобавок по-разному: иногда <p class="time meta"> выровнен снизу, а иногда как бы центрирован по отношению к <p class="title">. Вдобавок меняется со сменой размера шрифра.

    Проверил ещё в Осле8 - там к тому же выравнивание меняется в зависимости от режима совместимости. По умолчанию он всё же выравнивает как в ФФ, оба класса поверху, с перекрытием даты и времени длинным автором.

    Нехорошо всё-таки автору такого хорошего Учебника делать дизайн, тем более минималистский, зависящий от броузера и длины данных.

  26. Ivan Sagalaev

    В том, чтобы совершенствовать свои навыки перевода! :-)

    Тогда вы — не целевая аудитория блога. При реализации двуязычности я выбрал два юзкейса, которые хочу поддерживать. Сравнительный анализ языков туда не входит. Могу порекомендовать подписаться на два разных фида (кое-кто так и делает).

    появилось жутко длинное имя автора - гугловский OpenID в комменте на "разминку" - и очень некрасиво налезло

    Угу, спасибо... Я эту колонку в итоге совсем переделаю.

  27. Сергей Панфилов

    Было бы здорово в разметке Форуме иметь уникальный якорь для каждого из комментариев, чтобы иметь возможность ссылаться не только на сообщение целиком, но и его отдельные комментарии.

  28. qbuben

    @Сергей Панфилов

    Можно найти в исходниках айди сообщения и добавить в урл такое: #айди

    Например:

    http://softwaremaniacs.org/forum/django/23887/#141942

    Минимализм в силе.

Добавить комментарий