4 min.
The revolution of interface frameworks
1L’art de la gestion de projet2Un projet à succès commence par une bonne gouvernance3Cascade, agilité, demandes de changement?

The revolution of interface frameworks

  • TECHNICAL LEVEL
Client experience & UX

« The need for most people to create front-end code may not even exist in the not-so-distant future. »  Zurb, créateur du cadriciel Foundation.

031912_1601_Larvolution1The multiplication of platforms, and with it the need for responsive sites, complicates the life of web developers. Fortunately, for the past few months, a small revolution has been taking place.

Interface frameworks can radically simplify the production of user interfaces.

 

WHAT IS A FRAMEWORK?

 

A framework is a coherent set of software components. This abstracts the most technical level of coding and thus increases the productivity of web developers.


Two types of framework


There are actually two types of frameworks: back-end frameworks and interface frameworks.

031912_1601_Larvolution2

We already knew the frameworks on the back-end side (Rails, Django, Symfony, Zend, CodeIgniter). Essential, they make it possible to dramatically accelerate the programming of the logical component of an application, without however affecting the presentation of the user interface.

On the interface side, we already took advantage of the jQuery JavaScript framework and all the compatible plug-ins, but that was patchwork; it was about taking plugins right and left and trying to make everything work together.

Some interface frameworks particularly stand out for the wide spectrum of needs they cover: Bootstrap from Twitter and Foundation from Zurb. Both allow for responsive layout, among other things. They are also compatible with 99% of web browsers in circulation (all except Internet Explorer 6).

Let's look at Bootstrap, the more popular of the two.

 

BOOTSTRAP, FROM TWITTER

031912_1601_Larvolution4Bootstrap was originally a library of all the interface elements found on applications from the Twitter company. You will recognize the Twitter.com design there.

Mark Otto, one of the two architects of this framework, says he turned Bootstrap into an open source project to "help awesome people make awesome shit". Thousands of developers have shown interest. To date, over 24,000 developers subscribe to Bootstrap updates on GitHub, the collaborative source code sharing site.

This framework makes it possible to create the interface of a site or an application with an elegant interface, with minimal effort. Bootstrap includes all the most common interface elements, such as navigation, buttons, labels, tables, alerts, progress bars, forms, etc. It is in a way a web style guide directly usable by integrators.

 

WHY USE A FRAMEWORK LIKE BOOTSTRAP?

 

1. TO ENJOY EXCELLENT COMPATIBILITY WITH OLD BROWSERS, FOR FREE

031912_1601_Larvolution5Ensuring compatibility with all browsers is a nightmare for integrators. With Bootstrap, it's already done. (Internet Explorer 7 or better)

 

2. NOT TO LEAVE DETAILS TO CHANCE

031912_1601_Larvolution6

The devil is in the details, and by using this framework, all the details are already polished. These are details that, for reasons of time or budget, are often overlooked.

 

3. TO HAVE A SITE OR AN APPLICATION THAT WILL AGE WELL

With hundreds of developers working to debug and improve the framework's code, it's reasonable to expect that your site will perform well in the long run, with reduced maintenance costs.

 

4. TO DO MORE WITH LESS

By not reinventing the wheel, the use of a framework allows, in theory, to save significant efforts in terms of integration. We can therefore invest the effort elsewhere.

 

5. 031912_1601_Larvolution3TO HAVE AN ADAPTIVE SITE WITH LITTLE EFFORT

This type of layout allows, with little effort, to obtain a viewing adapted to all platforms. Therefore, we can avoid having to develop a mobile site.

 

WILL FRAMEWORKS REDUCE THE NEED FOR WEB ERGONOMICS?

 

maquette-fait-mainThe heart of the work of the web ergonomist remains the same. However, the ergonomist must sometimes devote time to detecting ergonomic problems stemming from details in the integration. Several common issues can now be avoided with interface frameworks.

On the other hand, an adaptive layout represents additional work for the ergonomist. Indeed, it must determine the optimal layout according to the different screen resolutions.

So, in the end, the investment in ergonomics will be just as necessary as before the arrival of frameworks.

 

IS IT DIFFICULT TO CREATE A SITE WITH AN ORIGINAL DESIGN USING A FRAMEWORK?

 

logo_LESS1Not necessarily. It is possible to modify the graphical appearance of Boostrap without modifying the code of the framework thanks to LESS, a CSS preprocessor. You can for example, in a single line, change the rounding of the corners of all the buttons.

Using this preprocessor allows developers to customize the appearance of the interface, while still being subscribed to Bootstrap updates.

However, it is true that to a trained eye, the appearance of a site created with Bootstrap could show family resemblances with Twitter. However, this is not negative for the user experience. Indeed, the fact that the interface is familiar to the Internet user can undoubtedly reassure him.