XHTML 2 canceled!

Today the Director announces that when the XHTML 2 Working Group charter expires as scheduled at the end of 2009, the charter will not be renewed. By doing so, and by increasing resources in the HTML Working Group, W3C hopes to accelerate the progress of HTML 5 and clarify W3C's position regarding the future of HTML. A FAQ answers questions about the future of deliverables of the XHTML 2 Working Group, and the status of various discussions related to HTML. Learn more about the HTML Activity.

Link:
http://www.w3.org/News/2009#item119

30+ Javascript/Ajax Techniques for Sliders, Scrollers and Scrollbars

Every once in a while we like to focus on different design elements and how to use javascript and ajax to make them more interactive and more flexible to the user. In this article we’d like to present a list of over 30 hand-picked Sliders, Scrollers and scrollbar techniques you can use to achieve some special visual effects in your designs.

Link:
http://www.noupe.com/javascript/...

Design Inspiration Roundup

10 UI Design Patterns You Should Be Paying Attention To:
In short, design patterns are solutions to recurring problems. By extension, UI design patterns are solutions to common user interface problems. This article goes over 10 interesting UI design patterns that you can use in your own projects. In fact, you may already be using them now without knowing it.

Pattern Tap:
Pattern Tap is here to satisfy and encourage the inspiration needs of my interface design peers and peeps. We aspire to be the one stop pattern shop for your next inspiration need.

40+ Helpful Resources On User Interface Design Patterns:
In this article, we share with you the best of the best, cream of the crop sites, galleries, online publications, and libraries devoted to sharing information and exploring concepts pertaining to User Interface design patterns.

Flickr Design Patterns:
A great collection of design patterns on Flickr that are organized by category.

UI Pattern Factory:
UI Pattern Factory is a mix of user interface design pattern library and UI gallery. It is a place to find user interface best practices, get design inspiration, and share design solutions with others

Open Source Design Pattern Library:
The Open Source Design Pattern Library is a place where individuals and organizations can share, collaborate, and discuss design patterns.

Yahoo! Design Pattern Library:
Welcome to the Yahoo! Design Pattern Library. We're thrilled to be sharing patterns and code with the web design and development community, we hope it's useful, and we look forward to your feedback.

User Interface Design Patterns:
Recurring solutions to solve common problems.

15 jQuery Plugins To Create An User Friendly Tooltip:
Tooltip is a good way to show extra information when user hovers the cursor over an element. The “hover box” will appear when the mouse hover in, and disappear when the mouse hover out. If the tooltip is being used appropriately, it can improve our site’s user friendly level, and also save us a lot of spaces. Today, we are going to see 15 jQuery plugins to create an user friendly tooltip.

25+ jQuery Plugins that enhance and beautify HTML form elements:
...collected over 25 jQuery plugins that enhance and beautify html form elements. Some of them add more capabilities that able to increase usability and user friendliness to a website.

20 Excellent JavaScript Navigation Techniques and Examples:
In this article you’ll discover some terrific and unique JavaScript-powered navigation techniques and examples.

Easy online image cropping application at Quick Thumbnail

I recently expanded the functionality of Quick Thumbnail to include a Quick Image Cropping tool. This tool lets you crop an image by uploading a file or by entering a URL to the image file. Once uploaded, Quick Cropping allows you to select the cropped area and each time you press the Crop button a new output is generated. No need to reload the image, simply adjust the selection area and press crop again.

Active Cropping Window:

Cropped Results:

Link:
http://quickthumbnail.com/crop/

Flip Book engine

Entirely customizable. Supports Zoom, print and download options. Can be configured either using HTML code, or via an external XML file.

I tend to not like effects like this on a website but can see where some website may benefit from it.

Link:
http://page-flip.com/

Easily create a Favicon from any image

Want to display your own logo on the browser address bar and browser tabs? Simply select a picture, logo or other graphic (of any size / resolution) for the "Image to Use" and click "Generate FavIcon.ico"

A favicon is that small icon that appears in the address bar of a browser for the website your visiting.

Link:
http://www.html-kit.com/favicon/

Easily add Custom Google search to your website

Add the Custom Search element, and let visitors search your site and other sites you choose using the power of Google Custom Search. If you like, earn revenue from your site with AdSense for Search.

Try it out:
http://veign.com/help/custom-google-search.php


Link:
http://www.google.com/webelements/customsearch/

Create mockups fast and efficiently with Balsamiq

Using Balsamiq Mockups feels like you are drawing, but it's digital, so you can tweak and rearrange controls easily, and the end result is much cleaner. Teams can come up with a design and iterate over it in real-time in the course of a meeting.

