Сайт Tiku 2.0

Сайт Tiku 2.0 — я сде­лал пер­вое круп­ное обнов­ле­ние сво­е­го сай­та с момен­та его запус­ка в 2012 году. Нача­лось все с того, что я хотел пере­не­сти сайт на CMS Wordpress. Ранее на Wordpress рабо­тал толь­ко блог на моём сай­те, а осталь­ная часть сай­та была ста­тич­ной т. е. сде­ла­на на чистом HTLM и CSS.

Зада­ча. Сде­лать новую вер­сию сай­та Tiku и пере­не­сти сайт на CMS Wordpress.

В каче­стве основ­ной идеи для дизай­на я решил взять лен­ту из кар­то­чек. Этот под­ход сей­час назы­ва­ют Bento Grids (Бен­то Гридз). Этот под­ход пока­зал­ся мне доста­точ­но уни­вер­саль­ным и при этом гиб­ким и с широ­ки­ми воз­мож­но­стя­ми для даль­ней­ше­го раз­ви­тия. При появ­ле­нии новых типов кон­тен­та мож­но про­сто создать новый тип кар­то­чек и впи­сать их в общую ленту.

Одним из основ­ных раз­де­лов мое­го сай­та все­гда было резю­ме. Я пол­но­стью пере­ра­бо­тал дизайн это­го раз­де­ла, сде­лал его более совре­мен­ным и инфор­ма­тив­ным. Опыт рабо­ты и обра­зо­ва­ние я пред­ста­вил в виде вер­ти­каль­но­го тайм­лай­на. А все основ­ные навы­ки поде­лил на жёст­кие и мяг­кие. Навы­ки я так­же визу­а­ли­зи­ро­вал в виде про­гресс-баров с уров­нем зна­ния в процентах.

Перед тем как про­дол­жить обзор кон­крет­ных стра­ниц и раз­де­лов сай­та Tiku 2.0 я рас­ска­жу про основ­ные фиш­ки и ново­вве­де­ния, кото­рые я внед­рил про обнов­ле­нии, вот они:

• Тём­ная тема
• Вер­сия сай­та на английском
• Уни­вер­саль­ная бен­то-сет­ка, кото­рая адап­ти­ру­ет­ся под коли­че­ство блоков
• Блок похо­жих записей
• Лай­ки, коли­че­ство про­смот­ров и вре­мя на чте­ние в блоге
• Блок сле­ду­ю­щая запись
• Визу­а­ли­за­ция частот­ной диа­грам­мы для музыки
• Поиск по сайту
• Фор­ма обрат­ной связи
• Согла­сие с coockie
• Опти­ми­за­ция адап­тив­ной вёрстки
• Избран­ное в порт­фо­лио и музыке
• Пере­нос сай­та Deerror в раз­дел с музыкой
• Инди­ка­тор про­крут­ки страниц

Что-то было сде­ла­но с исполь­зо­ва­ни­ем стан­дарт­ных функ­ций WordPress, а что-то я писал сам или исполь­зо­вал внеш­ние биб­лио­те­ки и code-сниппеты.

Для порт­фо­лио и музы­ки я так­же внед­рил тэги­ро­ва­ние по сти­лям, типам и фор­ма­там работ. Это облег­ча­ет груп­пи­ров­ку свя­зан­ных работ и музы­каль­ных релизов.

После пере­но­са все­го кон­тен­та с сай­та Deerror была сохра­не­на фир­мен­ная цве­то­вая схе­ма. Новый дизайн так­же был адап­ти­ро­ван под цве­то­вое оформ­ле­ние Deerror.

Раз­дел с музы­кой Deerror как таже сде­лан на осно­ве обще­го дизай­на в сти­ле кар­то­чек Bento Grids (Бен­то Гридз) со сти­ли­за­ци­ей фир­мен­ным градиентом.

В порт­фо­лио доба­ви­лись новые под­раз­де­лы с целью боль­шей дета­ли­за­ции работ по типам и фор­ма­там. Так­же было добав­ле­ны новые глав­ные раз­де­лы в порт­фо­лио. Одним из новых раз­де­лов это «Видео». «Фото­гра­фии» и «Ани­ма­ция» так­же были доработаны. 

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

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

У сай­та появил­ся пол­но­цен­ный «под­вал». В нем раз­ме­ща­ет­ся реклам­ный блок и допол­ни­тель­ная нави­га­ция вклю­чая «хлеб­ные крошки».

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

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

Все тек­сто­вые бло­ки в бло­ге и на всем сай­те были оформ­ле­ны с уче­том опти­маль­ной дли­ны стро­ки. Этот момент часто игно­ри­ру­ет­ся при дизайне сай­тов, что пло­хо вли­я­ет на ско­рость и удоб­ство чтения.

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

Пере­вод тек­ста в эле­мен­тах интер­фей­са я реа­ли­зо­вал на осно­ве PHP усло­вий и спе­ци­аль­ных пере­мен­ных WordPress, кото­рые опре­де­ля­ют теку­щий сайт.