Recently I asked you what you’d like to learn how to do, and one reader asked about the process of taking a mockup of a site into WordPress. There are quite a few good tutorials out there and you’ll want to read several as you’ll pick up different ideas and tips from each one. Anyway, this is my process:
Create your mockup
When mocking up the site, always keep CSS in the back of your mind. Don’t let it stifle your creativity, but do keep in mind you’re going to have to translate your design into code and considering how you’re going to make that happen as you’re creating it is helpful. If you’re new at taking a design into code, then start simple. Once you have some practice, then branch out a little. I have found that just about anything I design, I can find a way to code it effectively, and pushing the limits each time expands my proficiency with CSS and WordPress.
Also consider the size of graphic elements as you’re designing. You want your site to load as quickly as possible. Use repeatable tile graphics where possible, and if you can use them in multiple places all the better. For example, your small gradient that you’re repeating horizontally across your nav bar can also be used as the background for a search button and for sidebar headings.
Print out or sketch your mockup and make notes
This step isn’t always 100% necessary, but depending on the complexity of what I’m trying to accomplish, I often find it helpful to think through where all the divs are going to go on paper and make notes about border and background color codes as well. It makes it much easier to fly through the coding stage having thought through it all on paper first.
Slice your mockup
Do this after you’ve done the above step, as it might impact how you slice your images. Make your images as small as possible to accomplish the design. You only need a 1px wide slice of that nav bar background that repeats horizontally. Be sure you’re using the “Save for Web” option in Photoshop and compare file types to get the smallest size with the best result possible. I save my images as PNGs if possible because they are lossless, but I always compare what the file size is if I were to save in JPG at about 70% and if the JPG is smaller that’s what I go with. If I’m going to use transparency, I’m still erring on the side of caution and going with GIF for the most part because IE6 users will just see grey in the transparent areas of a transparent PNG. If the site is targeted to lower-tech users, this is a no-brainer. (I have a site where still 20% of the visitors are on IE6. Crazy.) But, if it’s mostly going to be a higher tech target, then transparent PNGs are the way to go, or just avoid transparency if possible.
Pick a theme to use as a base
I go back through themes I’ve done in the past and choose the most similar one to the new one and copy it over to use as a starting point. If you’re relatively new to designing themes for WordPress and don’t have that option, here are a couple of alternatives:
- Start with the default theme that comes pre-installed with WordPress.
- Use a free theme, but be sure to choose one that has easy to modify code. Be sure to leave the attribution in the footer to the original author if you’re not changing the theme much. My DIY Theme can be a good choice as I’ve deliberately made it uncluttered and simple to be easily customized.
- There are some very good “blank” WP themes. There is a list of themes and other resources at DesignMag, and here are three blank themes from Refueled.
- Buy a license for a premium theme. I have found that any of Brian Gardner’s premium themes are very easy to customize. I’ve worked with A LOT of themes and his would be my first choice any day.
- Use a WordPress theme generator and customize the result. The PixoPoint generator looks excellent. I used this one a couple of years ago and it worked well. Here’s another and another.
Code!
Make sure all your sliced images are in the images folder for the theme and dive in. I always code directly in a live WP installation on my test site. You can also set up WP locally on your own computer. I’ve done this, following these instructions (beware, it’s a bit hairy). If you’re still learning CSS you might find my post on playing around with CSS directly in your browser via Firebug helpful. You’ll definitely want to install Firebug either way. It makes it very easy to see what bits of CSS are affecting each element, and when your site goes all wonky because you’ve forgotten to close a div, it makes it much easier to track it down.
Validate and test
This is an important step and one that’s easy to overlook. Use the W3C Validator to find errors in your code. I found diagnosing the problems to be a real challenge at first in some cases, but don’t let that deter you from ensuring your code is valid. Be sure to test your site in every browser you can. You can install multiple versions of IE on your computer with this tool.
Let me know what questions you have. What do you find most difficult about this process? Anywhere you’re getting stuck I can help you with?
