When I started the web site for 3D Bookshelf, we had already decided on the graphical theme for the app. I had just completed the high-res icon PSD in Photoshop CS 4 along with all of the book covers, so I had a lot of content to play with. The first step was to plan the layout and determine what bits were going to be dynamic. Once this was done, I started setting things up in Photoshop using 960.gs.

960.gs

Web development can be a lot of fun, but it can be incredibly frustrating, especially when you come face to face with the harsh reality that is browser compatibility (or the lack of it). Things have gotten better over the years, but bugs and inconsistencies pop up from time to time. When it comes to setting up layouts that I know will work everywhere (I hope), I tend to use 960.gs. My technical lead (thanks Franklin!) at a previous job introduced me to 960.gs and I've been using it ever since.

The makers of 960.gs provide a PSD template (along with templates for other tools) with guides so you can design your site cleanly in Photoshop and then extract the pixel perfect sections which slot nicely into the html layout.

Below is a section of the 3D Bookshelf site with the guides visible, along with the markup to position the 'Features' text.

<div class="features">
                
   <div class="grid_4 prefix_11">
      <h1>Features</h1>
      <p>Leaf through each ...</p>
   </div>
                
   <div class="clear">
</div>

In the markup above you can see I'm enclosing the Features text inside a div with a class set to "grid_4 prefix_11". This means the text will be displayed on the 12th column and the content will span 4 columns. In total there are 16 columns in this particular layout. The background image is applied using the features css class.

Adding Dynamic Content

Various sections of the site are replaceable. For example, the 'Coming Soon!' banner will be turned off and the "Available on the App Store" will be turned on as soon as 3D Bookshelf goes live. In addition to this, there are two videos intended to be available on the site, and these will be played using jqvideobox_1.00, a JQuery plugin. JQuery is a remarkable javascript library. If you're doing web development, don't leave home without it.

We're also hoping to run a small competition once the app has been released and the competition rules are displayed using FancyBox, another JQuery plugin. The competition itself will be managed by a simple twitter competition service we'll host on our own VPS. There are hooks in the 3D Bookshelf site to query the competition service for the number of participants so far, along with a list of latest participants (and their twitter icons). Twitter competitions seem to be all the rage at the moment.

Screenshots

As we get closer to launch, we'll release more screenshots on the site. We've only got one up there at the moment, the splash screen.

As always you can find out more about updates to the above as and when they happen by following me on twitter or subscribing to my RSS feed.