WebDirect Guide

Chapter 2 | Designing a FileMaker WebDirect solution 16
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 multiple screen sizes
Web users access FileMaker WebDirect solutions with devices that have different screen sizes
and resolutions. To provide an optimal experience for web users, design your solution to adapt to
each device.
Keep the following best practices in mind:
1 Design each layout for a range of device sizes, and configure the auto-resize options for layout
objects based on the web browser’s height and width.
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.
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, field contents don’t wrap, and field contents are
truncated if the content doesn’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 of fields on small screens.
1 To discourage web users from zooming in to the layout, design layouts to fit the dimensions of
your intended devices. In some browsers, zooming in to the layout may lead to unexpected
results.
1 Increase the size of fonts and layout objects to make it easy for web users to read and select
them on small screens.
Step 5: Set default options for layouts, views, and tools
You should direct web users to layouts appropriate for their devices and display the tools
applicable for your FileMaker
WebDirect solution.
Setting the initial layout and view
When a FileMaker WebDirect solution is set to perform a script at startup, users see the results of
that script each time they open the solution. To determine which layout and view web users see
when they open the solution, use the OnFirstWindowOpen script trigger with a startup script that
includes the following script steps:
1 Go to Layout [ ]
1 Enter Browse Mode [ ]
1 View As [ ]
To send web users to layouts appropriate for their devices, identify which devices and web
browsers are running your solution. See
“Functions” on page 19.
You can also specify a starting layout in the FileMaker Pro File Options dialog box. See
FileMaker
Pro Help.