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:
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.
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:
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.