Our clients often asks us what is the difference. So here is a short explanation.

Canvas and WebGL are both part of the HTML5 standard.

WebGL is an API for rendering interactive 3D graphics. It provides a special language (similar to C++) which you use to describe a 3D scene (objects, light sources, camera position, textures, etc.). With that language you can describe things like “a sphere with marble texture in the centre of the scene”, “a red directional light pointing from the corner of the scene to the centre” etc.

Canvas is an HTML tag which appears in the browser as a rectangular area on the page. It’s up to you what you show in the area. There is Canvas 2D API for that. You do things like “draw a 1px blue line from 0,0 to 100,200” or "draw a red circle at position 20,30” or "fill canvas with black colour” or “draw image XYZ at position 10,10” etc. That’s what we use for HTML5 banners.

Eventually you can combine both for 3D graphics. You render the 3D scene defined by WebGL in the context of the Canvas. Canvas behave as any other HTML element. You can define it’s position on the page, dimensions and even make it responsive. Each HTML5 banner, for instance, is a separate Canvas element.

I've found that it's hard to explain to my clients that most of our designs are timeless and they don't follow the trends. They are usually asking for some decorations and they don't concentrate on the content. This article might help my frustration.

http://www.usabilitypost.com/2011/03/17/redesign-disease/

Think of the water container as content, and water as the design. It fits perfectly, and adapts to all changes. Water design is timeless because it doesn’t try to make its mark, it simply embodies its content. It’s beautiful exactly because it expresses function with such seeming ease.

This article will describe how to build any layout from a combination of two columns.

Building layout in web design is considered to be the hardest thing. The most popular method at the moment seems to be the grid layout. It's not really natural. In my opinion it's something like using a bitmap graphic when you should be using a vector graphic.

To understand this article you do not need to have any knowledge of HTML, CSS, or any Adobe products. You only need to switch off everything you know about web design and try to look at it as normal human being. Tons of material has been written about how to create 2 or 3 column layout for your website, like the "holy grail" articles or grid design.

The key thing is to use nested sets of two column layouts, i.e. Fibonacci number based set below. Insert the same code into [CONTAINER.1] or [CONTAINER.2] recursively and it does the trick.

Fibonacci number based layouts

Examples how to build different 1, 2, 3, 4, 5 and more columns layouts using just Fibonacci 2 columns are on Onxshop documentation page.

* The ratio of consecutive numbers in the Fibonacci is close to 1.618, the Golden Ratio - convergence of Fibonacci number in infinity. Fibonacci number for 3:5 would be 1:1.666, Golden Ration is 1:1.618

** 1.666:1, convergence to golden ratio, 61.8/38.2 (Golden ratio 1.618:1), convergence of Fibonacci number