(Jimdo, №2) Как создать блог на Jimdo, ч. 2: нам 45 дней - новый дизайн (текста: ОЧЕНЬ МНОГО, 4 картинки)

Цветовая палитра krolix.net
Цветовая палитра krolix.net

За эти две недели утекло очень много воды. В том числе и горячей, на радостях, благо через день после публикации первого отчета о сайте нам ее включили.

 

Произошло у нас немало приятностей и в сайтостроении. Ведь именно в августе мы попробовали новые шаблоны Jimdo. О том, какой из них мы выбрали и как доводили его до ума, и поведу тут речь...

 

Контент у нас уже был, хоть и не сильно много. Дело стало за дизайном и скриптами.

1. Наши шаблонные мытарства

Какие шаблоны мы использовали

Изначально мы пробовали разные шаблоны, но задержались на двух. Голубой с "морским верхом" и S4162. Кстати, на мой взгляд, S4162 и S4163 - лучшие старые шаблоны. Там есть такой важный момент, как декоративный задний фон для заголовков. Это очень полезно, если вы реализуете, к примеру, новостной портал. Другое дело, что на Jimdo его создавать никто не будет, конечно, - тут нужен полностью открытый код. Слабое место на S4162/63 - невнятный дизайн меню.


Теперь мы осели на шаблоне Melbourne из новой коллекции "лето-осень 2014". Все скрипты (кроме имевшихся комментариев, RSS и социалок) я добавлял уже на него. Но об этом и о том, как мы подбирали цветовую гамму, речь пойдет в ниже. 


А пока сравним бок-о-бок 3 варианта сайта.

Параметр    
"Морской шаблон", №1                                               
Шаблон S4162                                                                Новый "зеленый" шаблон Melbourne                                       
Ширина ~ 900 px, боковая панель ~900 px, боковая панель 1080 px, без сайдбара
Меню Обычное Обычное Выпадающее, "прилипающее" к верху экрана
Стили Настроить можно только шрифты и заголовки
Настроить можно только шрифты и заголовки
Почти все настраиваемые, кроме фона заголовка, высоты меню и шапки. Фон страницы и прозрачность изменяемы.
"Подвал"
страницы 
Никакой
Никакой Полноценный

Про Melbourne также отмечу разрешения экрана по ширине, на которых удобно просматривать сайт "как есть". Это 1152, 1280, 1366 пикселей. При 1650 и 1920 (FullHD) рекомендуем увеличить через Ctrl+'+' страничку на 1-3 ступени. При 1024 и меньше - уменьшить масштаб. На мобильных девайсах, если полная версия неудобна или интернет медленный, можно переключиться на легкую версию.

 

Также перед Melbourne была идея перейти на шаблон Altona ( http://altona-template.jimdo.com/ ), но его создатель написал мне, что для России шаблоны не устанавливает - технические проблемы. Мол, заказывайте у Jimdo-партнеров за штуку баксов. Спасибо, конечно, за совет, но мы как-нибудь сами. В этом макете понравилось верхнее меню, раскрывающееся подсписками (All products), hover-эффекты картинок и примочки типа раскрывающихся по "+" блоков, которые я потом узнал, как делать, но решил не использовать, ибо не все на такие штучки любят тыркать, да и переизбытка текста у нас нету. Вот по hover-эффекту (подсвечивание) для стандартных картинок тоскую чуточку.


Комментарий от 15 апреля 2015 г.:


С hover-эффектами разобрался и внедрил (осветление изображений при наведение). Пришлось изучать код страницы. Даже не столько страницы, сколько подключаемой к ней CSS-ки шаблона. Но всё заработало. Подробности напишу в 4-ой статье цикла.

Преимущества нового Jimdo (на примере шаблона Melbourne)

1) Он широкий; жаль, что не резиновый

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

 

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


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

 

2) Регулируемая прозрачность фона и возможность устанавливать фоновую картинку и полностью свою цветовую гамму.


3) WYSIWYG редактор стилей по клику. Очень удобно.

 

4) Выпадающее меню с поддержкой прозрачности, которое прилипает к верху окна. При этом редактируемое из CMS. Офигенная тема! Ложка дегтя - поддерживается всего 3 уровня и высоту пунктов нельзя регулировать. В итоге в один пункт меню верхнего уровня можно вложить 50-60 подпунктов (учитывая оптимизацию для мониторов 768 по высоте с панелью адреса и вкладок в браузере). Пришлось категорию "страны" заранее раздробить на 3 подкатегории и все их вынести в корень меню. Но это мелочь.


Комментарий от 15 апреля 2015 г.:

Трёх уровней меню более, чем достаточно, даже если вы --- Samsung. Не надо мучить пользователя избыточными страницами, ему и так ваш сайт не знаком. Гид по странам в итоге я сделал на одной странице. Использовал разделение по вкладкам. По такому же принципу построен и раздел "Заметки о насущном", где мы с Машей пишем обо всём, что не касается путешествий.


5) Возможность задать отступ при выравнивании шаблона. Мне очень пригодилось: обычно все равняют по центру, а тут была необходимость сделать отступ слева и при зуме расширение/сужение шаблона вправо, а не в обе стороны, т.к.

