Just finished putting together my Behance Network profile so stop by and have a look sometime. While you are there take a minute to browse around and see some of the amazing work submitted by some of the most creative people ever!

I frequently visit the Behance Network as I find the site one of the best sources of inspiration on the web. What I like most about Behance is that, unlike css galleries, you are given a huge range of different creative projects to draw inspiration from, so it can be a real godsend when you get that ’stuck in a rut’ feeling that I’m sure even the best of us get once in a while. You can browse through such a vast selection of creative fields including such categories as graffiti arts, architecture, ice sculpturing, screenwriting, song writing, magic and the list goes on, so there is always something new to see. Also the Behance community is a great friendly place to meet loads of other like minded creative people which is always cool.

So if you haven’t already, go ahead and check out the Behance Network and make sure you have plenty of time on your hands as you can literally spend hours there!

So I’ve decided to take a little break from full time work to concerntrate on a few of my other projects and to give some thought as to what I want to do career wise. It occured to me at the beginning of the year how quickly the days/weeks/months were starting to fly by and that I still wasn’t really sure what it is that I want to end up doing. I think Ferris Bueller best summed it up when he said…

“Life moves pretty fast. You don’t stop and look around once in a while, you could miss it.”

First on my list to get up and running is my CSS Gallery Project: Like Your Styles. Over the last couple of months I have literally had no time to put into this project and it’s something I want to try and get going as soon as I can. I think it wil be a fun thing to do and hopefully be a consistently good source of inspiration for all you web designers/developers out there.

I also have a handful of sites which I really want to bring up to date (again, something i’ve been meaning to do for ages!), so all being well should have some more to add to the ol’ portfolio soon!

I was just happy to get a little heart badge (now a fav badge) on the corner of my site when it was first featured on CSS Mania, but making it into their Creme de la Creme list is even better! See Frances Kay’s website on CSS Mania for yourself.

I know it’s probably not a big deal to most web designers getting their work featured on CSS Mania but for me it’s something pretty special. I guess it’s just nice to know that other people appreciate your work, especially when you know you have put in a lot of effort into a project.

Thanks CSS Mania.

To be honest with you, until recently I’d never given too much thought to creating a stylesheet to control how pages of a site look when they are printed out. This is mainly because I’m lazy, but primarily because no one had ever asked me to…

So when a client enquired whether or not it was possible to have their content displayed a certain way when printed out, I quickly replied “No problem”, although not exactly sure how this was going to work. Fortunately, the first link I found on creating stylsheets for print was to an article by the good people at ‘A List Apart’. A List Apart is probably one of the best resources out there for web designers/developers and if you don’t already visit their site frequently I would advise you start. While I’m not going to try and rehash everything Eric Meyer talked about in his article, as I won’t do it any justice, I am just going to mention a few points that might help you if you’re thinking about giving it a go for the first time.

Get your links right

If you are new to including stylesheets for print then you probably are used to just linking to your main stylesheet/s without worrying about specifying the media attribute. This is important to do as the styles from your main stylesheet will still be applied to the print version of your page unless you specify media="screen". It makes sense when you think about it but it certainly had me stumped when I first started playing around with different types of stylesheet. Below is an example of what I mean.

This will still inherit styles from your main stylesheet and your print stylesheet when viewed in print preview mode:

<link type="text/css" rel="stylesheet" href="main_styles.css" />
<link type="text/css" rel="stylesheet" href="print_styles.css" media="print" />

By adding the value ’screen’ to the media attribute, only the correct print_styles will be applied to your printed page:

<link type="text/css" rel="stylesheet" href="main_styles.css" media="screen" />
<link type="text/css" rel="stylesheet" href="print_styles.css" media="print" />

Lose any content you don’t need

When you know your print stylesheet is hooked up correctly you are ready to start styling. The first thing I would advise doing before you start writing any CSS, is to have a look at your page in print preview mode and see what elements you don’t want on your printed page. For example, the first thing I would usaually remove would be the navigation bar/element. On your unstyled page preview this will probably just look like a list of blue links which will be of no use to anyone on a sheet of paper, so we want to lose them straight away. Removing elements using your print stylesheet is easy. Simply declare the element you want to take out and set it’s display property to none.

