FlexView API - Layout and Responsive Design ∞

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.

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

Overview

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

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.

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

Fullscreen

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:

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:

Layout/Grid

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

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.