Part 1: How to Turn a Design Image Into a Working Web Page

Part 1: How to Turn a Design Image Into a Working Web Page

Do you sometimes struggle taking a design image and turning it into a working web page? Does your development start out well, but then you can’t seem to get one part of the design working? Are wireframes easier for you to create than code? Do you make it through development only to find that your site loads slowly and difficult to maintain?

Many designers have trouble turning their design images into working HTML/CSS web pages (some don’t even code at all), and often that trouble comes from their approach to developing the design and how they think about the development process prior to writing a single line of code.

Part 1: Turn Design to Web Page

[tut demo=”https://onextrapixel.com/examples/design-to-web-page/” download=”https://onextrapixel.com/examples/design-to-web-page/design-to-web-page.zip”]

Contrary to what some believe, CSS is not a difficult language to learn and developing web pages and websites doesn’t have to be hard. Often, the problem is getting lost in the details before developing the foundational structure. Other times, problems arise from getting locked into keeping a minor and inconsequential part of the design that adds complexity to the code.

In this post, we’ll look at a design comp you can freely download, and see how we’ll turn the design into a working web page. I’ll keep the code light in this post, though you can download the code I used to build the page as well as the original code that comes with the design template. In the post itself we’ll concentrate mostly on the thought process for developing the design.

The Artificial Casting Template

Consider the design below, which you can download for free from Smashing Magazine (It’s the 3rd template down on the page). You can also see a demo as developed by the template creator here to compare to my demo above.

Artificial Casting

I chose this template, partly because it looks nice and I like to play chess, but mostly because it’s a typical 3-column layout and offers a few challenges and options when developing. It also includes a few details that we may or may not decide to include in the final page.

General Thoughts on Moving from Design to Development

Before getting to the specifics of the Artificial Casting template, let’s consider a few things that will be common to developing all websites.

Like it or not, every web page is developed with boxes. Every element in HTML has a box defining it based on the CSS box model. We’re ultimately building a big box made up of smaller boxes. Some boxes will sit next to each other, or on top of each other, and some boxes will fit inside other boxes. That doesn’t mean our design needs to look boxy, but rather that we need to think about the boxes that we need to create when developing.

At the highest level, a few larger boxes will make up your general layout and then the details of your design will fall into smaller boxes inside those larger boxes. Thinking about and seeing these rectangular boxes will help us determine what parts of our design will fit nicely into a box and what parts will need to break free of these boxes. First, always think about these larger layout boxes. Code from the outside in, as opposed to focusing on small details first and coding from the inside out.

Images and HTTP requests are two of the main things that slow down the loading of web pages. While we’re looking at our design, it’s a good idea to think about what absolutely needs to be an image and what could easily be recreated with code. We’ll optimize our images as one less image reduces both file size and the number of requests made on the server.

I often see images on web pages that are nothing more than large solid blocks of color. There’s no reason why a solid block of color ever needs to be an image. When we’re looking at images, we’re thinking about how we can reduce the overall file size of any images we need and reducing the number of images we have to use.

The Layout

The first thing we want to think about with the template is what our overall layout will look like. We’re going to divide the design into large blocks and in this case, it’s easiest to first do this horizontally. If you look at the design you can see 3 bands across the page. The bands will become our header, our content area, and our footer.

The Footer

At the bottom we have a clear footer containing 3 informational boxes and some text. Ignoring what’s inside the footer for a moment, the first decision we need to make is where to divide the footer from what’s above.

Footer

The ragged edge is going to be an image. It can be part of the footer or part of the box above. Either will work, but I decided to place the image in the footer.

While we won’t discuss it in this post, it will eventually make sense to use something like PHP include files to keep parts of the page that repeat across the site, in a separate file. Since this image will be on every page of the site, it made sense to me to include it in the footer, which will eventually become a footer.php file.

Everything else exists as details inside the footer, which we don’t need to think about while building the basic layout.

The Content

Right above the footer we have our content divided into 3 columns, 2 sidebars and a main content section between them. We’ll talk about these columns in a little more detail below. For now it’s enough to consider that we have one large content box that will be divided vertically into 3 columns or 3 smaller boxes inside our larger content box.

As with the footer, we have to decide where our content box begins and ends. There are 2 elements here that can cause some issues in developing. The login box which breaks across columns and the image of the chess pieces which break across the content and will be our header.

The original template was developed considering both as part of the header. I decided to place both of these elements in the content area. Same with the footer, I asked myself if these two elements would appear on every page of the site. They certainly would and were probably meant to be when the template was designed. However, I think it offers more flexibility to allow them to change from page to page.

Maybe, different sections of the site could show a different image of chess pieces and that the login form is only present on some pages and sections of the site.

We won’t be using an include file for our content area. It’s the one section that will likely change from page to page, so including design elements that we may want to change across the site in this box makes the most sense. We will have to figure out how to code the chess pieces image though, since it will now be located in both the content and header.

The Header

Header

This leaves us with the header. By process of elimination our header will include the logo, the tabbed navigation bar and the gradient background behind both. Between the header and content area is a thin line across the page and since this also won’t change from page to page, I’m including it in the header, which will eventually become a header.php file that we’d include on every page of the site.

Developing the Layout

Layout

We can structure our HTML as follows:

<div id="header"></div>
<div id="content">
	<div id="primary"></div>
	<div id="main-content"></div>
	<div id="secondary"></div>
</div>
<div id="footer"></div>

Each of the main boxes or building blocks we described above becomes a div with a semantic id applied.

Since we know we’ll have 3 columns inside our content area, our content div has 3 additional divs inside of it. I named the 2 sidebars “primary” and “secondary” to reflect that one might be more important than the other as is sometimes the case with sidebars.

We’ll add our image of the chess pieces and login form inside the content div, but outside any of the three column divs, to allow the login form to break free of the column structure.

Now for the CSS:

#primary {float: left;}
#main-content {float: left;}
#secondary {float: left;}
#footer {clear: both}

One key to laying out a site with CSS is realizing when CSS isn’t needed and understanding the few places floats are necessary. Given our HTML, the content div will fall right below the header div on its own and the footer div will fall below the content div on its own. That’s the default behavior of a div and there’s no need for us to do anything to make it happen.

We float each of the divs inside the content div, because we want to change this default behavior. We don’t want these 3 divs to fall below each other. We want them to sit next to each other so each is floated to the left.

Once we change that default behavior we need to adjust our footer div. Since everything inside the content div is now floated, the footer div will not automatically fall below it. By adding clear: both (we could have just used clear: left here) we now force the footer div back into falling below the content div.

Naturally a lot more CSS will eventually be needed and if you try the code above you won’t see much because none of the divs have either a width or a height specified, or content inside them to create that width and height. What we have is an empty structure that we need to fill.

We’ll need to be especially careful when setting widths for the 3 floated divs as we need to ensure their combined width isn’t larger than the overall width of the entire page. You might have noticed that we didn’t specify an overall width yet which leads us to one more decision to make about the layout.

Fixed or Fluid Layout

The design image doesn’t really tell us whether or not the design is meant to be fixed or fluid by looking at it. It really could be either. Looking at the code that came with the template, it was developed so that each of the three horizontal bands (header, content, footer) extends to the edge of the window, while all the content inside each of those bands sits in the center of the page. That’s how we’ll do it too.

If we decide that we want everything to be fixed and located in the center, we would wrap a div around it, give it a width and center that wrapping div. You’re probably familiar with how to center pages with CSS.

Centering the whole page is rather simple, but it’s not what we want. We want everything inside our 3 horizontal bands to sit in the center of the window while allowing the background behind those 3 bands to extend to the edge of the browser. What we’re after is a liquid background with fixed content and fortunately Soh Tanaka provided a nice and very easy solution for us.

All we need to do is create a single class in our CSS and then apply it to selective divs inside the HTML structure.

.container {width: 960px; margin: 0 auto;}

If you’re familiar with centering, you’ll recognize the above as what you’d usually add to the wrapper div. Setting the CSS as a class gives us more flexibility and control for where to apply it. Our new HTML looks like:

<div id="header">
	<div class="container"></div>
</div>
<div id="content class="container"">
	<div id="primary"></div>
	<div id="main-content"></div>
	<div id="secondary"></div>
</div>
<div id="footer">
	<div class="container"></div>
</div>

For the header and footer I’ve added a new div inside with the container class applied. Now we can style the header and footer backgrounds to extend fluidly, while containing everything inside the new container div at 960px and have the div display in the center of the browser.

You could do the exact same thing with the content div, but in this we can take advantage of the body tag which is wrapping everything. We’ll set a background color on the body that will extend to the edges and save ourselves one div in the HTML structure. With the containing class divs set, our layout is almost set.

Our header, footer, and content areas are fixed at 960px (the actual content portion of each div). We still need to add widths to each of the 3 divs inside the content div.

#primary {float: left; width: 245px}
#main-content {float: left; width: 505px}
#secondary {float: left; width: 210px}
#footer {clear: both}

The above widths should add up to 960px. Note that in the final code you won’t see any of these widths actually specified. In the final HTML page some of the width for each div is in the left and right padding and possibly a left and right border. Each column (width + padding + margin) will add up to the numbers given above.

[tut demo=”https://onextrapixel.com/examples/design-to-web-page/” download=”https://onextrapixel.com/examples/design-to-web-page/design-to-web-page.zip”]

Summary and Part 2

We’ll continue in Part 2 with the details of what goes into each of our large layout blocks and make a few more design decisions that will save us some coding and load time to the overall page.

Until then think about the higher level layout presented here. CSS layouts seem to trip up a lot of people, but they’re really much easier than they seem if you ignore the details and focus on the bigger picture. First think about how to organize your design into large building blocks. Try to see the layout in the absence of your design details. Picture those large boxes that will hold everything in place.

Once you’ve decided what boxes you’ll need, start to code your HTML. At this point all you should need is a few divs with an id applied to each. With your HTML in place, set up the very basic CSS needed to position each of you blocks and if appropriate like it was here, create and add a class or two as necessary.

Once your basic structure is in place you can begin filling up those boxes, which is something we’ll do in Part 2 of this post. Stay tuned!

Deals

Iconfinder Coupon Code and Review

Iconfinder offers over 1.5 million beautiful icons for creative professionals to use in websites, apps, and printed publications. Whatever your project, you’re sure to find an icon or icon…

WP Engine Coupon

Considered by many to be the best managed hosting for WordPress out there, WP Engine offers superior technology and customer support in order to keep your WordPress sites secure…

InMotion Hosting Coupon Code

InMotion Hosting has been a top rated CNET hosting company for over 14 years so you know you’ll be getting good service and won’t be risking your hosting company…

SiteGround Coupon: 60% OFF

SiteGround offers a number of hosting solutions and services for including shared hosting, cloud hosting, dedicated servers, reseller hosting, enterprise hosting, and WordPress and Joomla specific hosting.