Going Responsive

There’s no doubt that with the proliferation of mobile devices in recent years web site design has gotten a lot more complex. It is now more than ever important that you offer the best experience to your site visitors no matter what device they may be accessing your content through. Offering a mobile optimised experience is a time consuming exercise for a developer, and maintaining two codes bases for your sites can be problematic.

In recent years there has been a large movement towards offering the best of both worlds in a responsive site. A site which isn’t constrained by the fixed dimensions, that works equally well on a large display or a small screen mobile device.

I haven’t touch the design of my site for a couple of years now. I went down a “design” by iteration route until I got to the point where I was happy enough with the design that I stopped. Since then I have wanted to update the site on a few occasions and even got to the point where I have been tinkering with the layout, fonts and overall design. What became clear as I was doing this was that making the site that I already had responsive was not going to be a quick and easy task.

Today I have decided to drop my theme and instead of wasting my time on creating a theme use the latest in-built theme from WordPress. I have installed and activated <a href="http://wordpress.org/extend/themes/twentytwelve" onclick="_gaq.push(['_trackEvent', 'outbound-article', 'http://wordpress why not try these out.org/extend/themes/twentytwelve’, ‘Twenty Twelve’]);” target=”_blank”>Twenty Twelve, the new responsive theme from wordpress.

It takes all of the heavy lifting out of the design and what I end up with is an extremely flexible design which not only functions extremely well in the responsive world but also in my opinion looks great as well.

I’m sure over the coming months I will add my own little touches here and there. I also still haven’t given up on the idea of creating my own responsive design, however I think I will use my commercial site to work this out on, so stay posted for news in this area.

Theme Functionally Complete

The more eagle eyed amongst you (probably only me) will notice that I’ve made a few changes to the site skin. I haven’t had the time in the past few months to do much to the skin but I’ve finally done some work on the last large element of the site which needed some love – the sidebar. There is absolutely nothing of note here, I’ve used nothing new that isn’t part of another aspect of the skin for the sidebar.

I’ve also made a smal tweak to the homepage posts. One thing I’ve seen around the net are little date cards for a post, which I quite like, so I decided to create one for a post using pure css. I made a small change to the template to bring the date into its own bit of mark up then used border-radius on the top and bottom corners of each element. This for me highlights one of the main issues with using css3. Because it is so new and essentially not defined, different browsers implement these new features in different ways. Firefox declares indvidual corners of a radius using -moz-border-radius-topleft and Safari and Chrome declares it using -webkit-border-top-left-radius, clearly both very different. W3C currently defines the property as border-top-left-radius so webkit is closest, but as the spec is in working draft status it could easily change. I’ve used both declarations in my css to achieve a single card from two <div>s.

.post-date .post-month {
  -moz-border-radius-topleft: 5px;
  -moz-border-radius-topright: 5px;
  -webkit-border-top-left-radius: 5px;
  -webkit-border-top-right-radius: 5px;
}

.post-date .post-day{
  -moz-border-radius-bottomleft: 5px;
  -moz-border-radius-bottomright: 5px;
  -webkit-border-bottom-left-radius: 5px;
  -webkit-border-bottom-right-radius: 5px;
}

And that’s mostly it for interesting stuff. I’m posting mostly to declare the skin complete, from here on in any tweaks to the skin should be just that, tweaks. Overall I’m satisfied with the layout but highly dissatisfied with the overall colour scheme, it doesn’t sit on the page well for me. It should be pretty easy to tweak the colours in the future thanks to it being mostly defined through CSS, might see if I can get a bit more help on it from someone with a bit more creative talent than me!

I’ve taken screenshots of the skin at each point and that could be a post for the future, as the next task is to add a bit of behaviour to the site. This of course means a trip into JavaScript land, stay tuned!

Twitter’s Tweet Button

Hot on the heals of Facebook’s Like buttons Twitter today announced a button of their on to place on your site. Tweet buttons are nothing new and Tweetmeme has had one available for a long time. It looks as though Twitter has been working closely with Tweetmeme on their implementation although I am not currently aware of there being any news that Tweetmeme has been aquired by Twitter.

As simple to use as the Facebook Social Plug-ins you simple visit the tweetbutton page choose your options and you are presented with a code to cut and paste into your site.

