Изменение дизайна на блоге onjee
Вот и настал тожественный, для меня, момент - изменение дизайна на моем драгоценном блоге.
Было проделано море работы, на которую ушло не меньше времени и сил. Но все позади, остались лишь легкие доработки, которые вы даже не сразу заметите.
Сам шаблон для блога создавался на основе «болванки», так как в программировании я не силен, да и разбираться нет, ни желания, ни времени. Во имя скорости загрузки, пришлось отказаться от динамического меню, виджетов и других сомнительных удобств, но об этом ниже. Теперь я с гордостью могу заявить, что блог onjee.ru готов к плодотворной работе, а именно нести свет и знания людям, аминь.

После смерти блога, я решил изменить не только дизайн, но и целевую направленность постов. Отныне, мой блог — это блог для веб дизайнеров, начинающих и не только, а не сборник, никому не нужных, уроков по фотошопу. В связи с этим пришлось полностью переделать семантическое ядро, а так же переписать некоторые статьи. Изменения, так же, коснулись и начинки блога, а именно верстки, которая стала более-менее валидной, во всяком случае, по сравнению с прежней.
А теперь об этом и не только подробнее…
Чтобы не сеять хаос и панику в структуру статьи все нововведения буду расписывать относительно блоков.
Горизонтальное меню
При изменении дизайна, меню особо и не пострадало, разве что оно из динамического, чудесным образом превратилось в статичное. Я, если честно, вообще не вижу смысла в динамике горизонтального меню, просто потому, что не собираюсь каждый божий день удалять/добавлять в него пункты. А раз так, то и обычного html вполне хватит.
Блок контента
Довольно долго мучился над оформлением блока с контентом. Но, все же удалось подобрать идеальное, на мой взгляд, решение. Большие заголовки в 29px помогают посетителям выделить взглядом нужную информацию, а довольно-таки большое расстояние между строчками не напрягает глаза при длительном чтении.

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

На самом деле такой блок является очень полезной штукой, потому, что вы всегда сможете прочитать старые статьи, до которых вам еще не удалось добраться. К слову скажу, что данный блок выводится без каких либо плагинов и не конфликтует с другими скриптами.
Шапка блога
Я решил немного отойти от шаблонности, которая присуща многим блогам, и переместить шапку в сайдбар. Что из этого вышло, можете наблюдать в правом верхнем углу.

Процесс рисования шапки я описывать не буду, ибо долго, но скажу, что делалась она не только в фотошопе но еще и в 3d max – хвала создателям этих чудесных программ.
Сайдбар
Как правило, блог – это динамически развивающаяся структура. И что было актуально вчера – сегодня может стать устаревшим. Поразмыслив над этим, я решил, что бессмысленно выводить блок популярных записей – которые могли быть опубликованы месяц/год/два/три назад. Поэтому, покопавшись на зарубежных форумах и спросив совета на отечественных – удалось собрать скрипт, который бы выводил блок популярных записей опубликованных не позднее 30 дней.
Помимо этого, в сайдбаре, так же располагаются кнопки подписки, блок новых записей и блок категорий, оформленный, как мне кажется, довольно таки оригинально. Всю динамику из сайдбара я так же убрал, дабы выиграть в скорости.
Футер
Пальцев рук не хватит на то, чтобы сосчитать, какое количество раз, я изменял, дорабатывал, переделывал футер, чтобы добиться идеальной консистенции. В итоге у меня получилось сделать довольно симпатичный «подвал» со всеми удобствами. Футер, в лучших традиция блогов о веб дизайне, (во всяком случае зарубежных) представляет собой набор из четырех блоков.

В первом блоке выводятся статьи из категории ВЕБ ДИЗАЙН, что, я думаю, логично. Во втором блоке выводятся популярные записи в виде тизеров, но уже за все время существования блога. В третьем блоке выводятся социальные кнопки, благодаря которым вы можете следить за тем, как обновляется веб дизайнерский блог. В четвертом и последнем блоке выводятся коопирайты и счетчики подписчиков, фоловеров, и посетителей.
Футер, на мой взгляд, получился довольно информативным и полезным, как для посетителей, так и для блога в плане перелинкировки.
Подписка и похожие записи
Помимо сайдбара, предложение о подписке выводится и в конце каждого поста.

