Read on for details on the upcoming app. Please share your thoughts and feelings about it!

What is Siteframr?

Been in a situation where you have produced a website, but realized you haven’t met the spec due to client error or your own? Been in a situation where emails are going back and forth between you and a client when trying to get concepts approved? This web app could be for you.

Siteframr is a collaborative design tool allowing both staff and clients to communicate effectively ensuring design specs are produced accurately and efficiently, wireframes are understood, and concepts are approved.

Feature list

• Create projects, add users (staff and clients), the usual stuff
• Define a project’s confinements
• Discuss project strategy (goals, objectives etc)
• Define the site structure
• Draw and share wireframes
• Comment on the created wireframes via “footnotes” which can be added anywhere on the drawing
• Clone a wireframe if you want to enhance it
• Combine several wireframes into a storyboard
• Share and comment on design concepts
• Todo’s
• Message area
• Calendar

Pricing?

I’m planning on making this subscription based with a free option for people with few projects. As for the actual cost, I’m open to suggestions. What would you pay for such a tool?

Target release/public beta

Aim is to have everything in place by July. Wish me luck!

Conclusion

So thats Siteframr. Would you find it useful? Would you subscribe? Any features you would like to see? I’m open to all suggestions!

Colour scheme tools

Online color scheme generator 2

http://wellstyled.com/tools/colorscheme2/index-en.html

This is a wonderful tool you can use to make your own colour schemes. You can set up a scheme based on different models (e.g complements, see my colour schemes article).
Another great feature is that you can see your scheme from the perspective of people with colour disabilities; this aids you in finding a scheme that is accessible!

Color Schemer online

http://www.colorschemer.com/online.html

Not as feature packed as ‘color scheme tools’, but can help convert colors from RGB and hex, and shows colors that fit with the selected color.

CSS tools

Flumpcakes css optimiser

http://flumpcakes.co.uk/css/optimiser/

Excellent online tool for optimising and tidying up your CSS files. You simply plug in your css file, and it outputs a cleaner version, and also displays the amount it has cleaned up so you can compare file sizes. The only drawback is that it will remove any hacks you have added to your css file.

Validation

W3C CSS Validator

http://jigsaw.w3.org/css-validator/

This is the bog standard css validator from the W3C. Make sure your code validates, then you can also have a little icon to put on your site to show this!

W3C HTML validator

http://validator.w3.org/

Probably the most useful tool in this listing. Allows you to validate your html code. This is essential for making sure the page will render right, and clearing out bugs.

WDG HTML validator

http://www.htmlhelp.com/tools/validator/

Very similar to the W3C validator.

FEED validator

http://feedvalidator.org/

Validate your RSS feeds to ensure users will have no problems viewing them..

Accessibility checkers

Watchfire

http://webxact.watchfire.com

Validate your WebPages and highlights flaws with the accessibility.

Compatibility testing

Safari test

http://www.snugtech.com/safaritest/

Great tool for testing Mac compatibility. You just add your site url, and the tester renders an image of your site in safari, showing you want mac browsers will see. This tool is also useful for generating full screen page screenshots!

Misc tools

Button maker

http://kalsey.com/tools/buttonmaker/

This tool allows you to create cool little buttons for your site. You can customise the text and colours and output to a file.

Web 2.0 validator

http://web2.0validator.com/

This tool allows you to check how web 2.0 your site is!. Quite entertaining to see the results.

Look in your browsers address bar, see an image? This little icon is called a ‘favicon’ (favorite icon).

They display in most browsers and make your site stand out more, and stand out in their bookmark list!

I want one!

First you have to draw one. You will be aiming to make a favicon in .ico format, that is 16×16 pixels in size.
There are two ways you can do this, 1. make an image and convert it to an icon with some special software, or 2. use an icon editor to make it from scratch.

I will be using a macromedia fireworks and a free converter called, @icon (http://www.towofu.net/soft/e-index.php).

Making the icon

1. First, create a canvas 16×16 pixels big in fireworks/your drawing package.
2. Draw your icon, try to make it fit with your site’s image. If you want a transparent background, make it a solid colour for now (im using bright pink). When finished export it as a .bmp. A method I use for drawing icons is using the pen tool and drawing pixel by pixel, but if your no good with pixels feel free to use shape tools!
3. Open @Icon and goto File>open and find the bmp you just made.
4. We now need to make the background transparent, so click the button that looks like a black silhouette (edit transparency mask).
5. Use the “create mask by colour” tool (colour picker icon) and click the background you want invisible (in our case; pink). Click ok
6. Your icon is now ready to save. Goto File>save as single icon, and save as favicon.ico

Adding it to your page

Just upload the favicon.ico to the directory with your files (best to put it at the root of the site), most browsers will find it automatically when your site is bookmarked, then everyone should see it.

Alternatively you can put some code in the header of your page,
<link rel="shortcut icon" ref="http://www.mydomain.com/myicon.ico"> but I dont tend to bother with that. This code does however allow you to use an icon with a different name, e.g in the code example the icon would be called ‘myicon.ico’.

So there you go, a quick guide to favicons. Go play!