Espresso, html editor for designers

Posted by Benedikte Vanderweeën on 02/02/2011

Months ago, i bought a copy of Espresso, a html editor designed and made by Macrabbit, a Belgian company. Macrabbit is well-known for their award winning CSS application CSSEdit, a helpful application to help you visually make up your designs with CSS.

A week ago, i opened Espresso after not having used it for a while and decided to give it another try. The reason for that was that i asked a question on Twitter where designers store their code snippets. I usually do this in an application called Code Collector Pro. After i got a few answers, i decided to give Espresso another go and till today, i'm using it every day. I dug a bit deeper into the app and found out that it is a great and clever editor, especially for designers, not only beautifully designed but also fast and effective.

Projects

making new projects

After the install, when launching Espresso, you'll see the new projects window (shortcut Cmd + Shift + 1).

Projects in Espresso

What's cool about the projects is the fact that every project is adaptable in the way you like, the map icon is adjustable, you can put your clients logo onto the map and give the map another color, this way you can give your projects a personal touch, very nice.

i did the exercise with my own company logo and one client's logo, it's simple, just create a 256 x 256 pixels icon, save as a transparent PNG in black-white and put it on one of your projects maps.

Customize your projects folders in Espresso

Integrated FTP tool

setting up your server

Adjustable toolbar in Espresso

After adding a new project, you will see the dialog appear for the setup of your server. This integrated FTP tool is very effective as it has some nice build-in features like the ability to:

Browse remote server

Update manually from local server to the remote server

Merge files manually from local server to remote server

Mirror the 2 servers and publish your files manually

While you're coding, you also have the ability (with the on/off button) to Quick Publish your changes just by saving your document.

Adjustable toolbar in Espresso

Interface & Workspace

Files and Workspace

Starting a new project will result in making new folders and files, this can be done in the Files left bar. Above the File overview, you will see the Workspace, here are all the files that you have opened. Preview your files by clicking the Eye icon (shortcut Alt + Cmd + P).

The right Navigator pane is super handy. You have an overview of the overall HTML document structure. You're able to expand and contract the list just by simple clicking the tag. You see where images are placed in your document, you can view the comments, the CSS named groups etc.

Adjust the toolbar by adding or removing icons and functionalities

Adjustable toolbar in Espresso

Sugars

extensions to the program

Extend the program possibilities with Sugars. Sugars are Espresso plugins, little bits of extra functionalities. These are developed by 3rd-party developers. Check the sugar page on the Macrabbit site to see functionalities. You can also choose different themes.