It’s time for another redesign. What you see is my new and shiny website.
I tried to keep the same brand feeling from my previous website versions. I still use the “Merriweather” font for all headings and the same primary colors. I added some new sections to my home page where you can sign up to get my free design resources and of course the ebook promo section.
I treat my own website more like an experiment and a big sandbox. With every redesign, I’m trying new things and I’m testing them in this real-life environment.
This time I did two big experiments:
Used percentage values for margins and paddings.
My website has a fixed maximum width but I tried to use percentage values for all margins and paddings, no matter if it’s vertical or horizontal. How does it work? Well, try to resize your browser’s window and see how it scales up and down.
I changed only font sizes and did some subtle layout changes to make it fully responsive. I didn’t have to reduce all the other spacings to match smaller screens. It saved me tons of time and it works pretty well. I’m thinking about using this method for other projects.
Moved my website to the Rainmaker Platform.
However, I’m not here to sell you the platform. Like many of my other “making of” posts, I want to show you the process behind my work. This time I’ll show you what it is like to launch a custom designed theme on the Rainmaker Platform.
Why Did I Choose Rainmaker?
The first and obvious answer would be because it’s our own product. That’s true. It was one of the main reasons. I think it’s good that we’re not afraid to use things we made.
I spent a countless number of hours in the Rainmaker admin panel while designing the user interface. I know every single pixel of it. We’re currently running our own websites on the platform and we’ve been using our own products for our own needs since I’ve been working at Copyblogger.
There was recently a discussion if Rainmaker is actually good for freelancers. I also had many questions from other developers if you can create a custom designed website on Rainmaker.
So, I wanted to try the Rainmaker Platform as a regular user. I thought it would be a great experience to actually see it from another perspective.
Beside experimenting, there are a couple interesting functionalities I found in Rainmaker that I always wanted to add to my website:
- Membership – I wanted to have a “Designers Area” on my website, where people can sign up and get access to all my free design resources.
- Analytics – I wanted to have a better view on my traffic from the admin area and have it all in one place.
- Selling products – To simply sell my future ebook. I can make a free version and give it away to my free members and offer a full ebook with the project files for paid members.
Step 1: Theme Development.
So, the entire process started as any other custom website project.
When I had the entire design ready in Photoshop, I started coding the theme like my previous custom Genesis child themes. I set up my local development environment on a regular WordPress installation and Genesis framework.
The only thing I had to remember was to not use any plugins at all. I focused on developing the functional website without any external plugins. I skipped styling any elements that would require Rainmaker functionality like forms, membership login/registration page, etc.
I coded all template pages like home page, about, ebook landing page, blog and a single blog post. When I tested it on different browsers and made it all responsive I was ready for the next step.
Step 2: Theme Submission.
Because the Rainmaker Platform is a closed environment, you don’t have a regular access to FTP. Using your own custom themes is still pretty easy though.
I zipped my theme and submitted it to the Rainmaker support, so they can review it (yes, the support checks if there is any suspicious code in your theme – that kind of security!) and installed it into my account.
I activated it in my account (which is in the staging mode and out of public view) and started setting it all up.
Step 3: Setup.
First, of course, I imported my content from my old site. I could have used one of the migration services but my website is not content heavy and I thought it would be much easier if I handle it myself. Plus, I reorganized my page structure which needed some custom work anyway.
Second, I changed some general settings in Rainmaker: I chose social media buttons, created a contact form, set up the number of posts that should be displayed on the blog and uploaded a favicon.
Finally, the biggest thing was to set up my “Designers Area,” which is a simple membership system. This task was more about using shortcodes in the right places. I added a login page, registration page and Designers Area page (which is the final page that you can see when you’re logged in).
I’m pretty flexible in using shortcodes based on my experience with the previous projects but if you’re new to Rainmaker, just type in “shortcodes” in the Knowledge Base search form and a list of tutorials will pop up.
That process didn’t take too long and all my membership pages looked pretty good right out of the box. Of course, I wanted to take it a step further and customize the look of everything. That’s the next and final step…
Step 4: Final styling and fixes.
I had to take a small step back and update my CSS for the new elements like contact form, login form, registration form and Designers Area page.
I didn’t really have to update the theme’s code. I could add all new CSS code to the “Custom CSS” area in the Rainmaker admin which was very convenient and let me preview all changes right away.
There were of course a few bugs in the theme’s code that I missed. I fixed them on my local theme’s version, updated the CSS file and resubmitted the theme to the RM support.
It was fun to see how it all works from another perspective. Even though I thought I knew everything about our own product, there were still many new things I learned.
I think Rainmaker it’s an unique platform that has a lot of values but comes with some limitations as well. It’s up to you to decide if it’s worth trying it.
Like every new application or framework, it needs some practice and a good process to become more fluent in using it.
What’s most important for me is that I have my new website with membership access up and running in a relatively short period of time. You can all benefit from it by signing up and downloading my new free design resources 🙂