Jay Aaron (@newthoughts)

So congratulations to him and thank you to everyone that entered, we've got some more great prizes coming up in the near future, for now, leave a comment, congratulate or give us feedback on what we did well, and what we did bad. This is your chance to get heard! Thanks once again everyone and we hope to hear from you soon!

Web Design can at times be a chore to endure. Remembering code, making graphical flare and compiling into a beautiful design can take time; days, hours... years? Which is exactly why I've decided share some of my most used everyday designer resources with readers of my blog, you may have have heard of them before, you may even use them everyday, all I'm doing is sharing the love.

No. 10

DevSnippets is a small branch of the website Noupe; the web design blog. Its a resource for people to add tutorials, trends, and... well 'snippets' of code that other designers would find useful. It's a favourite website that I visit on a daily basis during a project to catch-up with new CSS3 tricks, design ideas and javascript effects that I can spice up some layouts with.

No. 9

Now I know there are many other websites dedicated to colour pallets, Adobe has their own rendition originally named Kuler. COLOURlovers however has more to offer: patterns, pallets, and a whole rating system along with the Photoshop and GIMP compatible arrangements. I've always used COLOURlovers (spelt the correct way) for my website designs, in fact this very blog uses this pallet. Check their blog out every week or so for some great articles about colour used in different places.

No. 8

Feed My App is an amazing directory full to the seems of fantastic 'web 2.0' websites. You can search for different types of website from website scripts to iPhone related doohickys. It has everything you could ever want. What has this got to do with design you may ask, I've used Feed My App for a year now, and it has taught me countless design techniques and styles. It's also a good place to find directories of javascript effects too.

No. 7

A website with average type can really bring it's readability down, and repel users. A website with good typography however will host a whole range of benefits: text clarity, liven up design and more importantly screen presence. People go to your website for its content, not it's design... it helps though. This is where Typechart comes screeching into action. If you suck at just getting a nice range of fonts and spacing together you'll find Typechart a sweet-haven for your designs; supplying one click CSS, and what fonts will work with what.

No. 6

Smush.it is a short and sweet FireFox plug-in that's sole purpose is to slice off those lbs. in web design terms. Image optimization can be a tricky job, why do you need to have to mess around with lots of different settings when you can build your whole website then run it through Smush.it. Simple replace your images and use the time saved to make your favourite sandwich. Remember in the words of The Black Eyed Peas, time is money and money is time.

No. 5

Have you ever had a tough time making cool 'web 2.0' stripes? Have you ever had to line up, pixel-by-pixel your ultimate stripes for your design and spent hours hunched over your computer screen? If you answered yes to one or all of those questions Stripe Generator "2.0" is the perfect resource for you. It's Ajax exterior will generate all of those tiresome stripes in seconds into a nice tile'able png. How's that for service!

No. 4

If you want something a little more unique than the overused yet beautiful FAMFAMFAM silk icons then try Icon Finder. Just prod in the icon you desire and lo-and-behold a nice shiny website ready Creative Commons licensed icon shall appear. Wonderful. [edit] New design alert, well done to Martin Leblanc for the spiffin' new look.

No. 3

Freelance Switch is a place to read about freelancing, get a job freelancing, and more importantly chat to other freelancers. You can learn a great plethora of information about the fledgling world of web design. Home to a great mix of experienced writers, Freelance Switch is an idea home for someone looking to get into the design game... or for more information about how to stay in it.

No. 2

If you ever need a logo for a website and need any inspiration at all, then I highly suggest you go crash by Logo Faves, the "logo design inspiration gallery". Nuf said.

No. 1

I mentioned it earlier at no. 10, it's the one, the only, my most visited website resource... it's... Noupe. It's a fantastic resource for everything web design. Sourcing the best of the net, Noupe is a must read for a daily share of web design.

WOW, what a list! Remember, if you feel something hasn't been mentioned up here, go right ahead and post a link down below in the comments section. This post originated from my blog.

1. Compress your images.

When using the "Save for Web" tool in Photoshop, you can compress our images in order to lower the file sizes. Now normally that's enough for anyone, but if you want the ultimate efficiency, a site named Smush.It makes your images ultra tiny without taking any quality with it.

2. Move script tags to the bottom

Content here...
<script type="text/javascript" src="someScript.js"></script>
<script type="text/javascript" src="anotherScript.js"></script>
</body>

Moving the scripts down to the bottom of the page means that your form, content and images can all load before you start adding in the fancy effects or implementations. This is especially useful if for instance you're using a twitter badge to give your site you're twitter updates, but twitter is down. Having the code at the bottom of the page, means that all of your content can load first, rather than twitter timing out, then your content loading (making the page load very slow)

3. Link your scripts from Google

Not too long ago, Google began hosting scripts such as jQuery. There is one main upside to this:

Caching: Let's imagine that one user visits 10 sites that all link to Google's CDN, the user would only download jQuery once. this is because a browser can tell if a file is modified or not and can choose to load it, or in this case, not have to.

Compress your CSS and JS

Compressing your CSS and JS files can make that tiny bit of difference and can speed your website up quite a bit. Here are some tools to get started.

Javascript Compression Services

• Javascript Compressor
• JS Compressor

CSS Compression Services

• CSS Optimiser
• CSS Compressor
• Clean CSS

4. While creating, learn keyboard shortcuts

Now this may sound straightforward, but I know personally how frustrating it is to have to go three of four menus to get to a very simple function, only to realise when you've got there, there is a keyboard shortcut for it. Learn them. If a function doesn't have a keyboard shortcut, and you have a Mac, you can create you're own by going to Keyboard Shortcuts in System Preferences. Now I don't know if this is possible in Windows, but if it is, please do leave a comment so I can add it into the article, (I hate to leave out people because of their OS.) After creating a keyboard shortcut, make sure you actually use it. Time after time, I've created them and completely forget that I have. When you go to the menu item again, make sure you use the keyboard shortcut and think about it every time you do. Eventually it'll become second nature and you'll be flying through the menus with ease.

5. Finally, don't use tables. 

Let me first explain what a table is for. A table is for laying out tabular data, not a while site. If you want a table of content, use tables. (pretty obvious) If you want a whole site layout, use CSS and Div tags. There are many reasons, but one relates to speed, Nested Tables load more slowly. The most common way to create fancy layouts with tables is to "nest" tables. This means that one (or more) table is placed inside another. The more tables that are nested, the longer it will take for the Web browser to render the Web page. In Internet Explorer, this results in images and text bouncing around on the screen until they figure out where to place them. And in Netscape 4, the page won't display at all.

WordPress CSS Header - Install Clip

/*
Theme Name:
Theme URI:
Description:
Version:
Author:
Author URI:
Tags:
*/

Apple Touch Shortcut - Install Clip

< link rel="apple-touch-icon" href="/apple_touch_icon.png" />

PHP Include - Install Clip

include('<<**SelectionInsertionPlaceholder**>>.php');

Clearing div - Install Clip

.clearing {clear:both; height:0; overflow:hidden; margin:-1px 0 0 0;}

W3C page validator - Install Clip

<a href="http://validator.w3.org/check?uri=<<**SelectionInsertionPlaceholder**>>" title="Validate this website">(x)html</a>

That was just a few clips - there are loads on the actual website. I hope you find this post useful because I sure did. I absolutely love web tools like these. Oh and thanks for reading! Feel free to leave comments and feedback and tell me what you think