CSS3 animations are the new kid on the block. It’s a big step. Although they haven’t really taken centre stage yet as only the webkit browsers support them.

For this reason they’re used sparingly, in a lot of cases for experimental purposes or as ‘hidden gems’, but that doesn’t mean you should shy away from getting stuck in.

It was only recently I experimented myself so I thought I’d share a beginner’s demo with you.

How to do CSS3 keyframe animations

Keyframe animations involve you setting the object state (or property) at different stages of an animation.

Setup the environment

Let’s setup a little demo. I’m going to start with two basic boxes.

<div class="box1"></div>
<div class="box2"></div>

Now apply some basic styling so we can see them.

.box1{
width:200px;
height:200px;
background:rgba(255,0,0,0.5);
position:absolute;
top:100px;
left:50%;
margin-left:-100px;
}

.box2{
width:200px;
height:200px;
background:rgba(0,0,255,0.5);
position:absolute;
top:100px;
left:90%;
margin-left:-100px;
}

And you’ve got yourself two boxes.

View demo.

Setup the animation affect

Setup the animation affect and call it ‘movingbox’.

@-webkit-keyframes movingbox{
0%{left:90%;}
50%{left:10%;}
100%{left:90%;}
}

movingbox is the name we’re giving the animation. It’s up to you what you want to call it.

The keyframes we’ve setup for this animation are at 0% (start), 50% (halfway through) and 100% (end). The properties we’ve set at these keyframes are different positions. You can set any properties you like here.

So far we still have two static boxes.

View demo.

Apply the keyframe animation

Our last step applies the magic to the object of our choosing. We’re going to apply it to ‘box2′.

.box2{
-webkit-animation:movingbox 5s infinite;
}

movingbox calls the animation we want to use, which we have already defined.

5s states we want the animation movement to last 5 seconds.

infinite means the animation will keep going and going.

We now have a CSS3 animation – box2 should be moving from right to left and back again. (Note: remember this only works in Safari and Chrome).

View demo.

More CSS3 animation properties

This is a very simple example I have used here, and is just to help beginners get started.

For the -webkit-animation property, there are a number of other values you can try:

• -webkit-animation-name: [any name you like];
• -webkit-animation-iteration-count: [number, infinite];
• -webkit-animation-timing-function: [linear, ease,ease-in, ease-out];
• -webkit-animation-duration: [time];
• -webkit-animation-delay: [time];

For the @-webkit-keyframes rule, instead of using percentage as keyframes, we can also declare a from and to state. You can also make it transform while animating.

@-webkit-keyframes movingbox{
from{left:90%;-webkit-transform: rotate(0deg);}
to{left:10%;-webkit-transform: rotate(360deg);}
}

View demo.

CSS3 animations in action

See if you can spot the @keyframe animations on these sites (note: you’ll need to use a webkit browser like Safari or Chrome to see the animations in action).

Our Solar System

Our Solar System using pure CSS3 for planets and orbits.

Future Of Web Design

404 pages are always a nice place to experiment with stuff that only us geeks will get.

Hard Boiled Web Design

If the teaser site is anything to go by this book from Andy Clarke should be a good CSS3 reference.

Massive Blue

Sam Brown’s portfolio animation is subtle but beautifully executed.

Ecliptic

This was my experiment, a hidden ‘Easter egg’ on the Ecliptic website.

Conclusion

In regards to usefulness, the CSS3 animations above aren’t that. But they do let you, the designer, experiment with the latest techniques available.

Make a point of working a CSS3 animation into your next project just so you can get a feel for how they work. Then in the near future, when more browsers adopt them, you’ll be able to make some really attractive user interfaces without a gif or Javascript effect in sight.

Have you experimented with CSS3 animations yet?

Further reading

• CSS3 animation properties on W3
• Mr Max Voltar on CSS Animations
• CSS Animation on Surfin’ Safari

Having your own reusable framework is a great way to save time and provide a basis for your next website.

Your own reusable framework is by no means perfect for every project that you work on but it is a great starting point and it can evolve over time.

This post looks at the current framework I have in place and breaks it down. Please feel free to reuse this as you see fit and also point out anything that you feel would be beneficial to add (or remove).

Framework structure

