Years ago, the only way you could do truly interactive web-content was with Macromedia (now Adobe) Flash. Then people started doing all sorts of crazy stuff with Javascript, and next thing we knew, we had AJAX, which pretty much changed the way websites responded to the user. This exploration led to the development of different Javascript frameworks like jQuery, MooTools, etc.

These frameworks allow developers and designers to spend less time coding and more time designing and the biggest and most popular of these has got to be jQuery. Of course, just as much as jQuery allows you to have a complete Javascript framework at your fingertips, it also requires a certain bit of programming to do specific tasks. Which is where these jQuery plugins come in.

This site lists more than 90 (ninety) plugins to help make your development / design workflow faster. These plugins are handy for implementation of navigation, calendars, color pickers, image galleries, etc.

Check it out.

Pretty much any website these days has a "call to action button" . You know those links/buttons that require the visitor to do perform some sort of action. Examples are "Subscribe Now", "Sign Up", "Donate", "Try for free" or our very own "Tell your friends about Design Kingdom" button on the right.

But did you know that the design of your website's call to action button can make a significant difference in your visitor conversions? Well, it can, and this excellent article from Smashing Magazine gives you pointers, examples and best practices to use when designing your call to action button:

Some example tips (the full article has images that go with each tip):

Draw user attention with size
In web pages, the size of an element relative to its surrounding elements indicates its importance: the larger the element is, the more important it is. Decide how vital certain site actions are, and size your call to action buttons accordingly.

Draw user attention with prominent positioning
The placement of call to action buttons on a web page is critical to drawing the eyes of visitors. Placement in prominent locations such as the top section of a web page can lead to higher landing page conversions because users will likely notice the call to action button and take action.

Yes, this is another CSS Tutorial.

I thought I had grasped the use and application of CSS, HOWEVER, reality hit.

This morning, I found a smashing tutorial :) on the fundamental properties and capabilities of CSS such as Padding vs Margins, Float, Style Headings, etc complete with links on how to slice and dice PSD to HTML.

Here is the link.

Enjoy!

If you're a half decent web developer, then I'm sure you've played around with numerous Content Management Systems, and you have definitely tried out Wordpress as a CMS. Wordpress, although developed for blogging, has very quickly risen to become a serious contender in the full fledged CMS development space. Of course, a CMS is only one side of the coin. Learning how to develop a decent Wordpress theme will go a long way in helping you extend your CMS knowledge. These series of tutorials from Web Designer Wall were written specifically to aid developers who would like to develop themes for Wordpress, and the brilliant thing is, it takes you from the installation of Wordpress, to a full developed theme.

Click here to see the articles, and enjoy!

One of the reasons I love the Computer Arts website big time is because they offer amazing, brilliant tutorials with very easy step-by-step guides. And what's more, they offer PDFs of the tutorials AND accompanying files free for download!

Enough trumpet blowing. This tutorial teaches you to create a slide navigation system for the portfolio section of your website using XML, making the update process easier.

What’s more, by controlling the content through an external XML file, you’ll be able to use this technique to add and edit your portfolio without the need of redesigning or recoding your site. The advantages of this approach are two-fold: you can concentrate on the visual casing of the design, while the content can be updated and edited independently.

 Anybody whose paid attention to most of my articles has by now figured out that I'm a CSS buff. I can't imagine going back to building websites without it. So you could say, I'm the resident CSS Evangelist at DK. The thing with CSS is that it's very powerful way of styling your web content across multiple platforms. If you don't share my enthusiasm, it's most like because you gave CSS a look and thought "Not another language to learn" Well CSS is really simple to understand once you get exposed to the fundamentals. You need a shift in thinking tho when you design with CSS. This article will help you understand the basic principle in CSS that everything is a box. You will learn how this box theory comes about, why its necessary to understand it and how it plays out with real world design.  I do hope you will get a clearer understanding of my beloved CSS after reading this article.

At the risk of over-repeating myself: every element in web design is a rectangular box. This was my ah-ha moment that helped me really start to understand CSS-based web design and accomplish the layouts I wanted to accomplish. We’ve talked about the positioning of these boxesa bit, and about their behavior. What we haven’t talked about much is the box itself. How is the size of the box calculated exactly? Here is a diagram:

 

Click for the full article --}

 

 

In the old days, most websites were quite small in size, basically 5-10pages. So it was never difficult to track where you are at any given time on the site. However, todays websites have become so much bigger and so in good usability design, it's important to always give users a way to track where they are on your site. The way to do this is by using breadcrumbs. These are basically sequential links to show where you are in the hierarchy of the website. For example right now, the position of this article your reading would be:

Home > Tutorials > Web Development > Simple Scalable CSS based breadcrumbs

Now, this can be easily achieved with simple html but for a more stylish effect, this tutorial can show you how to make scalable image based breadcrumbs that can look really slick in your design.

Click for the full article here --> 

If there's one thing I believe is heavily neglected by Ugandan web developers (the majority at least), it's website traffic analysis. Many hosting companies provide standard analytics programs, like AWSTATS, which people then refer to for traffic analysis. These programs are very useful for a quick glance at your website traffic; they give you an overview of search terms, daily traffic, hits, visitor locations, etc. What they do not give however, is an indepth breakdown of complex metrics like how much time is being spent on your site, what path the visitor takes once they land on your home page, etc.

This is where Google Analytics comes in. Google Analytics is a free website traffic analytics service from Google that offers you a very powerful drill-down of metrics that is unmatchable. Installing Google Analytics is a simple process of signing up, adding your site and installing a small piece of code on your webpage(s).

To be honest, I am not into web development but there are a few things that attract me to a web site and one of them is the button designs. I tried making a few of my own in photoshop and flash but they never seem to get as cute as the ones I admire on some sites. At webdesign.org, I found a number of tutorials ranging from photoshop to flash to 3D; all well written out and simple to understand. You can learn how to make a cute globe button like the one below. Don't take my word for it, try it out and discover the possibilities that await you.

View the entire Globe Button tutorial

So recently i've been working on this project that has really got me into the world of Jquery. Jquery is a javascript framework that allows you to bypass all the lengthy code and cut to the chase of making things happen. It's an incredible lifesaver for any web developer. Jquery allows you to do everything from animation, to form validation to ajax implementation. For those of you who are new to this world of Jquery, here is an excellent tutorial to get you started on the infinite possibilities. You will learn;

• What Jquery is and how it works
• Simple effects
• Animations
• Image manipulation
• Accordions and sliding panels

jQuery Tutorials for Designers

This article contains 10 visual tutorials intended for web designers and newbies on how to apply Javascript effects with jQuery. In case you don’t know about jQuery, it is a "write less, do more" Javascript library. It has many Ajax and Javascript features that allow you to enhance user experience and semantic coding. Since these tutorials are focused on jQuery, I’m not going to get into the details of the CSS.