A – Z of Web Design
An alphabetical list of all the best resources, galleries, tools and other sites relating to web design. It was quite a challenge to choose representatives for some of the letters. Who do you think should have made the list? Post your suggestions in the comments.
A is for
For people who make websites. A List Apart Magazine explores the design, development, and meaning of web content, with a special focus on web standards and best practices.
The articles on A List Apart are a must read for any web designer whether they be beginner or expert. A number of skilled writers contribute articles on all things web design and the web culture, with useful tutorials being published regularly.
B is for
A podcast for those who design, develop or run websites. Hosted by Paul Boag, the Boagworld podcast is a fantastic weekly resource for web designers and developers, commenting on the latest issues affecting the web world. I had the pleasure of asking Paul about using Twitter a few days ago.
C is for
A variety of CSS tips are available at CSS-Tricks, where Chris Coyier shares his wisdom with a mountain of CSS and other web development posts to make our lives so much easier. I also got to chat to Chris about his views on Twitter.
D is for
Down at the Design Shack you can find a whole host of tutorials, website galleries, jobs and design chat, a great resource for any budding designers.
E is for
Designer, writer, speaker and sometimes musician, Elliot Jay Stocks, has a range of inspirational work in his portfolio. Well worth checking out to see where you should to be aiming.
F is for
I can honestly say there is not a more useful Firefox addon for web designers than Firebug. This little tool allows you to edit CSS, Javascript and HTML in your browser in real time. Such a time saver rather than continuously uploading your changes and hitting refresh again and again.
G is for
You can’t possibly expect to keep your site on tip top form if you just design your sites, upload them and leave it like that. You need to be monitoring your stats constantly, seeing where your visitors are coming from, why you get spikes of traffic and watching your clickthrough rates. Google Analytics is one of the best applications out there for monitoring your sites and is so easy to start using.
H is for
While I am not a strict enforcer of having a 100% correctly valid HTML site and I loath those little ticky buttons saying valid HTML, it’s still incredibly important to understand why your site is not valid if it fails this test. There’s an interesting debate going on over at Lee Munroe’s blog about the topic of validation.
I is for
“I Love Typography was born from a desire to bring the subject of Typography to the masses” and it works! Typography is a subject I am really interested in, but I will be the first to admit I don’t spend enough time when choosing a font. This site is a great resource to find out more about Typography, which should be a top priority for web designers.
J is for
If you are into your Javascript then you have most likely at least played with jQuery.
jQuery is a fast and concise JavaScript Library that simplifies HTML document traversing, event handling, animating, and Ajax interactions for rapid web development. jQuery is designed to change the way that you write JavaScript.
K is for
An amazing colour theme generator, where you can choose from thousands of colour schemes created by the Kuler community or use an image to generate an entirely original one. Colour harmony is a major part of designing any website and needs to be thought about carefully. Honestly there are so many advantages to this application you just need to check it out!
L is for
If you are looking for some identity inspiration then head on over to Logo Pond where thousands of beautiful logos are on display. Remember copyright laws of course! There’s a difference between getting inspired and blatant theft.
M is for
Want to know where the greatest web minds are cooking up the next exciting web projects? Then head over to the Mozilla Labs.
A virtual lab where people come together to create, experiment, and play with new Web innovations and technologies.
N is for
There’s thousands of web design and development tutorial sites out there but few do it as well as NetTuts.
NETTUTS is a site aimed at web developers and designers offering tutorials and articles on technologies, skills and techniques to improve how you design and build websites. We cover HTML, CSS, Javascript, CMS’s, PHP and Ruby on Rails.
O is for
It’s very easy to get comfortable using one browser and stick with that for life. I’m as guilty of that as anybody but it’s really important to check your site out in all other browsers available. Opera offers a whole heap of hidden goodies including mouse gestures and is a major player in the mobile browser industry.
P is for
Sister site of NetTuts and is just as useful. PSDTuts is a fantastic resource for beginners to experts in Photoshop with great tutorials being published regularly.
Q is for
While there wasn’t much competition in the Q department, Quirksmode is a clear winner with its list of CSS and Javascript tips and tricks, defeating many browser incompatibility issues.
R is for
Like Gardeners Question Time, but for geeks.
Run by John Oxton and Jon Hicks, The Rissington Podcast is a really funny podcast for, eh, geeks of course! A must for all web designers or spies trying to worm their way seamlessly into the web geek community. To be honest, I’m listening to it right now as I write this. :)
S is for
What isn’t there on Smashing Magazine? It’s got design articles, tutorials, freebies, everything! Has to be in your bookmarks if you’re looking for the latest web design goodies. I got to chat to SM in my series of Twitter interviews also.
T is for
Think Vitamin is an online magazine for web designers, where you can view a variety of articles and video interviews to help you on your merry way to becoming an inspired professional in the web industry.
U is for
A CSS gallery which offers a cash prize for the most uniquely CSS designed site every month. Seven finalists are selected to be featured on the homepage and the winner gets $25 and a month‘s worth of bragging rights.
V is for
A fantastc blog from a talented graphic and web designer, where Veerle takes us through a variety of XHTML/CSS and graphic design tips among other things. Definitely the only representative for the letter V!
W is for
If you are designing a blog and aren’t using WordPress, you must have a good reason. Unless it’s for a huge company who can afford their own CMS, you should be considering using this open source godsend. There is an unending list of plugins to make your blog all shiny and lovely and it’s so easy to create your own theme in no time.
X is for
Come on, you need to be using XHTML people. :)
Y is for
The Yahoo! Developer Network offers Web Services and APIs that make it easy for developers to build applications and mashups. Definitely worth checking out if you are experimenting with web apps in any way.
Z is for
Last but not least, CSS Zen Garden should be one of your top resources for CSS inspiration. If you want to see the full power of Cascading Style Sheets then head on down to the Zen Garden to see the same HTML creatively styled in thousands of different ways.
Of course it would not be fair to limit this list to letters and leave out the numbers, so here is the representative for all the number sites.
24 Ways
What better way to celebrate the Festive season than with a daily blog on some web goodness?
24 ways is the advent calendar for web geeks. Each day throughout December we publish a daily dose of web design and development goodness to bring you all a little Christmas cheer.
Fin
Well that’s it for the A to Z of Web Design! What resources do you think should have made the list and become the representative of a certain letter?
Comments (50)
Joe Scanlon
23 Dec
Great post! Looking forward to trying out many of these resources in the new year.
kat neville
23 Dec
Well done on this… I didn’t think you could find good items for each letter, but I was pleasantly surprised :)
David Appleyard
23 Dec
This is a great list, nicely presented as well. Thank you for featuring Design Shack – it’s great to be amongst such excellent company.
Lee Munroe
23 Dec
Great post Paddy, thanks for the link.
Haha 944 errors – I know exactly who that is ;-)
Stephen
23 Dec
You contradict yourself with the Validator and XHTML points. True XHTML (XML) has draconian error handling, you get a YSOD on a UA that supports it and a request for a file download one that doesn’t (IE). If it’s not XHTML it’s just text/html and in that case why bother with all the short tags? If you’re answer is “so I can move to XML easier” then I refer you to the validation issue, XML is not like text, it’s more like binary, error handling is defined, it fails utterly when badly formed.
The other thing about Validation is it’s a basic of QA, one of the principal failures of the industry in Northern Ireland is QA. We, as an industry, lose business because we don’t QA products properly. The recent debates on validation on twitter and noises from Digital Circle people here have shown that people don’t know the difference between XHTML, HTML and a hole in the ground and that QA is just a dirty word we don’t bother with.
We’re a country of cowboy web designers only interested in being seen in the right places drinking the right drink.
Paddy
23 Dec
Thanks everyone!
@David No problem, I love Design Shack.
@Lee I knew you would ;)
@Stephen Contradict myself? Where have I said this is a strict set of instructions you have to follow? I stated at the top “An alphabetical list of all the best resources, galleries, tools and other sites relating to web design.” It’s a list of suggestions that I feel web designers should be checking out. As for Northern Ireland’s web design industry, WebDesignIre is showcasing some impressive work coming from this part of the country and what about the stuff being done at Front? Thanks for the contribution though.
David Mihm
23 Dec
Phenomenal list (found it via a tweet from @wiep). I was excited to see some old favorites and a few new ones :) Happy Holidays!
Christopher Murphy
23 Dec
All good points Paddy, an entertaining read and I’ve no doubt it will prove a useful set of pointers for many people setting out on the ‘one true path’!
I don’t agree with the blanket assertion that “we’re a country of cowboy web designers only interested in being seen in the right places drinking the right drink.”
There are a great many local firms striving to do good work. The whole ‘validation debate’ is, as Lee’s article quite rightly points out, just one part of the equation. It might be worth reading it. ;-)
Jack Franklin
23 Dec
Great post and I enjoyed it – thanks.
Stephen
23 Dec
@Paddy To say that you don’t “strictly enforce 100% validation” and that “we should all use XHTML” is a contradiction, and a common misconception, I’ve explained why. It’s not a criticism of the whole post which is excellent.
Front certainly do produce good work, but if we’re collectively going to go around saying that basic QA (validation is a basic test of QA) isn’t important then sorry, we’re all a bunch of cowboys.
I’ll say it again, we lose business because of the lax attitude in our industry towards QA, this isn’t helped by teachers and DC reps saying that basic QA such as validation isn’t important. We have students coming out of university who, with few exceptions, can’t speak the language in any meaningful way at all. This is a serious problem now and will be a bigger problem for the industry in the future.
chris maynard
23 Dec
Great list – hard to debate wordpress vs.web developer toolbar.
Tommy
23 Dec
Had a lot of links I’ve never heard of before. Thanks Paddy!
Christopher Murphy
23 Dec
@stephen (I’m 99% sure that’s not your Twitter ID, apologies, but there’s no contact address in your post),
I’m not sure which teachers are stating QA and validation aren’t important. That’s something of a blanket statement and not, as far as I’m aware, based on any hard and fast research. Which teachers have you spoken to that write off validation as something that’s not important?
I’d be interested to know, but based on fact please, not heresay and opinion.
Certainly we’ve stressed the importance of validation from the very first lecture we had with the final year IMD students (indeed, I clearly recall mentioning this to you).
We stress validation is useful for, amongst other things, learning through debugging and, yes, as a basic measure of QA.
I can see you’re frustrated with the current state of things, but, the best way to change things is to get involved in a positive and constructive way.
I’d suggest that there are many students leaving the IMD course that are the exception to your rule. There are a great number who are extremely talented and diligent and who “speak the language” in a very meaningful way.
Perhaps the problem is that many have been snapped up by employers before they made it to your door. That doesn’t mean they don’t exist.
Paddy
24 Dec
@Chris Thanks, yeah that’s why I do posts like these, hopefully they’ll be a good resource for future/beginner web designers. There’s a whole ton of creative work being done in NI.
@Stephen If I’d have said ‘You need to be using 100% valid XHTML’ then I might have been contradicting myself. I think Front’s work is more than just ‘good’, and tarring everyone in NI with the same brush isn’t fair. What about companies like Creative Online Media, Rehab Studio, phizz.biz or freshe.st to name a few. What teachers or DC reps have said that validation isn’t important? I’ve only said that I’m not a strict enforcer of 100% valid HTML and I’m hardly either.
mayhemstudios
24 Dec
Very creative way to display the list. :)
– Cal
Stephen
24 Dec
Paddy, I’m going to apologise and retract my comments, the point I’m trying to make isn’t helped by me spouting on here and it’s not appropriate to your post at all. Sorry if I’ve caused offence.
Paddy
24 Dec
@Stephen Thanks for that. I’m always happy to engage in conversation about web design, but yeah, don’t think this post is really the place for NI’s web design situation. No hard feelings.
Michael Grech
24 Dec
Wow Paddy what a great list, if only this list would have came out a couple of months ago when I was building my site!
Thomas Geraghty
30 Dec
Superb, Superb, Superb. So much gone into my Google Reader. I have to ask, do you go through a painstaking amount of time to create such pretty banners?
Paddy
30 Dec
@Thomas It does take a bit of time right enough but I think it’s worth it in the end. Makes it look a little more eye catching than just links.
Chris
1 Jan
What an interesting take on the “top ## list”…hope you don’t mind if I “borrow” this idea at my blog in the future :)
Pavan K
Twitter
5 Jan
V for very good!
Thanks for this…
Loved the validation on validation.
Tomas
Twitter
12 Jan
really nice blog style (yours) and the best sum-sites-post I had ever seen. Congrats!
Web Design Dallas
13 Jan
This is a great post.
Thanks
usha
Twitter
22 Jan
hey thats wonderfull!! Very informative for we designers. Just check out our works at http://www.greenfin.ae. just waiting for lot of links from here. thanks paddy!
Chiang Mai Web Design
27 Jan
nice idea.
JWAL
2 Mar
Thanks for the great resources you’ve listed here. I also appreciate the mention of UniqueCSS.com. We just re-designed this month, so be sure to check out the new site.
Josh
Chiang Mai travel
23 May
Nice article, I like your website. I have added it to my bookmarks.
Website Design Company
Twitter
25 May
Nice post buddy. Great resources. Thanks for sharing.
Maverick
2 Jun
hahhahaa…… very nice way to present the list.
Paris
Twitter
3 Jun
Good stuff, Maynard. I could have used this list a long time ago.Better late than never. Keep up the good work.
TechThem.com
Twitter
7 Jun
nice stuff,
i enjoyed!
Jake Rocheleau
Twitter
18 Jul
This is probably the coolest post I’ve seen in a long time about web design. Kudos!
Sinan
20 Aug
Thanks for the great list.
Trackbacks