With 75 pre-built controls to choose from....

Link:
http://www.balsamiq.com/products/mockups

Get a detailed website check from Veign

Veign is now providing a service where we do a complete website check / analysis. From identifying website problems before your visitors do to search engine optimization guideline checks to ensure your site is ready for the major search engines, our report will give you the knowledge to fix those pesky problems that are often difficult to track down.

Link:
http://www.veign.com/website-check.php

Easily add ratings to your website

You can easily add a rating system to your website with JS-Kit. This is a great way to get immediate feedback on your website products, listings or posts from your visitors. Also, if you haven't heard Google will be displaying Rich Snippets which may include ratings. So, get your ratings now and possibly enhance your listings in a Google Search Result snippet.

From JS-Kit:

The best content on most web sites and blogs gets buried as new content is added. JS-Kit's Ratings service solves this problem by uncovering and displaying your top content. It lets your visitors rate your merchandise items, services, pictures, blog entries, or any other objects on your site.

The service can be used in two modes, either as a 5-star rating widget or a thumb-up/-down widget and is incredibly easy to install on any static or dynamic web page.

Link:
http://js-kit.com/ratings/

CSS Formatter and Optimizer

I feel better after running some of my CSS code through the CSS Formatter and Optimiser as there wasn't a whole lot that it did. Warned about using bold instead of a number, which is weird as I rather have it say bold as it better dictates intent.

If your not familiar with optimizing CSS, you should run your code through just to check.

Link:
http://floele.flyspray.org/csstidy/css_optimiser.php

CSS Sprites

CSS Sprites: What They Are, Why They’re Cool, and How To Use Them:
Do you really understand them? The name might be a little misleading, because sprites aren’t little images like you might be picturing, a sprite is actually one big image. Have you ever seen the CSS technique where the “on” and “off” states of a button are contained within the same image and are activated by shifting the background-position? Think of CSS Sprites as an extension of that technique. The difference is that instead of just two or three images being combined into one, you can combine an unlimited number of images into one.

CSS Sprites: Image Slicing’s Kiss of Death:
Specifically, we’re going to replace old-school image slicing and dicing (and the necessary JavaScript) with a CSS solution. And because of the way CSS works, we’re going to take it further: by building a grid of images and devising a way to get each individual cell out of the grid, we can store all buttons/navigation items/whatever we wish in a single master image file, along with the associated “before” and “after” link states.

CSS Sprite Generator:
This tool allows you to automate the process of generating CSS sprites. Simply give it a ZIP file containing 2 or more images (GIF, PNG or JPG) and it will generate a sprite image and the corresponding CSS rules to target and display each component image.

Create great looking word clouds with Wordle

Wordle is a toy for generating “word clouds” from text that you provide. The clouds give greater prominence to words that appear more frequently in the source text. You can tweak your clouds with different fonts, layouts, and color schemes. The images you create with Wordle are yours to use however you like. You can print them out, or save them to the Wordle gallery to share with your friends.

Link:
http://www.wordle.net/

Easily add Flash charts to your website with Open Flash Chart

Open Flash Chart is a dead simple way to add featrure rich Flash charts to your website, with your data through one of many technologies (like PHP).

Open Flash Chart offers:

• Tooltips
• Re-size the charts
• Save the chart as an image
• Highlight or emphasize one (or many) points
• Can be used with technologies like PHP, Perl, Python, Ruby, .NET, Google Web Toolkit and JAVA
  

Link:
http://teethgrinder.co.uk/open-flash-chart-2

101 High Quality CSS And XHTML Free Templates And Layoutsde

Another great collection of free templates:
http://www.1stwebdesigner.com/resources/...

Get IE8 now and make my life more difficult

Yup, that's right, IE8 is available today and that means I have to support another browser when developing websites. I just wish IE6's market share would drop enough so I could drop it from my list of supported browsers.

Great resource of high quality free icons at IconPot

The aim of this site is simple. We list a whole bunch of icons which are all great to use for your web development projects. But we are different to other icon-related websites because we only list icons which you can use for free on personal AND commercial projects AND without having to provide back-links/credit to the author. These types of icons can be tough to find, so here is a while list for your convenience!

Some well designed icons can add so much to a design. So much so that Smashing Magazine recently did an article on this.

Link:
http://www.iconpot.com/

Count lines of code in a project with CLOC

cloc counts blank lines, comment lines, and physical lines of source code in many programming languages. It is written entirely in Perl with no dependencies outside the standard distribution of Perl v5.6 and higher (code from some external modules is embedded within cloc) and so is quite portable.

