FlexView API - Layout and Responsive Design

Learn how to integrate the FlexView API into web page layouts with different widths

The FlexView API is integrated into webpages with help of some HTML nodes and some lines of Javascript (see Quickstart Guide). This approach allows a seemless integration into any website and to overwrite styling with css rules. The layout of different webpages varies in the width their layout is giving to the FlexView API.

The FlexView API uses a responsive layout for all overviews and all detail views.

Update (18th February 2016)

The FlexView uses responsive Layouts for desktop and mobile.

The Views

The views are grouped by the following definition:

  • the overview shows a set of tours, pois, huts, etc. and let’s the user filter it
  • the detail view shows details to one object, e.g. a tour, a poi, etc.
  • the fullscreen view is a mode of the overview or detail view that uses the whole viewport of the current browser window


The overview is available as gallery, list, map and map/list view:

Views of the overview

The FlexView API lets you decide which views are used in your integration and which view is chosen on page load. The user may switch between all available views using the view buttons in the top left corner.

Detail View

The detail view (both for “on page” or “detailpage” integration) uses a responsive layout.

detail view layout types

The exact layout depends on the width of the surrounding HTML container (dom id ‘oax-top-cont’).


The FlexView API offers a fullscreen button in every view. The overview or detail view is expanded to the full size of the page’s browser window:

overview fullscreen mode

The fullscreen version of the detail view shows the chosen tour, POI, hut etc. on a map including additional information like an interactive elevation profile:

detail view fullscreen mode


The FlexView API layout is based on a 12-column grid with a column width of 6,33% and a gap of 2%:

FlexView API layout grid

All layouts are based on this grid using areas with a different count of columns where it is necessary.

Goals and future development

The FlexView API is one of our most important components widely used in our products and by our partners and customers. We permanently put development and conception energy into FlexView API to improve usability and flexibility. A clear representation of object details like the length, duration and elevation information of a tour is an important goal.

Stephan Barthel