Легкость + Простота + Стиль + Новые технологии = Новый дизайн alaev.info

Новый дизайн alaev.info Приветствую вас, друзья! Сегодня хочу ознакомить вас с обновлением моего сайта, а точнее его оформления. Те, кто заходит ко мне в гости ежедневно уже в пятницу заметили кое какие изменения. Да, я решился наконец-то сделать дизайн сайта светлым, потому что надоело читать недовольства в комментариях о том, что тяжело воспринимать светлый текст на темном фоне. Теперь ваши глаза будут отдыхать, читая полезную информацию.

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

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

Новый дизайн alaev.info

Легкость

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

Еще к легкости можно отнести использование спрайтов и карты. Спрайты – это когда множество графических элементов объединены в один файл, а необходимое изображение показывается с помощью задания в css-стилях необходимых координат. Карта – это что-то похожее на спрайты, только с помощью нее задаются области на странице, которые будут являться ссылками. Например, у вас есть шапка, на ней изображены различные элементы, например элементы навигации, но вырезать их и вставлять на фоне общей картинки в шапке не целесообразно. Для этого применяются карты, просто берем большую картинку, и создаем список координат относительно верхнего левого угла, а каждой координате присваиваем ссылку. Таким образом, экономится множество ненужных запросов к серверу, так как элемент всего один, а все данные хранятся в html-коде.

Примером реализации могут служить три листика (FriendFeed + RSS + Twitter) на главной странице.

Простота

Простота – это когда ничего лишнего, что могло бы отвлекать читателя от его занятия – чтения. Отсутствие лишних элементов, запутанной и неудобной структуры. Я рискну применить и к своему блогу термин «простой». У меня понятная любому человеку навигация: основные разделы сайта в горизонтальном меню, в основных разделах есть вертикальное меню, осуществляющее внутреннюю навигацию по разделу. Что может быть проще! И даже названо все своими именами: Блог – значит блог, Фото – значит это раздел, где выложены фотографии, Главная – лицо сайта, где всего понемногу из каждого раздела.

Так же я не стал предавать идею простой организации страницы поста. Цель поста – информация и ничего чтобы могло хоть на мгновение отвлечь читателя. У меня нет ни каких менюшек и сайдбаров, как видите. Человек зашел, прочитал, если есть мысли высказался в комментариях, если человеку интересна тематика, внизу, сразу под текстом есть список из нескольких тематических постов. Такая организация – идеальное решение. Кстати я больше не видел блогов с такой структурой, есть ощущение, что все пытаются запихать как можно больше ссылок вокруг основного текста, которые подавляющему большинству читателей неинтересны. А пытаться подкупить их «якобы грандиозным размахом блога» глупо.

Стиль

Мой блог теперь, сука, секси! Разве нет?! А я говорю — ДА! Ну разве эти закругленные края блоков не возбуждают? А «вдавленные» заголовки? А нежные тени отбрасываемые картинками?

Мне кажется, что все это очень круто и красиво. Все выдержано в одном ключе, нет раздражающих излишних эффектов. Как мне сказал один знакомый – «блог у тебя выглядит теперь по-весеннему». Он расцвел, сбросил грязную черную одежду, и предстал перед нами светлым, ярким и чистым.

Сколько пафоса, ёмаё! Надеюсь, вам нравится оформление? На вкус и цвет товарищей нет, потому до крови из носа я не собираюсь никому доказывать, что мой блог самый стильный. Но я надеюсь на ваши высказывания в комментариях по этому поводу.

Новые технологии

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

Для меня сейчас блог стал в какой-то мере полигоном для экспериментов. Я так долго ждал того момента когда смогу увидеть CSS3 в действии. 2 года назад я купил себе книгу под волшебным, по тем временам, названием «CSS3». Там на каждой странице жирной рамкой было выделено: «На данный момент эта технология не поддерживается ни одним из существующих браузеров». Видимо автор книги составлял ее по прототипам с сайта w3c.org.

