Ребрендеринг блога, Эпизод 2: Новая надежда

Что, не ждали!? А вот оно как! Даже отчаянные консерваторы и поклонники тезиса "Не сломалось - не чини" иногда делают это... А если серьёзно, то на смену шаблона меня подтолкнул мой старинный товарищ SAV, который однажды на линукс-поинте деликатно мне намекнул на страшные тормоза с отрисовкой шаблона моего блога. Ну, думаю, раз такое дело, надо принимать меры. И я их принял, о чём далее.

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

Обновлено: на удивление, всё прошло довольно быстро и с минимальными потерями. Виджеты я перетащил со старого шаблона, самые занудные виджеты реализованы уже в Блоггере (гугловцы не дремлют).

Новая идея такая: на главной - только один пост, и при том укороченный (с помощью fullpost). Все кнопки, виджеты и гаджеты снесены в подвал (вниз страницы) - это особенность нового одноколоночного шаблона. Так как здесь важен текст, а не навороченное оформление, я выбирал самый простой шаблон при внешней презентабельности и минимализме. Основной шрифт Trebuchet - как и прежде, и по крайней мере в Firefox масштабируется колесом мыши без косяков.

Обращаю внимание пользователей Microsoft Internet Explorer: в коде шаблона о вашем браузере написано много нехороших слов, так что если что-то отображается неправильно, то в этом виноваты не только кривые руки автора блога :-)
Так вот, пост на главной один, а остальное ищется локальным поиском (внизу слева), с помощью облака тегов или непосредственно по архиву блога (стандартный гугловский виджет). Функциональность вроде не пострадала. Предложения по улучшению принимаются (и пока у меня есть время их воплотить).

Немножко истории
Решил выложить предыдущие версии блога - как он выглядел раньше.
Сначала я решил не мудрствовать и просто выбрал стандартный шаблон Sand Dollar, но выглядит он вполне сносно:


Потом был шаблон с листьями, который я нашёл где-то на окраине Интернета и который я установил тогда, когда был Великий Переход Blogger со статических шаблонов на динамические (после этого отпала необходимость делать Republish your blog - ветераны помнят, что это). В шаблон с листьями я со временем напихал столько хаков и джаваскриптов, что со роптать начали даже самые стойкие орлы. Шаблон содержал постоянно регенерируемую градиентную заливку (без неё шаблон не смотрелся вообще) - выглядел красиво:


... но тормозить под нагрузкой джаваскриптов стал безбожно.
И вот, когда в очередной раз мне начали выносить мозг написанием научно-технического отчёта и переоформлением его в Microsoft Word (ну, вы поняли, да?), мне и пришла в голову шальная мысль - а не сменить ли мне шаблон. Полдня поисков, и вот, собственно, результат.

Тормозить здесь просто нечему (в шаблоне только одно внешнее изображение - в заголовке). Код довольно прост и компактен, а большая часть хаков стали не нужны, так как они уже реализованы командой Blogger.

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

29 комментариев: |высказаться!| RSS-лента дискуссии.|
SIO комментирует...

Шикарно, спасибо. Старый диз и правда частенько поглючивал на старых интеловских дровишках.

/me из-за этого предпочитал ограничиваться чтением в рсс, а на страницу блога переходить только при самой крайней необходимости

virens комментирует...

@ SIO пишет...
Шикарно, спасибо.
Пожалуйста :-) Хотя шаблон я честно свитснул из разных интернетов. С подгонкой под местный колорит, разумеется.

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

/me из-за этого предпочитал ограничиваться чтением в рсс
О как! Кстати да, перерисовка градиентной заливки при этом притормаживала. Сейчас тормозить особо нечему.

Спасибо за отзыв - комментарии вроде отправляются правильно :-)

SIO комментирует...

Кстати, багрепорт на ходу: левым пользователям показываются иконки для правки статьи ;-)

