{"id":11542,"date":"2018-09-10T19:01:57","date_gmt":"2018-09-10T19:01:57","guid":{"rendered":"https:\/\/www.directimpactsolutions.com\/?p=11542"},"modified":"2023-05-18T16:53:13","modified_gmt":"2023-05-18T16:53:13","slug":"one-layout-for-both-ipad-and-desktop","status":"publish","type":"post","link":"https:\/\/www.directimpactsolutions.com\/en\/one-layout-for-both-ipad-and-desktop\/","title":{"rendered":"One Layout for both iPad and Desktop"},"content":{"rendered":"

How to make a single layout in FileMaker that works (and looks good) on both desktop and iPad screens.<\/h3>

Creating and maintaining two separate sets of application screens in FileMaker \u2014 one for mobile and one for desktop \u2014 has always been a pain in the butt. While there are definitely arguments to be made for creating much simpler functionality and screen design on an iPhone, the same argument is harder to make for an iPad versus desktop interface. Believe it or not, many people these days are opting to use ONLY a tablet with an attached keyboard as their primary work machine. Often, this occurs in the same workplace, where some users are on an iPad, and others are using a desktop computer.<\/p>

Spending the entire day working on an iPad is a significant change in user behavior, and not simply because they are working with a screen that\u2019s smaller than even the typical laptop. The real reason this is a significant change is that this user will not only be entering data by keyboard,\u00a0but will use their finger as well<\/em>\u00a0to interact with the software. Instead of moving around the UI with a precision mouse and cursor, they\u2019ll be smushing a fleshy digit on our beautiful software. As developers of this beautiful software, we need to\u00a0design our user interface\u00a0to meet users where they are, and not force them to do things that are more difficult in order to make our job easier. It\u2019s essential that we address the different interaction style so that the user will be able to use the software in the way that\u2019s most comfortable for them. But that has typically meant maintaining two separate (and potentially unequal) layouts for every screen \u2014 one with smaller type, smaller buttons, and more information for desktop, and one with larger type, bigger buttons, and more space between fields for iPad.<\/p>

\"same<\/figure>

The two screens above are both the exact same layout \u2014 one is at 75% zoom on a desktop (left) and the other one 100% zoom on an iPad (right).<\/p>

I maintain that it\u2019s possible to use one single layout for both the desktop-and-mouse user and the iPad-and-touch user, using a few simple guidelines. The main trick is to design for iPad using touch-appropriate font and button sizes, and to add a trigger on layouts that simply zooms out to 75% when on the desktop! There are some considerations, however \u2014 specifics are provided below.<\/p>

Start with the right layout size<\/h3>

Design for the smallest screen size in landscape*<\/strong> mode, which will usually be in the neighborhood of 1024 x 768 pixels (or points in FileMaker\u2019s inspector tab). On the iPad specifically, when menu and toolbars are displayed, your layout should be around 1024 x 660, although it\u2019s recommended that you disable menu and toolbars for iPad unless your users know what the hell they\u2019re doing are power users. With menu and toolbars off, 1024 x 743 seems to be just about right.<\/p>

Pixel resolution is actually different than screen size, and it can sometimes be a bit difficult to know what exactly your user will see (depending on retina vs. non-retina, iPad Pro vs. Air vs. Mini, etc), so it\u2019s safest to make sure you look at your layout on the user\u2019s actual device (or an identical model). User screen sizes and devices can also be audited with some basic user logging. Early in the discovery phase, we always add a simple logging feature to the client\u2019s current system, where we then note their devices and screen sizes in the log file.<\/p>

*For the purposes of this article, we\u2019ll focus only on landscape mode, since iPad users in an office setting will almost exclusively be using the iPad with an external keyboard in landscape position.<\/em><\/p>

Add layout triggers that zoom in or out<\/h3>

Here\u2019s the primary trick that makes this whole shebang work \u2014 add an OnLayoutEnter trigger to your layouts (including\u00a0card windows) and have it zoom out to 75% when the user is on a desktop machine. There are actually two ways to figure out what device your user is on, depending on your circumstances, but the simplest way is to use the Get(Device) function and look for a number 3 (which indicates an iPad). If the user is NOT on an iPad, you can have a script step zoom out to 75% (using the Set Zoom Level script step). If you also have users logging in using an iPhone, Webdirect, or even Android, your script logic gets a bit more complicated, and you may want to navigate to an entirely different layout, but either of the following functions will get you the info you want, and then you can Zoom to 100% for iPad, or 75% on desktop:<\/p>