EverWeb Codebox logo

EverWeb Widgetbox 3

Flex Widgets

EverWeb Flex Widgets

What Is Flex?

Flex is a collection of widgets created to enable EverWeb users to design responsive website designs which change the page layout depending on the device used to view it.
The layout responds to screen/browser width so that only one version of the website needs to be created to enable visitors using computers, tablets and smart phones to view the content easily and navigate the site using a mouse, trackpad or fingers.
Most of the flex widgets use percentage widths and the new "Full Width" control to allow the content to respond to changes in the browser/device width. They also have the essential "Max Width" setting to stop the content spreading out too much when the vistor has their browser set too wide.

Flex Layout

The basic layout is created on a master page using the Centered Layout setting.
The page content width is set to the narrowest device that the website pages will be viewed on. The screen width of the older iPhones (320px) is as good as any to set this minimum width.
The Header section is not required and is therefore set to zero since a widget takes its place.
The page content height can be set to about 800px which is shorter than any practical page will be.
The header, h1 heading, full site navigation and the slide in mobile navigation and its button are all inserted on the master page. The single level site header also allows for a logo.
For a two level site with directories, the default EverWeb navigation is used on computers to be replaced by a main and sub mobile navigation menus on touch devices. The buttons to operate these are built into the two level version of the header widget.

Flex Content

Content is created using any of the page content widgets.
These are designed to insert different types of page content depending on the purpose of the page.
Everything below the header - apart from the sticky tab links - is inserted into the chosen widget.
These mostly have an h2 heading for the page name, various, text and media areas and a footer.
The footer can be given a contrasting color so that it can be seen to spread out over 100% of the browser width.

Usage & Limitations

It should be realised that by using the Flex System a lot of the advantages of drag and drop are lost. At option in a lot of cases is to go with the TRISITE concept and create three different versions of the site for computers, tablets and smart phones.
It does require a different mindset to work with responsive designs and it will not suit those who like to create fussy layouts with pixel perfect accuracy!
The Flex widgets use media queries to change the layout for different devices. While it is not necessary to be able to calculate and write these, it does help to know what they are and how the work.
Those who take a little time to learn basic HTML5 and CSS will find that the usefullness of the content widgets can be extended considerably. There is an HTML content widget which will allow those with basic coding skills to create anything the care to think of!

Use the buttons below to see the basic and more advanced demos…

Get The Widgets

Create A Responsive Website Design