Unnecessary Background Reading

If you’re not a little intrigued as to how Gary Neville has found himself in a CSS blog post title, then feel free to skip this section and read on. What’s that… you’d love to know? Well okay, if you insist…

Football fans will recall his moment of ‘excitement’ when Fernando Torres rounded Victor Valdes and knocked the ball into the net to seal Chelsea’s shock victory against Barcelona in this years Champions League semi final.

Well, Nev’s reaction didn’t go unnoticed by the internet’s millions. In fact, 2 guys from my work (big up Mitch and Sean) dropped me an email the following day asking if I wanted to knock something together to go on the new domain they’d just bought… garynevillegasm.com. And so it began.

The Basics

Okay, so Gary Neville’s only really here to provide a real life example of where CSS3 animation has been used – we need to get to grips with the basics first.

Defining the keyframes

As with most animation, CSS3 animation works on a keyframe basis. This removes the limitations we have with CSS transitions, as they only animate from one state to another; for example from a blue normal state to a red hover state. With keyframe animation we can animate from one state to another to another and so on.

We define when each state change will happen using percentages. Let’s see how this works with an example of a box moving around four corners of a page, changing colours as it travels to each corner.

There are 4 state changes to define, so here’s how we do it …

@keyframes square {
	
    0% {
        top:0;
        left:0;
        background:blue;
    }
	
    25% {
        top:300px;
        left:0;
        background:red;
    }
	
    50% {
        top:300px;
        left:600px;
        background:green;
    }
	
    75% {
        top:0;
        left:600px;
        background:yellow;
    }
	
}

It’s important to note that the exact code above will not work in any browser at the time of writing, as the only current support requires vendor pre-fixes. -moz- and -webkit- provide support for Firefox, Chrome and Safari in this case.

In the annotated image below, you can see exactly what each keyframe does.

Applying the Animation to an Element

Now we’ve created a set of keyframes, we need to apply the animation to an element. We do this by simply using the various animation properties on the element(s) we want to animate, like so…

.box {
    /* Your list of animation properties */
}

So what are these animation properties/controls?

• animation-name – The name of your animation. Must correspond with name given in @keyframes rule; in this case, ‘square’.
• animation-duration – How long the animation should last from start to finish. Defined in seconds or milliseconds; e.g. 5ms or 0.5s.
• animation-timing-function – Describes the varied acceleration of the animation; it denotes where the animation speeds up and slows down over the specified duration of the transition. E.g. ease or linear. See my previous article for more on the timing-function property.
• animation-iteration-count – How many times the animation repeats from start to finish. This can be any numerical value or the infinite keyword, which loops the animation forever!
• animation-direction – A value of normal (the default value) would play the animation from start to finish. The other value of alternate would play the animation forwards then backwards for animations with an iteration count of 2 or more.
• animation-delay – Only plays the animation after a set amount of time. For example, a value of 5s would cause the animation to begin 5 seconds after the page has loaded.
• animation-play-state – The default value is running which plays the animation normally; the other keyword is paused which – well, pauses the animation. If you take another look at my demo, I have set the animation-play-state property to paused when the box is hovered.

This seems like a lot of bytes to simply apply an animation to an element, right? Well, thankfully, we can use the shorthand version to vastly reduce it. The only required properties are animation-name and animation-duration.

.box {
    animation:square 10s infinite;
}

/* To pause the animation when the box is hovered... */
.box:hover {
    animation-play-state:paused;
}

An important note – for simplicity, all of my code examples above are un-prefixed, but in order for animations to work at the moment, they must have the appropriate vendor prefixes. For example @-webkit-keyframes and -webkit-animation.

Using CSS3 Animation in the real world… on Gary Neville

When it came to making Gary Neville as animated as his voice, there was only one thing for it – CSS3! Not just animation though – the use of other CSS3 capabilities such as transitions and transforms go some way to showing just what can now be achieved with a few lines of CSS.

Nev starts out pretty small when the page first loads (the image of Nev of course… take your dirty mind elsewhere!). Then, when the user inevitably hovers over the image, he springs into life, as we use a transition to animate the image to its full scale.

Don’t forget to click on the image too and make sure you’re volume’s turned up!

img {
    transform:scale(0.6);
    opacity:0.7;
    transition:all 0.6s ease;
}

img:hover {
    transform:scale(1);
    opacity:1;
}

Remember, with transitions, we can only animate from one state to another; in this case, from the small image to the full size image. But now he’s full size, we need to shake him rigorously from side to side in order to really put across his excitement. A transition isn’t quite powerful enough for this, so now we need to call upon keyframe animation!

In order to shake Nev, we need to move and rotate him slightly from side to side. We can use CSS3 transforms to do the maneuveral work for each keyframe and allow the animation to do the tweening between each frame.

@keyframes nev {
    0% { -webkit-transform: translate(5px, 0); }
    25% { -webkit-transform: translate(-5px, 0) rotate(-10deg); } 
    50% { -webkit-transform: translate(5px, 0) rotate(10deg); } 
    75% { -webkit-transform: translate(-5px, 0) rotate(-10deg); } 
    100% { -webkit-transform: translate(5px, 0) rotate(10deg); }   
}

/* Don't forget vendor prefixes!! */

Now we have our keyframes, we need to apply them to the image’s hover state using our various animation properties.

As described earlier, we used a transition lasting 0.6 seconds to scale the image to its full size on hover, so we don’t really want the animation to begin until the intial transition has finished. Step forward the animation-delay property. All we have to do is set the value to 0.6s and the animation will not begin until the first transition has finished.

img:hover {
    transform:scale(1);
    opacity:1;
    animation-name:nev;
    animation-duration:0.5s;
    animation-timing-function:ease;
    animation-delay:0.6s;
    animation-iteration-count:infinite;
}

With the above, we’ve set our animation to apply to the image on hover after 0.6 seconds with a duration of 0.5 seconds which will loop an infinite number of times. But don’t forget, we don’t need all that code! We can just as easily shorten all of the animation controls to one line of code: animation:nev 0.5s ease 0.6s infinite.

And with that, Gary Neville becomes almost as animated as the sound he makes when the image is clicked.

Conclusion

I seem to conclude every one of my posts on CSS3 the same way… with a warning.

It’s understandable that people want to play with new toys, but it must be done with caution, for progressive enhancement and not for vital functionality.

Be subtle and use where appropriate.

The basic filters as listed in the W3C Draft are as follows: grayscale, sepia, saturate, hue-rotate, invert, opacity, brightness, contrast,blur, drop-shadow, custom.

