There are many different ways a website can get made. Ideally, a designer will work alongside a front-developer to get a working prototype ready, and a backend developer will adapt this to a CMS like WordPress.
But the nature of our business often dictates that you will be balancing a couple, if not all, of these duties. And clients expect us to move quickly. It is very tempting to just start developing a theme on top of some framework and come out with a finished product.
But next time you are in this situation, take a step back. Then create a static HTML site first.
Why an HTML Prototype?
Raise your hand if this has happened to you: You’ve finally hit your stride designing your theme, then suddenly get caught up trying to figure out some quirky loop or weird function. You spend some time surfing Google for the answer and by the time you return to your code, you completely forgot where your design was going.
When we code HTML and CSS, we talk about separating presentation from content. Well, when we are developing sites, we should also be separating functionality from presentation. We can use a static HTML prototype as a shell to fill with the right function instead of the other way around.
Also, ask yourself this: Why are we using WordPress as opposed to some other CMS? Even the most avid WordPress developer will tell you that sometimes another CMS might be a better fit. I’m not discouraging anybody from using WordPress – you can get WordPress to do just about anything, but if you start with WordPress first, it has a way of guiding your design and influencing your decision.
Starting with a prototype avoids this.
An HTML prototype allows you to get started quickly, iterate your design, get proper review from clients and have your front-end development out of the way when you move to the back-end. It makes things simple and in the end, it will save you a lot of time.
Where to Start – Sketching and Wireframing
The first thing I like to do is to sketch out my designs before moving to code. I usually sketch out a few different options that I can sort of pick and choose from when I do start coding.
This will ensure that you have a sense of direction and parameters. There is nothing more frustrating than starting with a blank slate, and moving a pencil around on a page is way quicker to get initial ideas out there then any amount of computer software.
Keep in mind, you don’t have to be good at drawing to do this. I’m certainly not. Print out a custom grid, or buy a grid journal and use a ruler or a straight edge to keep everything neat.
Other then that, there are no rules. Just jump right in and see where the design takes you. An exceptional resource for me was C. Knight and J. Glaser’s post on “mark-marking,” a technique I often use.
For those that like the feel of a machine more then the feel of paper, you can check out tools like Balsamiq or Moqups to do some basic wireframing online.
Designing in the Browser
A few years ago, Andy Clarke wrote a post about the advantages of designing in the browser. If you are a competent front-end developer, I absolutely recommend this technique.
I typically don’t touch Photoshop at all when designing my prototype, except for image optimizations and editing. In-browser designing makes things quick and easy, and in a language you can understand.
The trick at this step is to focus only on HTML, CSS and very small smatherings of JavaScript. Don’t worry about progressive enhancement, optimization, browser compatability or content management. Do worry about layout, branding, typography, responsiveness and usability.
If you can get real content from your client, try and build your design around this. I don’t have nearly enough space to talk about the fundamentals of design here, nor am I an expert, but this should be your focus on this stage. I know as a developer it can be hard not to constantly think about how you are going to get WordPress to do X (and for us, that’s the fun part!) but get it out of your head.
I’ve been using Dan Ciederholm’s Pears pattern library to help with this. It lets you construct basic HTML and CSS blocks that you can then adapt and reuse. For instance, I find myself coding new dropdown menu’s all the time. Now I have the HTML and CSS all laid out so all I do is drop it into my design and skin it. This will help you forget about how things work and focus on why they should be there.
Luckily there are lots of tools out there that can expediate this process and let you focus on what’s important at this stage.
I use Hammer now for front-end coding. It automatically builds a project and uses clever methods like an HTML includes and easy image paths to ensure that you don’t have to worry about where everything is in your directory. Then it neatly organizes it and spits out a build product. CodeKit works in a similar way, with a lot more tools like SASS/LESS compilers and built-in frameworks.
These definitely help speed things along once you get the hang of them so they are worth checking out.
Moving to WordPress
Assuming that your design tells you that WordPress is the best option for you, and make sure that it does, you can move to some WordPress development.
Start by creating a theme or child theme. Your CSS is already done, so just drop that into the theme folder. Then start coding out your templates one by one, using the HTML you already have and simply replacing content blocks with the proper WordPress functions.
Most of them will be easy<?php the_title(); ?> but some might require a little work.
[code]<!– @include _header –>
<div class="fullbox">
<img src="<!– @path indexbanner.jpg –>
<div class="fullbox">
<div class="bannercontent">
<h2 class="introtext">There is only one Electro Freeze!</h2>
</div>
</div>
</div>
<div class="col-full">
<h2 class="title">What is Electrofreeze?</h2>
<div class="post-content">
<p>With three main lines of restaurant equipment: Electro Freeze, Nieco, and Smokaroma your success can only be limited by your imagination…from Ice Cream, Chicken, Burgers to Ribs we can help you with new or reconditioned / used equipment. Electro Freeze: There is no end in sight to the demand for frozen treats. Ice cream is one of the most popular and profitable frozen desserts you can offer. Additional frozen desserts such as frozen yogurt, slush, hard ice cream, frozen cocktails, and smoothies can be dispensed from an Electro Freeze Machine. You can even inject 24 or more flavors using the 24 Flavor System by WADDEN Systems to transform vanilla soft serve, or soft frozen yogurt, into one of 24 different flavors on a cone by cone basis.</p>
<h2>
</div>
</div>
<!– @include _footer –>[/code]
My static HTML page using the Hammer app.
When you are developing for clients, you want to make sure that you only give them as much control as is absolutely necessary. If you find that a piece of content stands outside of the basic WordPress functionality, do yourself a favor and use a custom field. This will ensure that that piece of content is treated as it should and won’t do any nasty stuff like break the layout.
This is where building an HTML prototype first really comes in handy. As you are going through developing templates, there will be certain parts of the design that stand out as red flags. If you dove right into WordPress you might be more inclined to simply change the look to try and squeeze it into what WordPress offers out of the box. This will limit your design and pigeonhole your content. Instead, separate out the front-end and back-end properly and get yourself some coding harmony.
[code]<?php
/**
* Template Name: One column, no sidebar
*
*/
get_header(); ?>
<div class="fullbox">
<?php
// Let’s get the content for the page!
get_template_part( ‘loop’, ‘page’ );
?>
</div><!– #section fullbox –>
<?php get_footer(); ?>
<?php
/**
* The loop that displays a page.
*
*/
?>
<?php if ( have_posts() ) while ( have_posts() ) : the_post(); ?>
<?php
if ( has_post_thumbnail() ) { // check if the post has a Post Thumbnail assigned to it.
the_post_thumbnail(); ?>
<div class="fullbox">
<div class="bannercontent">
<h2 class="introtext">
<?php echo get_post_meta($post->ID, ‘bannertext’, true); ?>
</h2>
</div>
</div>
<?php } ?>
<div class="col-full">
<h2 class="title"><?php the_title(); ?></h2>
<div class="post-content">
<p>
<?php the_content(); ?>
</p>
</div>
</div>
<?php endwhile; // end of the loop. ?>[/code]
My WordPress template and loop file, respectively. I chose to use custom fields for banner text in the page.
I understand that this process might be obvious to some. There are probably others that totally disagree.
Hopefully there are a few of you out there that will benefit from this workflow. I’m interested in how you build your WordPress sites, so leave it in the comments!
Resources
Sketching/Wireframing Resources
- The Creative Way to Maximize Design Ideas with Type
- Sketching and Web Design
- Sketch Your Website
- Behance Dot Grid Journal
- Balsamiq
- Moqups
11 Comments