Оцените обновленный дизайн блога!

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

Разница со старым дизайном практически не видна внешне, однако произошли серьезные внутренние изменения: шаблон стал уникальным, он сделан мной лично, и сверстан на HTML5 и CSS3.

Вот как выглядел старый дизайн.

Январь-февраль 2012, тема Atahualpa
Январь-февраль 2012, тема Atahualpa

Он был весьма интересным, но имел недостатки, такие как табличная верстка, невозможно убрать вторую боковую колонку, узкая главная колонка, большое количество нестандартных настроек (более 30 файлов в папке с темой!), из-за чего было невозможно использовать некоторые плагины. И из-за множества мелких деталей в правой колонке, казался “нагруженным”.

Все эти недостатки я исправила в новом шаблоне, который сделала на основе темы-фреймворка Toolbox.

В новом шаблоне я сделала следующее:

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

В результате, главная страница стала “весить” всего 11,6 Кб чистого html, или 132 Кб со всеми скриптами и стилями. jQuery теперь загружается с серверов Google. Сократилось количество запросов к БД на 10, даже с активированным виджетом тегов, и потребляемая память почти в два раза (!). Оказывается, смена шаблона – это отличный способ снизить нагрузку, создаваемую WordPress 😀

В итоге, как мне кажется, получилось достаточно симпатично 🙂 А как вы думаете?

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