Но настали эти светлые времена, когда каждый современный браузер имеет поддержку CSS3. Mozilla FireFox 3.6.x, Opera 10.5x, Chrome 4.0.xxx – вот что я подразумеваю под современными браузерами. IE8.x, к слову, я не считаю современным браузером, но очень жду появления IE9, он обещает быть отличным продуктом. Его и сейчас уже можно скачать, но только pre-alfa версию для разработчиков. Разумеется, это не подойдет даже для самых искушенных и продвинутых пользователей.

Что-то я расфилософствовался, давайте ближе к технологиям.

border-radius – именно это свойство позволило мне сделать закругленные края таблиц. Не стану распинаться и рассказывать обо всей прелести новых свойств таблиц в CSS3 — смотрите сами.
text-shadow – это свойство помогло мне сделать стильные заголовки. Смотрим.
box-shadow — это свойство преобразило блочные элементы дизайна, теперь красивые тени – реальность! Смотрим.

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

Как оказалось, еще это свойство можно применить к бордюрам и картинкам, о чем не сказано на сайте w3c, но выяснилось в ходе экспериментов.

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

А ведь кто-то до сих пор сидит на Windows XP и думает, что это тру ось, а Windows 7 – отстой. Ребята, АУ, вы отстали от жизни лет этак на 5!

Кстати, я вот тут обхаял людей пользующихся «старьем», но, не смотря на это, я позаботился и о них. Мой блог выглядит красиво и в старых браузерах. Нет круглых краев и нет теней, а все остальное в силе. И, даже исключив новые свойства CSS3, блог не теряет своей красоты и стиля. Чтобы мои слова не казались вам неправдоподобными, откройте IE8 и убедитесь в этом сами.

Ну все, пожалуй, хватит бахвальств! Хочется теперь услышать ваши мнения по поводу нового дизайна, стиля и всего прочего, что было упомянуто в этом посте. Я очень жду ваших отзывов, интересны мнения со стороны, в особенности мнения дизайнеров.

