Saturnboy
 2.1

Once everything is done (meaning I have a layout, I have a design, and I have it sliced and assembled), I like to make another pass to optimize both the size of the image files, and the number of files. My two favorite techniques are using Sprites to reduce the total number of images, and using OptiPNG to compress the images.

Sprites

It is fairly common to see sprites used in high performance web design. The Gmail team has a great blog post discussing various performance enhancements currently in use, including sprites. But for some reason, almost everyone thinks of sprites for icons and buttons. In my opinion, any time you can fuse two images into one, you’re making a “sprite” and you’re improving performance. Using a grid-based framework like Blueprint CSS tends create a lot of rectangular layout imagery, which are often ideally suited for fusing into a larger sprite.

The current web page has two candidates for spriting: the main header image can be fused to the footer, and the sidebar header to the sidebar footer. Just like this:

fuse diagram

So the original circ-head.png and circ-foot.png are fused to create circ.png. Similarly, the sidebar header and footer are fused to create sidebar.png.

The original circ.css is simply modified with the new image filenames and a negative vertical offsets on the footer backgrounds. Here are the relevant parts of the new circ.css:

#header {
background:#111 url(img/circ.png) 0 0 no-repeat;
height:160px;
min-height:160px;
}
 
#footer {
background:#111 url(img/circ.png) 0 -160px no-repeat;
height:30px;
min-height:30px;
text-align:center;
}
 
#sidehead {
background:transparent url(img/sidebar.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
 
#sidefoot {
background:transparent url(img/sidebar.png) 0 -14px no-repeat;
height:14px;
min-height:14px;
}
Compression

Using OptiPNG is really easy. Just run it over a folder of PNGs, and it losslessly compresses what it can, and leaves the rest untouched. When I’m not using source control on a design, I’ll often perform the compression step exclusively on the server to keep things simple.

Here is a simple command to perform maximum compression of all the PNGs in a folder:

optipng -o7 *.png

Digging Deeper: I have noticed that OptiPNG, in it’s quest for maximum optimization, will sometimes alter the image type (either by reducing the bit depth or switching from full color to indexed color) in such a way as to make Photoshop very unhappy with the resulting image. In these cases, the GIMP is your friend.

The Results

We fused four images totaling 52552 bytes into two images totaling 52356 bytes. So we saved two whole HTTP requests and a meager 200 bytes. Not much to write home about (or even blog about), but hopefully it serves as a useful demonstration that design optimization is fairly simple. Next up, we’ll take our design and layout into Flex. What fun!

The Files

 12.7
Code
off

The design from the last post is finished, and it follows a very simple blog layout. In this post, I’ll slice the design and turn it into a pretty html page with the magic of Blueprint CSS.

Slice It

Before we get slice happy, we need to think. First, Blueprint is grid-based, so that means rectangles are good. And second, the default Blueprint container width is 950px. The defaults are intelligently chosen and have always worked great for me. By sticking with the defaults, we will get a 950px wide, centered, fixed-width site, which is exactly what we want.

We could get all clever and try to slice out just the circles as a background image, but that would force the top border to be a transparent PNG because of the shadow. Similarly, we could cut out all four rounded corners and all four edges of the sidebar, but that would force us to reassemble humpty dumpty with some fancy css and markup. In both cases, just say No! The simplest possible choice is to slice the entire header, the entire footer, and then a thin slice for the body that can be vertically tiled. Exactly like this:

slice diagram

And we get: the header, the background tile, and the footer. Slicing the sidebar in the exact same manner gives: sidebar header, sidebar background tile, and sidebar footer.

Code It

The original simple blog layout had four divs: header, content, sidebar, and footer. This is exactly want we want, but the original markup won’t exactly work, because the current design has a vertically-tiled background. The solution is simple – just wrap the content and sidebar inside a div with a bit of padding (via a prepend-2 and append-2). If we ignore the sidebar design for a moment, and just insert a placeholder, the markup is:

<div class="container">
  <div id="header" class="span-24">header</div>
 
  <div id="bg" class="prepend-2 span-20 append-2">
    <div id="content" class="span-15">content</div>
    <div id="sidebar" class="span-5 last">sidebar</div>
  </div>
 
  <div id="footer" class="span-24">footer</div>
</div>

That’s just beautiful Blueprint markup! Adding some simple css:

body {
background-color:#111;
}
 
#header {
background:#111 url(img/circ-head.png) 0 0 no-repeat;
height:160px;
min-height:160px;
}
 
#footer {
background:#111 url(img/circ-foot.png) 0 0 no-repeat;
height:30px;
min-height:30px;
text-align:center;
}
 
#bg {
background:#fff url(img/circ-bg.png) 0 0 repeat-y;
}

And that gives us Circles of Doom, version 0! View it, or download it. I’ve included the latest-and-greatest Blueprint CSS, which is v0.8 at the time of writing. I’ve chosen to enforce the vertical height of the header and footer via height and min-height which seems to work fine in Firefox, Safari, and IE7.

Sidebar Me

Since the sidebar graphic was sliced in the exact same manner as the body graphic, we just add the exact same markup to the sidebar div – header, bg, and footer.

<div id="sidebar" class="span-5 last">
  <div id="sidehead" class="span-5"><!-- sidebar header --></div>
  <div id="sidebg" class="span-5">sidebar content</div>
  <div id="sidefoot" class="span-5"><!-- sidebar footer --></div>
</div>

Style it like this:

#sidehead {
background:transparent url(img/sidebar-head.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
 
#sidefoot {
background:transparent url(img/sidebar-foot.png) 0 0 no-repeat;
height:14px;
min-height:14px;
}
 