Works great for comparing two projects. Recently I went through a code refactor on a project and I needed to give some information back to the client. CLOC made it simple to give a report as to the before and after counts. The before was approx 240K lines of code and the after was about 81K with zero changes to functionality.

Link:
http://cloc.sourceforge.net/

jQZoom

JQZoom is a javascript image magnifier built at the top of the popular jQuery javascript framework.jQzoom is a great and a really easy to use script to magnify what you want.

Link:
http://www.mind-projects.it/projects/jqzoom/

Help a cause and get some great web development information

SitePoint is having a sale on their PDFs for website design and development that will let you choose 5 titles for the price of 1 ($29.95) with 100% of the proceeds going to a relief fund for the Australian fires. The reason is SitePoint is headquartered in Melbourne and they want to do what they can to help out.

Here are the titles you can choose from:

• The Principles of Beautiful Web Design
• The Photoshop Anthology: 101 Web Design Tips, Tricks & Techniques
• Everything You Know About CSS Is Wrong!
• The Art & Science of CSS
• The CSS Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition
• The Ultimate CSS Reference
• Build Your Own Web Site The Right Way Using HTML & CSS, 2nd Edition
• The Ultimate HTML Reference
• HTML Utopia: Designing Without Tables Using CSS, 2nd Edition
• Build Your Own Standards Compliant Website Using Dreamweaver 8
• Simply JavaScript
• The Art & Science Of JavaScript
• Build Your Own AJAX Web Applications
• DHTML Utopia: Modern Web Design Using JavaScript & DOM
• The Flash Anthology: Cool Effects & Practical ActionScript
• Simply SQL
• Simply Rails 2
• The PHP Anthology: 101 Essential Tips, Tricks & Hacks, 2nd Edition
• Build Your Own Database Driven Website Using PHP & MySQL, 3rd ed.
• No Nonsense XML Web Development With PHP
• Build Your Own ASP.NET 3.5 Web Site Using C# & VB, 3rd Edition
• The ASP.NET 2.0 Anthology: 101 Essential Tips, Tricks & Hacks
• Run Your Own Web Server Using Linux & Apache
• The Principles Of Project Management
• The Principles Of Successful Freelancing
• Deliver First Class Web Sites: 101 Essential Checklists

Link:
http://5for1.aws.sitepoint.com/

Browser Market Share

So close to not having to support FireFox 2.0 in web designs. Every time I get to drop a browser from support its a glorious day. My general rule of thumb is once browser usage dips below 1% or security patches are no longer issued than I drop support.

IE6 is the browser I am most looking forward to dropping.

Link:
http://marketshare.hitslink.com/...

Looking for logos?

Logo Instant is a collection of logos you can use and hack-up for your own needs. The collection isn't huge but its a good start and the logos they do have are of good quality.

Link:
http://www.logoinstant.com/

How to test your HTML emails will look good in Outlook 2007

Using a tool provided my Microsoft called 'Outlook HTML and CSS Validator'.

The Microsoft Office Outlook 2007 HTML and CSS Validator helps you check for valid/supported HTML before you send HTML-based e-mail.

Link:
http://www.microsoft.com/downloads/...

7 ways to track your web traffic for free

Awstats
Awstats is a log file analyzer type of web statitics reporting tool. This means the data displayed will be the most accurate and complete than some of the other methods listed. Awstats can provide all the expected information (page views, visitors, hits) plus it can give you bandwidth used, and filesizes of downloads.


CrazyEgg
One of the first to offer Heat Maps which shows where your user are clicking on your website. This alone makes Crazy Egg worth checking out.


FuseStats
Another website offering Heat Maps, which is a color overlay so you can see where your users click, on top of the standard web stat information. They offer a free account, which is why I added it to the list, which can be used for very low traffic websites.


Google Analytics
This, in my opinion, is the gold standard for client side web tracking (not a server log analyzer). Google Analytics provides some of the most powerful tool for tracking your visitors, analyzing your websites traffic flow, checking on goals for your visitors and general overall information provided. Plus they are constantly pushing out new features and I'm sure real-time tracking isn't far behind.


HiStats
Another great option which provides a very user friendly interface (and quite appealing) and provides a hit counter which can be added to your website so your visitors can see how many visits you get. Oh, did I mention they provide real time tracking? Very nice option.


StatCounter
A very popular web stats choice where a small piece of code is embedded in your web pages that handles all the tracking for your visitors. Not as reliable as Awstats but easy to setup, not tied to a server (so you maintain your history) and you can access your stats at anytime from any computer.


