(Jimdo, №4) Как создать блог на Jimdo, ч. 4: интернет - это мультики (текста: МНОГО, 11 картинок)

Мы с Машей (справа) достраиваем сайт и правим общую концепцию.
Мы с Машей (справа) достраиваем сайт и правим общую концепцию.

После 3-й части Jimdo-цикла минуло уже более полугода. А с момента регистрации домена krolix.net --- аж 9 месяцев. Выносили и родили, можно сказать! И, похоже, получился отнюдь не выкидыш. 


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

 

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

1. Сравниваем визуально, что поменялось за 6 месяцев

Так, давайте прилеплю сюда скриншоты
а) главной страницы,
б) раздела "Кроличья нора" и
в) одного из очерков,
в том виде, как они представлены на данный момент...

 

Ну вот, готово!

Они --- ниже; слегка размытые, но общая структура видна.

И немного ностальгии...

Для наглядности --- справа картинка того, что было 6 месяцев назад. Как видно, изменений довольно много и они касаются практически всего.


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

Сайт krolix.net полгода назад (в августе 2014 г.)
Сайт krolix.net полгода назад (в августе 2014 г.)

2.1. Общие изменения интерфейса

Lobster - один из лучших рукописных шрифтов на данный момент
Lobster - один из лучших рукописных шрифтов на данный момент

1. Шрифты

  1. На смену PT Sans пришел Arimo, элегантный вариант Arial'а; кегль изменился с 16px на 17px.

  2. Заголовки

    <h1>,

    а также подзаголовки и путеводные предложения

    <h2>

    стали писаться Lobster'ом вместо Neucha. Для большей аккуратности. Neucha остался для заголовков страниц

    <h3>.

    Для заголовков статей используется Arimo 20px --- для более легкого чтения и компактности.
  3. В меню используется крупный "тёплый ламповый" Bad Script.
А вы любите цвет?
А вы любите цвет?

2. Цвета, картинки и hover-эффекты

  1. Изображения при наведении (т.н. hover-эффект) теперь осветляются. Классика CSS3. Без этой интерактивности сейчас сайт отставал бы по дизайну года на 3-4. 
  2. Если изображение кликабельно и обтекается текстом, то у него также присутствует небольшая тень.
  3. То, что было в галереях в виде сетки --- трансформировано в горизонтальную матрицу или слайдер. Сетка плоха' обрубанием фото до квадрата (а-ля ненавистный инстаграм). А без обрубаний выглядит она ужасно.
  4. Цвета слегка пересмотрены. Зеленый теперь более спокойный, а текст --- породистый черный #000000. Фоновый рисунок сильно осветлен, чтобы не было контраста с белым макетом блога, который им окаймляется. Выпадающие пункты меню теперь того же цвета, что и верхняя его полоска (что логично).
  5. Макет блога имеет фон белого цвета с минимальной непрозрачностью. Прозрачнее делать не стал --- на мой вкус, негативно скажется на читаемости текста.
Порой буквально утопаешь в волнах html-кода
Порой буквально утопаешь в волнах html-кода

3. Макет

  1. Поля увеличены с совокупных 100 пикселей (по 50px слева и справа) до 200 пикселей. Тем самым текст выглядит менее зажатым.
  2. Как следствие, ширина строки была 110-115 символов (текстовый блок 980px), а теперь 100-105 символов при ширине 880px. Подбирал компромисс между удобочитаемостью конкретного абзаца и возможностью обозреть всю статью в целом и не потеряться в её структуре (на мой взгляд, тот же Jimdo в своём блоге подает дурной пример излишне крупного текста и короткой длины строки).
  3. Такие параметры шрифта и ширина лучше подходят для мобильников --- меньше необходимости переключаться на мобильную версию сайта. Кстати, ограничил максимальное увеличение для экрана смартфонов. До этого жутким образом съезжало меню и вёрстка. Сейчас всё в порядке.
    А если мелко --- можно переключиться на ту же мобильную версию. Это лучше, чем поплывшая разметка сайта.
  4. Меню выровнял по центру и изменил ширину выплывающих пунктов до необходимого размера. А уж после этого и сам шаблон также обрел выравнивание по центру.
  5. Логотипчег с названием сайта и кроличьими следами аккуратно вкрячен в самый верх страницы.
Выплывающая панелька со свежими записями
Выплывающая панелька со свежими записями

