Baby's First Domain redesign with Laravel and Bootstrap
One of my ugliest sites has always been Baby’s First Domain. The background was a muddy greenish color. The blindingly bright orange from the logo wrapped the content of the page. Everything was unstyled and just bleh. To make matters worse, the backend was powered by an ancient version of CodeIgniter. And with 37% of this site’s visitors using a mobile device, the fixed width layout was unacceptable.
The site was originally intended to help you find a domain name for your child. You can then use that domain name for email, a photo gallery, a blog, a link to their wish list at Amazon, whatever. That part of the site has never really turned a profit, so at some point I added baby name meanings. This part of the site is surprisingly popular.
I hope to get the domain name selling portion of the site beefed up so it can take over as the main feature of the site. I think I need to add some instructional videos on how to buy a domain, what to do with it, how easy it is to set up a wish list or photo gallery, that sort of thing.
Before that can happen, I needed a new design for the site using a modern framework. I settled on Laravel for the backend because it has basically won the PHP framework wars. It is easy to use and works well with popular build tools. It uses Composer for package management, so it is easy to pull in useful third-party tools. And everybody uses it so it is easy to find examples for just about anything you could want to do.
For the frontend I went with Bootstrap. I’ve used it a bunch on other sites. It is easy to make responsive sites without monkeying with a bunch of CSS. Its build system makes it easy to customize without digging through thousands of lines of code.
I spent about 3 days working on the new site. I used a few new packages that had some large prerequisites and I’m on incredibly slow DSL, so most of the first day was spent getting my dev environment setup. Oh how I miss cable internet!
The logic for this site is pretty straightforward, and I was able to copy/paste a lot of it from the old site. I saved the logo from the old site for now. My wife is going to convert the baby in the logo into a vector, then I’ll use it and some CSS to make a more appealing logo that loads faster on all devices.
I also added a new search feature. You can type anything you want into the search box. The search page tries to find a baby name that matches what you searched for. If it is a name that works for both genders, it sends you to the most popular gender for that name. If the name isn’t found, it calculates the Levenshtein distance between your search term and all the names in our database, and directs you to the closest match. This makes it really easy to find the baby name meaning you are looking for.
I also use the Levenshtein distance on some of the 404 pages. For example, if someone tries to go the meaning page for Jaycob, the 404 page will suggest Jacob, Yaacob, or Kaylob.
Another new feature I added is a boys and girls name page. On the old site you had to pick the first letter of the baby’s name to get a listing of all names that begin with that letter. You can still do that on the new site, but it is a bit tedious. On the new boys/girls name pages, I display a handful of the most popular names for each letter, with a link to the full listing. This makes it much easier to find common names.
Laravel is an absolute joy to work with. In about 10 minutes I created a command line script that pulls names from the database to automatically create a sitemap. The sitemap is saved in both xml and gz formats. The script is automatically run once a week by Laravel’s scheduler.
There is a lot of room for expansion on this site. I could easily add a baby due date calculator, tie in to various baby name APIs for more data, and perhaps even add templates for baby websites (like an announcement site, photo gallery, etc).
Anyways, I’m pretty happy with it. Only time will tell if the redesign actually increases my revenue or retains visitors better, but I’m optimistic.