We can combine these filters together and use them with other CSS3 properties like transform and animate to create even more interesting transitions.

Support

Support is very limited at the time of writing, with Chrome currently the only browser with support for CSS3 filters, so anything other than experimental usage should be done with caution.

Having said that, with Chrome recently surpassing IE as the world’s most used browser, you can be confident that a sizeable chunk of your audience will see the benefits of your CSS3 filters if you do decide to experiment with them.

As with most of the new CSS3 properties, as long as we use them with caution to enhance the user experience and not to compromise the functionality of the site, you can feel free to use them right now.

Using CSS3 Filters to Enhance your Image Galleries

We’re going to take a look at how we can use these new filters to improve the UX for a simple image gallery.

Grayscale

Grayscale is a very basic effect that I think we would see a lot more of if we could achieve it with a single line of CSS rather than having to use a sprite image.

The Code

img {
    -webkit-filter:grayscale(1);
}

img:hover {
    -webkit-filter:grayscale(0);
}

As simple as that! Just one line needed to apply the filter; in this case, grayscale uses a scale of 0-1 to specify the strength of the filter. The above code applies a full grayscale effect to the image and restores the image’s full colour on hover. The demo uses a simple CSS3 transition effect to complete the effect.

Saturate

The Code

img {
    -webkit-filter:saturate(4);
}

img:hover {
    -webkit-filter:saturate(1);
}

The saturate filter has a starting value of 1, below which it de-saturates, creating a grayscale effect and above which it starts to saturate the colours in the image. The above demo strongly over-saturates the images to make the hover effect stronger.

Sepia

The Code

img {
    -webkit-filter:sepia(1);
}

img:hover {
    -webkit-filter:sepia(0);
}

The above code applies the classic sepia filter, which operates on a scale of 0-1 to determine its strength, similarly to the grayscale filter.

Hue Rotate

The Code

img:hover {
    -webkit-filter:hue-rotate(360deg);
}

The hue-rotate filter is applied a little differently to the others as it is specified in degrees. This may seem strange at first, but when you picture a colour wheel, it soon becomes easy enough to visualise the hue value in terms of its position in a circle. The above code (when used with a transition) simply sends the hue value all the way round the colour wheel on hover. The best way to understand this effect is to take a look at the demo above.

Invert

The Code

img {
    -webkit-filter:invert(1);
}

img:hover {
    -webkit-filter:invert(0);
}

The invert filter isn’t the most aesthetically pleasing in its basic usage, but it could be useful when combined with other filters or with black and white images.

Brightness

The Code

img {
    -webkit-filter:brightness(-0.5);
}

img:hover {
    -webkit-filter:brightness(0);
}

The brightness filter can be effective at making certain elements on a page stand out amongst their surroundings. A value of 1 is equivalent to 100% brightness (white) whereas -1 is complete darkness. In the example above, we’ve used a negative value to darken the gallery images, allowing the hovered image to stand out even more.

Contrast

The Code

img {
    -webkit-filter:contrast(0.3);
}

img:hover {
    -webkit-filter:contrast(1);
}

The contrast filter uses the value 1 to specify a neutral contrast, with the effect increasing or decreasing along with this value. In the above example, we’ve used a low value to ceate a low-contrast effect in order to make the hover effect stronger.

Blur

The Code

img {
    -webkit-filter:blur(2px);
}

img:hover {
    -webkit-filter:blur(0);
}

The blur filter is defined differently to the other filters as it uses pixel units to determine the strength of the blur, with 0 as its base value.

Combining CSS3 Filters to Enhance your Image Galleries

If we use our imaginations we can create any number of impressive techniques by using the various filters together and by combining filters with other CSS3 properties like transform and animate.

Here are just a few examples…

Hue-rotate and Animate

The Code

@-webkit-keyframes hue { 
    100% { -webkit-filter:hue-rotate(360deg); }  
}

img:hover {
    -webkit-animation:hue 1s linear infinite;
}

This example combines the hue-rotate filter with CSS3 animation to send the hovered image on an infinite loop around the colour wheel.

Blur, Grayscale and Transform (Scale)

The Code

img { 
    -webkit-filter:grayscale(1) blur(2px); 
}

img:hover {
    -webkit-transform:scale(1.3);
    -webkit-filter:grayscale(0) blur(0);
}

In the example above, we’ve brought in the transform property to give our hovered image a bit more emphasis. The blur filter also helps focus our attention on the un-blurred, hovered image.

Sepia, Brightness and Opacity

The Code

img { 
    -webkit-filter:sepia(1) brightness(-0.2) opacity(0.6);
}

img:hover {
    -webkit-filter:sepia(0) brightness(0) opacity(1);
}

The above combination of filters help to create a nice, subtle and understated gallery.

Grayscale and Brightness

The Code

img { 
    -webkit-filter:grayscale(1) brightness(-0.4);
}

img:hover {
    -webkit-filter:grayscale(0) brightness(0);
}

Again, the grayscale and brightness filters really help to bring out the hovered image and focus our full attention on it.

Conclusion

So there we have it, another taste of the sheer power of CSS3 and what can be achieved with it.

Just remember what we said earlier; consider how you’re using these filters. Are they detrimental to the functionality of your site or are they simply enhancing the appearance of existing functions?

Progressive enhancement is the way forward and as long as you’re applying this technique, I see no reason why you can’t treat your Chrome users to some CSS3 filters right now. Proceed with caution.

Naturally, I wanted to know who was currently on top. Obviously, the Spanish league scoring charts were easy to come across, but then I wanted to know who was ahead in the Champions League – and then I wondered who was on top in all competitions – then I wanted to know who has assisted more goals this season.

What I found

Surprisingly, I found it was quite an effort to come across this information. For a subject with so much coverage and so much public interest, I was quite astounded that there didn’t appear to be an up-to-date, statistical comparison of the 2 players, considering that their battle for top scorer is constantly back-and-forth and something that a considerable number of people like to keep their eyes on throughout the season.

I could access all of the data through several different sites and pages showing the various goals and assists charts… and I could read hundreds of articles comparing the 2 masters. But crucially, these comparisons are out-of-date and are very text heavy.

All I wanted was a snapshot of their head to head statistics at this moment in time and surprisingly, that wasn’t very attainable. And thus, my idea was born.

So what next?

I had a very thorough look through the results returned by Google for ‘Messi Vs Ronaldo’, which only really confirmed what I had first thought. Some really good write-ups of their abilities and their goal-hauls, but all of which contain what is now out-of-date information.

