We started this campaign on our development blog CSS Gallery. and we hope more and more webdesign companies will do the same.

For a start we wrote  Common sense accessibility 2.0, a set of tips and tricks of accessibility elements that must be included in any website. How we use them, how they should or should not be included.  As usual, anyone’s experience and ideas are most welcomed.

The second post is much more practical and it offers the HTML/PHP/CSS code to implement an accessible contact form. The code is available for download but the it can also be tested and studied on our development subdomain.

We intend to continue writing about this subject and add more posts to this category. Also your opinions, ideas and suggestions are  welcomed in our intent to bring the accessibility guidelines closer to the web developer.

Now Belle Maison has a new improved menu with usability elements, a submenu, a bigger number of listed boxes in the sidebar and a lightbox type gallery for a better exposal of the images.  We also included a number of Google-friendly changes and we hope the new re-coding will reflect in the site’s ranking.

We hope you’ll enjoy browsing the new Belle Maison.

Everything changed when we finished coding our own product – Kroppr image cropping tool – and we had to promote it. In this case, we found ourseves in the other boat: we were the clients, faced with the difficult task of presenting our product to the world.

We knew how to use the product and its features and for us everything was crystal clear: all we had to do was explain it to our visitors…nooooot an easy task. The Mootools developer wanted a very engineer-like approach with simple listed explanations and FAQs while the frontend developer wanted something more visual. We had the same goal, make the visitor understand the product at the first glance, cause we know that nobody has time to read the FAQ/help pages unless he/she’s in trouble and nobody wants to read explanation. We all want to know everything as a first glance.

So what’s more suitable for that than a picture or a demo? What about the two of them combined? The result was to place the demo on the homepage, centered so it can take up the most important area of the page. And then transform the engineer-like written explanations in simple actions that can be done upon the script: rotate here, slide here, press here to cut, save. This way the visitors can play with the script and learn how to use it right from the start.

We managed to create an interface that is self explanatory and intuitive – and I think we were right, because nobody complained about not understanding our script or needing extra help to teach other users how to use it.

This version brings next improvements:
1. Now we have PNG and GIF support, also keeping the JPG
2. We fixed a bug related to correct selection of the image processing component present on the server.
3. We changed the order of the image processing components – now first priority has ImageMagick.
4. We removed E_NOTICE form the error reporting in php.

The new working script can be found on the Kroppr site.

Unlike other scripts, Kroppr is able to ROTATE, zoom and move the image in the real time without using plugins – such as flash or java. The cropping is done after the user is satisfied with the settings. This way, the load put on the server is minimised and also the visitor’s experience.

The installation is also very simple – add a script tag in the header’s page and a class to the image that must be cropped.

More info on the Kroppr page.

Here is a nice demo:

Using only the mouse, the scroll wheel will zoom-in / zoom-out in the point you desire to see.
When zoomed in, the image can be dragged to see hidden parts of it.

The script is unobtrusive and requires only to set the attribute class="moozoom".
Anyway, this will not prevent you to add your own classes to the image, so class="moozoom my_class" will still work.

To use the class, you have to add mootools framework to your page ( version 1.11 ) and moozoom.js, both available for download.

Demo:

Demo page is here

Usage:
in your header zone add

<script type="text/javascript" src="js_demo/mootools.js"></script>
<script type="text/javascript" src="js_demo/moozoom.js"></script>

this assuming the mootools.js and moozoom.js are in same folder on server, add class="moozoom" to the image you want to be zoomable

<img src="flower.jpg" class="moozoom" />

and you are done.

Browsers:
We tested the class in

Windows

• IE6 – for IE6 you should add the next code in the header zone of your page in order to remove the image toolbar, and avoid some ugly flickering that this will provoke on zooming:
  <meta http-equiv="imagetoolbar" content="no">
• IE7
• Opera 9.50
• Safari 3.0.3
• Firefox 2.0.0.14

Os X

• Firefox 3.0
• Firefox 2.0.0.14
• Safari 3.11
• Opera 9.27
• Camino 1.6.1

To do:

We will try as soon as possible to make the class available for mootools v1.2, then add some enhancements to it.

Bugs:

Feel free to report bugs when you encounter them, posting as comments here.

Our new look is announcing some more changes – we are growing and will reorient ourselves to developing e-commerce websites, more usable and user-oriented content management systems and useful Mootools/Javascript scripts for webdevelopers.

Thank you for visiting our site – remember to come back soon to keep in touch with our releases.

For now CSS Gallery is covering only 3 area: CSS, JavaScript and design – but Php and Ajax categories are about to be created in the near future.

We encourage you to send us your feedback regarding CSS Gallery and we will keep you posted with our future releases.