Top Ten Resources for Learning Web Design and Development

I've just been surfing about tonight, revisiting some old favourites and checking out some new sites friends have told me about. In the 12 years I have been working as a web designer/developer, I have often fallen back on other peoples code samples and tutorials to learn.

Some of my collegues on the design team have expressed an interest in learning some more technical, code based skills, such as JavaScript or ActionScript, and I am always keen to find tips and tricks for Illustrator, After Effects and Photoshop, as well as SQL, XML, or any one of many web design and development techniques, so, here's my top 10 resource sites if you're keen to learn...

1. W3 Schools. - If you want to learn about any of the web design and development languages, including HTML, XHTML, CSS, JavaScript, SQL and much much more, this site should be your first port of call. Hundreds of clear examples and references make this site indispensible. Bookmark it!
2. Webreference - Another indispensible site, for any of the popular web languages. Webreference is a HUGE site, and a great place to find new tips and tricks, from Multimedia and Internet Design to PHP and Active X programming. Essential!
3. WebDesign Tutorials - I had'nt seen this site before today, but I'm impressed by the amount of content. The frames based displaay is a little irritating, but, if you can ignore that, there's a huge amount of useful stuff to be found, covering 3d Studio Max, PhotoShop, Flash, C++, CSS and much more.
4. CSS Zen Garden - If you have'nt seen CSS Zen Garden, just go there. This site is the best illustration of the full potential of CSS when used well. A Stunning collection of stylesheets, showing how a single site can be completely redesigned, without touching the HTML mark-up. If you are into CSS, this is nirvana!
5. Web Pages That Suck - At the other end of the spectrum from CSS Zen Garden, this is the place to go if you want to learn how NOT to do it. Well worth checking out, some of the sites listed are truly shocking! Just make sure one of YOUR sites never appear on this site!
6. W3C HTML Validation and Jigsaw - These two sites are equally useful and important in the web designer/developers arsenal. If you want to be sure your site is vaild HTML and CSS, then you need to bookmark and use them both!
7. SitePoint - I'm a big fan of SitePoint, both for their website, and the books they publish. SitePoint has a real community feel, with hundreds of quality articles, books, videos, forums and more. Well worth checking out.
8. A List Apart - This is another indispensible site. With hundreds of authoratitive articles and tutorials about standards based and best practice web design, this is one you just can't do without.
9. Webmonkey - This site has been around for years, and had undergone a re-design over the last year or so. With tutorials, a code library and reference sections, this is another really good place to start...
10. Kirupa - This is a good site for those of you interested in Flash, Sliverlight, WPF and ASP.NET/PHP. Kirupa has been around for some time now, and has some top notch tutorials and artciles. Well worth a visit

If I've missed any, let me know! I'm always on the lookout for new sources of inspiration...

Powered by ScribeFire.

jQuery enhanced HTML lists

I was playing around with CSS and ordered lists this evening, trying to make an ordered list with large item numbers and small list item text, and after much messing around discovered that what I was trying to achieve isn't really possible using just CSS and the OL or UL tags, and, after using jQuery for a while now, thought I'd have a go at creating a plugin to solve my problem.

It's nothing very complex, but it does the job. It simply looks at an OL or UL, strips out the HTML content of the child LI elements, and replaces the OL or UL with DIVS. This allows me to use CSS to style the numbers and text separately, using progressive enhancement. You can see a demo here.

Usage

To use it simply include jQuery in the head of your document...

<script src="your_path_to_jquery/jquery.min.js" type="text/javascript"></script>

Below that, include the jquery.enhanceList.js file...

<script src="your_path_to_jquery/jquery_enhanceList.js" type="text/javascript"></script>

Make sure you have the following CSS classes in your stylesheet, feel free to tweak it to your design requirements!...

.olContainer {
width: 450px;
margin: 5px;
border-bottom:1px dotted #cccccc;
padding-top:10px;
}
.olNumber {
font: 700 220% / 1 Georgia, "Times New Roman", Times, serif;
width: 30px;
margin: 0 10px 0px 10px;
text-align: center;
float: left;
position: relative;
padding: 0 10 10 10;
}
.olText {
white-space: normal;
font: 400 100% / 1 Arial, Helvetica, sans-serif;
padding: 0 0 10px 10px;
line-height: 1.5em;
}
.clearFix {
clear: both;
}

In your HTML document, you will need an ordered or unordered list, in my example, I am giving the target list a class called "enhance" to use as a selector...

<ol class="enhance">

<li>This is the first item, Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>This is the second item Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li> Third item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fourth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Fifth item..Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

<li>Sixth item...Lorem ipsum dolor sit amet, consectetuer adipiscing elit, sed diam nonummy nibh euismod tincidunt ut laoreet dolore magna aliquam erat volutpat. Ut wisi enim ad minim veniam, quis nostrud exerci tatio</li>