39 комментариев к “Оцените обновленный дизайн блога!”

  1. Дмитрий Смольников

    Если честно, то стало достаточно просторнее =)

    Ответить
  2. valery12

    Шрифт у букв очень мелкий,а в остальном нормально

    Ответить
    • oriolo

      valery12, шрифт немного поправила, сделала чтобы он измерялся в em, а не в пикселях. Посмотрите, как сейчас? И не могли бы Вы прислать скриншот, и указать разрешение Вашего монитора и браузер, если шрифт по-прежнему очень мелкий? Буду очень благодарна!

      Ответить
      • Евгений

        Всё равно мелкий шрифт 😉

        Ответить
      • valery12

        У меня разрешение экрана 1366х768,просматриваю в Chrome,шрифт у вас теперь оптимальный,приятно читать,еще на валидность код проверте.

        Ответить
        • oriolo

          Рада, что теперь все хорошо 🙂
          На валидность проверяла, ошибки, которые возникли – это из-за недоделанности стандарта HTML5.

          Ответить
  3. Аркадий

    Отправил почтой скриншоты, сделаны в Лисе. Если нужно сделаю в любом другом браузере ))

    Ответить
    • oriolo

      Аркадий, спасибо 🙂 Я кажется поняла в чем проблема, буду исправлять.

      Ответить
  4. Евгений

    Дизайн красив, даже очень. Опять же шрифт слегка мелок

    Ответить
  5. Дмитрий Смольников

    у меня и на ноуте и на компе шрифт в браузере Опера отображается нормально, не меликим и не большим.

    Ответить
    • oriolo

      У меня тоже, везде нормально. Размер шрифта выставила как в предыдущем шаблоне, думала, проблем не будет.

      Ответить
  6. Дмитрий Смольников

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

    Ответить
  7. oriolo

    Всем спасибо за помощь, я поняла, что дело в моем плохом мониторе, у которого максимальное разрешение экрана 1280×1024. На бОльших разрешениях шрифт действительно выглядит маленьким.

    Ответить
    • Евгений

      Ого, что я вижу! Текст, ласкающий мои глаза! Романтика ей богу 😉

      Ответить
      • oriolo

        Ну у меня действительно старый (6 лет) монитор, который всего 17 дюймов. Что ж теперь )))
        Или размер текста после моих манипуляций вдруг стал нормальным?

        Ответить
  8. Аркадий

    Вот теперь нормальненько! А то глазоньки устают мелкоту рассматривать…

    Ответить
    • oriolo

      Вот и хорошо 🙂
      А скрипт для увеличения размера шрифта по щелчку прикручивать передумала – слишком тяжелый. Если вдруг кому-то захочется, масштабирование поможет…
      Еще думаю сверстать макеты:
      1) под мобильные, экраны меньше 640 по горизонтали
      2) под широкоформатные, экраны больше 1600 по горизонтали
      И сделать чтобы в зависимости от разрешения, грузился нужный макет. Если допустить, что CSS3 понимают современные смартфоны, и уж тем более владельцы экранов разрешением >1600 установили у себя нормальные браузеры, это реализовать будет не трудно.

      Ответить
  9. УтБ

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

    Ответить
    • oriolo

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

      Ответить
  10. Илья

    Мелкая придирка к картинке в шапке:
    это не очень хорошо, правильнее будет использовать , а в целом прикольная тема получилась.

    Ответить
  11. Илья

    Съелись теги в прошлом камменте, должно было быть так:
    <?php }else{ ?> это не очень хорошо, правильнее будет использовать <?php else: ?>, а в целом прикольная тема получилась.

    Ответить
    • oriolo

      Спасибо, поправлю.

      Ответить
    • oriolo

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

      Ответить
  12. Елена

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

    Ответить
    • oriolo

      Елена, у Вас в шаблоне шрифт установлен в 13px (файл style.css, строка 262):

      .entry {
      text-align: justify;
      line-height: 18px;
      padding-top: 8px;
      font-family: Arial, Helvetica, Sans-serif;
      font-size: 13px;
      color: #666666;
      }

      Если хотите сделать шрифт как у меня, то надо:
      1) в приведенном коде вместо font-size: 13px; прописать font-size: inherit;
      2) в 14-й строке (body) добавить font-size: 100.1%;
      3) в 20 строке (#container) добавить font-size: 0.813em;

      Так Вы установите относительный размер шрифта (предполагается, что шрифт в браузере по-умолчанию 16, поэтому мы его за точку отсчета, прописав 100.1% размер для шрифта для тега body, и ставим размер для страницы 0.813em что соответствует 13).

      Потом сохраняете файл, обновляете страницу. Должно работать 🙂 Если что-то не получится – пишите 🙂

      Ответить
      • Елена

        Ирина, спасибо за разъяснение. Я постараюсь сделать. Хотя вчера ковырялась – ничего не получилось. Если бы я прислала свой шаблон, Вы смогли бы показать на нем точнее, я честно не в курсе, как считать строки. Да и в body у меня вообще пусто, ничего не прописано.

        Ответить
        • oriolo

          Елена, чтобы удобнее было редактировать файлы темы, установите редактор Notepad++ (http://www.softportal.com/software-5406-notepad.html), и уже им открывайте файл стилей (ну или просто в редакторе wordpress скопируйте код файла стилей, и вставьте в новый документ в Notepad++, редактируете и вставляете обратно), и там будут номера строк.

          Вашу тему я посмотрела через исходный код браузера, вот ваш файл стилей: http://kopilkasovetov.com/wp-content/themes/Princely/style.css, и в нем надо вносить изменения. В body в style.css у вас все нормально, может быть, Вы не там смотрели?

          Ответить
  13. Кирилл

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

    Ответить
    • oriolo

      Мне кажется, что серый не отвлекает от контента, да и просто для глаза приятен. Про баннеры – они висят всего день, но уже было 2 регистрации в дропбоксе – а это +500Mb к объему моего хранилища. Так что пусть пока будут. Ссылки закрыты в nofollow; я читала, что noindex уже не актуален, т.к. Яндекс научился распознавать nofollow.

      Ответить
  14. Евгений

    Поддерживаю про серый цвет, глаз не отвлекает и не мешает для чтения текста 😉

    Ответить
  15. Андрей

    По 10 быльной шкале, дизайн выполнен на 9,7.
    )))

    Ответить
  16. Обновлен дизайн на блоге

    […] дизайн на блоге Записки о WordPress. Эта смена дизайна уже вторая за время существования блога, но впервые сделаны […]

    Ответить

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