There are a number of options available, the most interesting is the ability to specify multiple accounts (up to two) which you can follow after using the button. This is particularly useful for sites run by multiple contributors presenting options to follow the person who wrote the an article as well as the main site twitter feed. There is also a developer API where you can roll your own code for the button and tweak to your specific needs.

As usual with these easy share options I’ve given it a go on my site. I’ve copied and pasted the code into the post page and placed it with my Facebook Like buttons. In doing this I’ve also removed my @anywhere tweet box which didn’t seem as useful.

Blog Upgrade – WordPress 3.0

Well it looks like the inevitable has happened and I’ve fallen into the blog neglection camp. When I started the blog I suspect this would happen and my laziness has taken over. Well I do have some excuses as this month has been really busy for me with the impending (looming?) arrival of the new baby binns I have spent a lot of my free time this month on DIY and stuff. In the hottest month of the year so far it hasn’t been easy.

So this is just a quick post on a quick subject. I’ve upgraded the blog software to the recently released WordPress 3.0. I have always been impressed with the simplicity of upgrades for WordPress and this release was no exception. I use subversion to manage my blog release and it was a simple case of switching the svn co to the latest tag then running the upgrade script. Job done. I understand there’s also an in-built mechanism to do this but I prefer the SVN approach as it allows me to do a back-up first which is always a good ides. Anyway for easy instructions on how to do this with SVN rfer to the WordPress upgrade page.

WordPress 3.0 comes with a slew of new features and a handy new theme which I’m gonna check out to see if I can use anything in my theme. Check out this video which shows all the new features:

Creating a Logo in <canvas>

Over the last week I’ve had the opportunity to work a bit more on the skin of the blog turning my attention to the last major component of the skin not to receive some love and attention, the blog header. So far with the exception of a few icons I have managed to build the entire skin without using any images. No background images, no header images, just plain old CSS. Whilst the result wouldn’t win any creative design awards its not an ugly skin either.

I’ve wanted to add a logo for a little bit of visual tweak, a bit of branding I guess. I could have mocked something up in photoshop easily enough however creating a programmatic logo had some appeal. Luckily HTML5 affords me this opportunity with not one but two methods. Strictly speaking not HTML5, SVG could have been used and this is something I do want to look at in the future, however for the logo I decided to take a look at <canvas> which supports a basic drawing API.

The logo I had in mind was basically a mashed together A and B, a fairly simple geometric shape and one that I thought would be fairly simple to implement. The API is JavaScript and how it works reminded me a lot of an old program from my distant youth called funnily enough “Logo”. Overall I found the experience to be very easy however there are a number of concepts which are not obvious from the documentation but which I figured out eventually. I’ll take you through a step by step example shortly.

Before I do that I’d also like to hightlight the text I’ve used in the header banner. Although having been around for a very long time, downloadable web fonts have long been hard to achieve cross-browser. Legal issues have meant that the font format for @font-face has long been debated. Recently it looks like this has been resolved and WOFF has won the format war. Luckily for me and my blog Firefox 3.6 supports the WOFF format and it being my target browser of choice I decided to implement it in the banner. The font I have used is NuvoWeb which is a free font. I won’t go into the implementation as it isn’t that exciting, it is however good to be using a native font without having to resort to a work around such as image replacement or flash replacement.

Anyway back to the use of <canvas>. I’m first going to describe the basics before going through an example of creating the logo I use on this blog now. The basics I’m going to describe are obviously not an exhaustive list just what I required to make the logo.

Canvas Basics

To start using canvas you must first add one to your page this is simply a case of adding the following html:


Using the id attribute you can then grab DOM handle to it in JavaScript and start drawing, in my examples I’ve wrapped this in a function and this is called in the onload handler, barebones the handle looks like this:

var canvas = document.getElementById("test");
if (canvas.getContext) {
  var ctx = canvas.getContext("2d");
}  

Now we have a handle on the canvas object we can start drawing. Ther are 4 main base methods for drawing complex shapes (or paths):

  • beginPath()
  • closePath()
  • stroke()
  • fill()