The Hit Counter
Looking for a simple, simple to install (2 steps) hit counter for your website? Then The Hit Counter what you need. They have made the creation of a custom hit counter as simple as it can be.

Followup: Convert Excel and PowerPoint to webpage

The Google trick for converting a Word document to clean HTML also works pretty well for Excel documents and PowerPoint presentations.

Much better than anything provided by Microsoft for saving Office documents as a webpage (HTML).

Roundup of JavaScript Techniques

50 Excellent AJAX Tutorials
This post serves as a collection of useful tutorials on working with AJAX in a wide variety of ways. You’ll find tutorials on working with forms, building shopping carts, creating chat features, working with log-ins and usernames and much more.

Link:
http://www.smashingmagazine.com/...


The Top 40 Free Ajax & Javascript Code for Web Designers
The list below is made up of the best FREE scripts available, they are all of the highest quality and more or less easy to configure.

Link:
http://speckyboy.com/2008/...


75 (Really) Useful JavaScript Techniques
Here are 75 more handy JavaScript techniques that have made websites much sleeker and more interesting.

Link:
http://www.smashingmagazine.com/...


jQuery and JavaScript Coding: Examples and Best Practices
The article will explore what constitutes best practices with regard to Javascript and, furthermore, why jQuery is a good choice of a framework to implement best practices.

Link:
http://www.smashingmagazine.com/...

How To Create WordPress Themes From Scratch Part 1

I’m going to show you how to create a wordpress theme from scratch in these 3 parts of tutorial series. I will cover from Structuring, designing in Photoshop, slicing, coding into fully css based html, and finally wordpress implementation.

Link:
http://themetation.com/2008/07/14/...

How Many HTML Elements Can You Name in 5 Minutes?

Link:
http://www.oneplusyou.com/bb/html_quiz

Convert a Word document to HTML (easy and free)

HowTo: Convert a Word document to clean HTML

Ever have a need to convert a Word document to HTML knowing that Word itself produces some of the worst HTML code ever? There is a simple, easy trick to get this done.

1. Make sure you have a Gmail account
2. Send the Word document, as an attachment, to your Gmail account
3. Sign in to Gmail and view the email with the attachment
4. Click the 'View as HTML' link at the bottom of the email
5. With the page opened, 'View source' from your browser
6. Copy the code

That's all there is to it. Google produces some pretty clean HTML from a Word document. It may have to be updated to XHTML 1.0 specifications (Google uses some deprecated tags)

I had a pretty complex tabled document with lots of text styles and it did a very good job.

Tabblo Print Toolkit

The Tabblo Print Toolkit (TPT) is a suite of developer tools for making websites more printable. With our first release you will be able to re-format a web page into printable templates through calls to our templating engine.

Information may be a little dated but it does have some good information and the site contains links to other useful information about printing. The article at A List Apart is one I recommend to people all the time.

Link:
http://developer.tabblo.com/

X/HTML 5 Versus XHTML 2

The competition to become the next markup language for the Web is heating up. This article takes a look at what's cool and what's uncool about the competing technologies.

This is something that is progressively getting closer to a topic web designers / developers need to start thinking about. The article 'How HTML 5 Is Already Changing the Web' is what brought this back to focus for me.

What the differences are:

XHTML 2 is a bold step forward intended to create an architecture that will become the host language to many other W3C technologies already in use, or in the works. XHTML 2 is based solely on XML, a technology that most believe will enable the Web to reach its full potential. XHTML 2 is driven by how markup should be used, rather than by how markup is currently used.

X/HTML 5 is an extension of HTML 4 and XHTML 1. It is an incremental step forward rather than a grand leap forward in the style of XHTML 2. Working within the confines of HTML 4 and XHTML 1, X/HTML 5 has devised clever solutions to address some of the faults in HTML 4 and XHTML 1. X/HTML 5 can be also be served as HTML or XML. So, unlike XHTML 2, X/HTML 5 is influenced by the current state of the art (Web browser technology, etc.) and how markup is currently used.

Who will win? I sure hope that it doesn't stay a split and one specification will become the standard. I think small steps forward at a faster rate of finalizing the spec is better than huge steps forward with long breaks between updates.

Link:
http://xhtml.com/en/future/...

Walmart changes its logo

Now

Before

Do you like it?

12 Reasons To Fire Your Web Designer

A humorous look at bad web designers and developers.

Link:
http://blog.webbizideas.com/...

Cheat Sheets for Front-end Web Developers

