#Design

2 Redesigns in 2 months – Why and How

Posted by Preetesh Jain,

To create the perfect website redesign, you’ll often want to start afresh. In this post, I’ll talk about why and how I redesigned this website (preeteshjain.com), twice. The things I found might help you redesign your website in the future.

The First Portfolio – Version 1

So before we even begin let me first show you how this website used to look. Here’s the screenshot:

FireShot Capture 9 - Preetesh Jain - https___preeteshjain.com_old-portfolio_

This old portfolio is still up, if you wanna check it out. Here’s the link: http://preeteshjain.com/old-portfolio

The structure

I was still in my early days of learning HTML, CSS and jQuery when I started creating this website. There were a lot of things I had to learn before creating anything of this scale. Thus, the website was laid out in a pretty simplistic manner. Here’s the directory structure:

This iteration wasn’t dynamic at all, as it had no PHP. Everything was hardcoded into the .html files. The jQuery code in those .js files, was responsible for all the fancy animations, transitions and navigation.

It’s pretty obvious by going through the site as to why it needed a serious upgrade. Every time I needed to change something I had to edit the code. Which was quite daunting. I still remember those days of FTPing all the files when they needed a fix or update. I am using Microsoft Azure as my hosting service, and back then, I didn’t know that I could harness the power of Git which works like a charm on Azure. Part of the reason was that I didn’t know Git quite well back then, and I was blindly tied to Windows as my OS of choice. Now as a daily Linux user, I realize everyday, how past mistakes teach you to abide to a better workflow in the present and in the future.

After a few months, I built CERISAL (cerisal.com), a photo board type site to revise my PHP skills. To my surprise I built the whole site within few hours. And it was online the next day.

Realizing the true power of a dynamic website, I made up my mind to update this site as well. Then a few weeks later, my code buddy and I built a high performance PHP-based boilerplate we named Stacc Web Engine. The performance swayed us both to update our personal sites with it right away. Since it’s based on the proven architectural pattern of MVC, dealing with data became a breeze. In the next section you can see how this first update used to look and work.

The First Update – Version 2

Based on Stacc Web Engine as talked earlier this update was planned with one important thing in mind and that was the ability to add and manage all my projects. I wanted a home for all the things that I’ve been doing. No wonder our web engine solved my problem since it was so easy to scale. Here are some screenshots:

FireShot Capture 1 - Preetesh Jain - https___preeteshjain.com_

FireShot Capture 4 - Preetesh Jain - https___preeteshjain.com_work_design

FireShot Capture 5 - Preetesh Jain - https___preeteshjain.com_work_code

This update featured a full MVC CRUD (Create, Replace, Update and Delete) support. So it had an admin (/admin) section where an Admin can manage all the aspects of website. Like adding new projects and deleting or editing the existing ones. Also, there was a section to manage all the images on the website with clean Imgur-like URLs and a section for editing the metadata for the site.

Design

For the UI in this update, I wanted it to be simply minimalistic. Unlike the first version which had too much stuff happening at each event, I decided to go with a clean, clutter-free design that focuses on content and typography with careful color coordination. To spice up the UX, the navigation to the sub-pages was made smoother with the help of the JavaScript history API.

Current Iteration – Version 3

While our web engine is performant enough to keep a large scale site working efficiently under substantial load without any fancy server tweaks or upgrades, I found that we were building just another WordPress. Yes! you read that right. WordPress. A tool I always under-estimated. This time around, I thought why not create a WordPress theme for our blog at Stacc. And so we began exploring all that WordPress really has to offer. Its API, which is simple and lets you build pretty much anything you can imagine, not just blogging sites.

While developing the theme for our blog at Stacc, I decided to update my personal website with WordPress too. I have to agree, WordPress has an unbeatable Admin Dashboard. There’s powerful media management, taxonomy support, settings, plugins and what not. And then there’s this dope TinyMCE editor which makes posting, drafting and everything else buttery smooth.

So the choice was yet again, obvious. WordPress might as well be the last stop for this site. Now let’s dive right into Greenhex, the theme I created from scratch, for the WordPress installation on this site.

Greenhex

Greenhex is the name of the theme this site is using. I began building this theme last month and subsequently started learning a ton of things about WordPress while I was at it. And in the planning phase, I decided to put together a blog (Ken), separating it from the custom post type that was required. This custom post type was for all my projects. So I realized that I have to bend the APIs, deal with permalinks and craft controlling mechanisms for both, the Customizer and the Admin Dashboard.

I will post off more on Greenhex and how I built this website with WordPress, under the work section.

Conclusion

For people who have at least some experience in MVC and need a website just for the purpose of posting small sets of dynamic data, WordPress maybe overkill. Without doubt, it’s powerful. But on the other hand, you may learn a great deal if you at least try out PHP MVC frameworks such as CodeIgniter or CakePHP. You will not only create your very own CRUD model but also learn to create new features for yourself.

And then, there’s another major factor which comes into play if you decide to create your own CRUD site, and that is Performance. Using only the tools that are necessary to build your site, the performance is guaranteed to go up. WordPress is known to have performance issues if you use a theme that issues too many HTTP requests. On the other hand, one can easily build a fast enough website, given a smaller set of requirements.

I’ll be writing off separate pieces on the stuff I built in the aforementioned timeline. Until then, have a good one.