Web Design Toolbox .. or Library.. or something (a web designers reference)

As we go on our merry way round the world of website design, every now and then we come across something useful. Sometimes it’s a handy tool or application to make life easier, sometimes it’s a bit of a hack to get you out of a some sort Internet Explorer based disaster; or sometimes it’s just something which for some reason strikes a chord.

And after many years of rummaging through my bookmarks saying things like “I think there was a site which had a really cool solution for that…. now where did I put that link?” and “didn’t you say the other day that you’d found something to do such and such?”, I've decided it’s time to compile a library of, for want of a better phrase, “useful stuff”.

Tools :
Design & CSS tool : http://960.gs/
Handy grid system based on a site width of 960px. Design around this grid and never bother building your own floats again: just select the pre-created div which matches the area of the grid you want to populate. What could possibly go wrong?

Xray your code : http://www.westciv.com/xray/
A bookmarklet which allows you to see the box model for any element on any web page. Great for figuring out those tricky inheritance issues in CSS, amongst other things.

Screen Ruler: http://www.spadixbd.com/freetools/jruler.htm
For anyone who’s ever had to guestimate widths in pixels, or squinted at two elements on a page to try to decide if they’re pixel perfect in alignment: a screen ruler app – it does exactly what it says on the tin

Colour picker: http://www.matthewhipkin.co.uk/colourtohtml.php
Grab any colour from anywhere on your screen… this little app tastes it and then tells you its hex value.

Colourscheme chooser: http://kuler.adobe.com/
Get colourscheme inspiration and see what goes with what (and what doesn't)

Browser checker: http://browsershots.org/
Don’t have access to all those weird browsers that 0.014% of the browsing public are viewing your site on? (Do you know anyone using Iceweasel? Really??) Browsershots is a handy free online browser checker, taking screenshots of whatever you ask it to in whichever browsers you ask it to. (yes, even Iceweasel).

File Converter: http://www.zamzar.com
Converts any file type to anything else, pretty much. Want images ripped out of a pdf? Want an .avi converted to a flash movie? Zamzar's your man.

Resources:
W3 Schools : http://www.w3schools.com/
Teach yourself something you didn’t already know, or check on something you’ve half forgotten. Covers html, xml, browser and server scripting, .NET and more…

CSS Library: http://www.dynamicdrive.com/style/
All manner of css stuff, from layouts to menus and image galleries.

Get on that web 2.0 bandwagon: http://h-master.net/web2.0/index.ph & http://www.mycoolbutton.com/
Already fed up with those shiny, reflected web2.0 stylee logos and buttons? If not you can go play at making yourself something shiny.

Code Library:
Auto-growing Text Area: http://www.aclevercookie.com/demos/autogrow_textarea.html
A text area which expands to fit the text entered.

jQuery sliding content areas : http://www.jeremymartin.name/projects.php?project=kwicks Very nice slick way of presenting content within sliding content areas. Example of it in action.

Override Inline Styles for the Stylesheet : http://www.standardsforlife.com/override-inline-styles-from-the-stylesheet/
I haven’t tried this one so I can’t vouch for it, but definitely worth checking out if you do ever find yourself in the position where you need to do the impossible. Standards for life is well worth a look for all sorts of interesting things, which is why I've listed it again below in…

Things of (possible) interest / sites all web designers should be familiar with:
http://www.standardsforlife.com – Standards for Life: a fairly informal wander through all manner of things, some more web-design than others. We like it.

http://www.alistapart.com/ - ‘For people who make websites’ is their tagline. Yes, that’s me. And you, probably. Great articles (really well indexed, so you can always find something of interest), great tips on everything web-related.

http://www.webmonkey.com/ - As they put it: “Webmonkey is a free, public resource for web developers. Builders, designers and programmers like you — the people who know best — write the articles, tutorials, code snippets and other contributions.” ‘Nuff said.

Obviously I'll be updating this as I remember more useful things which I discovered but never wrote down, but please feel free to suggest any I've missed…. July 25th, 2008 / 0 Comments / Tags: web design, web design toolbox, code library, useful web design stuff / Trackback