Хоть никуда дальше оно не ведет, имхо, они им не нужны

virens комментирует...

@ SIO пишет...
Кстати, багрепорт на ходу: левым пользователям показываются иконки для правки статьи ;-)
Косяк может быть связан с тем, что в блог в режиме редактирования - я-то его правлю. Кнопку быстрого редактирования отключил от греха подальше. Спасибо :-)

Isquariel комментирует...

Почти всё замечательно, но облако тегов внизу — плохо. Вверху тегов нет. Нажимаем End — проехали теги.

А можно ещё попросить форму быстрого комментирования?

Сергей комментирует...

Здорово! Получилось очень хорошо. Честно говоря, листочки уже поднадоели. И вообще, новый шаблон, гораздо яснее и удобнее. Стало меньше разнобоя шрифтов. Цветовая гамма приятная, одобряю (но тебя ещё обвинят в предательстве идеалов).

Маленький беспорядок в подвале, так понимаю, скоро исправится, а вот постов на главную хотелось бы более 1. Иначе ощущение, что в блоге вообще только один пост.

Dr.AKULAvich комментирует...

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

А вот нововведение с одной статьёй на страницу мне кажется спорным. Да, малый вес страницы. Но ведь архив тоже иногда хочется полистать. Ориентация на среднестатистического посетителя?

linuxfreshman комментирует...

все путем! старый шаблон тормозил.

Сергей комментирует...

В подвале блок «Новостная лента» должен, по-моему, соседствовать с «Кнопками». Это всё одно — подписка. Разносить их в две разные колонки нелогично.

Постоянным читателям, место либо там же, либо наоборот — вместе с авторами. Потому что — или это способ подписки, или сообщество людей (авторы — и читатели).

Поиск, ярлыки и архив, хорошо бы как-то сгруппировать вместе — в одну колонку или в один обозримый одновременно горизонтальный блок (в две или три колонки). Это всё навигация по блогу.

Ещё по мелочи: если можно поправить встроенные в строку изображения, портреты и иконки, вроде http://bit.ly/7FXDND — было бы очень хорошо, они рвут межстрочное расстояние, и в подвале заметки, в в подвале страницы; перед словами «Автор» и «Главные редактор» хорошо бы начинать новый абзац; отсутствие горизонтального выравнивания между заголовками блоков в подвале тоже выглядит неаккуратно (из-за AdSense, в том числе).

Но в любом случае, уже стало лучше.

P.S. Как легко чужой шаблон-то ругать :-) и советы давать :-)

virens комментирует...

@Isquariel пишет...
Почти всё замечательно, но облако тегов внизу — плохо. Вверху тегов нет.
Вверху теги есть - под постом отмечено. Шаблон только одноколоночный - возможности поместить что-то сбоку нет: только внизу. Дизайн такой.

А можно ещё попросить форму быстрого комментирования?
Она косяковая, попробую её исправить: при её включении комментарии вообще отправлять не получается.

@ Сергей пишет...
Здорово! Получилось очень хорошо.
А я думал, что сейчас запинают :-)

Честно говоря, листочки уже поднадоели.
Тот шаблон был уникален и по-своему красив. Народу нравилось :-)

И вообще, новый шаблон, гораздо яснее и удобнее.
Я старался :-) На самом деле переходов на главную довольно много, и грузится она (точнее, грузилась) долго. Плюс тормоза отрисовки (в старом шаблоне была градиентная фоновая заливка, без неё шаблон не смотрелся вообще). В новом тормозить нечему :-)

Стало меньше разнобоя шрифтов.
Ну так Trebuchet, извиняюсь, во все поля :-)

Цветовая гамма приятная, одобряю (но тебя ещё обвинят в предательстве идеалов).
Насчёт идеалов - это да. Но правильный символ Дебиан требует либо серой гаммы шаблона (что депрессивно), либо красной (что агрессивно). Дуализм. Пришлось ради спокойной цветовой гаммы наступать на горло собственной песне.