Using stroke() or fill() implicitly calls closePath() also. The <canvas> is made up of pixels which are referenced as a coordinate system from the top left (0,0), using this coordinate system you have 4 methods on top of the base methods for drawing paths.

  • lineTo(x, y)
  • arc(x, y, radius, startAngle, endAngle, anticlockwise)
  • quadraticCurveTo(cp1x, cp1y, x, y)
  • bezierCurveTo(cp1x, cp1y, cp2x, cp2y, x, y)

Finally there is also one other method which allows you to position the start point of a path or paths:

  • moveTo(x, y)

I’m going to use the lineTo() and arc() methods to create the logo

Creating the logo

Using a piece of graph paper 10×10 I sketched out the logo I desired using full squares to make the maths easier. I then translated the coordinates of each point into the functions. The following are the steps I went through, if you would like to see the code behind each logo please click on the image for a demo file.

Step 1. Creating the outside shape

The logo is made up of simple lines and a couple of half arcs making up the ‘B’.

ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.closePath();
ctx.stroke();     
     

Step 2. Cutting out the inside shapes

The inside shapes are fairly simplistic as well, 3 new paths were added.

ctx.beginPath();
ctx.moveTo(80, 100);
ctx.lineTo(110, 100);
ctx.lineTo(100, 60);
ctx.lineTo(90, 60);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(160, 50);
ctx.lineTo(160, 70);
ctx.lineTo(190, 70);
ctx.arc(190, 60, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.stroke();

ctx.beginPath();
ctx.moveTo(160, 130);
ctx.lineTo(160, 150);
ctx.lineTo(190, 150);
ctx.arc(190, 140, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.stroke(); 
     

Step 3. Filling in the logo

Up until this point the logo has just been an outline however I wanted a solid logo. In order to do this I assumed that instead of using 4 paths, 1 path would be required, so I modified the paths to utilising moveTo() and created a single path, then used the fill() method.

ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.lineTo(20, 180);

ctx.moveTo(80, 100);
ctx.lineTo(110, 100);
ctx.lineTo(100, 60);
ctx.lineTo(90, 60);
ctx.lineTo(80, 100);

ctx.moveTo(160, 50);
ctx.lineTo(160, 70);
ctx.lineTo(190, 70);
ctx.arc(190, 60, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(160, 50);

ctx.moveTo(160, 130);
ctx.lineTo(160, 150);
ctx.lineTo(190, 150);
ctx.arc(190, 140, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(160, 130);

ctx.fill();
     

As can be seen from the resultant image the result was not what I expect. Where I had cut out shapes I expect the fill to honour them. This was the first problem. It wasn’t obvious to me from the documentation why this hadn’t worked as expected so I decided to take a different approach.

Step 4. Cutting out the inside shapes (take 2)

Instead of cutting out the inside shapes I decided to fill the shapes in with the same background colour as they were painted in, utilising a layer effect as in photoshop.

ctx.fillStyle = "#000000";

ctx.beginPath();
ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.closePath();
ctx.fill();

ctx.fillStyle = "#FFFFFF";

ctx.beginPath();
ctx.moveTo(80, 100);
ctx.lineTo(110, 100);
ctx.lineTo(100, 60);
ctx.lineTo(90, 60);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(160, 50);
ctx.lineTo(160, 70);
ctx.lineTo(190, 70);
ctx.arc(190, 60, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.fill();

ctx.beginPath();
ctx.moveTo(160, 130);
ctx.lineTo(160, 150);
ctx.lineTo(190, 150);
ctx.arc(190, 140, 10, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.closePath();
ctx.fill();
     

This approach looks to have the desired effect.

Step 5. Adding a shadow

Currently the logo looks a little flat so I decided to add a drop shadow to the whole thing. <canvas> has a set if method for doing this so I added the relevant code:

ctx.shadowOffsetX = 2;
ctx.shadowOffsetY = 2;
ctx.shadowBlur = 2;
ctx.shadowColor = "rgba(0, 0, 0, 0.5)";
     

The more eagle eyed amongst you will now spot the issue I have. Where I have layered the shapes the shadow isn’t present, it looks like my inside shape method hasn’t worked. At this point I was fairly stumped.

Step 6. Cutting out the inside shapes (take 3)

After re-reading the documentation a few times I came across the following passage:

Note: Thus, if two overlapping but otherwise independent subpaths have opposite windings, they cancel out and result in no fill. If the overlapping but otherwise independent subpaths have the same winding, that area just gets painted once.

Windings is not a term I had come across before so after some digging it looks like it is the direction (clockwise or anticlockwise) the shape is created in. All I had to do was go back to my single path and cut the bits out in the oppoiste direction.

ctx.beginPath();

ctx.moveTo(80, 100);
ctx.lineTo(90, 60);
ctx.lineTo(100, 60);
ctx.lineTo(110, 100);

ctx.moveTo(160, 50);
ctx.lineTo(190, 50);
ctx.arc(190, 60, 10, (Math.PI/180)*270, (Math.PI/180)*90, 0);
ctx.lineTo(190, 70);
ctx.lineTo(160, 70);

ctx.moveTo(160, 130);
ctx.lineTo(190, 130);
ctx.arc(190, 140, 10, (Math.PI/180)*270, (Math.PI/180)*90, 0);
ctx.lineTo(190, 150);
ctx.lineTo(160, 150);

ctx.moveTo(20, 180);
ctx.lineTo(60, 180);
ctx.lineTo(70, 140);
ctx.lineTo(120, 140);
ctx.lineTo(130, 180);
ctx.lineTo(200, 180);
ctx.arc(200, 140, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.arc(200, 60, 40, (Math.PI/180)*90, (Math.PI/180)*270, 1);
ctx.lineTo(60, 20);
ctx.lineTo(20, 180);

ctx.fill();
     

This filled the shape correctly and whats more the shadows worked perfectly as well.

Step 7. Adding a gradient fill

The final touch I want to implement was a nice gradient fill so again it didn’t look too flat. You can create a different types of gradient and then apply them to the fill style so this is what I did:

var fs = ctx.createLinearGradient(0,0,0,180);
fs.addColorStop(0, '#c08e93');
fs.addColorStop(1, '#BE1E2D');

ctx.fillStyle = fs;
     

Logo complete!

Conclusion

Overall, with the exception of the windings aspect, I found <canvas> fairly intuitive to work with. Creating aimple shapes like this doesn’t take a lot of brain power, sure its a bit fiddly but I’m sure in time tools will be developed to make this a lot easier.

As for the logo I’m pretty happy with the result for anyone interested here is my the final complete script

function drawLogo() {
  var canvas = document.getElementById("logo");
  if (canvas.getContext) {

    var c = canvas.getContext("2d");

    var offsetX = 14;
    var offsetY = 14;
    var scale = 5;

    var fs = c.createLinearGradient(0,0,0,18*scale);
    fs.addColorStop(0, '#c08e93');
    fs.addColorStop(1, '#BE1E2D');

    c.shadowOffsetX = 2;
    c.shadowOffsetY = 2;
    c.shadowBlur = 2;
    c.shadowColor = "rgba(0, 0, 0, 0.5)";

    c.fillStyle = fs;

    c.beginPath();
    c.moveTo(offsetX+(6*scale), offsetY+(8*scale));
    c.lineTo(offsetX+(7*scale), offsetY+(4*scale));
    c.lineTo(offsetX+(8*scale), offsetY+(4*scale));
    c.lineTo(offsetX+(9*scale), offsetY+(8*scale));

    c.moveTo(offsetX+(14*scale), offsetY+(3*scale));
    c.lineTo(offsetX+(17*scale), offsetY+(3*scale));
    c.arc(offsetX+(17*scale), offsetY+(4*scale), (1*scale), (Math.PI/180)*270, (Math.PI/180)*90, 0);
    c.lineTo(offsetX+(17*scale), offsetY+(5*scale));
    c.lineTo(offsetX+(14*scale), offsetY+(5*scale));

    c.moveTo(offsetX+(14*scale), offsetY+(11*scale));
    c.lineTo(offsetX+(17*scale), offsetY+(11*scale));
    c.arc(offsetX+(17*scale), offsetY+(12*scale), (1*scale), (Math.PI/180)*270, (Math.PI/180)*90, 0);
    c.lineTo(offsetX+(17*scale), offsetY+(13*scale));
    c.lineTo(offsetX+(14*scale), offsetY+(13*scale));

    c.moveTo(offsetX, offsetY+(16*scale));
    c.lineTo(offsetX+(4*scale), offsetY+(16*scale));
    c.lineTo(offsetX+(5*scale), offsetY+(12*scale));
    c.lineTo(offsetX+(10*scale), offsetY+(12*scale));
    c.lineTo(offsetX+(11*scale), offsetY+(16*scale));
    c.lineTo(offsetX+(18*scale), offsetY+(16*scale));
    c.arc(offsetX+(18*scale), offsetY+(12*scale), (4*scale), (Math.PI/180)*90, (Math.PI/180)*270, 1);
    c.arc(offsetX+(18*scale), offsetY+(4*scale), (4*scale), (Math.PI/180)*90, (Math.PI/180)*270, 1);
    c.lineTo(offsetX+(4*scale), offsetY);
    c.closePath();
    c.fill();

  }
}

Tidying Up Comments

I seemed to have stalled a little bit on the skin redesign over the last couple of months, haven’t really had the time to devote to it. I’ve made a couple of quick additions over the last few weeks but haven’t really updated the skin much.

Well this week I decided it was time to get on with it again. To ease my way into it I decided to focus on the comments section which shouldn’t have proved too difficult. In reality there was a bit more too it than I expected due to a navigation aspect I’m unlikely ever to need. A few pixel tweaks required to get it looking OK and I think I’ve done a reasonable job. Implementing the tweet box helped with my comment form design as I essentially copied the styles from there. I still need to get them looking OK on webkit browsers but that shouldn’t take too long.

There isn’t much of note to talk about except I guess for the alternate row colors. Traditionally this is handled by adding a class of odd or even to the rows – this is what wordpress does. However with CSS3 comes the handy :nth-child selector. Feeding in odd as the parameter allows you to target every other row:

.commentlist li:nth-child(odd) {
	background-color: #f8f8f8;
}

In the future I’d like to do a bit more with the comments section, perhaps use Facebook/Twitter connect to let people comment but this is a bigger development.

Adding a Syntax Highlighter

As a lot of my posts contain snippets of code I’ve decided to add a syntax highlighter to help show the code in amore meaningful light, if nothing it will differentiate the code from the standard body copy. To achieve this I have used Alex Gorbatchev’s excellent SyntaxHighlighter Javascript plug-in. Once installed into my theme directory it was a simple case of adding a few lines into header.php and its ready to rock and roll.

	
	
	
	
	
	
	

	

The plug-in works by inspecting your code for special class names on a <pre> tag. Once found the JavaScript rewrites the code for what you are trying to highlight adding syntax highlighting for the language you specify in the clas name. The class name taks the format of class=”brush: [language];” so a section of code marked up with <pre class=”brush: css;”>…</pre> will syntax highlight the CSS code. I’ve retro fitted this into all the code examples on the site so far and as can be seen from the syntax highlighted in this code it does an excellent job.

A small detail which makes a big difference.

update: I’ve had to put leading spaces in the script tags in the above example as it was interpretting the script tags literally!

CSS Buttons

I’m beginning to think my lack of design skills is ultimately going to make this site look a bit 1-dimensional. I’ve spent the best part of a week (very on and off I might stress) tinkering with CSS to make a couple of buttons best place to buy generic viagra online. I’m still not happy with the result but for now I think its as good as its gonna get. The important thing to bear in mind is that its still 100% CSS, re-using a lot of the techniques I’ve already described previously. I’ve added in a use of text-shadow but as this is largely the same as box-shadow I don’t think I need to go into too much detail, below is a summary of the CSS with only -moz- specific selectors inserted, I’ve also got webkit and fallback in the full version.

.navigation {
 display: block;
 clear: both;
 overflow: hidden;
 padding: 0 3px 3px 3px;
 width: 100%;
}

.navigation .alignright, 
.navigation .alignleft {
 background: -moz-linear-gradient(top, rgb(190,90,100), rgb(190,30,45));
 -moz-box-shadow: 0 1px 3px #999;
 border: 1px solid #f2f7fc;
 display: inline;
 padding: 0 14px 2px 14px;
 margin-bottom: 11px;
 color: rgba(255,255,255,1);
}

.navigation .alignright:empty, 
.navigation .alignleft:empty {
 background: none;
 border: 0;
 -moz-border-radius: 0;
 -moz-box-shadow: none;
 margin-bottom: 0;
}

.navigation .alignright {
 -moz-border-radius: 0 7px 7px 0;
 float: right;
 text-align: right;
}

.navigation .alignleft {
 -moz-border-radius: 7px 0 0 7px;
 float: left;
 text-align: left;
}

.navigation a, .navigation a:visited {
 color: rgba(255,255,255,1);
 text-shadow: #555 -1px 1px 1px;
 font-size: 11px;
 font-style: normal;
 font-weight: bold;
 text-transform: uppercase;
 font-family: Verdana;
}

.navigation .alignright a:hover, 
.navigation .alignleft a:hover {
 text-decoration: none;
}

div#content > div:last-of-type {
 margin-top: 14px;
}

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

Once again I haven’t messed with the mark-up and have had to resort to some funky selectors to get a consistent result. This is mainly due to empty <div>s being outputted when no link is required. Fortunately for me there is the handy selector :empty which has allowed me to turn off CSS I’ve added if there are no links. I’ve also had to swap around margins depending if it is at the top or bottom of the page, not 100% happy with this approach so may come back to it.

As the navigation doesn’t display due to a lack of posts here’s what the button should look like, if you want to see it in situ click on a post heading:


At this rate its going to be a while before my basic theme is up and running and I can start to focus on individual touches. Patience…

Jazzing up the Chrome

Its taken me a little while to put this post together. Not because I have done anything radical to the site which has taken tonnes of development. No simply put I’m pretty rubbish when it comes to design! As promised in my last post I wanted to start to look at colors for the site and this brought my lack of design skills to the fore. Coming up with a color scheme for the blog demands imagination of which I have little to no of. To try and overcome this I ‘ve been trying to utilise some online tools such as Adobe’s Kuler. Whilst a very cool tool I still found it a little difficult to go from the palette to design just in my head. After playing around with the tool for a while and coming up with a bright palette I caved in and decided this just wasn’t going to work for me and instead went back to the primary colours of red, white and blue (or shades there of), not very exciting I know…

I’ve applied these colors to various elements on the page but don’t think I really need to go into the details, the full CSS can always be viewed for this.

On my last update I was more or less happy with the overall look of the posts part of the page so I set about changing the chrome into something a bit more acceptable. This has meant I had to make one minor change to the posts, I’ve knocked back the border from 10px to 5px to reduce the emphasis. I’ve also removed the border round the whole page and instead I’ve opted for a subtle drop-shadow with a light blue gradient for the page.

Once again I have opted against using any images on the page to create my desired effects. Instead with the release of Firefox 3.6 last week I have been able to put into practice some new experimental CSS3 properties putting the job of generating these effects into the browsers court. Lets start off with the site background, I have decided to have a light blue gradient fading to even lighter blue as we drop down the page. I could have created a thin 3px-ish gradient in Photoshop and repeated it across the top of the page but in Firefox 3.6 we can use gradients as backgrounds. The CSS is pretty self explanatory:

background: -moz-linear-gradient(top, #c2daf1, #f2f7fc);

The first argument descibes where to anchor the gradient and the following arguments are the colors to use. There are plenty more things you can do with gradients in Firefox 3.6 so if you’re interested I suggest you take a look at Mozilla Hacks which has a great set of examples.

Next I wanted to add the drop-shadow to the overall page, this too can now be achieved in FF3.6 using the box-shadow property.

-moz-box-shadow: 5px 5px 5px rgba(0,0,0,0.2);

This creates a 5px drop shadow with a very opaque background color, an approach which is inifinitely easier to achieve than with images. Lastly just for fun more than anything and just to have a play I’ve added an elliptical gradient to the header, although I doubt this will remain for very long…

#header {
  background: -moz-radial-gradient(top left, ellipse, #eee, #fff);
}

Overall the theme looks to be coming together nicely, and so far I haven’t had to use a single image in the theme. There’s still a lot to do over the coming weeks before the theme can be considered relatively complete.

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.