Putting it All Together
Rather than invest a lot of time into rendering a high-definition mockup, it’s often more efficient to spend
that design time constructing real HTML and CSS. You’ll see exactly what the end user will see, and
anything you design will be realistic and practical because you’re using the tools of the very medium for
which you’re designing. Producing a prototype site and designing live in a web browser delivers a more
accurate depiction of the final product. The prototype can even lead directly to the finished site because
much of the code will be ready to use at the end of the design phase.
We designed the Power Outfitters website in HTML and CSS, using our sketches and wireframes as a
blueprint and gradually arriving at the final design through experimentation and old-fashioned trial and
error. We started with a plan and a general idea of what the end result should look like—we drew
inspiration from classic comic books, and we knew it would have a blue and gold color scheme, with
panels and a dot pattern—but the final design came together organically in the browser, right before our
eyes. That’s the process you’ll see in this chapter.
Stage 3: Build
At last it’s time to build the site, writing all the code that brings the content to life and makes the site a
reality. For most commercial websites, plain HTML and CSS alone can’t deliver all the functionality the site
requires. Most websites of any complexity will be built on top of a server-side programming language like
Python, Ruby, PHP, or ASP.NET. These languages perform the more complicated operations that make a
site dynamic and interactive, such as handling forms, synchronizing data to and from a database, and
assembling components from separate template files into a single HTML document to serve to the
browser. This is also the stage when you’ll integrate client-side behaviors with JavaScript.
If you’re making a smaller, static site, and if you designed it in the browser, you may already have the bulk
of the building stage completed when you reach the end of the design stage. If it’s a larger, dynamic site,
you can now work with your HTML prototype to add the programming logic and scripted behaviors, or work
with other developers for implementation. Some complex dynamic sites can even begin the back-end work
while the front-end design is still underway, just so long as everyone sticks to the plan.
For our Power Outfitters case study we’ve left out the entire back-end development process that such a
site would obviously demand, if it really existed. For this book we’re only focusing on building a static front-
end prototype in HTML and CSS. The Power Outfitters site doesn’t actually work, so unfortunately you’ll
have to purchase your capes, cowls, shrink rays, bionic eyes, and antigravity flight harnesses elsewhere.
Stage 4: Test
After you’ve done all the design and assembly and you have a beautifully styled and solidly constructed
website at your fingertips, ready to release into the wild, now is the time to check it over and see just how
well it’s built. Go through all the links and navigation to make sure everything leads to the right place.
Disable images and JavaScript and see if your site is still at least readable, if not fully enhanced. Fill in
forms and test validation and data integrity. Be on the lookout for security vulnerabilities, especially if
you’re gathering any sensitive information from your users.