All files are kept in a folder simply named ‘NewSite‘ which contains the following:

ie.css
A stylesheet specific for IE6 (or sometimes 7) that at the end of a project will usually contain various CSS bug fixes and PNG transparency fixes.

images/ directory
For storing all images for the website.

index.html
The main template for the website. Depending on CMS or programming language I use this will be chopped up at some stage.

print.css
A stylesheet used when printing a document.

scripts/ directory
For placing all the project’s Javascript files.

script.js
A default script for placing most of the project’s Javascript code, stored in the scripts directory.

style.css
The main stylesheet.

Now lets look at what each file contains.

index.html

This is the main template for any website and the starting point for marking up.

<!doctype html>
<html lang="en">
<head>
	<meta charset="utf-8">
	<meta name="description" content="">
	<meta name="keywords" content="">
	
	<link rel="icon" type="image/x-icon" href="http://cdn.leemunroe.com/favicon.ico" />
	
	<link rel="stylesheet" type="text/css" href="style.css" media="screen" />
	<link rel="stylesheet" type="text/css" href="print.css" media="print" />
	
	<!--[if lt IE 7]>
	<link rel="stylesheet" href="ie.css" type="text/css" />
	<![endif]-->
	
<!-- 	<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script> -->
	<script type="text/javascript" src="scripts/script.js"></script>
	
	<title></title>
</head>

<body>

<p id="skipto"><a href="#main">Skip to content</a></p>

<div id="header" class="group">
	<div id="logo"><a href="/"><span></span></a></div>
	<ul id="nav">
		<li class="selected"><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
		<li><a href=""></a></li>
	</ul>
</div>

<div id="content" class="group">
	<div id="main" class="main">
	
	</div>
	
	<div class="sidebar">
	
	</div>
</div>

<div id="footer">
<p>Copyright &copy;</p>
</div>

</body>
</html>

Notes about the markup used:

• The doctype is HTML 5
• There is a ‘skip to content‘ link for screen readers (the style sheet will hide this)
• Uses a conditional statement to load ie.css for Internet Explorer browsers below version 7
• JQuery library is included using Google’s CDN (but is commented out until it is needed)
• The bare bones of the markup has been added

styles.css

Now lets look at the default stylesheet I’m using.

/*
Author: Lee Munroe
*/


/* 
# CSS contents ###################
* 1 Reset defaults
* 2 Layout
* 3 Nav
* 4 Headings
* 5 Lists
* 6 Images
* 7 Links
* 8 Forms
* 9 Tables
* 10 Typography 
* 11 Other
*/


/* 
# Colour reference ###################


*/
 
/*
# Reset defaults ################### 
*/

html, body, div, h1, h2, h3, h4, h5, h6, ul, ol, dl, li, dt, dd, p, blockquote, pre, form, fieldset, table, th, td { margin: 0; padding: 0; } 
a:link, a:visited{text-decoration:none;outline:none;}
html {overflow: -moz-scrollbars-vertical;}
#skipto{position:absolute;left:-9999px;top:-9999px;}
.group:after {content: ".";display: block;height: 0;clear: both;visibility: hidden;}

/*
# Layout ################### 
*/

