Basic Flex Website
This section shows how to create a basic single level responsive website. Click the FLEX tab in the navigation to return to the main demo site.
It is recommended that a simple site is created before attempting a more complex on with directories.
Most small high street businesses only require a few pages to describe their services and provide location and contact information. This demo shows the necessary pages for a site of this type.
Master Page Layout
A flex website is created by choosing to start a new site and setting up a template page and a master page. The template page is just a blank page which can be duplicated when new pages are required and is not included in the navigation menu.
The master page for this site is shown in the screenshot below…
Page Set Up
Here are the suggested settings for both the master and template page…
Content Width: 320px - Height: 800px - Header Height: 78px
The first item to be added and styled is the Header Widget. Like all the other ones, this is dragged onto the page, set in place, selected and then the "Full Width" box in the Metrics inspector is checked.
The widget contains all the elements to create a background with color or color gradient and adjustable color angle, an h1 heading for the website name, a logo and the mobile navigation button. There is a control for reducing the h1 font size when the page is viewed on a smart phone and another for adjusting its Y position on these devices.
These items are positioned in the header relative to each other using the values for X and X for each one in the widget settings.
The navigation button can go left and the logo to the right or vice versa.
Next, the navigation for the full version of the site is inserted. Although the EverWeb default navigation can be used for this, the Flex Nav widget is better in that it offers more appropriate styling options and can have one or two links to external pages or files.
Once all the items have been added and the navigation has been styled, the widget should be adjusted to the height of the navigation. This height can then be found in the Metrics inspector in the "Height" box. The height should NOT exceed 40px.
The header widget is then selected and the navigation height entered into the box marked "Nav Height".
NOTE: This last step is essential so that the navigation for full width viewing on a computer will disappear when the page is viewed on a touch device.
The final item on the master page is the mobile navigation. This has the "Allow free dragging" box checked and is dragged to the LEFT and out of the way - but still in sight.
The navigation is setup and its distance from the top of the browser window set so that it sits below the header. The value for header height can be used as a starting point.
Once the "Show Navigation" box has been unchecked, the mobile navigation will disappear.
NOTE: This may seem obvious but is easily forgotten in the heat of the moment. The "Navigation Direction" setting in both the Mobi Nav and the Header widget must be the same - either left or right.
Make sure the navigation list items are at least 30px in height by adding a suitable amount of top/bottom padding to the font size so that it passes the Google Mobile Friendly Test.
Now that the master page is set up, the template page can be duplicated and renamed to start creating the first (home) page of the site.