Маленький беспорядок в подвале, так понимаю, скоро исправится,
Вроде всё поправил.

а вот постов на главную хотелось бы более 1. Иначе ощущение, что в блоге вообще только один пост.
Это фича, а не баг, хотя и обсуждаемая. Большинство переходов сюда - из поисковиков. Т.е. народ заходит не полистать, а именно за конкретным советом. И он, народ, его от гугла получит :-) А "на полистать" есть метки и архив постов. Не так?

@Blogger Dr.AKULAvich пишет...
Неожиданно. Эпоха кленового листа сменилась мягким оттенком со вкусом дебиановского logo.
А что-то меня сегодня понесло на радикальные перемены. Собственно, блог вроде как про Дебиан, а ничто не напоминает. Народ (с) вопрошал. А я возьми да и ответь :-)

Форма комментирования специально убрана из поста?
А это пока баг, а не фича. Разбираюсь с шаблоном.

По-моему, надо выровнять аватары автора и редактора для пущей симметрии и чистоты.
Исправлено. А то он придёт и покарает меня Розенталем :-)

А вот нововведение с одной статьёй на страницу мне кажется спорным. Да, малый вес страницы. Но ведь архив тоже иногда хочется полистать. Ориентация на среднестатистического посетителя?
В общем да, судя по статистике. Больше одного поста читают немногие, а архивы полистать можно и сейчас - виджет в подвале работает.

Но я обещаю завтра подумать, гуляя в парке, над этим делом.

@ Анонимный linuxfreshman пишет...
все путем! старый шаблон тормозил.
Вот они, анонимные аналитики - за что я их и люблю - скажут, как отрежут! :-)

Programmaster комментирует...

Да уж, virens, неплохо ты тут всё перекроил :) Я аж вкладку пролистал, по привычке выискивая оранжевое оформление.

Так как по своей прямой обязанности (придирки к опечаткам и мелким ошибкам :) мне сообщить совершенно нечего, буду давать советы по дизайну :)

Собственно, придраться можно только к «подвалу». Там стоило бы поменять местами «Архив блога» и «Постоянных читателей» — так колонки станут одной высоты. Возможно, в третью колонку также придётся перетащить пару иконок (SiteMeter и FeedBurner, например) — опять-таки, чтобы выровнять высоту.

И всё, больше ничего в глаза не бросается. Шаблон просто блестящий, поклон автору ;)

Programmaster комментирует...

О, ещё одно — иконочку сайта (favicon) придумать не забудь :)

allefm1 комментирует...

Прекрасный шаблон для чтения на Нокии N800! :-)

Zoresvit комментирует...

Вот уж действительно не ожидали :)
Приятная тема. Единственный недостаток по отношению к предыдущей - нету fluid width. Читая с лаптопа с широким экраном удобно, когда страничка подстраивает ширину под разрешение. :)
Еще не привык к системе комментариев на блоггере. В планах нету встроить какую-нибудь систему комментирование по-симпатичней?

Спасибо за полезные записи! :)

brezenix комментирует...

Спасибо. Наконец-то исчез желтый цвет :)

Анонимный комментирует...

красиво облако тегов очень нравится вот как [url=http://easyelectronics.ru]тут[/url]было бы прикольно его сделать сбоку

Alexej F. комментирует...

Читаю вас через гугл-ридер, т.ч. "старую" версию и не видел. Спасибо за интересные посты.

virens комментирует...

@ Сергей пишет...
В подвале блок «Новостная лента» должен, по-моему, соседствовать с «Кнопками»
Совместил.


Постоянным читателям, место либо там же, либо наоборот — вместе с авторами.
Авторы под читателями. Звучит несколько двусмысленно, правда, но тем не менее :-)

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