body{font:75%/1.5  "Helvetica Neue", Helvetica, Arial, sans-serif;color:#222;background:#fff;}

/*
# Nav ################### 
*/



/*
# Headings ################### 
*/

h1{}

h2{}

h3{}

h4{}

#logo{width:;height:;background:url(images/logo.gif) no-repeat;}
#logo a{display:block;height:100%;width:100%;}
#logo a span{position:absolute;left:-9999px;top:-9999px;}

/*
# Lists ################### 
*/



/*
# Images ################### 
*/

img{border:none;}
img.left{margin:0 10px 10px 0;}
img.right{margin:0 0 10px 10px;}

/*
# Links ################### 
*/

a{}
a:hover{}

/*
# Forms ################### 
*/



/*
# Tables ################### 
*/



/*
# Typography ################### 
*/

p{margin:0 0 1.5em;}

/*
# Other ################### 
*/

.right{float:right;}
.left{float:left;}
.clear{clear:both;}
.alignleft{text-align: left;}
.alignright{text-align: right;}
.aligncenter{text-align: center;}

Notes for the stylesheet:

• Author name at the top. I’ll also include the project name and date here. This is mainly for the records of anyone the site is handed over to.
• Using comments to break down the stylesheet into sections making it easier to scan down and find styles. Larger projects may have a different structure.
• A general reset for margins and padding. There are lots of more advanced resets out there but I find this basic one works well. Read about CSS reset here
• .group:after – the group class is applied to any element that needs cleared right after. Usually where there are 2 or more floats side by side.

ie.css

.group {zoom: 1;}

Notes:

• As it stands, only contains a fix for the .group class

print.css

#header, #footer{display:none;}

Notes:

• Removes the header and the footer when printing. The final file will need tinkering with though.

script.js

/*
$(document).ready(function() {
	
});
*/

Notes:

• The document ready function is for JQuery Javascript functions that you want to run when your page loads. This is commented out until needed.

Conclusion

Download framework as zip file

Please feel free to use these templates in your own projects.

Again, this is just a framework I’ve put together over time. I recommend you adapt it to suit your own environment.

What does your framework look like? Anything useful I’ve missed?

Further reading

More useful templates/frameworks to check out:

• 960 Grid System
• Blueprint

Dan is well known for his clean markup, embracing advanced CSS and his love of ampersands so I was really looking forward to this book.

Handcrafted CSS is for the CSS designer who wants to go the extra mile.

Who is it for?

This book would be more for intermediate/advanced designers, which is great as there are so many ‘beginner’ books out there it was nice to read a book that just got stuck in.

It’s for designers who care about the little things – the clean markup, the grid, the 1 pixels and the ampersands.

What’s in it?

• Simple tricks for dealing with everyday CSS obstacles
• Bulletproof CSS3 techniques
• The fluid grid
• Floats (and clearing them)
• Frameworks (and crafting your own)
• Small details that can make a great design
• Stuff about ampersands

Verdict

I really enjoyed this book. I was able to learn from it, advance current techniques and be inspired by it.

It’s easy to relate to everything outlined in the book. Some things were a reminder while others I had never thought of before. Truly inspired to go away and start crafting something special.

Not only is the content good, even how the book is laid out is gorgeous with well spaced pages, nice formatting and an embossed front cover.

Highly recommended.

Pull quotes

…the larger the target, the quicker and easier it is to get there.

but the important thing to remember here is that this method degrades beautifully…The design is intact. It’s functional and readable.

…the rounded corners in Mozilla- and WebKit- based browsers are visual rewards rather than necessary requirements.

The problem with the fixed-width approach to interface design is that it’s asking the user to adapt to the design rather than the reverse.

Here is the holding page in all it’s glory.

One thing you’ll notice is the big ‘Notify me’ button. One of the great things about this button is that it isn’t a graphic. It’s simply styled using CSS.

Advantages of using CSS instead of a graphic:

1. Optimisation – less file size, less http requests
2. Reusable – button can be used over and over again for different actions
3. Flexible – the button can stretch or compact depending on length of the text

Styling the button element

I’m going to be using Firefox 3.6 for the previews below.

The markup

<button>Notify me</button>

This is how the default button looks.

Basic styling

First apply some basic styling to get started.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
}

Nothing strange or startling about these styles. This is what we have now.

Background

Let’s add a background. Remember, we want to make the button reusable for any colour.

1. Go into Photoshop and create a new image 10px x 100px
2. Create a white rectangular shape that covers the top half of the canvas on a new layer
3. Give that layer 30% opacity and make the background transparent
4. Save that image as overlay.png

Decide what background colour you want to use and apply it to the button along with the overlay you just made.

background:url(overlay.png) repeat-x center #ffcc00;

This gives us a nice yellow background with a glossy overlay.

Border

Now get rid of that horrible outset border. Let’s give it a fine border that matches the background colour.

border:1px solid #ffcc00;

Rounded corners

Make your button a bit friendlier by giving it rounded corners. This is where Webkit and Mozilla browser users will take advantage, while IE browsers will be stuck with sharp corners.

-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;

Starting to look good eh? But a good designer likes to pay attention to detail.

Pixel perfection

Now finish off the button with some pixel perfect embossing. We’re going to give it a 1 pixel border and a 1 pixel inset shadow.