#sidebg {
background:transparent url(img/sidebar-bg.png) 0 0 repeat-y;
}

Putting everything together with some dummy Lorem Ipsum text gives us Circles of Doom, version 1! View it, or download it.

Debug It

Lorem Ipsum text is the basic unit testing for HTML+CSS. I always fill out every content div with some dummy text, just to see what breaks. This time around, I noticed the sidebar content was touching the edges. I decided against adding a prepend-1 and append-1 because that’s too much padding. Instead, I thought I might just add some padding to sidebg, but this is bad, bad, bad! You can not add padding or margins to a Blueprint node, which sidebg clearly is because of the class="span-5". I could add another div inside sidebg, but that seemed like too much markup. So, I took the easy way out and just padded the known sidebar content markup (in this case, just p and h3).

#sidebar h3, #sidebar p {
color:#fff;
padding:0 10px;
}

Digging Deeper: Blueprint CSS uses margin and padding to create the grid. Thus it should have been obvious to me that you can NOT add margins or padding to a Blueprint element (any markup element with a Blueprint grid class). Alas, it was not immediately obvious, but I was able to catch my mistake during debugging.

And that’s it for the visual aspect of Circles of Doom. Next, I’ll cover web design optimization.

The Files

 11.6

I don’t know how a real designer does it, but when I attempt a design, particularly a blog design, I always start with a simple theme. If the ideas begin to flow, I’ll know I chose well. If not, and I still think it’s a good theme, I’ll visit the usual suspects for some inspiration.

On this blog, I started with robots, which quickly lead to gears and mechanics. For this post, I started with circles. Actually, I started with Ironman’s HUD. The whole movie was super cool, but the HUD was the best. And the HUD had all this motion and targeting, and that’s what got me to circles. So that’s the theme. I already know I’m going to apply this theme to a simple grid-based blog layer that I discussed earlier.

Palette

After the theme, I worked on the color palette. I’ve used Kuler in the past to build out a couple of palettes, but this time I just jumped into Inkscape and started messing around. I came up with a nice blood red and black palette.

palette
Circles

Now that I have a palette, I shift my design focus back to circles. It’s not just gonna be “Dot, dot, dot” as my daughter likes to say, so it’s back to Inkscape. Here’s the result:

circles
Layout

Not much left but the real work – make a cool blog design with circles plus some pretty colors. I know my layout, so once again it’s back to Inkscape. There is a nice Inkscape template generator for Blueprint CSS grid layouts. Choosing which colors go where isn’t too bad, because I love dark text on white for blogs. Following that decision, I go with lots of circles in the header in blood red, over a black background. We know the main content will be white with black text, so I decide to make the sidebar really stand out with a bold blood red.

The circles in the header are really easy, I just pick random sizes and put them in random locations. Darker usually means further away, so I just reduce the opacity to let more black through. I use a rounded rectangle with a thick stroke for the main content area. I also add a black shadow around the entire content area to highlight the content. The finished design is here, and I’m calling it Circles Of Doom. Here is a closeup of the header:

Next, we slice and dice

Files

 11.3

I’m a bad designer. No amount of ego, or sugary coating can change that fact. Whenever I hang out with my coding buddies to talk design, they actually think I might border on decent. It’s either midget aliens piloting their husks or their brains have been pickled from over-exposure to Hibernate mapping files. Thankfully, I’ve been around some real designers and they know the truth…if it’s brown and smelly it must be a turd.

I do, however, know what I like. And when I’m build a blog, I like to have a header, footer, main content area, and a sidebar or two. Since I need all the help I can get when it comes to website design, I always try to leverage what others have done. In the case of this blog’s design, I’m using Blueprint CSS, a bad ass grid-based CSS framework with smart typography defaults.

But before I dig into the details of my design, I want to start simple. So imagine we want build a website with your basic two-column layout.

layout

Coding a basic layout like this one is almost too easy with Blueprint:

<div class="container">
  <div id="header" class="span-24">header</div>
 
  <div id="content" class="span-18">content</div>
  <div id="sidebar" class="span-6 last">sidebar</div>
 
  <div id="footer" class="span-24">footer</div>
</div>

Add a pinch css to provide some color and some substance:

#header  { background-color:#cc6; padding:30px 0; text-align:center; }
#footer  { background-color:#c6c; padding:30px 0; text-align:center; }
#content { background-color:#6c6; padding-bottom:60px; }
#sidebar { background-color:#6cc; padding-bottom:60px; }

Now, put it all together, and you get this:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Simple Blueprint Layout</title>
 
<link rel="stylesheet" href="blueprint/screen.css" type="text/css" media="screen, projection" />
<link rel="stylesheet" href="blueprint/print.css" type="text/css" media="print" />  
<!--[if IE]>
<link rel="stylesheet" href="blueprint/ie.css" type="text/css" media="screen, projection" />
<![endif]-->
 
<style type="text/css">
#header  { background-color:#cc6; padding:30px 0; text-align:center; }
#footer  { background-color:#c6c; padding:30px 0; text-align:center; }
#content { background-color:#6c6; padding-bottom:60px; }
#sidebar { background-color:#6cc; padding-bottom:60px; }
</style>
</head>
 
<body>
<div class="container">
  <div id="header" class="span-24">header</div>
 
  <div id="content" class="span-18">content</div>
  <div id="sidebar" class="span-6 last">sidebar</div>
 
  <div id="footer" class="span-24">footer</div>
</div>
</body>
</html>

Nothing much to see, all the grid and typography magic is hidden inside Blueprint CSS files. It actually makes the final html code look lame. View the results, and you can judge for yourself. Next, I’ll build an original design and continue digging into Blueprint.


© 2014 saturnboy.com