Great web design requires every bit as much imagination and creativity as graphic design. But while graphic designers get a (relatively) easy ride with the drag-and-drop tools of Photoshop, web designers, essentially, still have to do it the hard way with from-scratch coding. Hard to believe, I know, given that it’s now 2013, but this archaic method of design still reigns supreme.
Code, for the time being, at least, is still a necessity when designing a website. Wouldn’t it make things easier, though, if code-based styling were a little more intuitive.
That is the aim of bluePen, a live CSS editor, which has simple styling controls for each element on your site. But does this site add-on really save time, or is it yet another failed attempt to streamline web design?
Like the article? You should subscribe and follow us on twitter.
Get Started
The process of installing bluePen is a simple one – upload the PHP package to your webhost, insert the bluePen script into your HTML, and you’re ready to start styling.
My initial impression of the bluePen editing environment was that I had entered a slightly worse-for-wear version of Photoshop. The tool palette, a constant down the left-hand side of the screen, even mimics Adobe’s photo-editing wonder, and the on-screen rulers simply add to the effect.
bluePen’s interface has a whiff of Photoshop about it
In reality, though, the significant number of CSS editing controls on offer are quite neatly and logically ordered. Also, quite quickly, you work out that the tool palette mostly provides easy-access links to areas of the main panel.
Editing the CSS
In bluePen’s world, the mouse is king, and clicking is the way forward. The elements of your site are selected for editing with a click, and the entirety of the CSS editing suite is based around drop-down menus of a special kind (more on that later).
The majority of the action in bluePen goes on in the main panel, which is situated on the right by default. Naturally, then, it is here we find the fine array of CSS editing controls on offer.
Whenever you click-select a part of your website, bluePen’s first reaction is to provide you with an overview of the computed CSS styles. This works in much the same way as the Inspect Element/View Source option does in web browsers, displaying both the active and overruled lines of CSS, and giving you the option to delete individual lines of CSS as you see fit.
The overview shows the current CSS properties
Next up are the font and text options. Virtually every CSS text option in the book can be found here, from text-indent to letter-spacing. Notably, though, bluePen automatically scoops up any Google Fonts you are importing, and makes all of them selectable in the font-family drop-down menu, along with a list of basic web fonts.
The font menu is particularly useful
This is also where you can get a first look at the user-friendly controls described by bluePen’s website as “2D Scrollers,” but they can most accurately be described as a cross between a dropdown menu and a text box. They allow you to enter font-size (for example) manually, or, alternatively, you can click and drag upwards or downwards to increase or reduce the value.
Next are the Box properties, which apply to divs, images and any other HTML tags which have a specified size. Again, bluePen includes nearly every available CSS adjustment imaginable, including height, width, margins, borders, padding and offset. There’s also a handy background option here; after selecting an image from bluePen’s File browser (found in the main panel above the CSS options), clicking the Set to BG button will instantly set the image as the background of your selected box.
There are plenty of box properties which can be easily adjusted, too
Then we have the positioning and background properties of your specified element. Again, everything from float, to z-index, to cursor, is available as a clickable adjustment.
The positioning and background controls are lumped together
There are also a few extras built into the bluePen system. Multiple on-screen rulers can be called up from the tool palette, and bluePen’s method of saving your edits is also commendable – all edits are saved temporarily, but your CSS file will only be changed when you press the save button.
Usability
It is clearly the intention of bluePen’s developers, blueBros, to make website-styling not just easier, but quicker too. Unfortunately, I found that, on more than one occasion, bluePen suffered bad slowdown or complete freeze.
bluePen also suffers from controls which are not obvious for the first-time user, and a lack of documentation to boot. To give a personal example, I accidentally created too many of the rulers, in part due to the aforementioned slowdown, and tried every control I could find in an attempt to delete the unwanted clutter. Pure chance led me to drag a ruler to the edge of the screen, and much to my surprise, the ruler was removed. It would be a neat way of deleting rulers if there was anything telling you how it works.
Argh! It took me a while to work out how to delete rulers
Conclusion
Despite bluePen‘s evident competence, it is a hard offering to assess. Why? Because I’m not sure what it wants to be, and I’m not entirely sure it knows either.
Those who can code CSS might appreciate the click-and-edit workflow, which may be quicker than searching through a long CSS file. Having said that, it is still likely that you will want to write some code manually, and in some cases, the dropdown menus will slow you down.
For the non-coder, though, many of these controls will be unintelligible – z-index and overflow simply do not mean anything to those who want simple editing.
The depth of the total options on offer in bluePen is mightily impressive, though, and the up/down click-and-drag controls make for easy adjustment. Additionally, all edits made in bluePen show up in real time for WYSIWYG editing – a clear advantage when speed is of the essence.
In summary, I feel that bluePen’s best use is for the CSS-knowledgeable who want to make quick tweaks to their style, and for that purpose, bluePen is most definitely worth a download.