border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);

Notice how we’re using RGBA colours here. This allows us to apply alpha opacity to the colour. In this case, we’re giving white a 50% opacity.

Make it clickable

We know it’s a button and that it can be clicked but users might not. Change the cursor to a pointer so users know they can click it.

cursor:pointer;

Hover state

We now have a pretty sexy looking button. But what about a hover state?

To save us from thinking about a colour for the hover state, we can use the RGBA approach. Let’s revisit the background style. Add this after your background declaration.

background-color:rgba(255,204,0,1);

Nothing changes. All we did was change it to the same colour but using RGBA.

But how for the button’s hover state, give it the same background colour but alter the opacity slightly.

button:hover{background-color:rgba(255,204,0,0.8);}

This gives us a slightly different shade of background on hover, giving the user some feedback so they know they’ve hovered over a clickable button.

Put it all together

The final code.

button{
color:#08233e;
font:2.4em Futura, ‘Century Gothic’, AppleGothic, sans-serif;
padding:14px;
background:url(images/splash/button.png) repeat-x center #ffcc00;background-color:rgba(255,204,0,1);
border:1px solid #ffcc00;
-moz-border-radius:10px;-webkit-border-radius:10px;border-radius:10px;
border-bottom:1px solid #9f9f9f;
-moz-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);-webkit-box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);box-shadow:inset 0 1px 0 rgba(255,255,255,0.5);
cursor:pointer;
}

button:hover{background-color:rgba(255,204,0,0.8);}

button:active{position:relative;top:2px;}

I’ve slipped in an active state as well for the button so the user knows when they’ve clicked it.

This is how it looks in Firefox:

And this is an active preview.

Remember the button is reusable so if you apply a class to the button, e.g. class=”save”, you can apply a different colour to this button.

button.save{
background-color:#a7dd32;background-color:rgba(167,221,50,1);
border-color:#a7dd32;
}

button.save:hover{
background-color:rgba(167,221,50,0.8);
}

And you’d get something like this.

But what about Internet Explorer?

Yes, unfortunately IE users won’t get the full benefits of the sexy button. However, it doesn’t look that bad and to IE users it will seem like there is nothing wrong.

And IE6? It doesn’t support PNG transparency so you can remove the overlay background image with an IE6 conditional stylesheet.

<!--[if lt IE 7]>
<link rel="stylesheet" href="ie.css" type="text/css" />
<![endif]-->

Then in ie.css:

button{background-image:none !important;}

And there you have it. A beautifully designed button using (pretty much) only CSS.

Further reading

I highly recommend you check out this great tutorial by Zurb on super awesome buttons with CSS3 and RGBA. A handy tutorial for styling reusable buttons.

If you’re up-to-date with your CSS knowledge, you’ll know that CSS 3 has introduced rounded corners, among other ‘goodies’. The problem is though that IE doesn’t support CSS 3 yet but Firefox, Safari and Chrome do.

Some CSS 3 techniques I’ve been using on Sharethrough and Lookaly:

CSS 3 rounded corners

div{
-moz-border-radius: 10px;
-webkit-border-radius: 10px;
}

CSS 3 text shadow

div{
text-shadow: -1px -1px 3px rgba(0,0,0,0.25);
}

CSS 3 box shadow

img{
-webkit-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
-moz-box-shadow:0 0 5px 5px rgba(34,34,34,0.3);
}

But how do you deal with clients?

This is where it gets tricky. If you show a client a mockup with rounded corners and the final solution doesn’t have these (because they use IE) they’ll probably not be too happy.

If you’re working with computer savvy clients, who use Safari or Firefox, they should understand. If you’re working on your own personal or side project, happy days. If not, you can try Andy Clarke’s approach of designing in the browser. Time to stop showing clients static design visuals is a very good article about skipping the static mockup stage.

Conclusion

The point I’m trying to make here is that as long as it looks OK in all browsers, we can afford to take liberties when it comes to making it look nicer for those who use Firefox and Safari. Most designers use Firefox or Safari and they’ll appreciate the rounded corners more. IE users *probably* don’t care.

What do you think? Have you started using CSS 3 in your designs? Do you think IE users should get to see the rounded corners too? Share your thoughts below.

