Antonio Lupetti’s WP Cheat Sheet guide

Antonio Lupetti has designed and created a Wordpress Visual cheatsheet that nicely display and defines some of the most commonly used code references in WordPress.org. He writes:

WordPress Visual Cheat Sheet is the new document, of the Visual Cheat Sheet family, that contains a practical reference guide to WordPress 2.8. This cheat sheet (5 pages) contains the full reference guide to WP Template Tags with detailed descriptions and sample code. The simple visual style I used to design this sheet allows you to find at a glance everything you are looking for.

To check out the cheat sheet visit this website to download:
http://woorkup.com/2009/11/01/wordpress-visual-cheat-sheet/

Kevin M. Keating from Frivolous Motion (aka Frivmo) has a great list of 50 Critical Questions you need to ask yourself about your website. These questions are essential in order to work out whether or not your site is not only accessible but usable and by asking yourself and your users these questions you are able to tick most if not all the boxes on the web standards guidelines.

To view the series of questions click on the following URL: http://blog.frivolousmotion.com/2007/12/critical-questions-about-your-website.html

Russ Weakley from Max Design has written a very good article/tutorial that goes through the in’s and out’s of design and building a liquid layout using CSS. For anyone who is unfamiliar with the term a liquid layout is one that can be re-sized and adjusted to suit any window size and it does so by using % percents to define the widths and heights of each container in the layout. The thing to remember when designing such a layout is that you need to make sure everything else gets re-sized with it the layout, otherwise you will have a very disproportionate looking website. To check out this article just simply click on the following URL and enjoy the learning experience… http://www.maxdesign.com.au/presentation/liquid/index.htm

“Outside the Box” Navigation with jQuery

Sexy Drop Down Menu w/ jQuery & CSS

A circular menu with sub menus

Dynamic PHP/CSS menu

Net-Tuts+ offers a really good tutorial on how to create a dynamic drop down menu using JQuery and CSS. Here is a little blurb about the tutorial:

We will use jQuery to create a different multi-layered horizontal navigation system that is still intuitive enough for anyone to use for the first time.

To view the tutorial follow this link: http://net.tutsplus.com/tutorials/javascript-ajax/a-different-top-navigation/

Martin Ludwig from Wepage Design for Designers has posted an article on the website WPDFD called “Eight Rules for Effective Web Forms“, which goes through how to design, create and implement forms on your website using Coffee Cup’s web form builder. It is a very good article, with clear and precise instructions and information that provides a very good insight on how to create a good form for your websites. Here is a blurb from the article and what it is about:

If you’re looking to collect information from your users, there isn’t a much easier or more straightforward method than a Web form. If designed well, Web forms provide valuable information; if not, they may scare users away. With this in mind, here are a few key tenets of Web form design that every designer should know. – Martin Ludwig

To read the full article go here http://www.wpdfd.com/issues/87/eight-rules-for-effective-web-forms/

VirtualHosting.com have written an article providing a 57 point checklist for you to work out the usability of your website before you screen it to an audience.

Test your Website: A 57-Point Checklist for Maximum Usability.

Layouts

CSS Layout Generator
This generator will create a fluid or fixed width floated column layout, with up to 3 columns and with header and footer. Values can be specified in either pixels, ems or percentages.
Grid Designer
Generates fixed and scalable grid layouts along with basic reset and typography.
Layout Generators
Generate multi-column and grid layouts with CSS techniques using %, px, or em.

CSS Frameworks

Boks
Boks is an Visual Editor for Blueprint CSS Framework; It allows you visually setup a grid and baseline rhythm, build and fill your layout and export all this to HTML and CSS. Boks is an Adobe AIR application, which means it will works on Windows, Mac and Linux.
Useful Tools & Resources For Blueprint CSS FrameworkYAML Builder
YAML Builder is an online tool for visually creating YAML-based CSS layouts.
YUI CSS Grid Builder960 Grid System – Variable Grid System
Based on the 960 Grid System; the variable grid system is a quick way to generate an underlying CSS grid for your site.
Grid System Generator
The grid system generator will create fixed grid systems based on 960 Grid System in valid css / xhtml for rapid prototyping, development and production environments.

Fonts

Typetester
The Typetester is an online application for comparison of the fonts for the screen.
CSS Type SetTypeChart
Lets you flip through, preview and compare web typography while retrieving the CSS
CSS-Typoset Matrix and Code GeneratorCSStxt
Tool for generating CSS for web typography.
EM Calculator AIR Application
Calculator for Vertical Rhythm in XHTML & CSS; easily convert px to em based on base font-size and line-height; Padding and margins automatically calculated
Em Calculator
Em Calculator is a small JavaScript tool which helps making scalable and accessible CSS design. It converts size in pixels to relative em units, which are based on a text size.
PXtoEM

Colors