I thought, as it’s something that is of particular interest to me and with the potential it has to generate some decent traffic, it would be worth chucking something together and seeing how it gets on.

With just over a week until the players’ clubs met in the famous El Classico clash, I set myself a challenge to get something launched in time for this match.

The Concept: Day 1

I had been mulling over the idea for a few days by now, so I already had a pretty clear image in my head that I wanted to achieve. I [very] roughly sketched out my concept onto some paper, which you can see below – bear in mind though that my sketches are very rough (crap) and are just to give me something visual to work from!

The basic concept was to give people a quick reference point for the main stats of the 2 players, such as goals, assists and appearances in each competition in order for people to quickly see who’s currently on top.

Then I had (and am still having) more and more ideas for additional data avaiable below the fold, should users want to scroll down to see it. These include the achievements of the 2 players in terms of trophies won (both club and personal) and a head-to-head comparison of their abilities.

The Design: Day 1

I spent an entire night tackling the design of the project, attempting to transfer my paper concept into Photoshop. The most time consuming aspect was creating a background I was happy with, but I was eventually able to design everything I needed in the few hours I had available.

I designed only the top area to define the look and style of the site, with the sections that followed below simply being created in the browser.

Coding: Day 2 – 7

I sailed through the coding of the site, probably because I had written half of the mark-up in my head as I was designing it. I did my best to stay as semantic as possible despite the unorthodox layout…

Note: It didn’t actually take all that time to code – I worked on it on and off when I got chance during that time.

An easy method that will go some way to judging the semantic value of your markup is to disable the CSS. Does the content still make sense? Is there still a clear hierarchy of importance?

As you can see, the headers and list elements used ensure that the context of the data is maintained without any styling, going some way to proving the semantic value of the code.

You may notice the sub-headers (‘Lionel Messi Stats’ etc.) that are set to display:none when CSS in enabled. I feel it is important that your markup makes absolute sense when it is completely abstracted from the CSS that styles it; in this case, the styling makes it obvious which stats belong to who, but take that styling away and there are no visual clues whatsoever, so the extra headings are required.

This also ensures that each of the statistic blocks (like the one shown above) makes sense when taken out of the context of the rest of the page; I therefore felt it appropriate and semantic to make use of the HTML5 <article> element rather than <section> or <div>, as the data makes sense on its own and doesn’t require surrounding content to support it.

Making My Life Easier

Manually updating this thing after each match is tasking enough as it is, but having to scroll through all the code and pin-point the correct number to edit each time is just not even worth doing. With the lack of a reliable football stats API I could use (to my knowledge), I simply made use of PHP variables to make maintaining the project a million times easier.

Above, you can see we simply echo the PHP variables that are defined at the top of the page in the appropriate place.

This method allows the appropriate statistic to be easily and instantly accessed, making the project a much more maintainable one. Another slight time saver was to make the All Competitions statistics calculate automatically by simply adding the values from each competition and outputting the result.

If anyone knows of a better way to go about this, then I’d love to hear about it.

Research – Day 7-8

I spent the last day and a half researching all of the statistics & achievements/honours to input and writing up the abilities comparisons, which proved rather time consuming.

Live – Day 8

Eight days after putting my concept on paper, the site was live – just in time for El Clasico (Barcelona Vs. Real Madrid) the following night. I was very pleased with the substantial piece of work I’d managed to put together in such a short space of time, but the work has continued since putting the site live, with several additions & improvements being added.

Embedded YouTube Videos

I wanted to provide visual evidence to back up my opinions on the players’ abilities, so decided to embed YouTube videos into the site, through the help of iframes and fancybox to optimise the user experience.

Facebook Comments

It had been suggested that adding a ‘Have your say’ option could make the site more interactive and encourage discussion, which in turn would increase the site’s reach on Facebook.

Performance

I made a half-hearted attempt to promote the site, posting it on Facebook and Twitter, submitting it to some CSS galleries and one or two relevant forums.

The response was good, but my main aim was to make the site self-sustainable in terms of generating hits, i.e. generating traffic through searches rather than having to constantly promote it and/or rely on people sharing it.

Last week, it sat somewhere on the 2nd page of Google for ‘Messi Vs Ronaldo’ – as of this writing, it has now moved up to 2nd on page one. Yesterday, I had 68 visitors from that search term and so far today (13:00), I’ve had 62 from that term, so it does seem to be ever-improving in terms of performance so far.

Social Performance

I should probably point out that a big help to the site was a re-tweet by @FourFourTom, a football journalist who is very prominent in the Twitterverse; this pushed the site in front of a relevant audience of around 60,000, which seemed to kick-start a lot of interest in the site.

In terms of Facebook, the site has surpassed 200 likes and is growing in reach and significance thanks to the Facebook Comments section.

Overall Performance

Overall, the site has had 3467 unique visitors in the 13 days it has been live, with an ever-increasing majority coming through Google. For me, this is extremely promising and it points to the site’s potential to sustain itself in the long term through Google searches, suggesting it won’t just die down into nothingness when social sharing dries up.

Anyway, go look, click the Like button, click the Tweet button and have your say by leaving a comment at the bottom – http://messivsronaldo.net/.

The Wrong Mindset!

Okay, so let’s pretend we’ve made a nice, fluid layout in CSS, but alas, it starts to break as we drag the edge of our browser window to test. Media Queries to the rescue! But where do we apply these media queries? Right, well there’s the iPhone (amongst other smartphones), the iPad, the Kindle and then your laptops and desktops. With that selection of popular devices that will access your website, it might seem logical to use breakpoints like 320, 480, 600, 768 and 1024.

Have you done this? Yeah, so have I. It’s forgivable. But it goes against what responsive development is all about.

Why?

When you start to think in terms of device dimensions, you’re not thinking responsive. Responsive Web Design is fluid and flexible; something that adapts to the surroundings it happens to inhabit.

Analogy time

Picture a jug of water. Now imagine you’ve got 20 odd cups, all completely different sizes, lined up next to the jug. It doesn’t matter which cup you pour the water into, it will simply adapt to its surroundings and take the shape of the cup.

Wow that was a bad analogy. But you get the jist. Your design needs to adapt and flow into its surroundings and take the shape of the device – whatever that device may be.

So how do you achieve a truly device-agnostic design?

For starters, remove yourself from the device based breakpoints mindset. And get into the design based breakpoints mindset. Make adjustments where the design dictates. Pull your browser window out and see when the design starts to break – that’s your first breakpoint. Use a media query, fix it up and repeat the process. Simple!

Don’t base your breakpoints on devices that are currently popular, base them on your design and where it requires adjustment.