Cheat sheets are helpful to have around because they allow you to quickly remember code syntax and see related concepts visually. Additionally, they’re nice decorative pieces for your office.

In this article, you’ll find 23 excellent, print-ready cheat sheets for HTML/HTML, CSS, and JavaScript (including MooTools and jQuery).

Take a look at #11.

Link:
http://sixrevisions.com/resources/...

2008 Design Trends

So what’s hot now? Pencil sketches, handwritten notes, card stocks, watercolor effects, collage art, script fonts, grungy and splatter ink backgrounds (glossy gradients are not "in" this year). Another trend to be on the lookout for are the vintage and retro styles which I’ve posted earlier this year. Here is a list of 82 sites picked from Best Web Gallery that show the current design trends.

Link:
http://www.webdesignerwall.com/...

15 Tools to Help You Develop Faster Web Pages

Response times, availability, and stability are vital factors to bear in mind when creating and maintaining a web application. If you’re concerned about your web pages’ speed or want to make sure you’re in tip-top shape before starting or launching a project, here’s a few useful, free tools to help you create and sustain high-performance web applications.

I’ve tried to include a wide variety of tools that are easy to use, and have tried to keep them as OS and technology-independent as possible so that everyone can find a tool or two.

Link:
http://sixrevisions.com/tools/faster_web_page/

Test websites in IE6, IE7 and IE8 with IETester

IETester is a free WebBrowser that allows you to have the rendering and javascript engines of IE8 beta 1, IE7 IE 6 and IE5.5 on Vista and XP, as well as the installed IE in the same process.

Link:
http://www.my-debugbar.com/wiki/IETester/...

Understand how visitors view your website with Eyetrack

How much do we really know about how people read news websites? We can track their behavior clicking through a site visit. We can collect personal information. We can ask them questions. But that presents a small part of the full picture. To get the rest, we need to climb inside their heads and look through their eyes as they view online news sites -- to peer into their minds and see patterns that even they don't consciously see.

Might be old but interesting none-the-less

Link:
http://www.poynterextra.org/...

Google Doctype

Google Doctype is an open encyclopedia and reference library. Written by web developers, for web developers. It includes articles on web security, JavaScript DOM manipulation, CSS tips and tricks, and more. The reference section includes a growing library of test cases for checking cross-browser and cross-platform compatibility.

Link:
http://code.google.com/doctype/

MachForm is only getting better

MachForm is a form building application that you can run on your own servers, totally under your control. What is does is take all the work out of creating, styling, processing and collecting forms and form results. After reviewing many like services, I must say MachForm is above them all and with the release of version 2 its only getting better.

Whats new:

• Email Autoresponder
• Better, Prettier Email Design
• Fully Customizable Email
• Revamped Entry Manager
• Columns Display Preference
• Entry Viewer
• Printer Friendly
• Forward an Entry
• Submission Review
• Full PHP Embed Code
• New CAPTCHA option
• SSL Support

(read more)

Another thing that I use to judge an application is developer interaction. The developer for MachForm is a super nice guy that is highly responsive to his users and their issues and ideas.

Link:
http://www.appnitro.com/

Also, check out the demo's:
http://www.appnitro.com/demo/

Vista Web Buttons

Vista Buttons helps you create Vista/XP/Win98/Mac rollover html buttons and html drop down menus with ease.

Well done, but the look is not a style I really like. I guess if you want a website to look like a desktop application running in Vista then it would be great but I have to ask. Why would you? Why have a website look like Vista (2nd behind Windows ME in acceptance).

I will say they have done a great job capturing the look and if this is a look you want you will probably not find a better tool to get it done.

Link:
http://vista-buttons.com/index.html

10 AJAX Effects to Boost Your Website’s Fanciness Factor

Here’s a collection of 10 powerful – yet easy-to-implement — AJAX effects to supplement your web page’s interface. These were picked using a “bang for your buck” methodology; meaning that these effects were chosen specifically because they provide high-impact effects with very little effort in installing and using them.

Link:
http://sixrevisions.com/rapid-development/...

Amazing Photosynth Demo built on Seadragon

10 trends that will define logo design in 2008

Logos are the ultimate mark of distinction and everyone loves them. We see logos everyday - on the highways, on consumer goods, on the Web and in the institutions and organizations we support. Read about the different types of logo designs here and learn what principles and techniques are used to create them. Discover what the future holds for logo design!

Link:
http://www.logoorange.com/logo-design-08.php

Give your laptop a custom look with Schtickers

Establish Retrofitted Designs as a sustainable high-design decor and organization products manufacturer that balances its commitment to profitable growth and community focus.

