You could learn something out of this experience of website rebranding

Published By zooboole

Several times I have hesitated to write this note simply because I was doubting how it could benefit my peers. I was like after all, who is interested in whatever you do with your website? Many people redesign their websites every day and they don't have to write about it.

Indeed, but I have chosen to do so for a few reasons:

1. Lancecourse.com is an educational website
2. Lancecourse teaches how to create and manage websites
3. Lancecourse places sharing experiences in first place

So why not? With that, I think it's definitely worth writing about it, and as it's a custom for me to share my experience every time I make any major changes on the website to let any learner know a bit about it. It's very hard to get time and write an entire tutorial on how to build a website from A-Z. This is, therefore, my attempt to satisfy those who are in quest of such solutions. I believe through that process there's something you will learn/discover about websites or particularly the effort behind Lancecourse.com.

1. Why a new design

Well, the short answer is the first design sucks a lot. It wasn't that cool to me and to many people as well, most visitors were complaining of it not being responsive or not attractive, and mostly very buggy.

The long answer is, aside from the fact that it isn't good, I think it's a great experience every developer should adventure in from time to time. Lancecourse.com is a personal blog, it's, therefore, my lab. At a point in time, I test and experiment my knowledge by making something out of passion.

I am not expecting this to be the perfect experience ever, rather I am expecting it to be a stage of such a process that allows someone to start learning from there and therefore improve themselves with time.

2. Design

Designing the website was what took me a lot of effort and time. It's normal because that was the main reason why I decided to re-build it. I had some goals I planned to reach:

• Create a maintainable CSS, I should be able to fix any design issue at any moment
• Make the website as responsive as possible
• The content should be readable(for most people)
• Add more clarity(more space) between different elements
• Avoid a lot of distractions with my ads
• I needed speed
• I needed to kill the user experience challenge especially for mobile devices

In the previous version I used compass to compile my SASS. With ruby installation issues, I lost the hand. At the end, it became impossible for me to edit the website. This time I opted for Gulp build tools, to compile my SASS, JS, and also for the minifications of both and the optimization of my images(even though that aspect still escapes me a bit).

Also, I made great use of Joel Longie's SuperCell. This tool helped me a lot, especially in how to organize my SASS files, and some variables too were already set.

I didn't want to use Twitter Bootstrap simply because it makes the code very clumsy and messy(my experience). I used a similar Technic in the previous version where I created my own grid system based on the Bootstrap's. I have some issues with that method:

• It binds the framework to your HTML code
• You cannot easily switch from one CSS option to another
• Its limits, yours too.

Bootstrap and Foundation were out of my options. Then to ensure responsiveness and have a clean HTML code, I made use of susy and breakpoint. These two combined were a perfect solution for my need.

This design really taught me a lot in terms of how important designing a website is. Somehow it seems harder than the backend(probably because I am used to the backend more than front end).

So, the starting point of my SASS is like this:

// ***********************************
// IMPORTS
// Import susy, breakpoint, resets and grids
// ***********************************

@import "../../bower_components/susy/sass/susy";
@import "../../bower_components/breakpoint-sass/stylesheets/breakpoint";
@import "reset";

// ***********************************
// HELPERS
// ***********************************
//
@import "variables";
@import "mixins";

// ***********************************
// BASE STYLES
// ***********************************
//
@import "base";
@import "typography"; // typography and links
@import "images";
@import "icons";

// ***********************************
// UI ELEMENTS
// ***********************************
//
@import "ui/lists";
@import "ui/tables";
@import "ui/forms";
@import "ui/buttons";
@import "ui/search";
@import "ui/breadcrumbs";
@import "ui/pagination";
@import "ui/panels-notifications";
@import "ui/tabs";
@import "ui/sliders";
@import "ui/toggles";
@import "ui/progress-bars";
@import "ui/tool-tips";
@import "ui/modals";
@import "ui/accordions";

// ***********************************
// SECTIONS
// ***********************************
//
@import "sections/404";

Image 1: Sass file as organized by SuperCell 1 - main.scss

3. Development

Nothing big was to do here. I already had the backend of the website and it was passably strong. Alas, I had to go through some parts, refactor them, what I will be doing all my life anyway, Ahahaha.

But one big thing I did in the back end is the call to some third party modules such as : phpmailer, michelf mardown parser, intervention/image, google recaptcha, dompdf, etc. Those helped a lot to simplify some task and gain in resource. For example where I was looping through my database to send emails I can now use phpmailer and do the same thing faster in less time as if I was running just one process.

I edit all my articles(blog posts and tutorials) with MarkDown and Michelf's PHP Markdown parser library helps me to parse it into its final HTML equivalent.

In order to protect(a bit. Ahahaha) the forum and the commenting system, I used HTMLPurifier to filter users' input.