How can I learn how to build websites?

There are two approaches you can take to learning how to build websites.

1. Learn how to build websites
2. Learn how to build websites the right way, aka the Web Standardistas’ way

I built my first website over 10 years ago but it wasn’t until final year of my University degree course Interactive Multimedia Design (IMD) that I discovered how to build sites properly using well structured HTML and CSS. Before this I was using tables, unstructured markup and invalid HTML. Who do I have to thank for this? Chris Murphy and Nicklas Persson, two lecturers on the IMD course.

Now you don’t have to take a University course to be taught by these two world renowned mentors. They have branded themselves as the Standardistas and have put all their years of wisdom and knowledge on paper in the form of HTML and CSS Web Standards Solutions: A Web Standardistas’ Approach.

This book will teach you how to build websites from scratch. Starting with the basics of semantic markup and how web pages work moving onto styling your first web page with CSS. It’s a one stop shop for putting together your first web site.

Who is it for?

• People who want to learn how to build websites
• Developers who need to brush up their front end markup skills
• Designers who are using outdated techniques e.g. tables, to build websites
• Professionals who want to earn the badge of a Web Standardista

Benefits of the Web Standardistas’ approach

• Separates content and presentation (easier to update layouts)
• Reduced markup (reducing page download times)
• Increased accessibility (for screen readers and other platforms)
• Cross browser compatibility
• Forward compatibility

Recommended

It’s an easily read book, clearly laid out with lots of code examples to help you get started. After reading this you’ll be able to build websites with your eyes closed.

• The Book
• Web Standardistas website
• @standardistas on Twitter

Take a look at how to implement this ‘out of the box’ technique and a list of creative websites that are using it.

Setup

First setup your page and graphic. I’m using this graphic.

The HTML for my page is like so:

<div id="container">
<img id="logo" src="logo.png" alt="Lee Munroe" />
</div>

And the CSS looks like this:

body{
background:#999999;
}

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
}

Here’s a preview of what we have so far:

Positioning is relative

When we position the logo we want the positioning to be relative to the container, therefore make the position relative:

#container{
width:960px;
background:#fff;
margin:20px auto;
padding:10px;
position:relative;
}

Position it outside the box

Now all you have to do is position your logo. Place it horizontally so the tag sticks out of the container.

#logo{
position:absolute;
left:-15px;
}

Now we have our logo sitting outside the box. Easy!

15 creative designs using the ‘out of the box’ technique

Change in Command

Icon Designer

Yoast

Twiistup

The Design Superhero

Eric Ryan Anderson

Rock Werchter

Freelance Suite

Hipsterist

CreamScoop

Bright Kite

From The Couch

DesignM.ag

Matt Mullenweg

Feel free to share your thoughts on this and other emerging trends.

1. Use CSS sprites

Rather than having multiple CSS background images for your page, you can use CSS sprites to combine multiple images into one graphic. This reduces overall filesize and the amount of HTTP requests.

Once you do this you can use CSS to control the background images.

#services ol li{
background:url(images/homeicons.gif) no-repeat;
}

#services ol li.design{
background-position:0px -460px;
}

And as you can see the size and http requests are reduced considerably.

2. Use an external CDN

A CDN is a content delivery network and it basically means use scripts that are hosted on other sites. Why? Because users might not have to download the script when they visit your site as it’s already cached.

Google has an AJAX Libraries API that you can use.

<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.0.3/prototype.js" type="text/javascript"></script>

3. Install YSlow

YSlow is a very useful optimisation tool for Firefox. YSlow will report on any page you load up and will give you information about the amount of HTTP requests, CDNs used, CSS and JS compression and will give you a grade for each and tell you how to improve the page so it loads quicker.

• First you need to install Firebug. YSlow runs alongside this add-on.
• Now install YSlow.
• Watch this screencast on how to use YSlow

4. Put JavaScript at the bottom

Put any JS requests that you can at the bottom of your code, allowing your content to load first. This includes any Twitter or Analytics requests. This way your site content can load before trying to load external JS files.

5. Optimise graphics for web

Save your images for the web in Photoshop and you can alter the image quality, reducing the file size considerably. Of course I’d like to think you were doing this already

In Photoshop, File > Save for web & devices

