EverWeb Widgets

Responsive Widgets

Page Template

Hopefully, there will be a responsive page template by the time EverWeb V2.8 is released. In the meantime, do the following …

  • Click the "Add Page" button and choose the Blank page
  • Delete the "Made with EverWeb" image and rename the page: template
  • Open the Page inspector and choose "Dynamic Width" from the Page Layout menu
  • Set all the heights for top margin, content height, header height and footer height to zero.
  • Set the Page Background to "None"
  • Set the Browser Background to "Color Fill" and choose the required color
  • Duplicate the "template" page any time a new page is required.

Inserting Widgets

The new responsive widgets have an icon which shows three different device types

  • The page content height should be set to a value more than the actual content height while inserting widgets so that the design canvas will scroll vertically. Start with a value of about 2000px and increase this as required.
  • Drag a widget onto the page
  • Open the Metrics inspector and check the Full Width box
  • In the Responsive section of the Metrics inspector check the Section Object box
  • The widget outline will show and it will position itself below any previous widget(s)
  • Rearrange widgets by dragging them up or down the page.
  • Important: Before publishing, reduce the page content height to zero.

Important Notes

Responsive widgets are centered in the browser and must have an appropriate setting for maximum width.
The maximum width for inline text should not exceed 1000px and should ideally be less. Otherwise it becomes difficult for the eye to fllow through from the end of one line to the begining of the next.
Media files such as images slideshows and video should have their maximum width set to that of the actual media file to allow for reasonable quality when viewed on computers. If media files are wider than 1000px they will be far too large for downloading over cell phone networks when the visitor is using a smart phone.

Testing

Responsive layouts need to be thoroughly tested in the browser and the iOS Simulator before publishing to the server.
The latest version of the iOS Simulator now allows several devices to be shown - rather than one at a time.
The method of opening a page in the latest version is different from the older one …

  • Open the simulator and choose the device type from the Hardware menu
  • Click the Safari icon
  • Open the page to be tested in Safari for desktop
  • Copy the page URL to the clipboard - "command + c"
  • In the simulator window, click the URL box to highlight the file path
  • Click again and then click the "Paste and Search" tab.
  • To close a device choose "Close Window" from the simulator's File menu or select it and do "command + w"
  • Use "command + the left or right arrow" key to change the orientation of the device
  • Use "command + s" to take a screenshot for reference.

© EverWeb Widgets -