Это всё навигация по блогу.
Серёж, это так, но я сам удивился, когда в статистике увидел: большая часть народу идёт с поисковиков, следовательно, навигация им по большей части до лампочки. Но ты прав по сути.

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


перед словами «Автор» и «Главные редактор» хорошо бы начинать новый абзац
Сделано.

отсутствие горизонтального выравнивания между заголовками блоков в подвале тоже выглядит неаккуратно
А его и нет: это как раз floating widgets, то есть не виджеты в три колонки, а там уж как придётся. Код шаблон не так страшен, попробую поковырять на досуге.

Но в любом случае, уже стало лучше.
А раньше листики вроде даже нравились :-) Извини, ёрничаю, да.

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


@ Programmaster пишет...
Да уж, virens, неплохо ты тут всё перекроил
Собственно, часть виджетов вбил на тестовом блоге, многое сделано уже гугловцами - минус проблемы с правкой шаблона. В последнее время в старом шаблоне уже столько косяков началось от кучи хаков, что мне даже страшно было туда соваться. А сейчас там fullpost, подписка только на фидбёрнер и социальные закладки. И всё.

Собственно, придраться можно только к «подвалу». Там стоило бы поменять местами «Архив блога» и «Постоянных читателей» — так колонки станут одной высоты.
Не станут, Саш. Они разные всё равно. Вот сейчас я их выстроил - вроде нормально.

И всё, больше ничего в глаза не бросается. Шаблон просто блестящий, поклон автору ;)
Поклон на самом деле не мне, а вот этим ребятам. Шаблон их, моих правок - минимум. Но на его поиски ушло почти полдня (мне в этот день всё равно на работе постоянно дёргали из-за отчёта по проекту, так что провёл его с пользой всё равно).


@ Zoresvit пишет...
Единственный недостаток по отношению к предыдущей - нету fluid width.
Это фича, а не баг. На самом деле, есть определённая ширина строк, при которой читать текст удобно - если ширина больше, вы будете быстро уставать от чтения. Учитывая длину моих постов, это становится актуальным.

Еще не привык к системе комментариев на блоггере. В планах нету встроить какую-нибудь систему комментирование по-симпатичней?
В планах диссертацию таки защитить, и ещё три конференции написать, ну и прочие сорок бочек арестантов :-)
Серьёзно: а чем блоггеровская система комментов плоха?

Сергей комментирует...

> А раньше листики вроде даже нравились :-)

От слов реченных лета 2007 года отрекаюсь. Осень тогда близилась, уместны были листики, юный падаван, но с тех пор две зимы пролетело :-)

>> если можно поправить встроенные в строку изображения, портреты и иконки
> Этого я честно не понял, если не затруднит - поясни.

Поясню. Сейчас у тебя так: http://j.mp/7p77jx, обрати внимание, что высота картинок больше межстрочного расстояния, а визуальный низ картинки не совпадает с основной линие шрифта (картинки выпригивают вверх).

По-моему, надо, чтобы картинки визуально легли на линию шрифта, это можно сделать сдвигом картики вниз, и постараться, чтобы межстрочные расстояния были постоянны (то есть либо вынести картинки в отдельные абзацы, либо сделать межстрочное расстояние достаточно большим, чтобы картинки его не раздвигали). Вот например так (немного поджимпил): http://j.mp/8Uyz9f.

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

Кстати, в этом варианте до сих пор непонятно, чем rss-лента отличается от rss-анонса, но тут идей пока не приходит.

Новый порядок блоков в подвале нравится. Удачен и уместен блог «последние новости». Прям хоть заменяй архив таким и у себя.

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

Анонимный комментирует...

С распостранением убунты все внезапно полюбили коричневые тона:)

Анонимный комментирует...

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

alecx комментирует...

Может, все-таки, стоит блок "Последние записи" перетянуть повыше?

Juri Hudolejev комментирует...

Замечательно. Стало гораздо лучше.

Fatroll комментирует...

