Interactivity can transform a dull static website into a dynamic tool that not only delights users but conveys information more effectively. In this post, we’ll walk through five different coding techniques that can be easily implemented on any website to provide a richer user experience. The techniques will allow you to better display difficult content, help users find information more effectively and provide meaningful UI cues without overwhelming the user. On-page text search Drag controls for oversized content Subtle hover effects Comment count bars Full-page slider [Offtopic: by the way, did you already get your copy of the Smashing Book?] 1. On-Page ...

Calendars may be used on webpages for various reasons, such as allowing users to easily pick a date in a form, or just to provide monthly information. Here are a list of various css and javascript calendars for use on your site. Don't like the look? Customise them yourself with abit of CSS! Monket Calendar An Ajax enabled online calendar. Drag and drop events to change dates, drag the start/end of an event to create multi-day events, create and edit events without refreshing the page, all with an iCal style interface. Quick Calendar Using AJAX and PHP Online calendars are often used in many ...

Creating equal height columns with CSS is not as easy as it may first seem. This tutorial highlights the display problems that occur with multiple column layouts, and then shows a simple solution that works in all common web browsers. The method shown here is 100% CSS hack-free, image-free and JavaScript-free so it can even be used on the most strictly coded websites. http://matthewjamestaylor.com/blog/equal-height-columns-cross-browser-css-no-hacks ...

When an HTML page contains a small amount of content, the footer can sometimes sit halfway up the page leaving a blank space underneath. This can look bad, particularly on a large screen. Web designers are often asked to push footers down to the bottom of the viewport, but it’s not immediately obvious how this can be done. http://matthewjamestaylor.com/blog/keeping-footers-at-the-bottom-of-the-page ...

The goal of a reset stylesheet is to reduce browser inconsistencies in things like default line heights, margins and font sizes of headings, and so on. Reset styles quite often appear in CSS frameworks, and found its way into Blueprint, among others. The reset styles given here are intentionally very generic. There isn’t any default color or background set for the body element, for example. I don’t particularly recommend that you just use this in its unaltered state in your own projects. It should be tweaked, edited, extended, and otherwise tuned to match your ...

With CSS 3 gaining support from more browsers (especially Safari and Firefox) we have many more options than the early days of the web. However, with all of these CSS options can come clutter, large and tedious CSS files, and extremely repetitive style declarations. So how can we cut back on the amount of CSS declarations and clutter? The answer is simple. We can use CSS shorthand properties available to us. Using shorthand properties will allow us define to multiple style properties within one CSS declaration. ...