The making of TSW WebCoder 2013 part 11 – The Ribbon interface

October 24, 2012

With Microsoft pushing their Ribbon interface more and more, I decided to look into it for WebCoder 2013. I have used the Ribbon interface in the Office suite quite a bit, but I wasn't sure how it would work out for an application like WebCoder. However, after having implemented it and worked with it for many months, I'm actually very pleased! It has allowed me to get more of the features out in the open, instead of hiding them in the small menus, at the same time giving bigger buttons that are easier to spot and hit with the mouse. It obviously costs a few more pixels in the top of the screen, but it's not that much and of course you still have the option to go into full screen, where the Ribbon is hidden for the maximum amount of working space.

Here's a screenshot of the Home tab of the Ribbon in WebCoder 2013, which consists of all the things you will need the most (click for full version):


Please notice: The layout is not final - it might very well be changed during the beta phase, due to overall changes and user feedback.


One of the things I enjoy the most about the Ribbon, besides the great look and easy access, is it's flexibility. Here's the same Ribbon with the same buttons, but taking up 330 pixels less than the previous screenshot (click for full version):


And it can become even smaller than that, if your horizontal resolution is very low or if you just prefer to work in a small window.

It doesn't resize the same way in the height, but if you need the space there, the Ribbon can be minimized using the ^ button you see on the screenshot. It will then look like this:


In the minimized mode, you simply click the tab that you want access to and it will fold out and look like on the first two screenshots. When you click the desired button, it folds back in, giving you lots of workspace.

I hope this gives you a good impression of how WebCoder looks with the new Ribbon interface, but to get the full picture, you obviously need a full screenshot. I will finally include just that in the next post - stay tuned! :)

Kasper (TSW) @ 9:24 am in TSW,WebCoder

7 Responses to “The making of TSW WebCoder 2013 part 11 – The Ribbon interface”

  1. John says:

    Do you have an old copy of Homesite. It had a feature called the quickbar, which was sort of a halfway house between toolbars and the ribbon, in that you could drag and drop toolbars onto the quickbar.

    It’s probably seen to best effect in version 4.5 – the final Allaire badged version, before Macromedia lost a patent case with Adobe over “floating pallettes”

  2. Kasper (TSW) says:

    Hi John,

    No I’m afraid I don’t have an old copy of HomeSite anymore :). I was very inspired by HomeSite in the early days of WebCoder though – it was a great editor!

    Is your post just a walk down memory lane or is there a feature wish or an opinion about the Ribbon hidden in it somewhere? :)

  3. John says:

    No specific feature wish, just an observation after reading your blog that I think HomeSite found a way of doing what you seem to be trying to achieve with the ribbon.

    For what it’s worth I think WebCoder feels very much like the heir to HomeSite.

  4. Kasper (TSW) says:

    Thank you very much for the kind words, John, I really appreciate that :)

  5. Martin Bonde says:

    Nice feature ;-)
    I’m considering upgrading to WebCoder 2010 from my old WebCoder PRO, but will there be some kind of discount for the 2013 edition then it comes out?

    Stupid to pay for the 2010 edition then the next one is just around the corner ;-)

  6. Kasper (TSW) says:

    Hi Martin,

    Yes, there definitely will be a discount for existing users, once WebCoder 2013 has been released. It’s usually around 25% :)

    Whether or not to upgrade now is obviously up to you, but the final version is still several months away. If you have purchased a previous version of WebCoder, even one of the old versions, I can probably offer you an upgrade discount for WebCoder 2010 as well. If you’re interested, just send me an e-mail through the contact form :)

Leave a Reply