CSS Color Editor
CSS Color Editor allows you to replace the color scheme of your website without going through the entire CSS file. You choose your local CSS file, select new colors and then download the new CSS file with new color codes automatically replaced for you.
Color Palette Generator
Upload an image to generate a color palette based on the image’s primary colors. Useful for quickly grabbing a particular color within an image for inspiration.
Color Contrast Check
The Color Contrast Check Tool allows to specify a foreground and a background color and determine if they provide enough of a contrast “when viewed by someone having color deficits or when viewed on a black and white screen”.
ColorZilla
ColorZilla is an extension for Firefox offering advanced eyedropper, color picker, palette viewer and other colorful goodies like: DOM color analyzer, full page zoom, firebug support, etc.
HSL to RGB Converter

Sprites

CSS Sprite – Online CSS Sprite Builder / Generator
An online tool to help web designers and web developers to build CSS Sprites. All you need to do is upload multiple files and it will generate sprite image and relted CSS and HTML for you.
CSS Sprite Generator
CSS Sprite Generator will combine the uploaded images into a single sprite and generate the CSS for you.
YASC (Yet Another Sprite Creator)
This tools is useful when all your sprite images have been created in a single file. The process is fairly straight forward: you upload this file, then visually select each individual item and specify its CSS id; once you have selected all your sprites you can generate all the required CSS  with a single click.
SmartSprites
SmartSprites is Java command line utility that will let you easily introduce and maintain CSS sprites in your designs. SmartSprites parses special directives you can insert into your original CSS to mark individual images to be turned into sprites. It then builds sprite images from the collected images and automatically inserts the required CSS properties into your style sheet, so that the sprites are used instead of the individual images.

Forms

Accessible Form Builder
Create accessible form with CSS or table layout, including all label elements simply by typing a list of fields that you need.
Wufoo
Wufoo is an online service that allows anybody to easily build great looking online forms. You can use Wufoo as an easy way to create good-looking, valid CSS/XHTML form markup. It allows you to use your account to design and download the markup and CSS for FREE.

UI Components

List-o-Matic
Create CSS-styled navigation blocks based on unordered list <li> items. Get your semantics on!
CSS Menu Generator
Generates horizontal, vertical & dropdown CSS menus
ThemeRoller
ThemeRoller allows you to design custom jQuery UI themes for tight integration in your projects.

Text Wrappers

CSS Text Wrapper
Generates HTML/CSS to wrap content to any shape
The Box Office
The Box Office lets you wrap/float/contour text around freeform images using CSS for usage in HTML pages.

Analysis & Debugging

W3C CSS Validation ServiceCSS Analyzer
CSS Analyzer checks the validity of your CSS against the W3C’s validation service, along with a color contrast test, and a test to ensure that relevant sizes are specified in relative units of measurement.
Firebug
One of the post popular web developer tool – Firebug is a Firefox add-on that allows you to edit, debug, and monitor CSS, HTML, and JavaScript live in any web page. You can use Firebug Lite in IE, Opera, and Safari.

Maintenance

Dust-Me Selectors
Dust-Me Selectors is a Firefox extension that finds unused CSS selectors
CssCleaner
Windows desktop application that removes unused CSS Classes from your web application
CSS Redundancy Checker
Use this tool to find CSS selectors that aren’t used by any of your HTML files and may be redundant.

Optimization

CSS Drive CSS Compressor
Normal mode allows you to choose from three levels of compression, depending on how legible you want the compressed CSS to be versus degree of compression. You can switch to Advanced mode for greater customization.
Robson CSS Compressor
A good CSS Compressor still in development.
MinifyMe – AIR Application
Adobe AIR application that allows you pack multiple files together.

Formatting

CleanCSS – CSS Formatter and Optimizer
This tool comes with several options for formatting as well as optimization. It also provides ready made sets of options for various level of balances between optimization and readability.  Important feature includes ability to automatically merged the same selectors and properties.
Styleneat
It organizes and standardizes your CSS – selectors, sub-selectors and properties – in a structure that makes it easier to define page areas and see how they relate to each other.
CSS Toolbox
Free CSS Validation, CSS Formatter, CSS Compressor

Browser Specific

Conditional-CSS
Conditional-CSS allows you to write maintainable CSS with conditional logic to target specific CSS statements at both individual browsers and groups of browsers. Compilers for Conditional-CSS are available in PHP, C# and C.
Litmus
Litmus shows you exactly how your designs look on various platform, across every popular web browser.
Web Browser CSS Support
Detailed information about CSS support in major web browsers, allows you to pick which browser appear on the information tables.
When Can I Use?
Compatibility tables for features in HTML5, CSS3, SVG and other upcoming web technologies. Allows you to specify browsers, features, time period,  status, search and sorting options.
IE7.js
IE7 is a JavaScript library to make Microsoft Internet Explorer behave like a standards-compliant browser. It fixes many HTML and CSS issues and makes transparent PNG work correctly under IE5 and IE6.
Modernizr
Modernizr is a small and simple JavaScript library that helps you take advantage of emerging web technologies (CSS3, HTML 5) while still maintaining a fine level of control over older browsers that may not yet support these new technologies.