Some gentle contradiction

In theory, we should forget everything we ever knew about currently popular devices when it comes to determining breakpoints, but it’s probably not the wisest move to dismiss them altogether. It’s always important to test your responsive design in as many devices as you can get your hands on, especially the popular ones that will access your website the most. I’m not backtracking on what I’ve already said, I’m just saying be aware of what’s around at the moment and make sure your site performs as it should.

There are a number of really nicely made, good looking responsive testing sites doing the rounds at the moment and whilst these can be very useful, just be wary of relying on them too much. They encourage device based breakpoints and lack of testing inbetween the devices they display. Additionally, as David Bushell highlighted, most of these testing sites ignore the browser UI on the devices they claim to emulate, pointing out that the iPhone web viewport is not 320×480 when taking this into account.

What’s everyone else doing?

So you know what I think, but what of the big players in the industry? Smashing Magazine is the web design blog and has recently been the subject of a responsive makeover, spearheaded by curly haired Web person Elliot Jay Stocks.

I sent Elliot an email asking for some insight into the breakpoints used in the new site and I was pleased to learn my beliefs were shared by Elliot and were applied in the Smashing re-design project…

I strongly agree with you that breakpoints should be defined by ‘when it looks appropriate’ rather than conforming to device dimensions, which date very, very quickly. For SM, we certainly applied this logic…

There you go; someone significant agrees with me! Anyway, I did some firebugging and went through their CSS to identify exactly what breakpoints they used…

Smashing Magazine Breakpoints

0 and Up (Screenshot is at 320px)

The fluidity of the layout does all of the work to start with right up until the first breakpoint.

500px

The first breakpoint is used for the tiniest of fixes; it simply says that when the viewport is below 500px, change the search button text from ‘Search’ to ‘Go!’ as this text obviously scales down further.

610px

The first major breakpoint isn’t until the viewport reaches 610px, so the fluid framework of the site handles everything below that, which is pretty good going. The navigation explodes from it’s dropdown menu into a rather large set of lists. These changes definitely feel like the transition from mobile to tablet.

650px

Okay, this is a really insignificant breakpoint in the grand scheme of things, but I’ve included it to highlight that it’s okay to use media queries for minor things that just need fixing; they don’t just have to be for major changes. This particular breakpoint states that when the viewport is wider than 650px, then float the advert to the right (the one visible in the shots above).

800px

Here we see more big changes with this breakpoint. A second column is brought in to accomodate the secondary navigation that was previously taking up large amounts of space above the content.

1020px

Another major breakpoint in the design; viewports wider than 1020px are treated to a huge new right hand sidebar (there are still only 2 columns as the secondary nav has moved back to the top) to accomodate all of the adverts and other less important content. This change feels like the transition from tablet to desktop/laptop.

1220px

Now for the first time, we have a 3 column layout, with the secondary nav returning to the left hand-side, but this time, the right hand sidebar is maintained.

1450px

The final major breakpoint adjusts the design for widescreen monitors. A further fourth column is introduced as the top level navigation shifts to the left hand side of the page next to the secondary nav.

There were two more breakpoints used at 1600px and 1800px, but these were only very minor fixes in areas such as the footer.

Summing Up

So there you have it. A set of breakpoints which bare very little relation to any currently popular devices, because they’ve been added where the design suggests they should be, not where devices suggest they should be.

I’ve used Smashing Magazine as a case study as it perfectly backs up my point, but I looked at a few more responsive designs and found that they’d clearly based their breakpoints around device dimensions. These sites included sony.com and 24ways.org; pretty big players in their own rights, so don’t feel too disheartened if you’ve fallen into the same trap as it seems the very best of us have.

Disagree with my thoughts? Go leave a comment below and we’ll have it out!

The techniques use only CSS, so are very easy to implement and very lightweight when squared against some JavaScript that achieves the same outcome.

Try not to get carried away with these techniques; remember that they’re meant to enhance the experience for those with capable browsers, not punish those who perhaps aren’t as aware of the software they’re using.

The examples we’ll be discussing are in no way lightbox alternatives or have anywhere near the same capabilities, but they do provide some middle ground by subtly enhancing our image thumb galleries, much like the way Google Images provides a further taster by slightly enlarging their images when they’re hovered over.

Go see the demo to see all the techniques in practice and to get an idea of all we’ll be talking about…

Responsive Framework

This isn’t the main aspect of our discussion, but we’re going to quickly run through building an image thumb gallery using percentage values and other responsive techniques to ensure it looks good on all devices.

First of all, we need a containing div. Inside this element, we have our images, which I’m going to put inside an unordered list (<ul>); the <li>s that will wrap our images will come in handy when making these images responsive.

So here’s our markup for the gallery…

<div>
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="1.jpg" alt=""></li>
    </ul>
</div>

Easy, simple and clean markup. Now for some simple CSS to match.

Seeing as our gallery is for thumbnail images, we’ll give our containing <div> 30% of the page width. Now, we have 6 images to accommodate – let’s go for 2 rows of 3. We’re going to give each containing <li> 30% of the containing <div>.

So 30% multiplied by 3 list items (per row) equals 90% (doesn’t take a genius), leaving us 10% for our margins. A row of 3 images leaves us with 4 gutters to fill between the containing <div> and between each of the images. 10% divided by 4 is 2.5%, so that is the width of our margins. Simple!

div {
    width:30%;
    margin:0 auto; /* Centres page */
}

ul {
    width:100%;
    padding-bottom:2.5%;
    background:#ccc;
    float:left;
}

ul li {
    width:30%;
    margin:2.5% 0 0 2.5%;
    float:left;
    position:relative; /* Needed for z-indexing later */
}

Finally, we need to ensure our images fit inside of the <li>s. To do this we simply give our <img> elements a max-width value of 100%, ensuring that our images fill the <li>s and don’t overflow.

ul li img {
    max-width:100%;
    border:2px solid #eee;
    box-sizing:border-box; /* Don't forget vendor prefixes! */
}

You can see above that we’ve also used the border-box technique, which basically alters the laws of the box model and allows us to use pixel based border widths, without adding any more width/height to our images. So instead of the border being in addition to the image’s width/height, it is applied within the image’s width/height.

If you were actually going to create a gallery like this in the real world, you would be wise to use media queries to adjust the width of the containing <div> at different viewport sizes, as obviously 30% of a mobile device viewport would result in a tiny, barely usable thumb gallery.

Basic Hover Effects using Transforms and Transitions

We’re going to start with a simple enlarge on hover effect as you can see in Gallery One from our demo.