4. Выплывающие панели и внешние виджеты

  1. Из монструозной левой панели с 9-ю пиктограммами --- убрал 3. Осталось 6:
    прокрутка вниз к комментариям,
    прокрутка вверх,
    мобильная версия и
    поделиться в твиттер/фейсбук/вконтакте.
    Панель почти прозрачная, дабы не отвлекать, и обретает цвет при наведении. Текущая версия --- 29-ая :)

  2. Прокрутка по анкорам, кстати, плавная и прикручена с помощью jQuery.

  3. Добавил справа выплывающую мультипанель с поиском, подпиской, комментариями и "газетой" записей. По дизайну она --- самое простое, что есть сейчас на сайте. Зато функциональна и не назойлива.

  4. Модуль "Показать блог" меня не устраивал по 2-ум причинам: а) его нельзя было, подобно виджету, засунуть в колонку (или <div>) и б) он очень громоздкий и высокий. Раздражавшую меня кнопку "Далее" я ликвидировал, причем очень просто. Но все равно без виджета RSS Mikle было не обойтись.

  5. Виджет-лента публикаций Mikle (он, например, показывается в панельке "Свежие записи") наконец-то отображает картинки! Обновленные виджеты были добавлены в ленты.

    Но как оказалось, виджет не любит кириллицу в названии фида. → Пришлось заниматься URL-кодированием.

    Далее обнаружилось, что при склейке более 3-ёх фидов фрейм с ними периодически не прогружался. → В итоге извращенный фид Jimdo, весящий в моем случае до 50КБ/пост, пришлось загонять в Yahoo PipesДень разбирался --- в итоге отсёк от потока всё не нужное и уже потом скормил его виджету Mikle.

    Работает. Главное, чтобы Yahoo не прикрыл с концами сервис Pipes --- он реально полезный!

2.2. Изменения в оформлении статей

Оформление статей изменилось
Оформление статей изменилось
  1. Как я уже писал, заголовки стали более аккуратными с Lobster. Помимо оранжевого заголовка h2, для лучшей читаемости таким же шрифтом может идти первое предложение абзаца. Это особенно актуально для очерков со сложным языком и структурой. 

    При первоначальном вертикальном сканировании взгляду есть, за что зацепиться. Капс, кстати, Lobster'у очень не идёт.
  2. Что касается структуры статьи: если изначально я разбивал фотоподборкой каждые 3-4 абзаца по 4-6 строчек, то сейчас тяготею к включению фотографий в текст и их обтеканию текстом. Горизонтально выровненная матрица и слайдеры также активно используются --- для разнообразия. 

    Люди сейчас любят в интернете "смотреть мультики" и не любят читать. Я это учитываю, но от сложного, порой, языка отказываться не собираюсь.
  3. Абзацы стали более короткими и рублеными. Вкупе с более коротким строками это позволяет не перегружать читателя текстовыми массивами.
  4. Ко всем фотографиям в анонсе добавлены подписи. Опять же, для сканирующих заголовки случайных визитёров.

2.3. Изменения в оформлении заглавных страниц сайта

Главная страница стала функциональнее, разделы получили своё лицо
Главная страница стала функциональнее, разделы получили своё лицо
  1. Теперь все страницы имеют названия латиницей. Спасибо, Jimdo. Не прошло и года! Ладно, отключаю сарказм. Реально спасибо, а то при переименовании пункта меню --- менялось название страницы, что сразу ставило в тупик поисковик и систему комментирования.
  2. Разделов стало меньше и каждый из них теперь сделан вручную, а не копипастом. Появились уникальные иконки и заголовки для каждого из них. Сайт персонализируется и обживается :)

  3. В структуру стилей добавлен класс вкладок (табов), и на вкладки же поделены страницы-каталоги с записями. Очень удобно. Жаль, что в CMS-ку они не вынесены (приходится править html-код).
  4. Убрал Nivo-слайдер с главной. Считаю, что много места сжирает. И грузился он долго. Но это --- из области вкуса фломастеров.
  5. Верхушку главной страницы поделил на 2 колонки. До сих пор она была слишком свободная.
    Справа добавил дайджест изменений на сайте. Проект не буксует на месте и развивается. И если в марте не было ни одной заметки, это не значит, что не было работы над сайтом :)

Заключение

За последние krolix.net, на мой взгляд, капитально преобразился. Визуально он меня наконец-то устраивает. 


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


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

 

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

PS Создать свой сайт на Jimdo вы можете, заполнив эту форму или же поручив разработку сайта мне.

 

Если будете покупать платную версию, могу предоставить скидку на неё 500 рублей.

 

В любом случае --- с меня консультации и помощь вам в увлекательном деле сайтостроительства.



Оставишь ниже пару строк? 

Понравилась запись - подпишись и поддержи нас в социалках :)

IT-шное