The purpose of this chapter is to help you create a working HTML5- and CSS3-based template mockup, with an eye towards having it end up being a WordPress theme. This theme will be responsive, meaning it will display content optimally on mobile devices as well as desktop browsers. All the while, we'll be staying compliant with W3C standards and following good usability practices. Our hope for this chapter is that even you design pros may discover interesting tidbits that will help you in your WordPress theme design creation.
WordPress theme design is essentially web design so, throughout the chapter, we'll be focusing a bit more on thinking about semantics, standards, and usability first. We'll then focus on what we want to design (keeping in mind it will end up in WordPress) using the most simple, straightforward means possible: pencil and paper, HTML, and CSS, and last, our graphic editor/drawing programs. This approach will give us a more flexible, yet solid HTML and CSS structure.
While you might find this approach a little strange at first, it's by no means set in stone as the only right way to design a theme. Simply read through the chapter and, even if you already have a polished, Photoshop-designed mockup, go ahead and try to set up your HTML and CSS using the steps laid out in this chapter. You may find it helps your process.
In this chapter, we're going to take a look at implementing the following strategies we learned in Chapter 1, Getting Started as a WordPress Theme Designer by:
- Building out our layout based on semantic content
- Adding in our content, fonts, and sizing
- Setting up our layout using our CSS layout framework
- Adding in our graphic elements using CSS3 and our object-oriented approach to CSS (which we'll explain when we come to it)
By the end of this chapter, we'll have a working HTML5- and CSS3-based template "comp" or "mockup" of our WordPress theme design, ready to be broken down, coded up, and assembled into a fully functional WordPress theme.
Tip
Already got a design? Not a designer at all?
That's fine! This chapter covers basic, web design best practices, with an eye towards ending up with a unique and custom WordPress theme. It contains time honored and tested methods for approaching compliant, accessible, and responsive HTML and CSS creation. If you're a total HTML and CSS design wizard, you can skim this chapter for any new tips and tricks that might be of use to you and then move on to Chapter 3, Coding it Up. If you're not a designer at all and you just need to convert an existing HTML/CSS template into WordPress, we'd still recommend you skim this chapter, as it may help you better understand some of the HTML markup and CSS in your template. You can then move on to Chapter 3, Coding it Up to learn how to code working HTML and CSS templates and mockups into WordPress.
Design Comp is an abbreviation used in design and print. It refers to a preliminary design or sketch as "comp", as in "comprehensive artwork" or "composite". It is also known as "mockup", "sample artwork", or "dummy artwork". We'll be creating one of these in this chapter to then use to create our WordPress theme in Chapter 4, Advanced Theme Features.
You may already have a design process similar to the one detailed next; if so, just skim the next section and skip down to the next main heading.
Historically, most web designers have used Photoshop or another graphics program to create a static design for a site and then either develop the site themselves or pass this to a developer to create the code.
This approach reflected the fact that web design had its background in print design, which makes good use of this sort of process. It gives you a nice static mockup that you can give to a client for approval.
But this approach isn't so effective anymore. Now that our sites need to look good on a variety of devices, a single static design won't apply to every screen size. Does this mean we have to prepare a full design for every conceivable screen size?
Of course not. The approach we're moving towards is replacing designing in a graphics program with designing in the browser.
The way you approach this will depend on your own preferences and the needs of your project, but a process which works for a lot of designers is:
- Generate design concepts and ideas for the site using a mood board or similar technique, so you know what styling and graphics you'll be using.
- Prepare some wireframes for the site's layout at different screen widths. These can be a rough sketch on paper or use a wireframing tool.
- Create a static mockup of the design in the browser, using the layouts defined in your wireframes and the graphical treatments in your mood board. This gives you a working prototype of your design which is much more effective for demonstrating to clients how their site will actually work for users on different devices.
- Turn that static design into a WordPress theme, using the HTML and CSS you've used for your mockup and adding WordPress goodness to it.
This is the process we'll be using in this chapter, which will take us up to step 3 of the process. In Chapter 4, Advanced Theme Features, we'll move on to the final step, turning our mockup into a WordPress theme.
Of course, you may already have a fully worked-up static design which you've been given by a designer, which doesn't mean you can't follow this chapter. Just skip to the Creating your design – from the sketch to the screen section and instead of using wireframes and a mood board to decide how to code your design, use the design you've been given.