One big mistake I made (even though it's still not that perfect) in the first version was not the optimize my images PHP side, and they became a heavy load for the website's speed. I had to disable them then. This time I have tried to handle that with Intervention/Image.

The core code at the backend resides in a homemade framework I noodled some since the first version. I wanted to use the nikic/fast-route like in Slim framework, but that would have taken me more time. Besides I am not ready to alter my framework. In case I had to do that I think it would be better to migrate the whole site to Slim.

4. Migration from old hosting to a dedicated one

A friend was giving an add-on under his web hosting service. But for some time now the website can have a pick of thousands (1000) to two thousand(2000) a day. The server started to hang. Sometimes the website becomes very slow(I mean very very slow, almost impossible to open pages).

That was what made me think of a simple dedicated shared hosting proper to the site which gives me higher resources. But then the domain name was registered with ProQuest Consulting. So the domain from them was pointing to the hosting at Yooodoo's end which made the website to be spread all around. I needed to bring it into one single place, and that wasn't done that easily because I had some conditions to fulfill:

• Get the existing data from the old hosting without losing a single data
• transfer the domain from the old registrar without users noticing any off-time(in about 5 to 10 minutes)
• When I start the process, users shouldn't be able to input any data in the website.
• If it happens that a user visits the website during that time he should see a nice page asking him to wait for some minutes
• New functionalities must be operational as the new site goes live

With those goals set, I uploaded the website to the new hosting. Until then I was using the temporal domain name(since I haven't transferred the domain from the old registrar) and the IP address to work. I did most of the settings and testing. When I felt ready, I uploaded the maintenance mode page to the old hosting and edited my .htaccess file by redirecting all requests to that maintenance file. Then I exported the database and ask for the transfer of the domain name. I changed its NSes, A records, and my MX records(since I use mailgun).

Image 2: Maintenance mode Lancecourse.com

Here I was expecting the domain name to resolve in just about 5 to 10 minutes maximum(believe me it was possible). When that happens, the domain wouldn't be pointing to old hosting again, therefore it will stop showing the maintenance mode page and rather it will be pointing to the new IP address which will show the new website.

But, something dangerous happened. The hosting was with ResellerClub, and ResellerClub has some mysterious problem concerning domain transfer. And I was one of these rare victims. When that happens, during the transfer of a domain, all A records and MX records get deactivated and it becomes as if you are registering a new domain.

At first I didn't notice. That happens somewhere around 3 pm GMT on Friday 15th. After some hours Lancecourse.com was not resolving to any DNS server. I then opened a ticked:

-- 
Ticket summary:
Ahmed Salifou: 

Hello,

I just transferred this domain name to my sevenwebhost.com reseller account this afternoon. After the transfer process, I have edited its A records pointing it to the hosting(I ordered earlier on this week) IP address which is 207.174.214.239. But it's almost 4 hours now and it's still not resolved.

This is urgent please, my website is down.

Thanks for your help. 
--

Image 3: Ticket Message to Resellerclub

Then they asked me to confirm my identity what I did some hours later. Then they noticed my A, MX, and TXT records were all InActive and they're going to activate them but that would take some 4-6 hours to have the domain resolved. By then we were already at 3 AM on the next day(Saturday 16th). I waited till the 6 hours passed, nothing happened. I got in touch with them again and the said they were going to refresh the whole DNS Zone, what they did and the domain was back.

From there I started testing the website live and fixing some obvious bugs.

5. Emails

I had my emails linked to Thunderbird. Also, I recreated all the email in the new hosting at the moment it was bought. So they were all ready. And I did all the domain settings with Mailgun. All was just waiting for the domain to resolve. Besides, all those emails are stored in the old hosting which I can still access. I had no big issue with emails.

6. Challenges

Everything was challenging and required well-coined attention. It was a work on peace which constituted a whole complex system. It's normal, that's how every single software development is, and I am used to it.

Image 4: Cogs showing complex system - Source

Aside from this, remember I am in Africa, during this project I had light-offs and had to move distances in order to get somewhere to work. Moreover, while the website was down, the light was also down in my area for 3 days.

6. Rooms for improvement

The website looks cool and complete. Noo, I haven't arrived. The website is not the best. I can't even qualify it of stable, nor good. And the way it's actually is not what exactly I planned to do. I removed a lot modules and options like courses, chat, etc.

Plus, and most importantly, this is not what I aimed to offer you. Lancecourse.com is to provide tutorials. My goal therefore is to be able to deliver the best tutorials and news which will come from the best of my experience or others'. This website should become a room for good, simple, and fast learning: that's the room for improvement I am going to start working on. From now on I should be posting more often, about five times a week.

Bottom line

If you read up to here I am really glad for you. If you are a beginner in the field, this is a bit how things happen. you read this probably in ten minutes, but this work took about 6 months(not fully working on it). You can images the daily challenges.

If your are already used to this, I hope my experience was a souvenir for you and it makes you understand that you are not the only one in the situation. Beside, probably our technics of approaches differ somewhere, we're here to share knowledge.

If you are planning to have your website built by a developer or a team of them, I am expecting you to understand the task waiting for you and to start considering some things before you dive into.

I have not dedicated a special paragraph to the SEO because I think I haven't really done it, and I hope this could be an entire topic we will discuss on another time.

Thank you for this long reading.