Получилось довольно круто. Хотелось бы сказать спасибо Михаилу Шакину за предоставленные скрипты.
Кроме подписки, после каждой записи, выводится так же блок с похожими записями в виде тизеров. Выглядит довольно не плохо, а самое главное привлекает внимание.
Комментарии
Долго думал над тем, как же должны выглядеть комментарии на блоге по веб дизайну и пришел к выводу, что примерно так:

На данном изображении показан комментарий администратора, то есть меня. Комментарии читателей выглядят так же, но без желтой таблички.
Вот в принципе и все, что я сделал, чтобы мой блог выглядел опрятно. В целом, я считаю что изменение дизайна на onjee.ru — сыграет на пользу. Есть, конечно, еще небольшие доработки и изменения, но их вы увидите в процессе чтения постов. Надеюсь, вам понравился мой новый дизайн, и вы с удовольствием будите сюда заходить.
Автор ТОха


Комментарии: 42
17.07.2011
18:06
Тестовый комментарий:)
17.07.2011
19:00
блин, ну ты красава!) я как раз искал что-то из бесплатных шаблонов подобное..
сколько стоят твои услуги? (мне советовали поискать дизайнера за отзыв или обзор его услуг на моем блоге, но на такое ты наврят ли согласишься)
17.07.2011
19:30
о, я нашел подобный шаблончик как хотел.. нужно будет его испытать
17.07.2011
19:48
Спасибо
Я рад что понравилось. Стоимость услуг зависит от фронта работ. Тебе могу и за бесплатно — смотря что ты хочешь…
17.07.2011
19:51
можешь мне на мыло написать? p.s. эти комменты можно будет удалить)
17.07.2011
19:55
Да не, пусть для истории останутся
Внукам покажешь…
18.07.2011
05:26
Охтыжемае. Классный у тебя дизайн, особенно червь… Блин. я вот тоже собрался блог запускать, но только не о дизайне, и тоже хочу себе такой шаблон. Продашь? :D
18.07.2011
09:31
Вот это красотень! Браво!
18.07.2011
11:34
Дизайн понравился! На своем блоге тоже хочу редизайн шаблона сделать. Сможешь мне помочь за определенную плату конечно)))
18.07.2011
12:46
САШ{ОК} — спасибо, но попрошу не обижать мою гусеницу — червем. Дизайн естественно не продам.
GRIIGO — рад что понравился. Могу, но смотря в чем. Попробуйте мне написать здесь.
18.07.2011
16:55
Добрый день. Вы так много рассказали про основные фишечки и дизайнерские прибамбасы (без обид, я программер просто), но не слова не сказали о реализации контактной формы и карты сайта, которые, на сколько я понял, так же сделаны без участия плагинов, я прав?
18.07.2011
19:54
нибуя себе!!! красотища блин))) ваще молодчик! всё таки не зря юлог твой умер (шучу!) но этот дизайн прям крутотошечка
18.07.2011
20:01
кстати, я ссылочку на тебя кинул в блок «Друзья» у себя на блоге)
18.07.2011
20:18
Вася — здравствуйте. Да, вы совершенно правы. И контактная форма и карта сайты выполнены без плагинов. Думаю, что скоро напишу по шагам, как я реализовал это, но вы гораздо быстрее сможете найти в интернете
rubas — я тоже думаю что не зря:) Ну ссылка с твоего блога вовсе не обязательна, я на тебя поставил в качестве признательности
18.07.2011
22:08
Дизайн блога — офигенный! Тоже очень хочу научиться создавать красивые темы
18.07.2011
22:58
ADIODAS — рад, что вам понравилось! А в чем проблема делать такие же и даже лучше? Изучить фотошоп сейчас вообще не проблема…
19.07.2011
09:39
Ммм… Ну что тут сказать?!) От всей души поздравляю с шикарным дизайном. Да и реализация отличная. Не удержался и протестировал твой блог через gtmetrix. Результаты впечатляют. Можно еще добавить кэш браузера в htaccess, тогда все будет летать как пуля.
P.S. Завидую белой завистью
19.07.2011
11:20
BORISDORIS — спасибо, но это еще не предел. Во первых, на днях сделаю загрузку ратинок через спрайты, чтобы уменьшит запросы к БД, а во вторых поставлю плагин для кеширования, а то тоже не успел:)
19.07.2011
12:29
Ну уж если решился на спрайты, то сначала нужно оптимизировать изображения. Их можно ужать еще достаточно прилично
19.07.2011
12:32
BORISDORIS — ды как бы я в курсе. Я чуть позже напишу статью про оптимизацию изображений в фотошопе.
А какие изображения ты имеешь ввиду? Если в посте, то я ужал максимально… Если про шапку и кнопки — то да, их еще не оптимизировал…
19.07.2011
12:35
Антон, постоянные. Те, которые подгружаются шаблоном
19.07.2011
12:37
BORISDORIS — а, ну их еще не оптимизировал
Чуть позже. Сейчас много мелочей, более важных…
19.07.2011
12:39
Да, конечно, все сделаешь. Главное есть приличный скелет, я мясо нарастет
19.07.2011
12:48
BORISDORIS надо еще разобраться с seo. А то шаблон то красивый, но толку от него, если люди его не увидят:)
19.07.2011
13:13
блог стал супер, ты огромный молодец, постарался на славу!!!
19.07.2011
13:38
ДАНИИЛ — спасибо. Да врмени убил много. А почему ссылка в твоем профиле не работает?
22.07.2011
11:18
всмысле не работает? ссылка на http://blog-for-life.ru/ ? ты вроде бы первый, кто такое говорит)
22.07.2011
12:06
ДАНИИЛ — добрый день. Не работает — всмысле страница при загрузке выдает ошибку. Я пробовал с разных компьютеров — ошибка одна и та же.
http://imglink.ru/show-image.php?id=9e92982702972914c8a949493d96b8dc
22.07.2011
13:08
попробуй с другого браузера может, у многих норм всё, странно вообще
22.07.2011
14:02
смотри, что мне в поддержке на этот счёт:
shneider-host (14:00:51 22/07/2011)
я думаю тут дело в том, что еще домен недопривязался до конца
22.07.2011
14:19
ДАНИИЛ — с других браузеров то же самое. Когда я регестрировал домен, у меня была похожая ситуация (ну я имею в виду, что сайт тоже не грузился). Прописал ДНС сервера от гугла — все помогло….
23.07.2011
13:22
а зачем ещё днс от гугла прописывать? мне в хостинг провайдер ответил, что это прекрепление домена ещё идёт, оно мол до 72-х часов прет, у каждого оператора интернета мол отдельно, хз может врёт, может нет, ну дня через 4 я тебе напишу, щёлкнишь тогда посмотрим загрузит или нет, хорошо?
04.08.2011
15:34
Класс!
Дух захватывает! Когда-нибудь, обязательно обращусь! Особенно шапка, то что в конце поста, и футер !
05.08.2011
14:14
@Влад: Спасибо.. Рад что понравилось) Я старался!
05.08.2011
20:56
У меня несколько иные проблемы… мой сайт сделан на движке ворд-пресс hippoguide.ru, и неожиданно возникла проблема с кнопками социалок… не отображаются и все тут! Ни контакт, ни гугл плюсзон, хотя код везде поставлен.
Как вообще правильно поставить кнопки социалок ( например «мне нравится» и «поделиться новостью»)?
Если создадите отдельную тему об этом, думаю получите доп. трафик)))
05.08.2011
22:05
@Hipp: http://shakin.ru/other/social-buttons.html — вот хорошая статья на эту тему…
На счет того, что не отображаются кнопки — закосячили где то с CSS
09.10.2011
16:16
Очень понравился диз, светлый и приятный, одним словом супер. Я смотрю вам нравятся текстурки?)
Кстати, заметила что трекбэк не оформлен. Прочитала и другие посты, впечатления типа: Ооо, Вау! Вообщем попробую сделать в фотошопе)))
Успехов.
10.10.2011
09:25
@Инканта: Спасибо) Но я дизайн скоро видоизменю… Рад что понравились статьи…
16.10.2011
13:30
Очень интересная задумка! Мне понравился особенно футер, да и идея размещения логотипа тоже очень интересная !
01.05.2012
12:19
Я думаю, что шапку нужно как-то подчеркнуть… Ну не видно ее!
01.05.2012
12:20
Поверьте мне! Не даром же мне уже 8 год в художке мозг е*ут!