Entries Tagged 'Web design' ↓

We said we would roll out articles about our (Rails) Content Management System project and this is one of the very first, exposing our difficulties and decisions about deploying an usable, yet fancy charting functionality.

We won’t spoil the surprise about the name of the project, yet.

The Quest

Finding a free, open source and (if possible) BSD or LGPL licensed library implementing chart and graphing functionality. We want to avoid licensing hell as much as we want to avoid bloated interfaces that obscure the statistical data more than abstracting it properly.

Requirements

1. Capable of displaying technically complex data sets.
2. Good performance: it must escalate well! (as much as we designed our product to do so).
   1. Efficient cache and server-side solution or browser supported implementation (ie. SVG based).
3. Non-bloated, elegant code: we want to modify it and understand what’s going on.
4. Usable, simplistic interface (API): we hate working with an over complicated API.
5. Nice, fancy, yet-not overly design-ish graphs:
   1. Experience shows that complicated graphs do nothing to improve the visibility of statistical data: better divide by many, than squeeze many in a few.
   2. Simple graphs and clean shapes are far more smooth and pleasing to the eye (Isn’t the whole rounded corner spice about this anyway?).
   3. The more complex the data-set, the more simple a graph should be. The density of data displayed will be high and adding unnecessary fuss will just get in way of interpreting it properly.
6. Non-hosted solution: we can’t afford the risk of exposing customer or sensitive information to external hosts and services. We could do exceptions for publicly obtained data, but definitely not the internal information.

Continue reading →

We’ve been coming across different annoyances in our quest of deploying YUI into one of our main products (a few more articles talking about its development coming soon), the Ruby on Rails content management system behind our almost-ready customer portal and corporate site. The problem comes mainly from the coexistence of our custom CSS and JavaScript code, and the YUI specific style-sheets and library files.

• TabView control is rendering the tabs with an incorrect height: possibly caused by style conflicts, but we have confirmed this is not the case (at least our CSS is consistent and not conflicting with YUI).
• Editor component is unable to adjust its size to a sensible default (in other words: it seems unable to match approximately the old size of the barebones textarea element).
• YUILoader is not liking our layout and failed to expose the YAHOO.widget objects properly. Thus we couldn’t make any real use of it without resorting to Event driven functions and slow transitions (as unpleasing as watching a textarea transform into the Editor UI in “real time” ).

The problems are really bugging us and we have considered moving to fully custom code, even if that means delaying the development of some other features that might be of higher priority. Hopefully we will solve the issues soon and keep YUI in place, since the functionality is really complete.

Yahoo! released yesterday a new version of the feature-rich, BSD licensed YUI (the Yahoo! User Interface library) implementing several improvements, some new controls and other innovative functionality. The components that quickly turned heads over here, are namely:

• The charts control: finally we get those infamous pie charts for free (requires Flash like most of the web chart and graphing tools, but its quality is certainly higher than some of the competitors)
• Improved performance for the rich text editor: apparently now you can select its components in a fine-grained manner, avoiding load of unnecessary functions
• New fanciness for the button control…
• Hell of a load of fixes, ranging from browser specific issues and compatibility changes

Their change-log contains a complete overview of the fixes and the new features. We are integrating this new release for the (Ruby on Rails powered) content management system engine we have developed for our corporate site, and recommend YUI for any serious web developer seeking a library providing solid controls and functionality. Besides, it comes with no strings attached

One of the most important features of our content management system is its usability and careful design. We faced a complicated issue with forms: it’s not that uncommon to use tables for a fluid layout, easy to customize using CSS. The typical table-less solution involves using floating labels to the left, with fixed width, and input fields to the right. We’ve seen designs where a help text could be neatly displayed right next to the input, using tables.

Always perform server-side validation and don’t require JavaScript in forms!

This allows support in possibly every web browser out there, without compatibility issues. The code looks clean too.Another feature that boosts the usability of forms is live data input validation. For security reasons, you should never rely on client-side validation, but it comes as an extremely useful aid for showing the user if there’s anything wrongly formatted that requires fixing, before wasting time submitting the form.

We came across LiveValidation (quite an appropriate name ), a neat Prototype-compatible JavaScript library for automating data validation. It’s free (MIT license, for personal and commercial projects) and compatible with every major browser we’ve tested.

Continue reading →