background preloader

Web Design

Facebook Twitter

The UI Pattern Factory. 9 Common Usability Mistakes In Web Design. Advertisement By now, all good designers and developers realize the importance of usability for their work.

9 Common Usability Mistakes In Web Design

Usable websites offer great user experiences, and great user experiences lead to happy customers. Delight and satisfy your visitors, rather than frustrate and annoy them, with smart design decisions. Here are 9 usability problems that websites commonly face, and some recommended solutions for each of them. 1. Hyperlinks are designed to be clicked, so to make them usable, it makes sense to ensure that they’re easy to click. Here’s an example of the same interface element, the comments link, but this time with a much larger clickable area: Newspond comments link. Why would we want a larger clickable area? <a href=" style="padding: 5px;">Example Site<a> The CSS has been placed inline together with the markup to make the example simpler, but in real life you’ll likely want to add this styling to your CSS file by giving the link a class or id and targeting it with that.

CSS. How to create a better jQuery CSS stylesheet switcher. Style Sheet switchers (or "colour theme choosers") are not really that new.

How to create a better jQuery CSS stylesheet switcher

Apart from that fact, they still are pretty fun to use and cool to see. I was wondering how jQuery could help me achieve this technique. While searching, I came across several solutions. There is a problem when using these techniques, which I will explain later. I created a little work-around to create a better jQuery stylesheet switcher. Make sure to check out the demo to view what we're trying to accomplish. The cute little monsters used in the demo are created by Fast Icon (Dirceu Veiga). Normal way First, I'll show how jQuery users normally would change their CSS file. This is the trimmed down version of the HTML file. Nothing really fancy going on here - just the markup that we need for the page. Now straight to the important part of the CSS file: The colorchanger. As you can see, the boxes each have their own color and hover effect. jQuery This works great! The problem The solution style.css (sizes, fonts etc.)

32 Indispensable Bookmarklets for Web Developers and Designers : Speckyboy Design Magazine. All of these bookmarklets/favelets will be useful to all web designers and developers, they are the quickest method for testing, analyzing and tweaking any web page.

32 Indispensable Bookmarklets for Web Developers and Designers : Speckyboy Design Magazine

A Bookmarklet or Favelet is a small application tool, stored as the URL of a bookmark in a web browser or as a hyperlink on a web page. To use these bookmarklets you can drag and drop the links to your Bookmark Toolbar or right click and save link as, this way you will always have quick access to these great tools Layout Grid and Overlay Bookmarklets Bookmarklet Javascript Code (Copy and Paste) : javascript:void(d=document);void(el=d.getElementsByTagName('body'));void('url( MRI from WESTCIV Bookmarklet Javascript Code : javascript:function%20loadScript(scriptURL)%20{%20var%20scriptElem%20=%20document.createElement('SCRIPT');%20scriptElem.setAttribute('language',%20'JavaScript');%20scriptElem.setAttribute('src',%20scriptURL);%20document.body.appendChild(scriptElem);}loadScript(' Reload CSS CSS Bookmarklets.

Feng-GUI - Attention Analysis for Websites and Advertisements. Welcome to the Open Source Design Pattern Library!