background preloader

Web Design

Facebook Twitter

The UI Pattern Factory. 9 Common Usability Mistakes In Web Design | How-To. Advertisement By now, all good designers and developers realize the importance of usability for their work. 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. Tiny clickable areas 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> You can read more about padded link targets for better mousing in a 37signals article on padded link targets. 2. Pagination refers to splitting up content onto several pages. 3. 4. 5. 6. 7. CSS. How to create a better jQuery CSS stylesheet switcher. Style Sheet switchers (or "colour theme choosers") are not really that new. 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. 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 There are two problems when looking at this solution: One small one, and a bigger one.

The solution That's all! 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. 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(el%5B0%5D.style.background='url( MRI from WESTCIV Bookmarklet Javascript Code : Spry Medias Design Bookmarklet Quick Accessibility Page Tester Reload CSS Slayer Office Mouseover DOM Inspector (Domi) Slayer Office Favelet Suite Wave – Web Accesibilty javascript:void(window.open(' CSS Bookmarklets.

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