Over 46,000+ Business Solution Developers Find answers, ask questions, and connect with our community of business solutions developers, business owners and partners.
In this article I wish to introduce a new layout design method, specific to FileMaker Go for iPad. My aim is to find a better practice than the resizing one in order to deal with the display rotation issues. following the device rotation I move some of my layout elements out of a hidden background into a viewed area. This practice allows a better and richer GUI experience, closer to the iOS look and feel.
The result
An example of the same layout in the both landscape and portrait mode on iPad.
How does it works ?
My layout is build with separate groups on different «layers». Each group has specific sliding attributes.
The front layer is permanent while the ones on the back can slide horizontaly/verticaly following the device rotation.
A group is never resized following the rotation of the device. The available space is filled by a sliding group.
the colored boxes represent my different groups. In the previous screenshots, my groups have the following sliding attributes :
the «red» group attributes, the ones always displayed on the forefront
the «blue» group attributes, the ones displayed in landscape mode.
his «start position» on the layout is in the background, hidden by the «red» group in portrait mode
the «green» group attributes, the ones displayed in portrait mode.
his «start position» on the layout is in the background, hidden by the «red» group in landscape mode
Step 1, on the layout
one group on the forefront, the other ones in the background…
Step 2, in landscape mode
the «green» group doesn’t move, still masked by the «red» group
the «blue» group slides into the right side of the screen
Step 3, in portrait mode
the «green» group slides into the bottom of the screen
the «blue» group remains behind the «red» group
Size matters
For best results, the group’s sizes and positions depend on user interface elements such as :
FileMaker go toolbar on/off, iOS status bar on/off, FileMaker kiosk mode, etc…
I use these sizes for my groups
One practice, 4 designs
my top 4
3 groups, blue on the right side
3 groups, blue on the left side
2 groups, blue on the right side and red resizing in portrait mode
2 groups, blue on the left side and red resizing in portrait mode
These four designs respect the iOS look and feel with most of the iPad Apps.
Pros & Cons
Pros :
Compared with the resizing method everyone uses – including FileMaker with its examples -, with the «slide a block» practice :
you gain available «space» to be use for your objects (fields, button, portals…)
objects size is not altered between portrait and landscape mode
Cons :
layout is no more wysiwyg
the iOS status bar activated by the user can be an issue if you don’t design specific layout for.