This footer behaviour is not a new idea; I’ve seen it on a few sites over the years, the most well known probably being version 7 of Shaun Inman’s site. Take a look at the ‘Work’ page with JavaScript enabled, then disabled to see the effect in action.

I suspect that this behaviour, which can look great in the right situation, has not been widely adopted because existing solutions have always relied on JavaScript for what should be a simple presentation issue.

The technique described in this article is purely a CSS solution and works in all modern browsers, tested down to IE5.5.

Firstly, here’s a demonstration.

The HTML

The CSS

IE6 Stylesheet

How it works

As you can see, the mark-up and styling are pretty simple. Here’s a quick run-through of what’s going on…

• #container is set to be at least as tall as the browser window using min-height and although IE6 doesn’t understand this, it treats height in exactly the same way. #container must be positioned absolutely, or this will not work.
• #footer is positioned absolutely at the bottom of #container
• #content is given a bottom margin equal to the height of #footer to prevent the two ever overlapping.

Known Issues

The simplicity of this technique makes it fairly reliable and the only real issues to consider are for IE6 and below. For these browsers you’ll need to specify any additional containers as also having a height of 100%.

For example, if your mark-up was:

In your IE specific CSS you’d need to specify:

Conclusion

This is a nice and easy solution to those unsightly gaps below your footers and while it won’t be appropriate for every site, it might come in handy from time to time. Please let me know if you find any problems with it.

Demo: http://boagworld.com/FixedFooter/

Via: http://boagworld.com/technology/fixed_footers_without_javascri/

DevBoi is a Firefox add-on that adds a sidebar with web-development references and documentations for HTML, JavaScript, CSS, PHP, Ruby on Rails & Prototype.

The sidebar is very handy for any developer as you can reach it with a simple “CTRL+F9″, find any function or property, see the browsers it supports & more.

Standard installation supports:

• HTML 4.01/XHTML 1.0,
• CSS 2.1,
• DOM 2,
• JavaScript 1.3

Download Language Support from here

Download Firefox Add-on

Visit Original site here

Facelift Image Replacement (or FLIR, pronounced fleer) is an image replacement script that dynamically generates image representations of text on your web page in fonts that otherwise might not be visible to your visitors. The generated image will be automatically inserted into your web page via Javascript and visible to all modern browsers. Any element with text can be replaced: from headers (<h1>, <h2>, etc.) to <span> elements and everything in between!

Website: http://facelift.mawhorter.net/

Demo: http://facelift.mawhorter.net/examples/

Download: http://facelift.mawhorter.net/download/

Simply put, usability is making your website easy for your visitors to find the information they need when they need it.

A common misconception about usability amongst web companies is that usability is expensive. Yes, there are multi-national companies that spend thousands of dollars on usability tests and research, but for an everyday company usability is achievable without the knowledge of usability experts or without expensive equipment for testing.

Web designers have an even easier job to do, just by reading usability articles they can accumulate a fairly good knowledge about usability basics and how to implement them on a website.

1. Include a Tagline

A tagline is a statement or a motto that represents a company’s, or in our case a website’s, philosophy and mission. It should be the most obvious element on a website’s front page and it should clearly describe the website in one phrase.

(more…)

I had never seen an implementation, with only XHTML and jQuery as a library could accomplish something so advanced and functional, which undoubtedly enrich the user experience without sacrificing usability.

Seeking resources jQuery, I ran into a tutorial that shows how to implement an audio player with jQuery.

This tutorial yensdesign.com and publish it in the most advanced design is highlighted by its interface, as this can be used via keyboard shortcuts and mouse support Gestures. With this feature, we can change with just a song click and move the mouse, so to increase the volume.

Demo

View Tutorial

Favicons are one of the must-haves of websites.

They help making:

• a website unique
• easier to differenciate between tabs
• easier to find in bookmarks..

favikon is an easy to use online favicon creator.

You upload an image, if the image uploaded is bigger than a standard favikon size, you can crop it & that’s it.

Website: http://favikon.com/

Whether you’re freelance, employed or a business owner, we each have our own daily routine, which usually involves doing work to please someone else, whether that someone else be a client, end user, reader etc. But every once and a while I think it’s important to work on your own projects.

Why bother with side projects?

1. Take a break

Take a break from your normal routine and refresh your head. Exploring different ideas can get you out of a creative block and bring inspiration.

2. Expand your skill-set

Try out new frameworks, see what you can do with different APIs, test your design skills. The creative community never stops moving so you need to make sure you stay up-to-date.

3. Brand awareness – raise your profile