What a cool and innovative idea. Seems like more and more companies are offering means to make your electronic devices a bit more personal (check out ColorwarePc.com). Schtickers goes beyond the custom look by allowing a bit more 'feel' to your laptop with suede products available.

I would use a black one with my tribal logo on it .

Link:
http://www.schtickers.com/

How Google Ended Up with Their Logo

Ever wonder how Google ended up with the logo that they did? The designer of the logo, Ruth Kedar recently talked about what went into the process and even shared some of her early ideas. Surprisingly it started out more complicated and ended up as the more simple logo that is known around the World today.

Link:
http://.../how-google-ended-up-with-their-logo/

7 must-read Webmaster Central blog posts

Our search quality and Webmaster Central teams love helping webmasters solve problems. But since we can't be in all places at all times answering all questions, we also try hard to show you how to help yourself. We put a lot of work into providing documentation and blog posts to answer your questions and guide you through the data and tools we provide, and we're constantly looking for ways to improve the visibility of that information.

Topics:

• Googlebot can't access my website
• URL blocked by robots.txt
• Why was my URL removal request denied?
• Flash best practices
• The supplemental index
• Duplicate content
• Sitemaps FAQs

Link:
http://.../7-must-read-webmaster-central-blog.html

Big list of CSS Menus

12 CSS menus

Advanced CSS Menu Trick

ADxMenu

Bulletproof Slants

CSS Dock Menu

Menus at CSS Play

Tree Frog slide and fly menu

Creating Liquid CSS Tabs for Menus

Drop Down Tabs (5 styles)

CSS: Menu Descriptions

Deluxe CSS Dropdowns and Flyouts

8 web menus you just can't miss

Son of suckerfish (great multi-level menu)

14 Free Vertical CSS Menus

Advanced CSS Menu

Inline Mini Tabs

How to fix PNG opacity in IE6 (IE PNG FIX)

You know that one browser that has only a vague association with modern web standards? Yeah, Internet Explorer. Wouldn't it be great if it supported stuff like translucent PNGs?

Well, now you can add decent PNG support to IE5.5+ on Windows with no changes to your website HTML source code. This script will add near-native PNG support with full alpha opacity, with only one line in your CSS file, that applies to all tags and also background images!

This was just implemented in a project or mine that uses lots of high quality, transparent background, PNG files. Added it in about 2min and it works like a charm.

Link:
http://www.twinhelix.com/css/iepngfix/

In case you want another option check out this IE PNG Fix. Implemented just as easy but seemed to cause issues with img tags that use the vertical-align css property.

Graphic Designer Contracts Agreements Forms & Web Designers Contracts

Contracts and forms for designers are an important part of any design business. No matter if you are a graphic designer or web designer, a solid contract or good pre-project questionnaire can make every project go smoother.

A good contract can go a long way. Not only does is provide you, the designer/developer, a level of protection but it forces you to properly define the project and deliverables. This way both parties know whats expected of them and the client knows what they will be receiving from you.

Link:
http://.../graphic-design-contracts-agreement-forms-webdesigner/

MachForm is the best form creator around

I blogged about pForm last week saying how great it was for creating some very stylish forms on an easy to use, free, online service. It would seem that there is a commercial version available that takes pForm to the next level, called MachForm (same company).

From the dev:

MachForm is an intuitive, browser based, self-hosted HTML form builder program. Designed as a modern HTML form builder, it makes use of the latest web technologies like AJAX, CSS, and Javascript to provide a fluid browser based experience

What does MachForm do:

• Drag and drop interface
• Numerous field type selections
• Ultimate Spam Protection
• Easy form manager
• Email integration
• MySQL database integration
• Form validation
• Export data to Excel or CSV
• Password protected form
• Limit one entry per IP address

Some things that could be better:

• The tooltip could be a floating tooltip. The current one could widen your page if you pull the form into your design - happened to me.
• Give the ability to create your own groups of fields (like the address block). What I was looking for was to create a block for Phone numbers (phone, mobile, fax) under a single block. If/When this gets added it will make this tool extremely customizable.

Basically, I will be using MachForm to create all forms in the future. I may provide the plumbing but having the interface done is a huge savings for me.

Good Job!

Link:
http://www.appnitro.com/

10 Principles Of Effective Web Design

Usability and the utility, not the visual design, determine the success or failure of a web-site. Since the visitor of the page is the only person who clicks the mouse and therefore decides everything, user-centric design has established as a standard approach for successful and profit-oriented web design. After all, if users can’t use a feature, it might as well not exist.