а) выравнивание меню изменить нельзя - оно прилеплено к левому краю с отступом 50 пикселей

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


Комментарий от 15 апреля 2015 г.:

Две бессонные ночи --- и выравнивание по центру таки было сделано... Утрирую, конечно, про две ночи. Но покопаться пришлось. Сайт смотрится более гармонично, чем с выравниванием шаблона по левому краю с отступом.

 

6) Очень удобный и интуитивный backend-интерфейс редактирования в CMS. Добавилась функция автоматической проверки орфографии.

 

Что надо доработать компании jimdo (мелочи)

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

 

2) Ссылки на прикрепленные картинкиПорой надо явно передать скрипту прямую ссылку на картинку. Я понимаю, что прямые ссылки не доступны по правой кнопке мыши или для защиты авторских прав, или - вернее всего - для того, чтобы из Jimdo не делали фотохостинг и не публиковали потом ссылки на здешние изображения на сторонних ресурсах, ведь это загружает сервера Jimdo. Но для пользователей-то можно дать возможность безгеморно добывать прямые ссылки?! Их все равно можно получить, но это как штаны через голову надевать. 

 

Есть интеграция с Dropbox, предлагают его. Но тут есть нюанс - в Китае Dropbox, как и Google, недоступен. Как мне работать с сайтом, скажем, при командировках или путешествии в Китай? Кто поручится, что Dropbox, где в совете директоров Кондолиза Райс, не запретят в России? То же про Flickr. Зачем мне к рискам, связанных с Jimdo, добавлять риски, связанные с Dropbox, а потом судорожно менять ссылки на сотни изображений? Ведь я уже заплатил за хостинг и дисковое пространство размером в 5ГБ.

 

3) Копирование блоков - периодически блоки вылетают или подвисают в буфере. Но в любом случае хорошо, что есть такая возможность переноса блоков.


4) Нет функции копирования старой статьи в черновики новой - при создании какой-нибудь типовой статьи проще было бы воспользоваться функцией копирования. Это экономило бы 2-3 минуты на проставлении тэгов, заголовков, создании/копировании блоков и т.п. Не критично, но было бы здорово добавить.

 

Комментарий от 15 апреля 2015 г.:

Реализовали копирование статей, за что большое человеческое спасибо. Еще бы штатными средствами сделали кнопки "След./Пред. запись", и тогда вообще бы всё было как у людей потрясающе.

 

2. Стили

Шрифты

Jimdo подключает тяжелые шрифты Гугла. О том, чем это грозит с точки зрения скорости загрузки страницы, напишу в следующей заметке. Изначально мы выбрали 6 внесистемных шрифтов. Теперь осталось только 3 - PT Sans Narrow, PT Sans Caption и Roboto (просто потому, что он встроен в шаблон, и даже при отсутствии его в элементах дизайна подгружается - своего рода косяк). Понравились по начертанию и читаемости. PT Sans Narrow Bold используется для меню, т.к. позволяет уместить больше текста и при этом здорово выглядит, в отличие от многих других тонких Condensed-шрифтов. Размер 16 пунктов - не люблю мелкоту, а тут, считаю, идеальный компромисс между читаемостью и плотностью текста.

 

Возможно, добавим "рукописный" шрифт, но пока и без него нормально. Для наложения шрифта на картинки используем сервис cooltext.com.

 

Комментарий от 15 апреля 2015 г.:

Шрифты поменял. Основной теперь Arimo (подчищенный Arial). Подробнее --- см. 4-ю статью.


Цветовая гамма

Сели, посмотрели в инете палитры цветов, посмотрели палитру некоторых сайтов, согласовали, поспорили и на второй вечер все-таки достигли желаемого. Темный - это шрифт (он не совсем черный). Я тут не рассматриваю градации белого и зеленого в качестве фона, а также прозрачность - просто палитра из 5 основных цветов.

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


И вуаля (скриншот с kuler.adobe.com):

3. Что сделано за последние 2 недели

Продвижение и содержание

НИЧЕГО. Только эта статья. Ну, и сделали первые выплаты заказавшим у нас авиабилеты.

 

Интерфейс и функционал

⇒ Переход на новый шаблон: размещение имевшихся виджетов в "подвале" вместо сайдбара, их подгонка по размеру

⇒ Переход на новый шаблон: подбор и применение настроек цвета и шрифтов

Переработка меню с учетом выпадающих пунктов, обновление ссылок на старые внутренние адреса

Изменение "надподвального" блока с кнопками навигации (ограничил до "дальше"-"ранее"-"к категории")

Новые картинки в слайдер и подвал с осветляющим градиентом и шрифтами с cooltext 

Добавление правой выплывающей панели "Свежие записи" с RSS-виджетом, изменение цвета ярлыка в тон с сайтом

Добавление левой панели кнопок со ссылками "Поделиться" и навигацией по странице. Создание якорей для навигации. Тестирование панели и прозрачности. Актуальная версия панельки - 20-я :)

Оптимизация загрузки сайта: сжатие фоновых картинок, настройка асинхронного выполнения скриптов и т.д.


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

 

Об оптимизации сайта читайте в следующей статье.

 

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

 

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

 

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



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

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

IT-шное