Design

The content is made up from a full width responsive header, a responsive navigation, a responsive width, fixed height Hero slider and a responsive content widget with built in footer.
This page will be viewed by visitors using a computer, laptop or tablet device.
When viewed on a tablet in landscape or portrait mode, the navigation switches to a "hamburger" icon which opens/closes the mobile style menu.
The slider navigation arrows disappear on tablets since the slides can be swiped.

Mobile Page

Although this page layout will function correctly when viewed on a smart phone, it will not be efficient enough for this purpose.
The large hero sized images will take too long to download over a wireless network and will eat into the visitors data allowance.
The mobile page uses a similar slider but the images are reduced in size considerably.
The mobile redirect is set to open the mobile version of the page when the device width is equal to or less than 739px. This value is important because it is used to make sure that the mobile version is downloaded for those who are using the largest iPhone in landscape mode.
If an iPhone or the iOS Simulator is not available, click the "Mobile Site" tab in the navigation to see the mobile page. Use the browsers Responsive mode or launch the page in Firefox and reduce the browser width to that of the smallest iPhone in portrait mode - 320px.

Navigation

The navigation is displayed inline when the page is viewed on a computer and switches to a vertical navigation - opened on click - when viewed on touch devices.
The menu can accomodate up to six top level links and three directories. The last top level link can be configured to open an external page if required and has a new window option.
Each directory can have between two and six links.

Directories

The directories open on hover when the page is viewed on a computer and have a chevron down icon to indicate that interacting with the tab will show more info.
On mobile devices, the vertical menu has accordion style directories which open and close on click. They have a chevron down indicator when closed and a chevron up when in the open state.
The menu can be placed either left or right of the device window.

Header

The navigation works in conjunction with the Navigation Responsive Header widget. This has an optional logo, an h1 heading for the website name and the "hamburger" tab for opening and closing the menu on touch devices.
The position of the logo and tab can be switched if required.

Position

In this example, the full site navigation is positioned just below the header and over the top of a Hero Content Banner widget so that it doesn't leave a blank space when the page is viewed on a tablet device.

Responsive Content

This content is inserted using a responsive widget with a built in footer. It can be position as the last item after any amount of content using Hero widgets.
Responsive items are different from Hero items in that they are responsive in both width and height. They are also NOT full width.
The items are centered in the browser and have a maximum width. This is to prevent the content from spreading out too wide on larger screens with a wide browser width setting.
When text lines exceed about 1000px, it becomes difficult for the eye too transition from one line to the next. Text spreading out across the width of an iMac 27 screen looks just ridiculous!