ul.nav {display: none;}

N.B. It is worth noting that setting the elements visibility property to hidden will not have the same effect as setting it’s display to none as the area the element ‘inhabits’ will remain on the page, usually leaving a big gap between other chunks of content.

Other sections of your page you may want to remove might be the footer, logo image, sidebars etc.. These can all be taken out of your printed page by the same method. Below is an example of how you would go about this in your print stylesheet:

ul.nav, #footer, img.logo, #sidebar {display: none;}

You can still make things look nice you know!

Once you have taken out all of the elements you don’t need that mess up your printed page there’s no reason why you shouldn’t add some simple styling to the remaining content just to give it a bit of a face-lift. By simple styling I mean declaring the font-family (still should be web safe font), adjust the size of headers, setting a good line-height for readability etc. Remember you can always lift some of these styles from your main screen stylesheet to save time if you think they will still work visually on your printed page. Doing this also might add to the consistency of your design both on screen and on paper.

So that’s just a few things I picked up while creating my own stylesheets for print, but like I mentioned at the top of this post, if you really want to know the score with creating great print stylesheets I recommend you read this article by Eric Meyer of A List Apart.

I’ve been toying with the idea of building my own CSS gallery for a while now, so the other day when the name ‘Like Your Styles’ popped in my head and I saw that the .com domain was available, I knew that now was the time to get it moving.

I know there’s plenty of CSS galleries already out there, some of which are good, some of which are bad, but I notice even the best galleries still seem to feature sites that I don’t feel really make the grade. This is all down to personal opinion of course but the main aim of ‘Like Your Styles’ would be to only include the best designed, standards compliant websites of all time without compromise.

I’ve already given a fair bit of thought as to how the site is going to be built and have an idea about how it’s going to look, so provided I get a bit of spare time here and there between work and freelance projects, I would like to get ‘Like Your Styles’ up and running in the next few months. For now though, I have just uploaded a simple splash page with a form for you to submit any sites that you want me to check out. Alternatively you can submit a site via the form below.

Your Email (required)

URL (required)

Just finished my latest freelance project - Frances Kay’s website and have popped it up on my portfolio. This is the second project in my freelance portfolio now which I know is still a bit lame, but these things take time!

Frances Kay is a business woman who offers masterclasses and 1 on 1 training to executives and managers as well as many other training courses. She is also an author and has written heaps of books on subjects like ‘Business Communications’, ‘Stress and Time Management’, ‘Retirement Guides’ etc. so she had plenty of content that need arranging. Frances wanted a clean platform where she could draw attention to the range of services she offers and be able to list all of her publications in a visually appealing way.

My first task was to decide which CMS would be best to use for this project. Given that she wanted to be able to add new titles to her range of books, have a ‘News’ section where she could list upcoming events and conferences she would be speaking at, and be able to edit the content on the static pages, I needed quite a flexible solution. In the end I decided to use Expression Engine. I use EE a lot on projects at work and find it very easy to work with. I find it to be the best solution when a site has a lot of different sections that need to edited and feel it is a bit easier for clients to get their heads around than other alternatives.

Now I had my CMS sorted out, next came the design. My primary objective here was to make the site stand out from it’s competitors and not just look like all the other bland corporate sites I see about all the time. The design of the site went quite smoothly and I had the main body designed in just a couple of evenings. After I had dropped in the initial content I was a little concerned that the main home page was starting to look a little content heavy, however, adding a few icons and the list of book cover thumbnails really brought the page to life.

Integrating the design into Expression Engine was a breeze and after building a couple of customised weblogs to house the news and book sections, adding in a some forms and hooking up a Google map I was pretty much done. The only thing I did end up changing right at the end was how the nav bar looked, but other than that everything worked out nicely.

Web designer and client both happy!

As I’m sure you all probably know, there’s no shortage of PNG fixes out there for dealing with our old friend ie6, and a plethora of articles describing in detail the way these different solutions work. In this post I just wanted to talk about some of my experiences with the different options I have used, and why I have ended up settling on one particular fix.

1. Angus Turnbull’s TwinHelix IE PNG Fix

