Archive for May, 2010

With the progression of newer browsers I’ve started to move my work forward and incorporate RGBa (Red, Green, Blue, alpha) into my client work. Obviously the use of this will depend on the amount of visitors your site attracts and what browser they end-users are using. However, with that said, when I can get away with using RGBa instead of .png files then I will.

Quick Refresher Course

Hex Values

You might only be aware of one way to stipulate colour in your website designs, which will probably be a hex value. A hex, or hexadecimal, value is a colour code that starts with a hash and is followed by either 3 or 6 numbers, depending on the colour you are wanting to use.

The hex value of the colour red will look like #FF0000;

RGB Values

RGB which stands for Red, Green, Blue is another way for specifying colour values on your website. However, this method is quite different to the previous. Lets take the example from the previous paragraph.

The colour red in RGB will look like rgb(255,0,0);

So instead of stipulating a hash, that gets replaced with rgb and instead of using 3/6 numbers they get replaced with 3 sets of numbers.

What is RGBa and how can you use it in your work?

RGBa is the follow on from RGB, the basic principles are the same but you get one extra letter “a” which stands for alpha. This letter allows you to specify an opacity value for the colour you are declaring. As this is a newer technique it is unfortunately not yet supported by all browsers. Chris Coyier over at CSS Tricks has created a nice little table to show you the state of the playing field.

To carry on with our red example; rgba would look like the following rgba(255,0,0,1).

The number one is located in the alpha channel which allows us to fill areas with transparent color; where you can stipulate any value between 0 and 1 (zero being fully transparent and one being fully opaque).

Why Can’t I Use Opacity For The Alpha Channel

Above I mentioned the fact that the alpha channel is a little like an opacity value. So you might be asking yourself why you can’t just use the opacity value instead.

The reason I choose the word opacity was to make it easier for you to understand as you were reading this. The RGBa property applies transparency only to a particular element (the element the RGBa value is set on), whereas the opacity property affects the element it is applied to and all of its children.

Defining RGBa in your Stylesheets

As I touched on above, not all browsers support RGBa, so when you do declare these you should always provide a fallback colour just incase of the worst possible outcome. Your fallback should be a solid colour, so you should either use rgb or a hex value for this.

div {
   background: rgb(255,0,0);
   background: rgba(255,0,0,0.6);
}

If you do not declare a fallback this means that nothing will be displayed, if you are viewing the website on an older browser that doesn’t support this code.

HTML5 Wrapper

Recently I’ve been monitoring my mint stats and I’ve noticed a surge of people searching for the term HTML5 wrapper, so I’ve decided to write up a quick post on offering up some suggestions to combat this grey area.

The Traditional Method

I think the main thing people fail to realise is that HTML5 isn’t phasing out the much loved div tag, far from it. It’s introducing a set of new elements to make standard based semantic code that should be easier for everyone to implement.

Basically, if a specific part of a website doesn’t fit into the field of a section, article or aside tag then there is no problem with using a div. As a page wrapper doesn’t fall into any of the above tag suggestions, there is nothing wrong using the tried and tested method of <div id="wrapper">.

I’ve received countless emails where people have been asking if it would be appropriate to use a section tag as a wrapper but this is not the correct implementation for the tag. The section spec says

The section element represents a generic document or application section…The section element is not a generic container element. When an element is needed for styling purposes or as a convenience for scripting, authors are encouraged to use the div element instead.

Use the body

Another method to create a wrapper is to style the body tag. We style our body tags with properties such as font-size, font-color and background-color to name but a few but something which I think may people may have overlooked is to add a width to the body tag, making it act as a div like container. Here’s a very simple example

body{
margin: 0 auto;
width: 960px;
}

Hopefully I’ve been able to allay some of the concerns you have been having on how introduce a wrapper when making the jump to HTML5. If you have any questions or would like to offer an alternative then please feel free to leave a comment or drop me an email by heading on over to the contact page.

The Build Up To Build Conference 2010