Selectors

Sizzle JavaScript Selector Library
A pure JavaScript CSS selector engine designed to be easily dropped in to a host library. Sizzle supports virtually all CSS3 selectors – this even includes some parts that are infrequently implemented such as escaped selectors (”.foo\+bar”), Unicode selectors, and results returned in document order.
SelectORacle
Online tool that provides explanation of CSS2 and CSS3 selectors. Simply provide it with some selectors and it will return descriptions of what the selectors will match.
YUI Selector Utility
The YUI Selector Utility brings CSS3 Selector syntax to JavaScript, providing a compact shorthand for collecting, filtering, and testing HTMLElements.
YUI StyleSheet Utility
The StyleSheet Utility allows you to create and modify CSS stylesheets on the fly.

Miscellaneous

XRAY
XRAY is a bookmarklet for Internet Explorer 6+, and Webkit and Mozilla based browsers (including Safari, Firefox, Camino or Mozilla). Use it to see the box model for any element on any web page.

Cheat Sheets

CSS Cheat Sheet
The CSS cheat sheet is a one-page reference sheet, listing all selectors and properties. It includes a visual example of the box model, unit reference for CSS units and the various media types CSS makes allowance for.
CSS Shorthand Cheat SheetYUI Library: CSS Reset, Base, Fonts, and GridsBlueprint CSS Cheat Sheet

Beyond Standard CSS

MoreCSS
MoreCSS is a JavaScript library that can assist you with all the daily JavaScript things like pop-ups, tabs, tooltips, hyphenation, advanced list styling and more using CSS like syntax.
LESS – Leaner CSS
Less extends CSS by adding: variables, mixins, operations and nested rules. Less uses existing CSS syntax. This means you can migrate your current .css files to .less in seconds and there is virtually no learning curve. However you’ll need Ruby installed to use it.
DtCSS
DtCSS is a PHP script that preprocesses your CSS file. It speeds up CSS coding by extending the features to CSS. Such as nested selectors, color mixing and more. DtCSS reads the CSS file with special syntax written for DtCSS, and outputs the standard CSS. It also comes with a smart caching system.

50 Critical Questions about your website

1. Can you tell someone how to get to your site without having to spell anything?
2. Are the URLs human-readable or are they full of special characters and dynamically-generated gobbledygook?
3. Do you have an About page?
4. Can visitors tell what your site is about without visiting your About page?
5. Is your contact information readily available on every page – or at least from every page?
6. If not, what are you hiding from? Your customers?
7. Is your home page doing you any favors or is it merely an “Enter Site” gateway?
8. Do you have an RSS Feed?
9. Did you decorate for the holidays?
10. When is the last time you added new content?
11. Why has it been so long?
12. Is your site ranking highly in search engines for relevant keywords?
13. What about for your name? Or your business name?
14. What are your relevant keywords, anyway?
15. Is anyone linking to you these days?
16. If not, what can you do to make this happen?
17. Who are you linking to these days?
18. How long does it take your site to load at your mother’s house?
19. Do you need to download anything on her computer to even see your site?
20. What is the single most important thing you want a visitor to do?
21. Is that clear from looking at your site?
22. Does your site look professional, or does it look like a teenager’s MySpace page?
23. Do you link out to your other web presences (social network profiles, Twitter account, YouTube page, Flickr photostream)?
24. Is it clear what content is protected by Copyright and what is free to take and re-use?
25. What one thing can you do to your site today to increase visitors?
26. Are you commenting on blogs and building relationships with other site-owners in your industry or niche?
27. How does your site look on a mobile device?
28. An iPhone?
29. Blackberry?
30. Cheapo-plastic-freebie phone?
31. Amazon Kindle?
32. Is your site usable with images turned off?
33. On a computer with no Flash or Javascript?
34. In every web browser?
35. How many clicks does it take for a visitor to give you money?
36. Is your site “fine for the moment” or is it flexible enough to be fine for the next 5 years?
37. Are your ads annoying?
38. How easy is it for a visitor to leave a comment or write a review?
39. Can your site run without you?
40. Is the entire site backed up?
41. Is the important stuff backed up multiple times in multiple formats in multiple physical locations?
42. How long would it take to turn your entire site navy blue with white text?
43. Is this time measured in seconds (awesome), minutes (good), or hours (you’re doing things wrong)?
44. Is your branding consistent between your site, your printed material, your storefront, and you as a person?
45. Do your product descriptions sound like they were written by a person or by a mentally-ill robot programmed with the vocabulary of an out-of-work Madison Avenue ad guy whose last account was for one of those food processors they sell on TV at 2am?
46. Do you care about your website?
47. Is it important to you?
48. Are your readers and customers important to you as people, not just as eyeballs with wallets?
49. Would you be sad – actually sad – if your site disappeared tomorrow?
50. What would you do if it did?