After a quick search and a brief poke around on some forums the first PNG fix I stumbled across was Angus Turnbull’s TwinHelix IE PNG Fix. I particularly liked the fact that this was a CSS based solution as opposed to a JavaScript fix, (until recently I have always been of the mind that if you can do something without having to use JavaScript then that is the best way), and being relatively easy to install this seemed like the way to go. The problem with this fix became apparent when I ran the site’s stylesheet through a css validator as a final check and found that it failed because of the { behavior: url(iepngfix.htc) } line of code required in the CSS to make the fix work. For me this is a big problem as I am (as should we all be) very fussy about having all my site’s code validate, so decided it was best to move on and seek out an alternative to the TwinHelix fix.

2. The Supersleight solution

Given that there were no more CSS based fixes out there I decided to try out Supersleight which is a JavaScript fix. Again, this was pretty easy to install and all seemed to work just fine with the images that were causing problems in ie6. The great news was that being a JavaScript file, there was nothing I needed to add to my stylesheet to get SuperSleight to work correctly leaving my CSS all completely valid. It wasn’t until I popped a google map into the site that I ran into an issue with way SuperSleight handled PNGs. The problem was that you cannot specify which elements you want the fix to work on with SuperSleight and it was conflicting with the transparency that the Google map’s API uses causing the map to look horrible in ie6. The search continued!

3. Drew Diller’s DD_belatedPNG

Finally I came across Drew Diller’s DD_belatedPNG fix, which after a little research found that it allows you to declare which elements you want the javascript to target, beautiful! This meant that I could finally get my PNG’s to work in ie6 as well as have a working Google map. Life was good again.

N.B. Worth Checking Out

I also noticed this jquery fix the other day which I haven’t tried out yet but might be worth bearing in mind if you are looking for a different solution.

Finally my new portfolio is done! I have more I want want to add to it, but for the time being it will do. Also as you may have gathered my blog is now part of my portfolio which makes everything a little easier to manage.

This is the second time I have built myself a portfolio now, and it certainly doesn’t seem to get any easier! My first portfolio which I finished a couple of years ago took me ages to build. It was built it in Flash which back then I thought was the done thing if you were a web designer, and I had no clear idea about what I was really trying to do. I hoped that it would come together as I built it which is never a good way to deal with a project. One of the biggest problem back then was that I thought it needed to be vast to show people all the various things I could do. The emphasis was definitely on quantity rather than quality which is something I have completely reversed this time around. I take much more care with my work now and am only happy when I know I have done the best job I can. This is something I hope my new portfolio will portray the more I add to it.

This time around I wanted my portfolio to just be one single page that would list my best work. I also wanted a format which would allow me to change the appearance of the site without having to spend a lot of time altering various elements. I managed to accomplish this by making the background of the site an image which can be changed with ease as and when I like. Soon I would like to use some of my own photography for the background imagery of the site, but at present I am not sure I have anything that would work particlarly well so have used some lovely stock imagery instead.

It was always my plan to attach this blog to my portfolio and luckily Wordpress made it very easy for this to happen. Given that most of the stuff I talk about in this blog is related to personal and freelance projects it just made sense to house it all in the same place.

Why the sarcastic title? I see so many portfolio’s that have these cheesy tag lines, but to be honest when you have read a few they all start to sound the same, so I really just wanted something a bit tongue-in-cheek that would hopefully seperate me from the pack!

Ok, so one of  the things I promised myself I would do this year is to start writing a blog/journal where I can talk about some of the freelance projects I am working on, as well as writing about anything of interest that crops up along the way (which I’m hoping it will!). Although I have been designing and building websites for about two and a half years now, I still find myself learning new things everyday which is why I find what I do such an interesting line of work, and hopefully like minded people may find some of the things I write about here either helpful or useful in some way.

Anyway, besides this blog there are still a bunch of things that I would like to accomplish this year, both work related and personally. Below is a short list I have compiled:

• start a blog
• build a new portfolio site (my old flash one is the worst)
• finish reading Chevy Chase’s autobiography (I’m a big fan)
• redesign some of my earliest sites
• play my first round of golf
• go abroad somewhere new
• pick up and play my guitar again
• write my awesome script idea
• sell my script for a huge some of money
• build my own css gallery
• keep updating this blog
• watch as many 80’s comedy films as I can