Whether you’re a freelance designer or a large corporation, side projects can help raise your profile simply by having your name associated with it.

4. Contribute to the community

It’s always good to contribute something to the community. It’ll be appreciated.

5. Have fun

You can have a lot of fun working on your own stuff because you’re in control of the brief and there’s no one to tell you what to do.

6. Passive income

It’s hard to beat an application that makes money while you sleep or get on with the rest of your life. You might not make a fortune, but a few extra bucks a week to fund your Saturday night on the rip is a welcome addition

7. Try stuff

If you want to be successful in life I believe you have to try stuff. If it works, happy days! If it doesn’t, learn from it and move on. “Luck favors the people who try stuff”, says entrepreneur Guy Kawasaki.

Where to start

a. Take notes

Take notes when you think of projects and put them on your to-do list. I carry around a small notebook in my laptop bag and constantly add ideas to my ‘Someday’ list in Things.

b. Talk to other creatives

Talking to others will spark new ideas.

c. Read

Read a book from an inspiring designer or look at a book of visuals to get ideas.

d. Mashups

APIs make it very easy to launch small apps. Look at all the Twitter mashups now available. Think of different uses for Google Maps, Flickr, YouTube.

e. What would you find useful?

Chances are that if there was a website or tool that you would find useful, then there are 100s or 1000s of people who would also find it useful.

Finally, remember.

Luck favors the people who try stuff.

Over the past 10 years, the MySQL database has become incredibly popular on the Web. Every WordPress blog is driven by a MySQL database, which contains the blog’s posts, settings, comments and much more.

While plug-ins and even coding hacks can solve some problems and achieve some tasks, sometimes you don’t have any other choice than to execute SQL commands in phpMyAdmin or directly to the database via SSH. Let’s take a look at 8 useful SQL hacks for WordPress. Each section of this post presents a problem, suggests a solution and provides an explanation to help you understand the solution.

1. Creating a Backup of Your Database

The problem. While the tips in the rest of this post have been tested, you should definitely not try any of them without first having a proper backup of your MySQL database.

The solution. To create a manual backup of your WordPress database, follow these simple steps:

1. Log in to phpMyAdmin and select your WordPress database.
2. Once done, click the “Export” button located in the horizontal menu.
3. Choose a compression method (personally, I use gzip), and click the “Execute” button.
4. Your browser will ask you if you want to download the backup. Of course, select “Yes,” and then store it on your hard drive.

Explanation. Note that creating a backup of your WordPress database can be more easily executed with the WP-DB-Backup plug-in. WordPress users should install this plug-in if they have not yet done so and create regular backups of their data.

2. Batch Delete Post Revisions

The problem. Post revisions, a new WordPress 2.6 feature, can be very useful, but they also increase the size of your MySQL database. Sure, you can manually delete posts revisions, but that’s very long and boring work.

The solution. The solution to this problem is simple: we batch delete post revisions by using a simple SQL query. The result can be almost unbelievable if you have a lot of posts: Your database size will be reduced by half!

1. Log in to phpMyAdmin and select your WordPress database.
2. Click the “SQL” button. Paste the following code in the SQL command window:
   
   

   DELETE FROM wp_posts WHERE post_type = “revision”;
   

   DELETE FROM wp_posts WHERE post_type = "revision";

3. You’re done. Depending on how many posts you had in your WordPress database, you may have saved lots of precious space!

Code explanation. The wp_posts table has a field named post_type. This field can have one of many values, such as “post,” “page” or “revision.” When we want to get rid of post revisions, we simply run a command to delete any entry in the wp_posts table in which the post_type field is equal to “revision.”

Source:

• How to: Batch delete post revisions

(more…)

Its a small, customizable plugin for scrolling elements or the window itself.

Links

• Project Page
• Demo
• Changelog

Downloads

• jQuery.ScrollTo 1.4 Zip(all files and docs)
• jQuery.ScrollTo 1.4 Source(to learn or test)
• jQuery.ScrollTo 1.4 Minified(recommended)

A visual example of each setting, is shown in the demo.
I really advice using the minified versions. The code is optimized for those releases. Source versions should only be used to learn.

Enjoy animated scrolling with jQuery.

CSS Menu Generator will generate both the CSS and the HTML code required to produce a text-based yet appealing set of navigation buttons. As text links are fast becoming preferred over images where search engine optimization is needed, a CSS menu can give the affectiveness of text links with a better look than standard text links. For an example of a CSS menu, look at our navigation on the left.

There are 3 different styles of menu available to generate, so for this first step, please choose the style you prefer by clicking on the appropriate radio button below then clicking the ‘Proceed’ button.