Tutorial: Responsive Design Workflow in Odoo

Snippet Development With Pen and Paper, Prototyping and Ghostlab 2

Florian Fischer



Nowadays professional websites need to be developed responsively. The right workflow is important, to get a unified development process. This is why first we are working with hand drawn sketches which we then transfer into an interactive prototype in Webflow. After we get the go from the customer we develop the snippet for the odoo CMS. For that we are using Grunt for automatical Less compilation and Ghostlab 2 to keep the overview over all devices at the same time.

Idea Development


To create a responsive design I chose a small start page for a shop as an example. My imaginary customer wants a design that leaves enough room for the beautiful pictures to shine and gives easy access to the rest of the shop at the same time. 

So first I start out to sketch my ideas using pen and paper. The big advantage using pen and paper is the speed. Without wasting too much time I can experiment with ideas and discard them if they are not working. Hand drawn sketches on the other hand are not as visually pleasing and are not transferring the same detailed knowledge as high fidelity mockups in a graphic tool.

Odoo CMS - a big picture

A first design of my snippet

Nothing is better than pen and paper for fast visualization of ideas.

Prototyping in Webflow


Webflow is an incredibly useful tool to transfer ideas fast into working prototypes. Since pages are created quite fast by using drag and drop the amount of time spent is not too big. Furthermore all designs can be adapted for Tablet and Mobile. This way I can test the user experience on real devices. All prototypes can be hosted in just a click so I can make them available to my customers over the web just by sending a link. 

Odoo image and text block
Odoo image and text block

Drag and Drop Magic

The grid system is based on Bootstrap, which is used in odoo v8. Since I can export all the code from Webflow I could reuse quite a lot of CSS. Another advantage is the fast detection of technical limitations to designs which would not be obvious in static mockups. You can find my prototype of the snippet  >> here << .

Odoo Implementation


Since odoo has a dynamic website builder it is a good idea to avoid harcoding designsin the XML views but instead create Snippets for each content element. The user or customer can then build their website by dragging and dropping the custom snippets in the website builder. This has a lot of advantages. First of all the code is reusable since we can just drag and drop the elements onto the page and fill them with content and adapt them. This idea is related to object oriented programming where we try to modularise code into unites that don't interfer with one another. By using snippets we are using encapsulated pieces of code that are ordered by functionality and content. 

Using snippets also maximizes the advantages of the webiste builder. Users without a technical background can easily build the website in odoo. The responsibility of the usability of those snippets lies with us frontend devs. This means all elements need to work frictionless in all environments and with all possible content. This is a challenge since we never know what content is going to be used with our snippets.  To ensure the best possible outcome we are following a strict responsive development process.

Odoo CMS - a big picture

Building the snippet in odoo

Building the snippet in odoo does not take too long since the code structure is already there from webflow. The pictures are just placeholders to show that the user can adapt all of the content.

css Development with Grunt


So far we at Bloopark have worked with the very popular preprocessor Sass. But since in the next version of odoo everything is written in Less we have already transferred to this preprocessor which is very similar to Sass. To compile the Less files to CSS we are using the taskrunner Grunt which is built with Node.js. To get familiar with both tools you can checkout the Grunt Documentation and the Readme for the Less Task. Furthermore you can download our Gruntfile for the Less and the Watch task >> here <<. The Watch task is incredibly useful since Grunt automatically detects changes in the Less files and instantly compiles these to CSS.

Responsive development with Ghostlab 2


To develop snippets unified and synchronised on all devices Ghostlab is an incredibly useful tool. Ghostlab creates a virtual server which we can access from all devices at the same time as long as they are in the same network. At the same time the software is synchronising events between all devices. E.g. scrolling a page on desktop will scroll to the same position on my iPhone. Furthermore Ghostlab comes with compilers for Sass, Less, Stylus and many more. After a quick performance test though I found that our Grunt process is slightly faster. Another cool feature is the automated file monitoring. After specifying the path to the file Ghostlab automatically reloads the pages on all devices after my CSS outpot from Grunt changes.

So far I have been writing about the smaller but still useful features of Ghostlab. But the coolest thing ever about Ghostlab 2 are the integrated dev tools. Every change I make in the inspector is automatically adapted to all devices. I can see instantly how changing e.g. a padding on desktop is affecting the mobile version of my page. Isn't that awesome?

Odoo CMS - a big picture

World class dev tools by Vanamco

Ghostlab 2 makes responsive development extremely convin

Disadvantages of GHOSTLAB 2


Of course not everything can be perfect. For example the Ghostlab inspector is not integrated in the context menu. This means that anytime I'm looking for an element in the DOM I have to look for it by hand while I can jump straight to it in the Chrome dev tools. Hopefully we will have a Chrome extension in the near future. Furthermore Ghostlab 2 seems to be very memory intensive. I found that there are often delays when traversing the DOM. Another disadvantage is that the odoo website builder is not working a 100% with the Ghostlab server. This might be due to an overlay of Javascript funtionality. 

But these are just small things. Overall Ghostlab 2 is an incredibly powerful tool for responsive development. After I finished my snippet development I am sending my imaginary customer the link to my custom >> snippet on GitHub <<. He can now check it out, install it and fill it with his own content. 


Webflow Prototype

Grunt Documentation

Less Task for Grunt

Addon for Odoo

  • Jens Holzeon 09/08/2015 18:36:23

    Hi Florian, i think it is time for a post, maybe together with mercedes, to talk about our current design & prototyping workflow directly in odoo.