WebDirect Guide

Chapter 2 | Designing a FileMaker WebDirect solution 15
Improving CSS performance
Reduce the amount of CSS in the solution to improve the web browser’s layout rendering
performance. Layouts with large amounts of CSS may load slowly, particularly on devices with
limited processing capabilities.
To reduce the amount of CSS in your solution:
1 choose or create simple themes, such as themes that do not use gradients or image slices
1 create custom themes and custom styles rather than overriding existing themes and styles
1 reduce the use of object states on each layout object
1 minimize conditional formatting
Step 4: Design layouts for mobile browsers
Web users access FileMaker WebDirect solutions with mobile devices that have different screen
sizes and resolutions. To provide an optimal experience for mobile browsers, identify the target
devices for your solution, and design your solution to adapt to each device.
Keep these points in mind:
1 Design each layout for the smallest device in a range of devices, and configure the auto-resize
options for layout objects to expand based on the web browser’s height and width.
1 In some mobile browsers, users may not be able to view objects near the bottom edge of a
layout if the layout is larger than the mobile device’s viewable area.
1 Mobile browsers can’t zoom out beyond the area that is displayed when the web user enters
the layout.
1 In some browsers, zooming in to the layout may lead to unexpected results.
1 Use the OnLayoutSizeChange script trigger to change layouts if the browser dimensions
change to be greater or smaller than a certain height or width, such as when a mobile browser
changes orientation.
1 To make it easy for web users to read and select the objects on small screens, use one of the
Touch themes or increase the size of fonts and layout objects.
1 Make fields large enough to display and print the data contained in the field. In the web browser,
fields don’t expand when they are active and field contents are truncated if the contents don’t
fit within the field boundaries.
1 To allow users to commit records, design a scripted button or leave enough inactive space on
the layout so that web users can click outside fields on small screens.
1 FileMaker WebDirect does not support saving snapshot links, importing records, exporting
records, or exporting the contents of container fields from mobile browsers.
1 When a solution launches from the Home screen of an iOS device, the solution opens in a full-
screen web browser window, minimizing the web browser controls and increasing the space
available for layouts. If you require mobile web users to launch the solution from the Home
screen, add instructions to your solution’s documentation. See
“Step 10: Document your
solution” on page 22.