We aren’t going to discuss the implementation details (e.g. where the search box should be placed) as it has already been done in a number of articles; instead we focus on the main principles, heuristics and approaches for effective web design — approaches which, used properly, can lead to more sophisticated design decisions and simplify the process of perceiving presented information.

Link:
http://.../10-principles-of-effective-web-design/

Free Advanced DHTML Color Picker

Once we’d modularized the color picker code it made sense to offer it to others to use on their own sites and projects. So here is the code to get our Color Picker working on your site for free. (We’ll even host the files)

Very nice. I wish I had a project to use this in.

Link:
http://.../free-advanced-dhtml-color-picker/

Build a better table

This article is about the proper usage of tables, for tabular data. How you can implement them with accessibility in mind and how to make them appealing for the eye using CSS.

Results are pretty good looking. Amazing how a little style can make something look so much more professional.

Link:
http://veerle.duoh.com/.../a_css_styled_table_version_2/

pForm is a great online form builder

pForm is an online form builder that assists in building a form with some great effects and a very professional look. When you are done with building the form you can down the html code to use it on your website.

This is probably one of the better form builders around.

Link:
http://www.phpform.org

Ultimate guide to logo design

Logo design is arguably one of the most important and valued areas of design. A quality logo design combined with the branding of an organization or company can become one of the most powerful forces in today’s society. If you love logo design as much as I do, then I am sure you will enjoy these logo design tips and resources.

Link:
http://.../design-a-logo-the-ultimate-guide/

Free Logos:
http://.../create-logo-for-free-with-help-of-blank.html

IE7 JavaScript library

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.

Link:
http://code.google.com/p/ie7-js/

See it in action:
http://ie7-js.googlecode.com/svn/test/index.html

Safari 3.0.4 for Windows released

Apple released a pretty big update to the Safari 3 Beta browser for Windows this morning. One of the most notable additions is the spelling and grammar checking, which can be done inline if you so desire.

Link:
http://.../safari-304-for-windows-spelling-and-grammar-check/

Download Safari:
http://www.apple.com/safari/

Create a logo for free with help of blank templates

Create your own logos from free blank logo templates designs. We [LogoTemplater] are creating free blank logos templates and free vector art images in Adobe Illustrator EPS files for free download. Use our graphics designs for your website, company or MySpace icon graphics.

I figured I would give it a quick test and here's is a logo I did in 5min:

Before:

After:


Link:
http://www.logotemplater.com/

Microformats

Designed for humans first and machines second, microformats are a set of simple, open data formats built upon existing and widely adopted standards.

Basically its small snippets of HTML code that better organizes and identifies data like people, addresses, events and such.

About:
http://microformats.org/about/

hCard Microformat Creator:
http://microformats.org/code/hcard/creator

Online website creator with Jimdo

Create your own beautiful website. It's really easy to create your own JimdoFree-Page: just sign-up, follow the link to your own Page, integrate pictures, videos and texts in seconds, change the design with a click, add as many pages as you want...and show your swifty JimdoFree-Page to your friends.

These are good for what they are for and that's simple website for you personal use. I would not recommend using a service like this for your business website but for a personal website or a website for a small organization it might work very well.

Link:
http://jimdo.com

EDraw Flowchart

To create flowcharts, organizational charts, and other diagrams for business and technical processes rapidly, designing does not need to start from scratch. Abundant flowchart templates, symbols and samples provided along with the software will help to quickly create new flow diagrams. Numerous colors, fonts, shapes, styles, and symbols for each object of the flowchart are usually available to create ones own template that can be saved for future use.

After much looking and evaluating other flowchart software I came to the conclusion that this application is by far the easiest to work with. I read no help file and was creating flowcharts in a matter of minutes. The interface is clean and setup pretty well. All in all, for the $49 price tag, I would not hesitate to recommend this to anyone looking for a solid flowcharting application.

Link:
http://www.edrawsoft.com/flowchart.php

Muller Formula or Predictable Color Preferences

More than half a century ago, Aemelius Müller, professor at the academy of Winterthur, Switzerland, came up with a formula that could predict the appreciation of a color-combination. In other words: Müller was able to predict which combination of colors most people would probably like.

Interesting enough and I guess if I wasn't colorblind I would appreciate it more.

Link:
http://.../the-muller-formula-or-predictable-color-preferences/

30+ Firefox Add-ons for Web Developers & Designers

Firefox has cool add-ons which make the job of website designers and developers much easier. Here is our list of 30+ excellent Firefox add-ons that every web developer and designer should know about.

Link:
http://.../30-firefox-add-ons-for-web-developers-designers/

