Canvas, WebGL and HTML5 banners

Thursday 12 January 2017 by Hugo Dvorak

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.


Responsive Layout

Thursday 7 February 2013 by Norbert

Our advice on approach for currently so called "mobile optimisation" is to use responsive technique for different screen size, not separate domains for different device. That's the simple rule we always follow.

Using a separate domain option should be kept for optimization of the content to different regions.

Yes, we do responsive layout and it's adaptive and fluid. Our Onxshop CMS is fully responsive in the backend and all our clients now have the option to turn their websites into responsive by simply adding this line into their CSS:

@import url(/share/css/default/theme_layout/responsive.css);

We have also built layout examples and it's now default template on http://cloud.onxshop.com/

Go there an have a try! Happy windows resizing!


Timeless Web Design

Wednesday 23 March 2011 by Norbert Laposa

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.


Lexicon Business English

Monday 18 October 2010 by Norbert Laposa

Our original design commissioned by Lexicon Business English (Hong Kong). It's not exactly following our strategy not to use any decoration in our design, but still at the end a nice example of 90's boxed web design style overusing sterile stock photography, as we call it "plastic people".

Lexicon Business English

Lexicon Business English - Phil Kendrick - Design by Laposa

Lexicon Business English - Phil Kendrick - Design by Laposa


Two columns for everything

Wednesday 21 July 2010 by Norbert Laposa

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.

<div class="twoColumnLayout {NODE.css_class}">
    <div class="layoutWrapper">
        <div class="top"><span></span></div>
        <div class="layoutContent">
            <div class="layoutContentWrapper">
                <h2 class="layoutTitle">{NODE.title|htmlspecialchars}</h2>
                <div class="layoutColumnOne">
                    <div class="layoutColumnWrapper">
                        [CONTAINER.1]
                    </div>
                </div>
                <div class="layoutColumnTwo">
                    <div class="layoutColumnWrapper">
                        [CONTAINER.2]
                    </div>
                </div>
            </div>
        </div>
        <div class="bottom"><span></span></div>
    </div>
</div>

 

Fibonacci number based layouts

Class Name layoutColumnOne layoutColumnTwo
fibonacci-1-5 Fibonacci 1/5 ratio 16.6% 83.3%
fibonacci-1-3 Fibonacci 1/3 ratio  25% 75%
fibonacci-2-5 Fibonacci 2/5 ratio 28.6% 71.4%
fibonacci-1-2 Fibonacci 1/2 ratio 33% 66%
fibonacci-3-5 Fibonacci 3/5 ratio 38.2% 61.8%
rounded to Golden Ratio *
fibonacci-1-1 Fibonacci 1/1 ratio 50% 50%
fibonacci-5-3 Fibonacci 5/3 ratio 61.8% 38.2%
rounded to Golden Ratio **
fibonacci-2-1 Fibonacci 2/1 ratio 66% 33%
fibonacci-5-2 Fibonacci 5/2 ratio 71.4% 28.6%
fibonacci-3-1 Fibonacci 3/1 ratio 75% 25%
fibonacci-5-1 Fibonacci 5/1 ratio 83.3% 16.6%

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


Typical web design process

Wednesday 14 July 2010 by Norbert Laposa

This article describes our ideal process during web site development.

Setup goals

Describe the bits of information you want to include. 

Create functional specification

This is the technical bit, you will need to get this done from a web design company, i.e. using our consultancy service. Here you should define page structure - information architecture.

Write your content

This is the creative bit. After your functional specification is finished and you know what page titles will be, then you can start to write text and compile some images and photographs.

Define brand and buy domain name

This is the artistic bit, especially choosing your brand colour and drawing logo. Buying domain name is not really an art, but choosing the right brand name / domain name is.

Create wireframes/prototype directly in CMS

This is the construction bit. This will produce browsable pages with logical layout focusing on usability. Best practise is to complete this directly in your favourite CMS i.e. Typo3 or Onxshop. You should use actual content, not just lorem ipsum.

Apply branding

This a the graphics designer bit. The challenge here is to format the wireframes/prototype in an aesthetically pleasing way. 

Provide CMS training

This is final bit. Completing this will give you the necessary skills to control your website content.


Archive

Categories

58 Howard Street
Belfast BT1 6PJ

Send email

+44 (28) 9032 8988
+353 (48) 9032 8988