In case you are just tuning in, this is Day 2 in my five day sprint to redesign, rewrite, develop and launch the CB.Graphics website. Oh, and I should mention that I’m building a custom WordPress theme for this site. Yeah.
I realized that I give all this awesomness to my clients, that just doesn’t show up on my website. I’ve scooted by with a lack luster site and it’s starting to catch up with me. In order for my business to grow and for me to bring on new clients I have to take care of my own house first. For me, my home is my website. That is why I’m doing this crazy thing and designing and publishing a new site in five days.
Day two is all about setup. The design is solid, the content is planned and now its time to execute. In order to complete all of the development work by the end of day five we have to have a solid base of global styles and template pages.
The first part of day two was spent reviewing and tweaking the design files. It is pointless to dive into code with incomplete and error filled design work. As I was reviewing the proofs I was also planning for the theme page structures. This means I am determining what might be hard coded into the theme, what graphics I will have as images and what will be generated by the CSS, and what short codes will be beneficial.
As I am working I will document all of these details for myself in the code and in a documentation page of the website.
When I am working on really rough or custom code I always start by developing on my local computer. What this means is that it is not live on the internet. You would not be able to see all the work I’ve done unless you were sitting right in front of my laptop. It lets me work without worry about who might stumble across my test site and is faster because I don’t have to load files up to my web host every time I want to preview a change.
For each WordPress website I build on my local machine I have to setup a new wordpress install. After getting WordPress up and running I started building the theme files and exporting the images I would need in the process. I decided to concentrate on the homepage because many of the styles that are set on the homepage are used throughout the whole site. The homepage is my firm foundation.
I start all of my custom websites with the navigation. It appears on almost every page and it’s important to get it setup correctly for both desktop and mobile. I am using bootstrap as my framework for this theme which saves buckets of time trying to get responsive menus to work. On my site this portion is particularly crucial because I have two different formats for my navigation, one for the home page and the other for the rest of the site.
My previous website had nearly no “call-to-action”. I wanted to really drive home what actions you could take if you were interested in learning more or wanted to work with me. Therefore, the buttons on the website are really important. I could have just as easily grabbed the styles for “generic” call to action buttons, but I wanted the buttons to feel special and tie into the branding.
I spent a lot of time on developing the buttons. It was really important to me that they be build completely in code and not sliced images. When buttons are images it takes longer to load the page and it also means that if you can’t load the images you have no idea what is supposed to be there. Image file buttons may also look low quality on retina displays, which is no good.
There are three different sizes of buttons and three different colors. In the past I have hard coded the styles into the WordPress editor. Most WP developers see this as a no-no for a couple of reasons. The main one is that you can’t see what’s going on in the visual editor where the client will be doing most of the editing. I decided to setup shortcodes for this theme to make it easier on myself and anyone I might hire in the future.
While I was working through the problem of the buttons I jumped out of my wordpress theme and started using CodePen to “sketch out” ideas of how to approach the buttons. Sometimes it’s faster to work this way, and it means that I’m not going to have to waste time cleaning up my code in the real website later.
The end result is pretty fantastic. There is always this moment in development when you push through to find the right solution that just makes everything right in the world. About half way through the day I hit a wall on the buttons and had to walk away and work on something else. I’m so glad that I came back to it though.
I decided to call my theme “Tilt Shift”. The term tilt shift is a photography technique that results in photos that look like minitures. The process of taking a tilt shift photo requires multiple photos looking at the subject at different angles. This is what I do for my clients. I look at their business from every angle to highlight what’s unique about them. I help you focus on both the details and the big picture at the same time.
The original plan was to spend several hours writing content and then working on some basic pages. Most of the home page is already done, so I have revised my plan to make sure I have enough work to fill tomorrow.