What are the different types of user interface prototyping, what are their advantages and when to use each of them?

When dealing with User Experience and user interfaces you often have to do with prototyping an idea or a concept, before going to the implementation of it. Doing this way you want to get a first impression of what you are about to implement. Prototyping can be divided in two categories:

  1. Low fidelity prototyping: You create sketches, also known as wireframes, of the user interface you want to program. For creating these sketches you use either a pen and a paper or one of the many available software to draw the sketches digitally. This software can either be a professional one (Photoshop) or a more pen & paper like, like Balsamiq.

  2. High fidelity prototyping: You implement a small part of the future application with a limited number of features. The application is testable and you can navigate from the one page to the other. Here the business logic plays a secondary role, the user interface the preliminary. A high fidelity prototype could also be considered a collection of Photoshop designs, each representing a page of your application, that are combined together to build a fake navigation from the page to the other.

Read the complete article

How to avoid wrong values in calc() rule inside a less file when minifying your CSS files?

The CSS calc rule helps you to do mathematical calculations in your CSS files. For example you could calculate the height of a div element based on a set of less or sass variables. But what happens to the mathematical expressions inside the calc rule when your code gets minified for production? The less engine will calculate the expression inside calc(…) during the minification process and thus calc will contain a wrong value.

Read the complete article

The correct way to do word wrapping (breaking) by using CSS rules

You often have to deal with words that are too long and they possible do not fit as a whole inside an HTML element. In such cases you have to break the word and put the part that does not fit in the next line. On the other side, you do not want to always fill the lines of an HTML element with text, which means that you do not want to break every single word, but instead you only want to break the words that are wider than the width of the containing HTML element.

Read the complete article

How to correctly combine the font and the line-height CSS rules in an HTML-element?

When using the font rule together with the line-height rule, there is something that you have to pay attention to, if you want to be sure that the combination of the two rules works as intended.

To start with, the font property combines the font-family, the font-size, the font-weight and the line-height in one command. But what happens if you do not set the line-height inside the font property but use the line-height rule explicitly?

Read the complete article

Get Web Essentials to work with TypeScript in Visual Studio 2013

When you install the Web Essentials plugin to your Visual Studio 2013 installation it is very probable that the next time you open a TypeScript project in Visual Studio the program will freeze and you cannot do any further action inside Visual Studio.

Read the complete article