Full Width Addons

Web Page Design

Good web design requires the use of well defined content modules surrounded by plenty of white space with large CTA links to navigate to areas with further information. These modules must use HTML5 containers to benefit from the point of view of page download efficiency and search engine optimisation.
Inserting enough information on a web page to ensure that the visitor finds they what want without cluttering the layout is a challenge.
Visitors need to be able to find exactly what they want within seconds of landing on the page or they will go elsewhere. Having enough info, and clearly defined links to more, is essential for a successful landing page. How can this be done without jammng the page full of stuff? Read on …

Introducing Modals

A modal is a window which opens up in front of the parent document to reveal more content. It usually has an overlay background which covers the page content and allows the visitor to focus on the modal's content. The most common examples would be a popup window or a lightbox style slideshow.
These windows can be opened from any type of link such as an image, text or a CTA button. The latter method is preferable for clear definition and ease of use on touch devices.

Responsive Width & Height

Using Full Width widgets, responsive items which extend beyond the page content width can be created. These are limited in that they cannot have responsive height since this would require them to be widely spaced apart vertically to prevent them overlapping each other at narrow browser settings and on when viewed tablets.
Modals can have both responsive width and height since they are independent of the page layout. They open the door to cleaner, more informative design using responsive content blocks which are visually attractive and popular with the search engine spiders!

Page Navigation

Using modals, it is possible create a one page basic website with all the info being contained in the different types of modal.
The Full Width Tab Navigation widget allows the visitor to smooth scroll to any point on the page. In this example, the navigation is hidden by the header until the page is scrolled and the header resizes. It sticks 60px down from the top of the browser.
The navigation can have up to twelve tabs and these will return to a second row when the browser width is reduced. The corresponding anchors are positioned at the scroll to points.

Modal Examples

Slideshow
MP4 Video
Vimeo
YouTube

Media Modals

Modals for viewing Vimeo and YouTube movies, self hosted MP4 video and a slideshow with a choice of transitions and autoplay/manual operation.

Content Modals

Modals for a center caption image, text content with heading, text wrap around an image and a responsive iframe modal for inserting internal and external pages or files.

Text Modal

What Is A Widget?

An EverWeb widget inserts code for a specific item and provides controls for the user adjustable settings. This allows users with little or no knowledge of HTML, CSS and Javascript to insert failrly complicated items into web pages.


Installing Widgets
Open the download folder and double click each widget in turn.
Click OK in the popup each time.
Quit and relaunch EverWeb.
Your new widget will now be seen in the Widgets section in the right sidebar of the EverWeb window.
Now delete the download folder.

Uninstall Widgets
Third party widgets are installed in the user library …
~ library/Application Support/EverWeb/Widgets
Hold down the option key while in the Finder Go menu to reveal the user library folder.
To get rid of unwanted widgets that you have installed, browse to the Widgets folder and drag then out onto the desktop.

Using Widgets
Every widget has a page on the EverWeb Codebox website showing an example of the item, the widget settings panel and step by step instructions on setting it up.
About 99% of user problems stem from not taking the time to read and understand the instructions.
NOTE: The smarter you think you are - the more likely it is that you will make a mistake.
The more you know about one particular subject - the less you are likely to know about all the rest.

Open Image
fll width image modal
Cool Planet
Text Wrap
Text Wrap Image Modal

Modal Widgets

The widget creates a modal with an image which can either be full width or floated left to allow the text to wrap around it.

The modal has a percentage width to allow it to be responsive but there is also a maximum width setting to keep it under control and stop it sprreading out too wide on large screens with wide browser settings.

The modal height is adjustable and any content overflow is hidden. When the content height is greater then the height of the modal, the content can be scrolled.

Text is added to the modal as HTML so it is necessary to use HTML5 line breaks <br> for returns and to avoid using special characters.
Unless there is a separate version of the site created specifically for tablet devices, it is essential to test these modals on an iPad or the iOS Simulator app since it may be necessary to reduce the maximum width to that of the touch device's screen width to prevent the text size being reduced too much.
This modal has its maximum width set to 1000px so the text will be quite difficult to read when viewed on a tablet device in portrait mode. Try it!

Normally, when wrapping text around an image, the text is made to wrap evenly by adjusting the line height. Since this item is responsive. the wrap will change as the modal width is varied and the layout is not ideal at all times. Welcome to the world of responsive design and its many little problems!

Open PDF

Info Modals

These modals will allow insertion of an interactive Google map, Disqus comments, a contact form with recaptcha option and an internal or external page or file via a responsive iframe.

Interactive Map
Comments
Contact Form
Contact Form

iFrame

Using The Modals

Apart from the PDF, Comments and Contact Form modals, they are all responsive with a maximum width of 1200px.
It should be obvious why the form is fixed width.
The Disqus comments width is fixed so that the height can be made adjustable.
The one for displaying PDFs is fixed since the content size will increase/decrease in width which is not desirable. The visitor can of course increas/decrease the width in their browser in the usual way.
If the page is going to be viewed on a tablet device it should be noted that these devices will only display the first page of a multi page PDF.
The iframe widget should be used only for responsive content such as the responsive comments page displayed in the example above and where scrolling on touch devices is needed.

Google Map
The map widget - for better or for worse - uses the new Google Maps V3. The map is created on the Google website and the URL from the embed code is used in the widget settings to create the map.
NOTE: This means the URL only - not the full embed code.

Contact Form
The form is created in the same way as the other contact form widgets and have the option to use reCaptch. The form PHP script is set up in the same way and is then dragged into the Assets List. It is then selected and the relative file path copied and then pasted into the "PHP Script" field in the widget settings.

Video
The widgets for dislaying MP4, Vimeo and YouTube videos have a maximum width of 1200px. If the visitor really requires a larger version they cab use the fullscreen option.
Note that the video widgets all have the option to add the often forgotten video title which really should be added for search engine optimisation.

The slideshow type was chosen for versatility since it has both back/forward arrows and a play/pause button. The latter is positioned in the center of the image.
Being responsive, the slideshow can accomodate images of varying aspect ratio. As always, the images should be cropped to the size that they will be displayed at before importing into EverWeb. The maximum width is 1200px so there is no need to go above this unless retina quality is required.

Testing
All these items should be tested in the browser by varying the width to make sure the responsive content acts in the desired way.
If there is not a separate version of the site for tablet devices, the pages MUST be tested on a tablet or in the iOS simulator to look for any problems.
It is strongly recommended to take the time to create a separate version of the site for tablets. This can be achieved quickly using the Touch Widgets.

EverWeb Widgets | Full Width

These widget are included in the Full Width Addons widget pack.