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.
Flexibility
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! :)