Right, let’s kick off by giving our thumbs an opacity value of 0.5, so that on hover we can bring it to full colour and emphasise the hover effect. So, we know that on hover we want our thumb to get bigger and strengthen in colour, but we need to add the transition values to our thumb in order for the state change to appear animated.

If you need a refresher on CSS3 Transitions and Transforms, you may want to read my initial post explaining these techniques.

Our <li> now has the following CSS rules (assuming all of the general rules we defined above are still in place as well).

.gal-1 li {
    transition:all 0.6s ease; /* Remember vendor prefixes! */
    opacity:0.5;
}

The above rules simply say; make the element 50% transparent and transition any state changes for 0.6 seconds. Now we need to determine our CSS rules for the :hover state…

.gal-1 li {
    transition:all 0.6s ease; /* Remember vendor prefixes! */
    opacity:0.5;
}

.gal-1 li:hover {
    transform:scale(1.4); /* Remember vendor prefixes! */
    opacity:1;
    box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
    z-index:2;
}

As previously discussed, we’ve made the image fully opaque and we’ve used the CSS3 transform property to make the thumb 1.4 times bigger. The beauty of the scale transform property is that it ignores everything around it and simply enlarges from its centre without effecting the surrounding layout.

I’ve also added a subtle shadow to the image to strengthen the illusion that the image is hovering above the others. And finally, I’ve given the hovered element a z-index value to ensure that the currently hovered image appears above all of the other images.

These extremely simple CSS rules give us a lovely, smooth zoom functionality on our thumb images. As I see it, the idea is still to utilise some kind of lightbox plugin to view the full image and complete the gallery experience, but these techniques go a long way to enhancing our user experience by providing an additional taster for our thumbs.

Using Rotate

There’s more to the transform property than scale; a particularly good one when combined with transitions is rotate. I’m going to make a very slight addition to the code we produced above to create a rather different transition.

.gal-2 li:hover {
    transform:scale(1.4) rotate(360deg); /* Remember vendor prefixes! */
    opacity:1;
    box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
    z-index:2;
}

The change has been made to our rules on the :hover state. Spot the difference? All we’ve done is add another set of values to the transform property – in this case, we’ve ordered the thumb to not only scale up on hover, but to rotate 360 degrees as well, creating a more exciting transition.

Here’s the thumbnail image in mid transition.

Scattered Thumbs

The next example is a little more tedious depending on how many thumb images you have.

I’ve scattered the thumb images by targeting each of them individually using the nth-of-type selector and then using the transform:rotate() technique to position each of the images at a different angle. Finally, I’ve introduced yet another variation of the transform property, called translate, which quite simply moves the element from one position to another. I used this to make the thumbs overlap each other slightly.

.gal-3 li:nth-of-type(2) { transform:rotate(-10deg) translate(0, 10px); }

.gal-3 li:nth-of-type(3) { transform:rotate(10deg) translate(0, 20px); }

.gal-3 li:nth-of-type(4) { transform:rotate(-40deg) translate(20px, -10px); }

/* etc. */

On the :hover state, I simply scaled the thumbnails up again and straightened out any angles.

Triggering Transitions on Click

The last couple of galleries in our demo employ similar effects to the ones above, only these transitions are triggered when the thumb is clicked on rather than hovered over. For a detailed explanation into how you can trigger a CSS transition on click, you may want to read this article I wrote on the matter. But Basically, we use the :target pseudo-selector.

To give you a basic understanding, the CSS rules under #one:target will only be applied if #one is at the end of the URL in the addres bar. In short, if a link to #one has been clicked, the CSS rules under #one:target will be applied. Simple.

To make this work properly, we need to modify our gallery markup…

<h2 id="gal-five">Gallery Five <span>Enlarge on Click</span></h2>
<ul class="gal-5">
    <li id="one">
        <a class="close" href="#gal-five">Close</a>
        <a href="#one"><img src="1.jpg" alt=""></a>
    </li>
    <li id="two">
        <a class="close" href="#gal-five">Close</a>
        <a href="#two"><img src="2.jpg" alt=""></a>
    </li>
    <li id="three">
        <a class="close" href="#gal-five">Close</a>
        <a href="#three"><img src="3.jpg" alt=""></a>
    </li>
    <li id="four">
        <a class="close" href="#gal-five">Close</a>
        <a href="#four"><img src="4.jpg" alt=""></a>
    </li>
    <li id="five">
        <a class="close" href="#gal-five">Close</a>
        <a href="#five"><img src="5.jpg" alt=""></a>
    </li>
    <li id="six">
        <a class="close" href="#gal-five">Close</a>
        <a href="#six"><img src="6.jpg" alt=""></a>
    </li>
</ul>

What have we done here then? Well, we’ve added an id to each <li>, we’ve wrapped our images in <a> tags which link to the corresponding <li> id. Lastly, we’ve added another link which links to the galleries <h2> id, allowing the user to escape once a thumb has been clicked on.

The markup modification is the most difficult bit about this technique really, so carry on reading…

Now we simply scale up the thumb when it’s being targeted (clicked on).

.gal-5 li:target {
    transform:scale(2.2);
    z-index:2;
    opacity:1;
}

.gal-5 li:target img {
    box-shadow:5px 3px 5px rgba(0, 0, 0, 0.3);
}

.gal-5 .close {
    display:none;
    /* other presentational styles */
}

.gal-5 li:target .close {
    display:inline;
}

After scaling the currently targeted <li>, we add the box-shadow property to the img within the currently targeted <li> and we ensure that all of the <a> tags with a class of .close are hidden unless they are within the currently targeted <li>.

This method is nice when it works, but it has its limitations; namely the page jumping to the top of targeted element. I would imagine you will very rarely find a practical use for this, but if you do, use cautiously.

Transitioning 3D Transforms on Click

Our final gallery also triggers the transitions by clicking on the thumbs rather than hovering over them. We use all of the same techniques as we just used above, but with one small addition; yes, another transform value.

This one is just like the rotate transform value we discussed above, but with one small addition. This value is either rotateX, rotateY or rotateZ, which allow the element to rotate as if in a 3D environment. So rather than simply spinning left or right, this allows us to flip our images forwards or backwards or horizontally.

Now, before you start raging about how it doesn’t work for you, bear in mind that 3D transforms have limited support at the moment and are best viewed in the latest versions of Chrome and Safari, although Firefox 10 appears to support them now, if not perfectly.

So here’s the small addition we’ve made to our CSS…

.gal-6 li:target {
    transform:scale(2.2) rotateY(360deg);
    z-index:2;
    opacity:1;
}

