Tiku Website 2.0 — I made the first major update to my website since it launched in 2012. It all started with the fact that I wanted to transfer the site to CMS WordPress. Previously, only the blog on my site worked on WordPress, and the rest of the site was static, i.e., made in pure HTLM and CSS.
Task. Make a new version of the Tiku website and transfer the site to CMS WordPress.
New site and new knowledge
Ultimately, the main task of migrating the site to WordPress resulted in me redesigning almost the entire site along the way. This work touched on many aspects, from web design, layout to programming and search engine optimization.
Of course, in the process I also gained a lot of new knowledge and skills related to website development. I refreshed my layout skills and significantly improved my ability to create websites on WordPress. Not to mention programming and SEO.
The introductory part has been a little long, it’s time to move directly to the site.
I decided to use card stock as the main design idea. This approach is now called Bento Grids. This approach seemed to me quite universal and at the same time flexible and with ample opportunities for further development. When new types of content appear, you can simply create a new type of card and add them to the general feed.
One of the main sections of my website has always been a resume. I have completely redesigned this section, making it more modern and informative. I presented my work experience and education in the form of a vertical timeline. And I divided all the basic skills into hard and soft. I also visualized skills in the form of progress bars with the level of knowledge as a percentage.
Before continuing the review of specific pages and sections of the Tiku 2.0 website, I will tell you about the main features and innovations that I introduced in the update, here they are:
- Dark theme
- Website version in English
- Universal bento net that adapts to the number of blocks
- Block of similar posts
- Likes, number of views and time spent reading on a blog
- Block next entry
- Visualization of frequency diagram for music
- Site search
- Feedback form
- Agree with coockie
- Optimization of adaptive layout
- Favorites in portfolio and music
- Moving the Deerror website to the music section
- Page scroll indicator
Some things were done using standard WordPress functions, while others I wrote myself or used external libraries and code snippets.
For portfolios and music, I also implemented tagging by styles, types and formats of work. This makes it easier to group related works and music releases.
The music releases and DJ mixes page template design has been completely redesigned. The new content structure and more modern interface design, combined with frequency diagram visualization, create a much more efficient user experience.
After migrating all content from the Deerror website, the brand’s color scheme was retained. The new design has also been adapted to match the Deerror color scheme.
The section with Deerror music is also made based on the general design in the style of Bento Grids cards with a signature gradient stylization.
Adaptability and Responsiveness
Of course, the site adapts perfectly to different screen sizes, different devices and different input methods. I’ve never liked hamburger menus, so the new site uses horizontal scrolling menus throughout.
New subsections have been added to the portfolio to provide greater detail of work by type and format. New main sections have also been added to the portfolio. One of the new sections is “Video”. “Photos” and “Animation” have also been improved.
In addition to the deeper structure in the portfolio, I have also posted many new works and updated the detailed description template for each of the works. The description of the work has become more vivid, large image formats and additional stylization have been added.
The site now has many additional sections and template elements. Some of them are designed to comply with the requirements of the law regarding personal data. Also, new sections are often functional and are used for internal linking on many pages of the site.
The site now has a full-fledged “basement”. It contains an advertising unit and additional navigation including “breadcrumbs”.
The blog section has also undergone significant revisions and improvements. On the main page of the blog I added a block with popular posts. A new blog post is highlighted with a large format and an additional signature. In addition, the feed with post announcements now has a “Load More” function, which also synchronizes with standard pagination.
Additional blocks have appeared in the publication template, such as: similar posts, next post and a block indicating the author. A block with similar posts and a block with the next post perform several functions at once. They provide additional engagement for site visitors and also provide effective internal page linking.
All text blocks in the blog and throughout the site were designed taking into account the optimal line length. This point is often ignored in website design, which has a negative impact on speed and ease of reading.
The new site also provided the basis for the development of an English version. To do this, I used the standard WordPress Multisite feature. This feature makes it much easier to manage and maintain multiple sites that share a common WordPress core. In addition, multisites use a single administrative part and a common template.
I implemented text translation in interface elements based on PHP conditions and special WordPress variables that determine the current site.
I would like to end by saying that I would not be able to create such a site entirely on my own. I used a lot of information from open sources. The “Thanks” section was created especially for this occasion. In it I say “Thank you” to everyone and provide backlinks to the resource used.
16 July 2023