kevinleary.net » User Interface

5 Essential Sources of Quality Web Design Articles

kevin — Mon, 24 Aug 2009 00:23:23 +0000

1. Smashing Magazine

Smashing Magazine is a website and blog that offers resources and advice to web developers and web designers. It reviews software and web-based tools for web designers and developers, and publishes guides and how-tos on web design and web development. From time to time they offer free fonts, icons, and templates for download.

2. Nettuts+

Nettuts is a web design and development article depot with many contributing authors. It is part of the Envato blog network. The articles range from software reviews, discussions on new technologies and frameworks to improve process, how-to guides on WordPress, and interviews with renowned developers. Nettuts+ gives you access to the extended set of paid tutorials and articles, and only costs $9 a month with no commitment to get started. One great thing about Nettuts+ is that it offers quality screencasts to show hands on examples. Also be sure to check out PSDTuts for high quality photoshop tutorials too!

3. Noupe

Noupe is another community driven article site for web designers and developers. They have a great wordpress section, and feature some incredible list posts. I’ve found that Noupe is a better source of WordPress related information and resources than SmashingMag or Nettuts.

4. Web Designer Wall

Another great resources, this one features some inspirational vectors design resources, CSS & PSD tutorials, flash tutorials and general web design news. I’ve found that this is an all around good resources for jQuery, CSS and WordPress. It provides original content that always keep me up to date with my coding and design practices.

5. Boagworld

Do you commute to work? If you do then I would highly suggest throwing some recent webisodes of the Boagworld podcast. Marcus Lillington and Paul Boag of Headscape offer up their insights into the modern world of web design, which are quite good. They discuss all aspects of working on the web including design, process, billing, hiring, development and new technologies. I listen to this one weekly and it keeps me up to date with the latest technologies and solutions circulating the modern web community.

Check out Fresh Tilled Soil: Web Resources!

kevin — Wed, 04 Feb 2009 02:42:30 +0000

Some people may have noticed that the frequency of my articles has died down a bit over the past month or so. I’ve been adding posts at a new location now for work.

Many of the topics are the same, if your interested in checking it out head on over to Fresh Tilled Soil: Web Resources and take a look.

I’ll continue to post on kevinleary.net as well, but not as often. I’d say that I plan to average 2–3 new posts per month.

Thanks again for reading!

Highlighting The Current Page With CSS & jQuery

kevin — Wed, 10 Sep 2008 21:47:57 +0000

Here’s a common web development scenario: How do we highlight the current page in a navigation seamlessly and dynamically? The answer is jQuery.

See a Live Demo

My recipe for this common scenario involves a mixture of CSS and JavaScript with a dash of jQuery.

XHTML


	about us
	our products
	blog
	login
	contact

JavaScript / jQuery

<script type="text/javascript">
$(function(){
	$page = jQuery.url.attr("file");
	if(!$page) {
		$page = 'index.html';
	}
	$('#navigation li a').each(function(){
		var $href = $(this).attr('href');
		if ( ($href == $page) || ($href == '') ) {
			$(this).addClass('on');
		} else {
			$(this).removeClass('on');
		}
	});
});
script>

Usage

You’ll need a copy of jQuery, along with a copy of the jQuery URL Parser plugin.

After you include jQuery, and the URL Parser add the JavaScript snippet above to the section of your document.

How it works

What we do here is simple, we grab the current name of the page, for example about.html. Then we check out ul.navigation

current

Notes

In this case I chose to add the “current” class to the

rather than to the anchor. Usually I will create a navigation using CSS sprite techniques, and this allows me greater control over the presentation of that element. This can come in handy for rounded corners or tabs.
Resources