We’ve simply added rotateY to our transform property, telling it to rotate 360 degrees towards us.

Here’s the bottom right thumb in mid 3D rotation:

Summing Up

As long as you remember a few key points, you can go ahead and use these techniques right now, without any worry.

• Remember that you’re using these techniques to enhance your user’s experience in capable browsers – they’re not to be relied upon for functionality.
• Test in all major browsers – if you’re doing things properly, your gallery should look perfectly acceptable in IE 7 and friends.
• Remember your browser prefixes (-webkit-, -moz-, -o-, -ms-) and throw in the un-prefixed property to make it future proof.
• Be subtle – crazy, gimmicky effects belong in the 90′s. Be elegant and delicate with the transforms & transitions you’re applying.

If you can think of any more cool transitions for thumb galleries, I’d love to see them in the comments section. And if you enjoyed this post, please share, tweet etc.!

Titled ‘Methodologies of Design’, they offered clarity to some of the basic principles of design and reminded myself of the theory behind my actions as a designer.

It was somewhat refreshing and I realised that sometimes it’s good to take a step back and go back to basics to remind yourself what you’re doing and why you’re doing it. And I thought these notes might be worth sharing in a ‘back-to-basics’ type offering.

It seems I did take something useful from Uni after all! Who’d have thought it?

Here are just a few words of wisdom from my methodologies of design lecture…

Only dead fish go with the flow

• Create your own style
• Do things in your own way
• Use tools in your own way
• Don’t be like everyone else

A good designer is an imaginative problem solver

• Able to rethink ideas
• Change to improve functionality
• Think outside the box

Less is more

• Simplicity and clarity lead to good design
• Well organised content will communicate your message better than trying to cram in as much information as possible

Form follows function

• Must be formed to suit function
• Form must support function

Design can directly improve profitability

• Packaging
• Appearance of product
• Looking good is half the battle won

Colour effects mood

• Cool colours (blue, green neutral, white, grey) can be calming, comforting, nurturing, cold and/or impersonal
• Warm colours (red, yellow, orange) can show brightness, passion, heat, love and/or urgency
• Warm colours appear larger than cool colours and can appear closer whilst cool colours visually recede

Simple stuff, but worth clarifying in your mind. This type of theoretical knowledge aids you in making your design decisions and helps to ensure you are making the right ones.

The way we design a website in terms of layout helps us to control and manage the readability of our copy, as it houses the text and attempts to present it in the best way possible.

There are several other ways we try to control the readability of our text, from size and colour to line height and letter spacing, but the fact is large areas of text are often still uninviting and hard to entice your average user with, despite utilising all of the best usability practises.

Extra Styling

Another little trick to break down the barrier between your copy and your users is to add some extra styling to the opening section of the text; namely the first line, first letter and/or first word(s).

This technique may not have your words being consumed by all who come across them, but it could go some way to tying your copy in with the design of the website and therefore considerably breaking down the barrier between the user and them actually starting to read the text.

Having the first few words stand out from the rest of the text will attract attention and draw the user into them, encouraging the user to start reading and making it more likely that they will read on.

Pseudo-Selectors

Thanks to CSS, we can utilise this technique quite easily using pseudo-selectors to target these areas, without having to add any ugly tags to our markup.

• :first-line
• :first-letter

And the best thing is, they both work across the board, in all major browsers! Yes, even IE6!

Note: Pseudo-elements should be implemented with a double colon (::first-line) as opposed to pseudo-classes which should use a single colon (:first-child), but older versions of IE fail to recognise the double colon usage, which is why I tend to stick with a single colon.

We’re going to be looking at a few examples of how we can use these pseudo-selectors to add that little something extra to our website’s copy.

You may have noticed that there is no pseudo-selector for first-word in CSS, so we’re going to have to use our imagination for this; we’ll be going through our options later on in this article.

First-line

The beauty of pseudo-selectors is that they ensure we don’t have to touch our markup to add unnecessary tags and classes. All the work is done in the CSS.

And it couldn’t be simpler…

p:first-line {
    font-weight:bold;
    text-transform:uppercase;
    letter-spacing:0.1em;
}

This selector allows us to target part of an element that has no place in the actual document tree, which is why we refer to it as a pseudo-element.

Now we have a first line that stands out from the rest of our text, offering us an introduction into our paragraph.

That’s fine in theory, but what happens when we add a few more paragraphs into our copy?

Not really what we wanted is it? Ideally, we just want the first line of our first paragraph to stand out, not the first line of every paragraph!

We could use p:first-child:first-line, but for this to work, the <p> would need to be the first child of its container, which is unlikely given that most blocks of text are superseded with a heading of some sort.

In this case, we can use p:first-of-type:first-line. This ensures that only the first line of the very first paragraph is styled, no matter what comes before the first paragraph in the markup.

First-letter

No prizes for guessing what’s coming next. Unsurprisingly, it’s exactly the same method as the above. The basic usage is simply p:first-letter, but taking into account multiple paragraphs, we use the below snippet to target only the first paragraph…

p:first-of-type:first-letter {
    font-size:4.5em;
    font-weight:normal;
    letter-spacing:0;
    line-height:1.2em;
    border:1px dashed #999;
    padding:0 17px;
    margin-right:5px;
}

Simply styling one letter differently to the rest of the text can really draw attention to the block of text and encourage the user to read it.

First Word

Earlier we touched upon the fact that there is no pseudo-selector to style the first word of a paragraph for whatever reason. So unfortunately, we have to go a bit more old-school with this one.

Basically, there are 2 [front-end] options open to us.

• Wrap a <span> tag around the first word of our paragraph and target that element to style.
• Use JavaScript to automatically wrap a <span> tag around your first word to avoid having to do it manually.

If you’re working on a relatively small and maintainable site, then it’s probably easier to just add a <span> tag in where you need it. This method is easier and allows you more control over what you target i.e. if it was more appropriate to style the first few words rather than just the first, you could simply shift the closing tag. Easy peasy.

However, it’s often the case that the content being added isn’t so accessible, or it’s simply impractical to manually add bits of code into the copy. For example, it may be that a client is adding the content to the site through a CMS, in which case it wouldn’t be reasonable to rely on them to add <span> tags where necessary. This is where a JavaScript solution would be the more sensible option.

Whichever method you choose to use should simply be based on the needs of your project and which would be the easiest to implement and the easiest to maintain.

To wrap up, styled well these subtle pseudo elements can be very effective in transforming a boring block of text into something that is inviting and appealing to the eye.