Better blogger templates

Some new and different blogger templates to give your blog a more unique look.

Link:
http://www.geckoandfly.com/blogspot-templates/

Clearview to replace Highway Gothic

The typeface is the brainchild of Don Meeker, an environmental graphic designer, and James Montalbano, a type designer. They set out to fix a problem with a highway font, and their solution — more than a decade in the making — may end up changing a lot more than just the view from the dashboard. Less than a generation ago, fonts were for the specialist, an esoteric pursuit, what Stanley Morison, the English typographer who helped create Times New Roman in the 1930s, called “a minor technicality of civilized life.” Now, as the idea of branding has claimed a central role in American life, so, too, has the importance and understanding of type. Fonts are image, and image is modern America.

Link:
http://...r=2&oref=slogin&oref=slogin

That's alot of font

80 Beautiful Typefaces For Professional Design is another great article by Smashing Magazine which talks about 80 of the best, in their opinion, fonts to be used by professional designers. What I like the most out of the articles written by Smashing Magazine is their use of screenshots and graphics in the articles. They use a lot of graphics in the articles which means that even if you don't have the time to read the articles you can get something out it just by skimming through it.

Keep up the great work and looking forward to the next article.

Link:
http://...beautiful-fonts-typefaces-for-professional-design/

The Open Source Web Design Toolbox: 100 Tools, Resources, and Template Sources

In fact, the open source model, which began with programmers, has been so successful that it is currently being applied in government, media, education and private business. But despite these new applications, the unique combination of the open source model with the universalism of web design remains one of the ideal applications of open source. This pervasiveness of the open source spirit in web design now means that you can use open source software to design both graphics and your CSS and HTML, and you can also use the dozens of reliable open source code resources or thousands of templates to base your own designs on. In this article we highlight 100 open source web design tools, resources, and templates.

Link:
http://...100-tools-resources-and-template-sources/

Stripe Generator

Another web2.0 graphic, thingy creator. Kinda like the web2.0 logo creator.

Is it useful? Not really. Is it fun to play with? Not at all.

Link:
http://www.stripegenerator.com/

See how a website looks in other browsers

Use one of the websites below to see how a website will render in other browsers. Critical step in designing a website is to ensure that designs renders the same in the major browsers: IE6, IE7, Firefox, Safari and Opera.

IE NetRenderer:
http://ipinfo.info/netrenderer/index.php

Browser Cam:
http://www.browsercam.com/

BrowsrCamp:
http://www.browsrcamp.com/

iCapture:
http://www.danvine.com/icapture/

ieCapture:
http://www.danvine.com/iecapture/

Website page layout templates using CSS

Some great examples of page layouts using CSS as the primary layout method;

CSS Layouts:
http://layouts.ironmyers.com/

Layout Galore:
http://blog.html.it/layoutgala/

Even more layouts:
http://www.thenoodleincident.com/tutorials/box_lesson/boxes.html

If you need a custom designed website then check out my website design services.

Is your Web site 'usable'?

You try one company's Web site. It's plain, but it lists pricing information, the models it services, and its contact information. Then you try another company's site. It makes you sit through a three-minute Flash presentation before letting you explore the site. (There's a "skip this intro" button at the top right, but the button is camouflaged.) And, instead of getting pricing information, you have to fill out a form and wait for a salesperson to call.

With probably millions of websites competing for the same thing your website has to be as easy as possible on the user. Make it confusing, too difficult or too many clicks to get around and your users will move on.

Link:
http://.../online_marketing/is_your_web_site_usable.mspx

How to clean the HTML code from Word

I released another tool that can be used to throw together quick web pages and page elements called Easy HTML Editor. This is a really cool tool for making quick page elements and has a feature that I use and that's the ability to clean the code from MS Word (instructions provided on the page).

Feel free to play around with it and make suggestions for improvements.

Link:
http://www.veign.com/tools/easy-html-editor/

A big thanx to FCKEditor for all their hard work on this amazing component.

New web design book hits the mark for beginners

This is a fantastic book for anyone looking at creating their own website using Microsoft's latest web design application called Expression Web. Expression Web is setting itself up to rival the biggest players in the web design business (like Dreamweaver) and having this book will bring you up to speed in a short period of time.

The reason I like this book is its not the typical 'this is how you use this application' type of book. This book teaches you the proper way to create a website using current and established technologies. What this means for a beginner is not only to you learn Expression Web but you are also getting a strong foundation on building websites. This is important as you grow and gives you knowledge that can be carried to other design applications.

Link:
http://www.amazon.com/o/ASIN/1590598059/...