Yesterday Andy McMillan, founder of Build conference, announced the line-up for this years conference.

The incredible thing about Build is the fact that it is only entering it’s second year and it’s managing to bring in such a high calibre of speaker. It really is incredible. Last years line-up included people like Eric Meyer, Wilson Miner, Mark Boulton and Ryan Sims and it left me wondering how this years fesitval was going to shape up. If I’m being honest, I had my doubts as I really didn’t think anything would be able to come close but I’m glad that I’m now eating my words.

This year, if you manage to grab a ticket you will be listening to; Dan Cederholm, Meagan Fisher, Liz Danzico, Frank Chimero, Tim Brown, Keegan Jones and Tim Van Damme.

Of that list there are two people in particular that I’d pay the ticket money alone for. Dan Cederholm was the man who got me into web design. His Bulletproof web design book was the first book I ever bought and one that has very dog eared pages from being picked up and flicked through so much. The other speaker who I’m really looking forward to hearing is Frank Chimero, his own personal website is stunning and it is something that I try to aim for, his style is absolutely gorgeous.

Just like last year I’m already throughly excited and counting down the days until I’m back in the beautiful city of Belfast.

Tickets go on sale Friday 4th June, 9am.

Newspaper layout with CSS3

Last summer I was travelling back from my holiday when I picked up a newspaper and started to wonder if it was possible to create similar layouts to what we have become accustomed to in print with some of the newer CSS properties. I set to work on the examples quite quickly but then forgot all about them, leaving them untouched in my dropbox folder for months.

Since my initial idea several different examples have been put online and whilst my examples might not offer anything different from those previously mentioned I thought I may aswell put them live incase anyone stumbled across them.

Within the examples page I have shown that it is possible to create different column variations. I’ve also used the :first-letter selector to create a newspaper style dropcap and I’ve tried to experiment with the column-span property. I’ll also be updating these examples as I learn newer methods.

From my experimenting I have noticed a few flaws which should hopefully be sorted out soon, if you’re interested in finding out what works and what doesn’t then head on over to my CSS3 newspaper example page.

If you fancy reading more into the multi-column spec you can read about it here and if you have any queries or would like me to attempt something then just leave a suggestion in the comments section.

Tom Muller at Glasgow School of Art

Last night I had the pleasure of hearing Tom Muller, of Kleber design, speak at the Glasgow School of Art.

The talk covered the many different aspects of his career; from being a small boy in his dads workshop right through to present day. He spoke about the goals he set himself when he was younger, joining his first real creative agency, suffering from a creative drought (although a very boring and obvious question, I wish I had asked how he overcame that), joining Kleber and finally to moving on and doing his own thing.

Most of you will know Tom for his work on the web but what many of you may not know is the fact that he can turn his hand to pretty much anything he wants, with his most recent client work being for DC comics, something which he admitted himself that he has always wanted to do.

I have to admit to being a bit of a fan-boy, I remember sitting in College some five years ago and seeing Klebers website and client list and being totally blown away. Since then he’s still managed to remain consistently in my bracket of favourite designers. I’ve been to many design talks and conferences and none have left me as inspired as this one. I love how honest, open and modest he was.

Hello Muller poster He touched briefly on a piece of advice he got when he was just starting out, something which I have also recently been told:

Come into work from 10-6 and use the money you earn there to do your own projects in the evening; staying up until 2 and 3 o’clock in the morning.

When Tom was speaking about this I instantly thought back to a recent publication of .net magazine where Jeffrey Zeldman said:

do cool free stuff that doesn’t make you any money. It will totally grow your brand and get you clients.

Tom also told the audience to embrace social networks with forums in particular being the best place to pick up new clients. This is all solid advice, which perhaps people are only starting to take notice of now with social networks like twitter coming to the fore.

I’ve also asked if Tom would consider putting up his slides for others to view, if he agrees I’ll drop a link to them on this post for you to view. You won’t be disappointed.