да, сейчас на все стало намного лучше, и о читателях подумали - ничего лишнего, все самое нужное - сверху (:

Анонимный комментирует...

А чего вдруг шрифт стал жирным к концу поста во всех комментах?

virens комментирует...

@ Сергей, 21.11.2009 23:59:00
Поясню. Сейчас у тебя так: http://j.mp/7p77jx, обрати внимание, что высота картинок больше межстрочного расстояния
Ха, я таки-осилил стили в HTML :-) Исправлено, сэр!

По-моему, надо, чтобы картинки визуально легли на линию шрифта, это можно сделать сдвигом картики вниз
Это проще сказать, чем сделать :-) У меня эти картинки на самом деле ссылки с изображениями, так что воспринимаются они как буква.

Кстати, в этом варианте до сих пор непонятно, чем rss-лента отличается от rss-анонса, но тут идей пока не приходит.
Исправил - короткая лента новостей. Это отголоски большой битвы за Читателя - когда я длинную ленту делал, помнишь?

Новый порядок блоков в подвале нравится. Удачен и уместен блог «последние новости». Прям хоть заменяй архив таким и у себя.
Это да, кстати. Гугловцы забацали это очень удачно. Знаешь как? А это просто последние 5 записей из RSS-ленты, только заголовки и дата. Гениально!

Отдельно доложу баг по твиттеру.
Я тебе отписался - у меня он не проявляется.

@Анонимный, 22.11.2009 12:01:00
С распостранением убунты все внезапно полюбили коричневые тона:)
Отнюдь. Цветовая гамма спокойная, а перекраивать под другой цвет - она не смотрится.

@Анонимный, 22.11.2009 17:50:00
Новое оформление выше всяких похвал, нет, правда.
Спасибо. Но тут автор, скромно шаркая ножкой, тычет пальчиком в сторону дизайнеров шаблона. :-)

Оттенки бежевого же как-то умиротворяют что ли.
Это да, есть такое.

Мне, так вспоминается одна уютная питерская кофейня
Чашка? Вроде у них такое оформление. Бываю в Питере иногда, и в Чашку захожу...

@ alecx, 23.11.2009 9:20:00
Может, все-таки, стоит блок "Последние записи" перетянуть повыше?
Тогда подписка на новости уедет вниз. Но подумаю.

@ Juri Hudolejev,
Замечательно. Стало гораздо лучше.
И это хорошо :-)

@Fatroll, 29.11.2009 18:12:00
ничего лишнего, все самое нужное - сверху (:
Да, мне тоже так показалось удобнее - чтобы не отвлекаться при чтении. На самом деле это шаблон для фотоблога - отсюда вся его одноколоночность и идёт.

@Анонимный, 01.12.2009 7:59:00
А чего вдруг шрифт стал жирным к концу поста во всех комментах?
Длинные комменты режет, зараза. Буду разбираться с шаблоном.

Gleb-ax комментирует...

Как-то всё узковато, да и один пост на странице - не здорово, не удобно читать.

Dominat комментирует...

Браво! Пару месяцев сюда не заходил. Зашел по ссылке с гугла и даже не узнал блог. Понял прикол только когда в адресную строку глянул :)
Дизайн понравился. Грузится на порядок быстрее предыдущего.

virens комментирует...

@ Gleb-ax комментирует...
Как-то всё узковато, да и один пост на странице - не здорово, не удобно читать.
Вообще как раз удобно для долгого чтения. Про один пост на странице это задумка такая была.

@Dominat комментирует...
Браво! Пару месяцев сюда не заходил. Зашел по ссылке с гугла и даже не узнал блог.
Стараемся. Заходите снова :-)

Дизайн понравился. Грузится на порядок быстрее предыдущего.
Новый шаблон, который с блокнотом, ещё быстрее - там всё тормозит sitemeter, но он мне нравится...

Отправить комментарий

Подписаться на RSS-ленту комментариев к этому посту.