Posted by Jon Schroeder on July 3, 2012
As we launch the new Redfish Bluefish Media site today, I wanted to share what goes into making a website, from the mockup to the full, working site. So, this is basically “how to go about building a WordPress site.”
Create a mockup for the new site. We use Adobe Fireworks for mockups, primarily – it’s designed to create websites, and while we don’t go to the trouble of creating any working models of the site there, it’s still the go-to tool for making a site.
The design process is iterative, and there are often several of the versions. For this site, there were three, and significant revisions were made to the third once a logo was chosen.
We set up a fresh WordPress install on a test domain. In the case of this site, that development site was awesome.redfishbluefishmedia.com, and we do most of the work right there when setting up a new site.
Once WordPress is installed, I set up a number of other items, starting with the Wireframe WordPress framework: this is our home-baked WordPress framework, which includes the 960.gs system, a modified version of the Meyer CSS Reset, and much more. Importantly, it also includes a custom options panel which we use on every site to add Typekit functionality (for custom fonts), to insert Google analytics tracking, and lastly to add a couple of popups to the site. The settings for that are below, so that you can see what it looks like:
After Wireframe is installed, I install the Wireframe child theme. This is the theme we’ll actually be developing, and it includes a few templates that in most cases I will be heavily modifying. It inherits the option panel and some functionality from the Wireframe parent theme, but it has some functionality of its own (for example, we define custom post types where necessary in here, since we don’t want those to be modified by accident by upgrading the main Wireframe theme).
Lastly, I install some standard plugins: The Yoast SEO plugin, the industry standard for WordPress SEO basics, Gravity Forms, the best form creation plugin out there, and one which we use on every new site, and the invaluable Types plugin, which I was using for the first time with this site. I’ll never build another WordPress site without it.
Looking back at the mockup in Fireworks, I save it as “mockup_final_working.png,” so I always have a clean copy to look back on if I start to break things in the mockup. Because now I’m going to cut out any images I need.
For this particular project, there actually isn’t much. The only images which appear on the site as part of the layout are featured images for various types of posts (including blog posts, services posts, project posts, etc. and images inserted into WordPress. There’s exactly one image, I think, that’s part of the html layout: it’s the logo, and for this project, I didn’t create that until after the entire rest of the site was complete.
For most projects, though, I’d cut up my layout into any images I think I’d need, using sprites if the site called for it. Usually, I don’t feel a need, but on an icon-heavy site, I’d probably create a large sprites.png file to put all of those into (so that you load one larger image once, rather than calling each of the logos and hover effects separately.
From here on out, we’re developing a custom theme. I start by moving ahead with the index page. It’s not necessarily the best practice, but I typically create php and css simultaneously. I don’t develop php files first, keeping the style 100% separate.
So, now I work through the php files in the following order, keeping the style.css file open the whole time:
At this point, we have the basics of a WordPress theme up and running, and it’s starting to look like the site. For this particular project, I already had to start setting up custom post types, too, since those custom posts (services and projects) are both displaying on the front of the site. Since I’ve already done that, it’s time to create pages for those, too, and since I want our services to sort themselves by category, we need a template to handle each of the four categories.
So now we have everything we need, and it’s down to tweaking the site, making sure the styling all works, etc.
When the templates above are done right, working within WordPress, it’s a breeze to add content. There’s a screenshot at the bottom of this page of how easy it is (another shoutout here to Types, which makes this process much quicker).
Up until now, there’s probably been mostly Ipsum Lorem text on the site. Now, I add real content through the WordPress backend. ‘Nuff said.
With all of the content in place, and after a great deal of troubleshooting already, it’s about time to browser test. I generally go through the following browsers:
Amanda graciously migrates our sites to their new domains, so that we don’t have too many cooks in the kitchen (and because I’m not as comfortable with migrations as I am with development), and then there are a few more final steps:
And, for most sites, training the client to use them is the last step! … and, we’re done!