PS Главная страница еще не доведена до ума, как и некоторые другие, это я сделаю в ближайшие дни. Ну не успеваю я :(

PPS Логотип тоже еще не готов, дизайнер сильно загружен другими работами.

Александр «АлаичЪ» Алаев
Александр «АлаичЪ» Алаев

Вот уже 18 лет я профессионально занимаюсь созданием и продвижением сайтов и 13 лет с удовольствием пишу в любимый блог. Создал заслужившие доверие в seo-сообществе программы FastTrust и ComparseR и известный сервис для проверки траста сайтов CheckTrust.ru.

В 2014 основал веб-студию «АлаичЪ и Ко» в Краснодаре: 1 место в рейтинге агентств интернет-маркетинга (Рейтинг Рунета), 2 место в рейтинге SEO-компаний (CMSmagazine), 12 место в рейтинге известность бренда SEO-компаний в России (SeoNews).

Выступаю на профильных конференциях (All In Top, SEO Conference, SEMPRO, Baltic Digital Days). Веду канал в telegram про seo и бизнес. SEO-специалист года 2019 и 2020 (Sape).

Ерунда и баянЪ!Зачет! Плюсую!
+1

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

30 000 руб.

Комплексный подход к решению поставленных задач: достижение топ-10 и увеличение трафика на сайт. В стоимость уже включены полный технический аудит и оптимизация сайта.

45 000 руб.

У вас недостаточно знаний и нужны ответы на вопросы?
Интересует мнение эксперта или надо проверить подрядчика?
Вы задаете вопрос — я отвечаю!

5 000 руб./час

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

70 000 руб.

Я начал запись своего обучающего курса по seo-продвижению.

В каждом видео я разбираю какую-то одну важную тему, и делаю это последовательно, в порядке, подходящем для изучения с нуля. Видео выкладываются раз в неделю – по средам. Я думаю, весь курс будет состоять из 50-70 роликов, так до конца еще далеко, а значит самое время подписаться и начать изучение вместе со мной.

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

Комментарии: 28 Написать комментарий
  1. milten (1 комм.)

    А ты — сама скромность =) ! На самом деле — очень симпатично, много нового, хотя общее направление стиля осталось твоим. В общем — одобряю!

    Скорее бы уже народ постигал "современность". Жду не дождусь, когда ни один заказчик уже не будет вспоминать, что такое ie6-8 и когда можно будет юзать css3 на полую катушку.

    PS WinXp не обижай!! <=)

    Ответить
    • АлаичЪ

      Ну а чего скромничать по отношению к себе ;) Себя надо любить и ценить!

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

      CSS3 будет повсеместно использоваться только когда появится новая редакция — CSS4 =)

      Ответить
    • Oleg Mykhailenko (5 комм.)

      Долго еще к такой "современности". Много компаний, которые используют лиценз. ПО будут и дальше продолжать сидеть на IE. А компаний, которые используют IE очень большой процент, потому и лидирует этот недобраузер.

      З.Ы. Диз хорош получился, как я уже те говорил в аське. Поменяй цвета еще на текстах:

      "Советую к прочтению и обсуждению:"

      "Комментариев к записи:"

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

      Ответить
  2. Дизайнер Митя (4 комм.)

    Совсем другое дело! Читать твой блог стало гораздо приятнее и глаза не утомляет!

    Ответить
  3. Хэннер (36 комм.)

    Тени зачетные, мне прям понравилось, как и уголки. Единственное, что не нравится, кроде скотча в шапке — это боковое меню в главной блога. Какое-то оно серенькое что ли. В общем, рабрики и заголовки статей воспринимаются одним текстом, что не ТРУ.

    И таки да, я все сижу в XP :)

    Ответить
    • АлаичЪ

      А чем тебе не понравилось боковое меню? Ну да, оно сероватое, от общего цветового решения остальных элементов не отличается. Есть идеи?

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

      Ответить
      • Хэннер (36 комм.)

        Что-то меня не оповестили о комментариях. Я, кстати, не вижу галочки "подписаться на новые комментарии" — окошко есть, а галочка не ставится, и непонятно, есть она там или нет.

        Насчет меню: вот сейчас вроде все культурно, но курсив, видимо, мешает. Выбивается из общего оформления и плохо читается. Вот заголовки — да, отлично выделяются. А сами рубрики, и уж тем более — последние записи — как-то не тру.

        Ответить
        • АлаичЪ

          Опачки, а вот это уже не есть хорошо. Что за браузер такой, что не видно поля в нем? Я подозреваю, что это Opera во всем виновата?

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

          Ответить
          • Хэннер (36 комм.)

            Угадал, Опера)

            Может, все же не курсивом а обычным текстом? Вроде культурнее должно быть.

            Ответить
          • АлаичЪ

            Странно, я проверил сейчас в своей Опере, версия 10.51 и галка ставится, все нормально, хотя конечно доставку писем не проверял.

            Могу сказать точно, что в любом современном браузере — IE 8.0, FireFox 3.6.3, Opera 10.51, Chrome 4.0.295 — галка ставится. Непонятно почему у тебя не ставится :(

            PS Курсив сменю сейчас ;)

            Ответить
  4. blaga (3 комм.)

    Скругленные углы действительно круто смотрятся. А вот тени в заголовках я почти не заметил, мелкие они какие то... :)

    Ответить
    • АлаичЪ

      Так в том и соль, что их наличие незаметно, потому что глаз не останавливается на этом, для глаза все приятно. А вот отсутствие теней будет заметно. Думаю, теперь фишка вам понятна ;)

      Ответить
  5. Velluk (3 комм.)

    Дизайн очень и очень понравился. Реализовано классно. Сам поклонник белого и серых полутонов. Раньше было действительно плохо. Глаза уставали после прочтения двух-трех статей с комментами.

    Ответить
  6. Alex (1 комм.)

    Очень красиво! Я считаю если блог интересный и постояннообновляем, то уникальный дизайн — это необходимость, а уже качество этого дизайна дело вкуса самого автора! Сейчас дизайн просто прекрасен!

    Ответить
  7. АлаичЪ

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

    Буду править, так что пока дизайн не идеален!

    Ответить
  8. Yaroslav.CH (9 комм.)

    По сравнению с тем, что было — стало лучше. Но объективно — большинство нововведений не сделали блог существенно удобнее.

    "Простота" — не значит "искусственная бедность оформления".

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

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

    "Вдавленные" заголовки в названии поста при таком цвете шрифта — читаются не слишком четко.

    Зачем было мучиться с картами и спрайтами при размещении трех картинок в одну строку на однородном фоне — мне невдомек :)

    А зачем ставить форму подписки на комментарии без комментирования выше, чем форма самих комментариев?

    Все три свойства работают только в адекватных браузерах, но пользователей ИЕ все равно большинство и их нужно учитывать.

    Я использую ХР потому что у меня она лицензионная, покупать семерку — не вижу смысла, а хакнутое просто надоело.

    "Главная" и "блог", которые по-сути, друг-друга повторяют, учитывая, что на стартовой основное пространство занимают записи из блога.

    И так далее.

    Но вот контент блога и фотографии — мне нравятся, а потому я и являюсь подписчиком :)

    Ответить
    • АлаичЪ

      Вот это комментарий! Люблю такие развернуты ответы. Давайте я вам отвечу по пунктам.

      Разве оформление бедное? Чего то не хватает в нем? Мне кажется, что вычурность необходима блогам о дизайне, и то не факт.

      У меня кстати тоже макет не является "резиновым", а фиксированной ширины. Тем не менее если не тыкать носом в экран и читать на некотором отдалении, пол метра, например, то вроде нормально.

      Варианты подписки на блог я сделаю в каждом посте, над заголовком, как это реализовано у AlexPro (homelerss.ru)? так же продублирую эту строку снизу, там где и сейчас, только модифицирую и сделаю более удобно.

      С цветом шрифта мне еще предстоит работа, они, кажись, требуют более темного цвета.

      С картами и спрайтами я не мучился, а то что у меня всего три картинки, так это пример только, а если бы их было 77 штук?

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

      "Главная" и "Блог" дублируют друг друга лишь потому, что я не добрался до оформления главной страницы.

      И все таки, что там далее по списку? Готов впитать все ваши пожелания...

      PS 80% процентов посетителей блога используют современные браузеры. ПО статистике LI. Остальные 20% — это те, кто приходит из поисковиков по запросам типа «как покупать ссылки в сапе».

      Ответить
      • Yaroslav.CH (9 комм.)

        Нет, я не говорю о вычурности — я говорю исключительно о юзабилити. Конечно, если накрутить десяток рюшиков и свистелок — блог от этого лучше не станет :)

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

        Нет, вариант при котором пользователь должен подбирать расстояние от экрана для того, чтобы читать текст — провален изначально. Ну только если это не позиционируется как фича :)

        Ну, догадаться о том, что это еще предстоит сделать я не мог, поскольку в статье дизайн позиционируется как завершенный.

        Хотя бы немного оттенить — и будет уже читабельней.

        Мммм... а зачем 77 картинок в ряд вставлять? ;) Тут уже дело вкуса, в принципе — кому удобнее спрайтами, кому дивами, а кому таблицами. Разницы — никакой.

        Просто интересна статистика, если она у Вас есть — а какой процент подписывается на комментарии, без комментирования записи?

        Опять же, как и с пунктом о подписке.

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

        При этом при ответе — оно уже вертикальное.

        P.S. А вот с этим комментарием — уже таки забыл. Кроме того, лучше это поле вынести поближе к кнопке "отправить" — чтобы оно было видней и понятней. Либо хотя бы выделить его каким-то образом — рамкой, шрифтом и т.д.

        Шильдик в правом-верхнем углу о dofollow стоит или больше сделать, или текст сократить — пришлось вчитываться, а о сути понял только по URL. По сравнению с широченным полем для текста, он выглядит "мухой".

        Аватары стоило бы сделать больше — они слишком маленькие, картинка не видна.

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

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

        На стартовой в блоке "немного статистики" — забыли поменять цвет цифр данных.

        Полосу между центральной частью и подвалом стоит немного расширить, поскольку она диссонирует с правой и левой частями — они слишком широкие, а тут — "ниточка". Но, соответственно, не делать ее такой же ширины, иначе подвал "отвалится".

        Ответить
        • АлаичЪ

          Долго не отвечал на комменатрий потому, что все обдумывал и дорабатывал.

          Расстояние до экрана при чтении и составляет примерно пол метра. Если че ;) Так что это не провально, это номрально. Но спорить об этом смысла нет.

          Про то, что такое спрайты ты вообще не въехал, ну просто совсем не понимаешь о чем я. Вот пример:

          У тебя есть 8 изображений, например, это составляющие части квадратного блока, то есть 4 угла и 4 грани. Верстать ты будешь его или дивами или таблицами, это никого не волнует. Только вот представь такой момент, создаешь значит классы, каждому прописываешь изображение фоновое... В общем тут долговато писать придется, просто прочитай это (http://html-css.info/2009/07/css-sprites/) и все поймешь сразу! Угу?

          Статистики по подписке к комменатриям без комментирования у меня нет, к осжалению. Но я думаю эта опция не лишняя.

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

          "P.S. А вот с этим комментарием — уже таки забыл. Кроме того, лучше это поле вынести поближе к кнопке "отправить" — чтобы оно было видней и понятней. Либо хотя бы выделить его каким-то образом — рамкой, шрифтом и т.д." — вот тут о чем идет речь? Я совсем не понял :(

          Шильдик dofollow специально мелкий, чтобы спамеры на разобрали ;) Шутка, разумеется. А постоянные читатели прочитали один раз и уже запомнили, что там написано.

          Так же можешь наблюдать некоторые изменения и улучшение.

          Что-то еще осталось?

          Ответить
          • Yaroslav.CH (9 комм.)

            Ага, только у меня ноутбук — если че ;) Ну вообще все из написанного не провально — это просто нюансы.

            Я знаю что такое спрайты, тем более что сам их использую :) Я имею ввиду, что это при верстке 3-х картинок это уже вопрос вкуса. Когда у тебя 77 изображений — тут уже да, это юзабилити и правильная верстка, но в случае 3-х — принцип формирования несущественен.

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

            Вот, как раз забыл тебе сказать об отсутствии правил комментирования.

            Я когда отправлял первый комментарий, в поле капчи ввел цифры, а при отправке второго — забыл, поскольку поле слишком неявное. Оптимальнее было бы поле сделать меньше (зачем такое большое?) и как-то его выделить.

            Ну остальное я писал в прошлом комментарии, часть еще осталась, но как я понял со временем ты все это изменишь.

            Ответить
  9. Jur & Ko (9 комм.)

    Автору респект :) . Нормально получилось . И читаемо и смотрибельно . А главное информация интересная . И неважно каким браузером просматриваешь , главное что б в голове все укладывалось на нужные полочки . Не жалею , что подписался . Девченкам с фоток привет !

    Ответить
  10. Людмила (3 комм.)

    Отличные перемены в дизайне! Воспринимать текст на светлом фоне гораздо приятнее и проще, чем на темном.

    Ответить
  11. Saynez (2 комм.)

    Дизайн отличный! Видно аккуратность автора, знания, вкус, ну и конечно любовь к своему детищу — блогу! Спасибо за советы по CSS3, некоторые уже воплотил в жизнь, то что надо было.

    Ответить
  12. Татьяна (6 комм.)

    Зря на XP ругаешься )) Ради интереса потестила новый дизайн в IE6, выглядит отлично!

    Эх, надо свой блог обновлять ...

    Ответить
  13. phaeton (1 комм.)

    Очень нравится дизайн. Обожаю такие тона, бежево-жёлто-коричневые. Молодец! :)

    Ответить
  14. Роман (7 комм.)

    Дизайн и вправду хороший. Деревянный фон вообще впечатлил :)

    Ответить
  15. Cheerful (2 комм.)

    Хороший, дизайн. Чистенький. Всё как надо.

    Но САМЫЙ стильный блог всё же у меня, как ни крути :-Р

    Ответить
  16. Stargot (9 комм.)

    Старый дизайн помню, комментировал под другим именем. Этот легкий и приятный. Хорошее обновление.

    Ответить