EverWeb Widgets

Responsive Widgets

Page Template

Create a template page using the blank page option …

  • Click the "Add Page" button and choose the Blank Page and the Responsive template
  • Delete the "Made with EverWeb" and the Responsive Row items and rename the page to "template" - without the quotes of course!
  • Open the Page inspector and choose "Responsive" from the Page Layout menu
  • Set the 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
  • NOTE [1]: The default content height is set to 1000px. This can be increased if required while setting out the widgets.
  • NOTE [2]: Reduce the page content height to zero before publishing the page.

Inserting Widgets

Most of the new responsive widgets have an icon which shows three different device types.

  • Responsive widgets are relatively positioned and are stacked vertically
  • Drag a widget onto the page
  • 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
  • NOTE: The EverWeb Responsive Row widget is NOT required when using these widgets.

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

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 follow 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.

© EverWeb Widgets -