I wanted to make my presentation browser based so I could include working examples of certain features of CSS3 that require interactivity, so I put the slides together and animated them using jQuery.

Then I thought – wait a minute, surely I can do this with CSS3 and rid myself of any scripts! So that’s exactly what I did.

I’m going to provide a quick overview of the presentation and finish with a brief explanation of how I put it together (It’s pretty much the same method as the tutorial I posted last week on my responsive sliding image gallery).

The slides…

Overview

Contents

1. Intro
2. Border Radius
3. CSS3 Transitions
4. Opacity and RGBA
5. Text Shadow and Box Shadow
6. Multiple Backgrounds
7. 2D Transforms
8. Using 2D Transforms with Transitions
9. Pseudo Elements
10. Linear Gradients
11. Radial Gradients
12. Selectors
13. Take Away

It doesn’t cover everything (it barely touches the surface) and there are a few bits and bobs that aren’t strictly CSS3, namely the selectors, but I felt there were certain selectors that fly a bit under the radar in the mainstream and deserve a bit more coverage.

I do plan on expanding these slides considerably and transforming it into a significant resource for all things CSS3.

How to make a presentation with CSS3

It’s really quite simple. CSS3 takes all the glory but the real star here is simply the :target pseudo-selector, which applies styles to the element whos id is targeted at the end of the URL.

All our slides need an id; I’ve gone for #one, #two, #three etc. And within each slides we need navigation controls to take us to the next or previous slide. I’ve simply styled the controls to be transparent, with the ‘previous’ link taking up the entire left half of the slide and the ‘next’ link taking up the entire right half of the slide.

Obviously the navigation controls for the number #three slide (for example) would have a ‘previous’ link to #two and a ‘next’ link to #four. Like so…

<div class="panel" id="two">
    <a class="back" href="#one"></a>
    <a class="next" href="#three"></a>
</div>
            
<div class="panel" id="three">
    <a class="back" href="#two"></a>
    <a class="next" href="#four"></a>
</div>
            
<div class="panel" id="four">
    <a class="back" href="#three"></a>
    <a class="next" href="#five"></a>
</div>

Probably should be a <ul> rather than a list of <div>'s but we won’t get hung up on that right now.

The CSS

Before we get to any CSS3 we could simply say…

.panel {
    display:none;
}

#one:target, #two:target, #three:target /* etc. */ {
    display:block;
}

And job’s a good ‘un!

CSS3

But we want to be a bit more adventurous than that don’t we?

Yes. Firstly, lets get rid of the display properties because we can’t transition them. Let’s use opacity:0; instead and stick opacity:1; on the targeted elements. Don’t forget the transition property too!

.panel {
    opacity: 0;
    transition: all 1s ease; /* Don't forget vendor pre-fixes! */
}

#one:target, #two:target /* etc. */ {
    opacity:1;
}

Things are already looking much better. From here it’s simply a case of experimenting with various CSS3 properties.

I’ve used some transforms to make the animation look a little nicer and allow the slides to actually slide in.

.panel {
    opacity: 0;
    transform: scale(0.1) translate(960px, 0);
    transition: all 1s ease; /* Don't forget vendor pre-fixes! */
}

#one:target, #two:target /* etc. */ {
    opacity:1;
    transform: scale(1) translate(0);
}

So this pushes the panels 960px to the right and pulls it back to centre position when it’s targeted, allowing for the sliding transition from the right. I’ve also added a scale so it also appears to expand from small to big.

There’s a few more details you might need to know if you’re looking at employing this technique, so I’d strongly recommend taking a look at the CSS file.

I’d already done a bit of experimenting on how we can trigger CSS3 transitions on click, rather than just triggering the effects on hover. The :target pseudo selector took the spotlight here and I knew I could utilise this technique to create a presentation where a click would trigger the piece to advance onto the next slide.

It worked a treat. And you can expect a post on how to put it together in the near future.

Adapting the technique

Since creating my CSS3 powered presentation, the ever innovative Harry Roberts of CSS Wizardry recently put together a fantastic, CSS3 powered image carousel. Not only is it light and simple in comparison to JavaScript alternatives, but it’s also completely responsive.

This inspired me to adapt the techniques I’d used for my presentation and combine them with Harry’s techniques to create a responsive, click-through image gallery using no more than CSS3 transitions and transforms.

Here’s what we’re going to be working towards:
Best viewed in Firefox!

The Structure

Again, I refer you to Harry’s article as his responsive carousel framework forms the foundations for our click-through image slider.

<div id="image-slider">
    <ul>
        <li><img src="1.jpg" alt=""></li>
        <li><img src="2.jpg" alt=""></li>
        <li><img src="3.jpg" alt=""></li>
    </ul>
</div>

So we have our images in list items, we have an unordered list to contain these items and we have a viewport that each <li> will occupy, one at a time.

Think of the list as a horizontal row of images and the viewport as a window, with each image sliding by the window to have a peak out.

The CSS

Still focusing on Harry’s framework, here’s how we style our structural elements…

#image-slider {
    width:100%;
    max-width:500px; /* The actual width of our images */
    overflow:hidden;
    margin:0 auto; /* Just to centre the page */
}

ul {
    width:1000%; /* No. of images * 100% */
    overflow:hidden;
    position:relative;
    list-style:none;
}

ul li {
    float:left;
    width:10%;
}

ul li img {
    max-width:100%;
}

It’s all pretty basic. Remember we said our <ul> needs to be a container for our list items? Well we’ve got 10 list items, and they all need a width of 100% to fill the viewport, so the <ul> needs to be big enough to contain 10 list-items, each 100% wide. Logically, that means our <ul> width equals 1000%.

Responsive Images

The property that really makes the magic happen here is max-width:100%; on the image element. This ensures that the image is only ever as big as its container, so as the browser window reduces in size, so does the images container and so does the image. Who knew responsive web design was so easy?!

Navigation Controls

Moving away from Harry’s carousel framework, we need to add a little more to the markup – a vital ingredient of a click-through gallery; navigation controls!

<li id="one">
    <img src="1.jpg" alt="">
    <a href="#ten">Back</a>
    <a href="#two">Next</a>
</li>
<li id="two">
    <img src="2.jpg" alt="">
    <a href="#one">Back</a>
    <a href="#three">Next</a>
</li>
<li id="three">
    <img src="3.jpg" alt="">
    <a href="#two">Back</a>
    <a href="#four">Next</a>
</li>

So what have we done here? First of all, we’ve given the list items unique id’s as we’ll need them in order to navigate through the image slider. Now, we’ve given each list item a couple of navigation controls; one to go back to the previous image and one to go forward to the next image.