</ol>

It is a good idea to use an external javascript file to contain your code, rather than have script in your HTML document, so create a new .js file as follows, and save it as enhance.js in your sites script directory,...

$(document).ready(function(){
$('#activeEnhance').click(function(event){
$('ol.enhance').enhanceList()
})

Then include it in the head of your HTML page...

<script src="your_path_to_jquery/enhance.js" type="text/javascript"></script>

Thats it. All you have to do now is run it! I hope you find it useful. Feel free to let me know your thoughts on this. You can download sample code, and the plugin here

03 Nov 2008 Update: A visitor contacted me to let me know that my posted source code didnt work out "out of the box" - this was due to my source HTML referring to jQuery 1.2.6 which wasnt included in the zip. This has now been fixed. Apologies to you if you downloaded it and had problems due to this oversight!

Powered by ScribeFire.

Useful jQuery Plugins

I use jQuery pretty much every day at work, and in personal projects. I love the way it allows me to add rich functionality and effects to my projects, without much hard-core coding (well, unless I'm trying to be a smart-arse!).

So in true spirit of the Blogosphere, I thought I'd compile the top 10 list of my current favourite useful jQuery plugins...

1. Dimensions - This is one of the best. It extends jQuery with dimension specific methods. With it, you can get dimensions (height and width) of the window, the document, and individual elements, and find the co-ordinates (offsets) of any element in a web page. VERY useful.
2. Cookie - I use this one quite a lot, it makes manipulating cookies a breeze. Go get it!
3. jQuery UI - This is really a collection of plugins rather than one (but you can create your own build so you don't have to include the whole collection), but highlights include a variety of visual effects, including Fold, Slides, Explode, Pulsate, Puff and more, as well as some really slick ui elements such as a rather tasty SplitPane and Drag and Drop behaviours. Nice.
4. Media - This is a very cool one, it allows for unobrusive embedding of media including Flash, Quicktime and Silverlight into documents. Highly recommended.
5. labelOver - Another one in my regular jQuery toolkit, this allows you place the label over the input field, using CSS. It is based on a very good article on A List Apart about Making Compact Forms More Accessible
6. Validation - Anyone involved in the development of web applications needs a good validation script, and this is a great jQuery plugin that does just that. I hate ugly forms and JavaScript alerts, which is why I can't code a form without at least considering using this plugin. In short, don't leave home without it!
7. tableSorter - Sometimes, you can't avoid using tables, particularly for displaying data, and this plugin allows for all sorts of table tomfoolery, from basic column sorting to appending the table data using Ajax.
   
8. Form - This useful plugin lets you enhance forms to submit using AJAX. No special mark-up required, just include the plugin and write your callback. We like it!
9. Field - If you need to manipulate form fields beyond the standard val() method, this is the plugin for you!
10. XML to JSON - This is a cool utility if you work with Ajax and XML documents. Does what it says on the tin!

I could have easily made this a top 20 list, as there are so many good plugins out there, but then I would'nt have enough for my next list, but I hope you found at least one useful addition to your jquery library.

Progressive enhancement rules ok!

I've really been bitten by the progressive enhancement thing, probably because I have spent some much time fiddling with jQuery over the last few months. Back in the bad old days, the buzz was to allow for "graceful degradation", which even by name seems a little negative. Today, we have a new development idea, known as progressive enhancement.

Why is progressive enhancement better that graceful degradation? Well, to be honest, you could say that they are both the same side of the same coin, in as much as the final aim is that your site has a few barriers to use as possible, but personally I find the progressive enhancement way of doing things is the more creative.

I found this great little slideshow by Chris Heilmann on Ajaxian (top site if you are into geeky AJAX and JavaScript stuff like I am), and after watching it, I had to share it here.

Pragmatic Progressive Enhancement

View SlideShare presentation or Upload your own. (tags: programmingyuiydnakqa progressiveenhancementpr...)

There are a couple of killer quotes in the slideshow too....

"There is hardly any more hostile environment than the web" - So true, but thats one of the things that makes web development such a challenge, and so much fun!

"..we work in a paranoid fashion" - LOL, yeah, especially if you add any of the IE browsers into the mix!

"Separation of Structure (HTML), presentation (CSS) and behaviour (JS) is an absolute must." - Thats almost an understatement. Without separation you have no chance of either clean mark-up, graceful degradation, or progressive enahncement.

"With great power, comes great responsibility" - This applies as much to those Flashers out there as those using HTML, CSS and JS. Just because you can make that object move across the page, change colour, load data from some third party website, and bounce on mouseover, doesn't mean you should actually do it!

My personal favourite is "If you simulate, do it right. Don't break expectations". I have had to remove or revise functionality on more than one occasion because it works, but not in the way the use would expect it to.

Go forth and progressively enhance all that you code....