Привет, друзья! Сегодня произошло одно важное событие в жизни моего блога, к которому я готовилась очень долго: теперь у блога oriolo.ru обновленный дизайн.
Разница со старым дизайном практически не видна внешне, однако произошли серьезные внутренние изменения: шаблон стал уникальным, он сделан мной лично, и сверстан на HTML5 и CSS3.
Вот как выглядел старый дизайн.
Он был весьма интересным, но имел недостатки, такие как табличная верстка, невозможно убрать вторую боковую колонку, узкая главная колонка, большое количество нестандартных настроек (более 30 файлов в папке с темой!), из-за чего было невозможно использовать некоторые плагины. И из-за множества мелких деталей в правой колонке, казался “нагруженным”.
Все эти недостатки я исправила в новом шаблоне, который сделала на основе темы-фреймворка Toolbox.
В новом шаблоне я сделала следующее:
- полностью переделала формы поиска и комментирования,
- изменила правую колонку,
- вынесла вверх кнопки соц. сетей, тем самым избавившись от виджета
- добавила нижнюю область виджета
В результате, главная страница стала “весить” всего 11,6 Кб чистого html, или 132 Кб со всеми скриптами и стилями. jQuery теперь загружается с серверов Google. Сократилось количество запросов к БД на 10, даже с активированным виджетом тегов, и потребляемая память почти в два раза (!). Оказывается, смена шаблона – это отличный способ снизить нагрузку, создаваемую WordPress 😀
В итоге, как мне кажется, получилось достаточно симпатично 🙂 А как вы думаете?
И еще, у меня есть огромная просьба: если вы заметили какие-то ошибки в новом шаблоне, если что-то не отображается, долго грузится, или просто выглядит криво, пожалуйста, сообщите мне в комментариях к этому посту, или любым другим способом, указанным на странице Контакты.
39 комментариев к “Оцените обновленный дизайн блога!”
Дмитрий Смольников
Если честно, то стало достаточно просторнее =)
oriolo
Дмитрий, я старалась 🙂
Андрей
Ага, полностью согласен
valery12
Шрифт у букв очень мелкий,а в остальном нормально
oriolo
valery12, шрифт немного поправила, сделала чтобы он измерялся в em, а не в пикселях. Посмотрите, как сейчас? И не могли бы Вы прислать скриншот, и указать разрешение Вашего монитора и браузер, если шрифт по-прежнему очень мелкий? Буду очень благодарна!
Евгений
Всё равно мелкий шрифт 😉
valery12
У меня разрешение экрана 1366х768,просматриваю в Chrome,шрифт у вас теперь оптимальный,приятно читать,еще на валидность код проверте.
oriolo
Рада, что теперь все хорошо 🙂
На валидность проверяла, ошибки, которые возникли – это из-за недоделанности стандарта HTML5.
Аркадий
Отправил почтой скриншоты, сделаны в Лисе. Если нужно сделаю в любом другом браузере ))
oriolo
Аркадий, спасибо 🙂 Я кажется поняла в чем проблема, буду исправлять.
Евгений
Дизайн красив, даже очень. Опять же шрифт слегка мелок
oriolo
А в предыдущем дизайне шрифт был нормальным?
Евгений
Нормальным, главное читабельным 🙂
Дмитрий Смольников
у меня и на ноуте и на компе шрифт в браузере Опера отображается нормально, не меликим и не большим.
oriolo
У меня тоже, везде нормально. Размер шрифта выставила как в предыдущем шаблоне, думала, проблем не будет.
Дмитрий Смольников
Хотя сейчас припоминаю, вчера шрифт был мелким, это я запомнил по первому предложению.
wertock
айс
oriolo
спасибо))
oriolo
Всем спасибо за помощь, я поняла, что дело в моем плохом мониторе, у которого максимальное разрешение экрана 1280×1024. На бОльших разрешениях шрифт действительно выглядит маленьким.
Евгений
Ого, что я вижу! Текст, ласкающий мои глаза! Романтика ей богу 😉
oriolo
Ну у меня действительно старый (6 лет) монитор, который всего 17 дюймов. Что ж теперь )))
Или размер текста после моих манипуляций вдруг стал нормальным?
Аркадий
Вот теперь нормальненько! А то глазоньки устают мелкоту рассматривать…
oriolo
Вот и хорошо 🙂
А скрипт для увеличения размера шрифта по щелчку прикручивать передумала – слишком тяжелый. Если вдруг кому-то захочется, масштабирование поможет…
Еще думаю сверстать макеты:
1) под мобильные, экраны меньше 640 по горизонтали
2) под широкоформатные, экраны больше 1600 по горизонтали
И сделать чтобы в зависимости от разрешения, грузился нужный макет. Если допустить, что CSS3 понимают современные смартфоны, и уж тем более владельцы экранов разрешением >1600 установили у себя нормальные браузеры, это реализовать будет не трудно.
УтБ
визуально честно сказать не заметно 🙂 но если присмотреться, то да))
кстати, используйте относительные величины для того чтобы подстраиваться под нужное расширение экрана 😉
oriolo
Старалась 🙂 Старый шаблон был сделан на основе темы Atahualpa, расположение элементов, цвета и закругленные уголки настраивались в ручную. Но не нравились, что он сделан на таблице, и что нельзя было убрать второй сайдбар. Решила переверстать так, как мне надо 🙂
Илья
Мелкая придирка к картинке в шапке:
это не очень хорошо, правильнее будет использовать , а в целом прикольная тема получилась.
Илья
Съелись теги в прошлом камменте, должно было быть так:
<?php }else{ ?> это не очень хорошо, правильнее будет использовать <?php else: ?>, а в целом прикольная тема получилась.
oriolo
Спасибо, поправлю.
oriolo
Только сейчас поняла, про что Вы 🙂 Там на картинке просто кусок кода из моей прошлой темы. Пусть уж так остается, картинку переделывать долго 🙂
Елена
Мне тоже все понравилось в новом шаблоне. И шрифт очень нравится. Ирина, не подскажете, как размер шрифта изменить? Где можно посмотреть об этом – мой шрифт меня не устраивает, а на вашем сайте – идеальный.
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 у вас все нормально, может быть, Вы не там смотрели?
Елена
Хорошо, Ирина, спасибо. Постараюсь разобраться.
Кирилл
Впринципе шаблон красивый, но как-то в нем слишком много серого. Советую вам убрать в сайдбаре ссылки на dropbox и хостинг, не уверен, что вы на них так уж много заработаете. Или хотя бы закройте их от поисковых систем.
oriolo
Мне кажется, что серый не отвлекает от контента, да и просто для глаза приятен. Про баннеры – они висят всего день, но уже было 2 регистрации в дропбоксе – а это +500Mb к объему моего хранилища. Так что пусть пока будут. Ссылки закрыты в nofollow; я читала, что noindex уже не актуален, т.к. Яндекс научился распознавать nofollow.
Евгений
Поддерживаю про серый цвет, глаз не отвлекает и не мешает для чтения текста 😉
Андрей
По 10 быльной шкале, дизайн выполнен на 9,7.
)))
Обновлен дизайн на блоге
[…] дизайн на блоге Записки о WordPress. Эта смена дизайна уже вторая за время существования блога, но впервые сделаны […]