We’re slowly getting somewhere now…

More CSS to bring things to life

We’ve actually done the bulk of the work – without any CSS3. But we’re going to call on it now to animate our click-through gallery and actually make it slide.

ul li {
    transform:translate(100%, 0);
    transition:all 1s ease;
    /* Don't forget the vendor prefixes! I'm not using them for the sake of simplicity */
}

We’ve used the transform property to translate (move) our list items to the right by 100%. We’ve also added the transition property, which ensures that when the list item returns to its original position, this shift from right to left will be gradual, creating an animated effect.

So how do we get it back to its original position?

#one:target {
    transform:translate(0);
}

Easy, no? All we’ve done here is state that when the list item with an id of #one is targeted (when the link to #one is clicked on), move the list item back to its original position.

You will of course need to specify this for each unique list item like so: #one:target, #two:target, #three:target etc..

Feel free to experiment with different transition effects on your targeted element. This is what I’ve gone for in my demo:

ul li {
    transform:translate(100%, 0) scale(0.1);
    transition:all 1s ease;
    opacity:0;
}

#one:target {
    transform:translate(0) scale(1);
    opacity:1;

The above CSS simply adds a couple more effects to make the transition that little bit more pleasing to the eye.

Fixing things

You might think we’ve done it all now. However, a quick resize of the browser suggests otherwise as our responsive framework is now broken. Thankfully, it’s a simple fix. All we need to do is add position:absolute to our targeted elements.

There’s also the issue of getting the first image to appear when the page loads, i.e. when #one is not targeted. Sure, we could just give #one all of the targeted rule sets, but then this messes up the gallery, as the first image is always visible in every image transition.

So, as a (far from ideal) solution, I’ve simply added a start button that links to the list item with an id of #one.

This is probably the biggest limitation in terms of using this method in the real world.

Webkit Issues

Why is this demo best viewed in Firefox? Well for whatever reason, transform:translate(100%, 0); (together with its corresponding targeted value transform:translate(0);) behaves differently in Chrome and Safari than in Firefox, i.e. it doesn’t work.

So in my demo, Chrome and Safari don’t have the sliding effect, they simply make do with scaling and opacity transitions.

I’ve not yet managed to wrap my tired brain around the problem. Any help would be brilliant.

Wrapping Up

Our outcome is far from ideal.

• The images slide from the right whether you are going forwards or backwards, which is not natural.
• It requires the user to click a link in order to begin viewing the gallery.
• Webkit browsers don’t like the sliding transition, so have to make do with a simple fade in and out.
• This method requires the id values (#one, #two etc.) at the end of the URL, which sometimes, you just don’t want.

However, all in all, we have another demonstration of how CSS3 can be used to create effects only previously possible with the help of JavaScript.

And I’m sure someone with a bit more brain power than me could knock together something similar without the issues my final outcome suffers from.

I’ve done a few extra bits to make my demo the way it is, specifically in terms of styling the navigation controls, so you may want to take a look at the CSS file to see what’s going on in detail.

Some have made it and have risen to similar levels to the aforementioned sites; others have fizzled into obscurity or are plagued by poor quality content. The few that have made it however make up a tiny percentage of the overall market and represent the elite of the industry (there are inevitably one or two exceptions who have just got lucky).

But the point is, it’s so easy to set up a Web Design blog and it’s even easier to think it’s going to be an instant success, but that is very rarely the case.

Don’t be Naive

So, haven’t I just described the reasons why you shouldn’t start blogging?

No.

I’ve simply expressed a word of caution. Don’t be naive and don’t start a blog with the expectation of recognition; that is completely the wrong reason to set up a Web Design blog in the first place. If fame and/or recognition is your sole motive then your chance of failure soars to the dizziest of heights.

Okay then, why should you start a Web Design blog?

1. Self Improvement

For me, the biggest benefit of starting a Web Design blog has been educational. There’s little I don’t know about CSS3 now, but if I’d never started this blog, my interest in it would never have been sparked and I’d probably know half as much as I do now.

Seriously, pushing yourself to learn something and having the desire to blog about it will do absolute wonders for you as a practitioner. We can read about stuff ’til our eyes sting, but until we actually put something into practice, it’s very difficult to get a full understanding of the matter.

After reading about various CSS3 techniques and experimenting with them via this blog, I’m now constantly thinking of practical ways it could be implemented right now in day to day projects.

2. It shows you’re keen

Near enough everyone who works in the industry claims to be passionate about what they do, but few really demonstrate that claim. Running a blog shows that you want to experiment and refine best practices, you want to push the boundaries, you want to share… you want to talk about Web Design.

Don’t think about your peers, don’t think about recognition; think about potential employers weighing up your suitability for their position. Running a Web Design blog displays the passion that so many claim to have for their work; it shows that you’re serious about what you do and that you genuinely love doing it.

It looks like your keen and potential employers will eat that up!

3. It’s like a portfolio, but with context

A blog doesn’t just show your keen, it shows what you can do and what you’ve been doing to better yourself. Consider a standard application for a Web Design position… what might you send off? A CV and your portfolio, right?

Your blog would be like your portfolio, but of far more value to those who are sizing you up. A portfolio pretty much shows what you can do, whereas a blog shows what you can do, with context.

It’s your portfolio, but with explanation, with discussion and a representation of your thought processes. This is 10x more valuable to a potential employer than simply looking at your CV and some work examples!

4. Exposure

I know I stated earlier I don’t believe you should start a Web Design blog if your main concern is receiving recognition and exposure. But exposure you will get, and it is to your benefit, how ever limited this exposure may be.

It puts yourself out there, it makes you available to those who want to look and you never know who may stumble across your scribbles.

Exposure shouldn’t be your goal, but it should be the result of your passion to create quality content.

5. It’s your platform

A blog is your playground. Think of it like a sketcher’s doodle pad. If they don’t have their pad to scribble down their ideas and let their pencil wander, a lot of their ideas would simply fade away into non-existence. Sometimes you need to get your thoughts out of your head and into something visual, with structure.

If you’ve got something you want to say or express, I’d say it’s pretty advisable to have a space where you can do this. You might write things down or post things on Twitter, but they have their limitations. Your blog is whatever you want it to be; it’s your platform and on your platform, you can say and do whatever you want.

Build your platform, climb up onto it and have your say.

So what are you waiting for?

Seriously, if you start blogging about Web Design and ensure it’s fairly regular, it will soon become infinitely more valuable than anything else in your portfolio.