More tips

• Cache your pages – Wordpress cache plugin
• Make sure all your Javascript and CSS is external (not inline)
• Compress your CSS
• Compress your Javascript

How else can you optimise your website?

I’ve took a look at the reasons behind validation and checked out 25 of the web’s most popular websites to see if they bother validating their code.

What is validation?

Validation is a process of checking your documents against a formal Standard, such as those published by the World Wide Web Consortium (W3C) for HTML and XML-derived Web document types, or by the WapForum for WML, etc. It serves a similar purpose to spell checking…W3C

Why validate, what are the benefits?

1. Non uniform browser correction

Non valid pages rely on the browser to auto-correct your code, and each browser does this differently. So if you forget to close a tag, Firefox might ignore this but Safari doesn’t and you end up with a broken layout.

2. Rendering time

If your code is valid the browser has to do less thinking as it doesn’t have to correct any code, therefore the page will render faster.

3. Future proofing

You never know what’s around the corner in regards to technology but the chances are that if you have valid (X)HTML, you’re ensuring that your website will work with future technologies.

4. Google prefers valid code

Shaun Anderson conducted an interesting validation test; Does Google like valid code?.

This experiment included 4 pages with the same content but a mixture of valid and non-valid HTML and CSS. The result was that Google picked up the page that had valid HTML and valid CSS and indexed this page over the rest.

5. Accessibility

A valid site is more likely to be accessible to all types of browsers, platforms and screen readers.

6. Self satisfaction

If feels good when you run a validation check on your site and you see the green bar appear

What are the common validation errors and how to fix them?

a. Ampersands

This always catches me out. Ampersands must be written ‘&‘ and not just ‘&’. This is true for writing urls too.

<a href="http://images.google.com/imghp?hl=en&amp;tab=wi">

b. Quotations

Element property values must be put within quotes.

<body bgcolor="#ffffff">

c. Closing tags

All elements must be closed off, even image tags if you’re using a XHTML DTD.

<img src="image.jpg" alt="Image" />

d. Doctypes

Your page must have a valid Document Type Definition (DTD) at the top of the page, and take note that it is case sensitive.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

e. Nesting elements incorrectly

Elements must be opened and closed in order.

<p><strong><em>Paragraph</em></strong></p>

Do the web’s biggest sites validate?

So do all the big and popular websites out there validate? Below I’ve put together a selection of some of the most popular websites and ordered them from best(valid) to worst.

BBC

Wikipedia

Apple

Facebook

Number 10

Digg

Yahoo

Twitter

Times Online

Google

YouTube

Barack Obama

Microsoft

eBay

What about the design community?

Looking at some of the biggest sites (and authors) in the design and technology community.

A List Apart

Smashing Magazine

Web Standardistas

Zeldman

Future of Web Design

Use It

37 Signals

Simple Bits

Freelance Switch

Slashdot

TechCrunch

Conclusion

I think it’s worthwhile validating your websites and it’s good practice. From looking at the sites above however (which are all great sites and designs), it’s obvious that not having a validated website is not the end of the world.

If you’re like me though you’ll sleep better at night knowing your website validates.

Does your site validate?

It was very hard work trying to track down valid websites for this post so it would be great to see some examples. Use the W3C Validator to check your site then submit your link and comments below.

It would also be good to hear your points about validation and if you think it’s worthwhile.

Further Reading

• W3C
• W3C Validator
• XHTML-CSS Validator
• Google SEO test
• Web Developer Toolbar for Firefox

My latest mini-project is a web design gallery for websites and designers from Ireland and Northern Ireland – www.webdesignire.com.

I use galleries all the time and they’re great for getting a daily dose of inspiration and as a web designer they’re a great way to help promote your website.

Why another gallery?

There are 100s of galleries online, CSS Mania, Best Web Gallery, CSS Drive to name a few, but there isn’t a niche gallery for Ireland.

The aim for Web Designire is to:

1. Help to promote Irish websites
2. Showcase the best designs coming out of Ireland and Northern Ireland to the rest of the world
3. Provide inspiration for other web designers

Visit Web Designire and if you’re from Ireland or Northern Ireland remember to suggest any sites you’ve designed. If not, feel free to vote on the sites showcased.