This technical guide is aimed at Excelpoint administrators wanting to gain a better understanding of how to use Excelpoint’s layout options. We’ll focus on some settings which help you design applications which work well on a range of different-sized mobile and desktop screens.
Out of the box, and without writing code, Excelpoint supports a concept called responsive design. This means that a web page or application can be used equally well on a variety of different screen sizes. End users of systems generated by Excelpoint don’t need to worry about any of this. Systems will adapt to work on small screens as well as on larger desktops and all of this just happens automatically from a system user point of view.
We do much of the work by default without you selecting any special options, so even admin users configuring new systems in Excelpoint don’t need to worry. However, it’s useful to understand the techniques and options available so that you can fine-tune them if you choose to.
We’ll start by looking at some of the automatic layout decisions Excelpoint makes.
Scaling to fit different widths
Firstly, it helps, to begin with an understanding of how our layouts scale when the browser width changes. You can think of the browser width as divided into twelve columns. We allocate field names and the fields themselves into one or more of these columns. As the browser width changes, the columns scale to remain a twelfth of the width and the fields resize to stay in their allocated spaces.
A typical automatic allocation for a single field on a row would be two columns (i.e. 1/6 of the screen) for the field name and ten columns (the remaining 5/6 of the screen) for the field itself. Here’s how this looks at different widths:
The screenshots are actually reduced in size to fit this article but they are in proportion.
Larger desktop layout
Medium desktop/laptop layout
Tablet layout
In real-world use, users don’t often drag their browser widths around but the point is that the system scales to fit each screen size, maintaining the 1/6th width for the field name and 5/6ths for the field data.
Phone layout
When we get to very small widths (e.g. phones), we break out of the above behaviour, let the field take full width and position its name above, like this:
By doing that, we ensure the system stays usable on any device. Remember that as an administrator or as an end user, you don’t need to do anything to get this behaviour. It all happens by default. Though it’ll be useful later in the discussion to have this background understanding.
Fields on the same line
When we have more than one field on the same line, the same kind of scaling happens. For two fields on a line, Excelpoint would normally allocate 1/6th of the width for each field name and 1/3 for the field data. On a medium screen, it’d look like this:
On a phone, the fields would stack on top of each other like this:
Hopefully, by this point, you’re starting to see the basics of how Excelpoint allocates space to field names and fields.
Automatic layout decisions
Excelpoint makes many other automatic layout decisions too. We won’t cover them all in detail here but for instance, we might decide to give more space to field names in some cases. As an example, if an information type looks like it has lots of long questions followed by answers, we’ll automatically give more space to the questions to avoid excessive wrapping, like this:
Leaving it as the default of two columns for the field names would have looked like this:
Of course, you can override the automatic decisions and we’ll look at some ways of doing that next.
Manually allocating columns
As a rule, commonly used configuration options in Excelpoint often have two ways of being used. One of these is visual and easy to learn for new users. The other is a ‘shortcut’ which is quicker for experienced users. Experienced administrators can use a shortcut in the form #1/3# on the field name to set the width, where 1/3 is the proportion of the total screen width.
For instance, these shortcuts would quickly allocate 1/3 and 2/3 of the screen width to fields rather than the default half width each. This is a good way to make many changes quickly when you already know what you want to achieve.
Alternatively, you can simply drag field boundaries to a different column in the layout editor. This method lets you see the effect of your changes instantly.
Simpler mobile views
Excelpoint will normally show the same information to mobile users as it does to desktop users. The layout of that information can be different, but by default, the actual information will be the same. Sometimes it’s useful to provide simplified versions of applications for mobile use. For instance, when on larger laptop or desktop screens, you might want users to get full functionality but on the mobile version, some optional or less important fields could be hidden for a more streamlined experience.
To help with this, Excelpoint provides some extra field options to control visibility on the smallest screens separately from larger devices. In the example below, a field is hidden from view on the add and edit item screens on small devices. This has been done by unchecking the corresponding checkboxes in the mobile column.
Fine-tuning
If you decide that the twelve-column layout isn’t flexible enough for you, there are two options to fine-tune further.
Firstly, you can move the column boundaries. In the layout editor, grab the downward arrow in the ruler at the top of a section and drag it. You’ll see that the column boundary moves and all fields attached move with it. This is a quick way to fine-tune your layout while still keeping elements neat and aligned. We’d recommend this as your first step to fine-tuning if you’re not happy with the twelfths model.
You can move individual field boundaries between columns. To do this, uncheck the ‘Snap to columns’ option in the layout editor and drag an individual field boundary.
Testing your changes
Testing on different devices can be time-consuming. To help accelerate the process, we provide a number of previews which you can access directly from within the layout editor. You can show the information type that you’re working with instantly on phone, tablet, medium or large sizes by clicking the relevant options. In addition, you can show the add, edit or open item views and display fields which might normally be hidden based on the current data.
Using these options helps you to flush out any issues and make adjustments without leaving the layout editor.
Summary
This has been a quick tour of just some of Excelpoint’s no-code software features for building applications which support a range of mobile and desktop devices.
Overall we’ve covered:
- Default layout behaviour at different widths
- Manually allocating columns
- Simplifying mobile use by selectively hiding fields
- Fine-tuning widths by changing column or field boundaries
- Previewing your changes in the layout editor
Excelpoint follows an approach throughout its no-code software of providing useful defaults to get you started quickly but also giving administrators the flexibility to override those defaults. You can build a fully functioning application which works on desktop and mobile without using any of the techniques discussed here. That approach can get you started very quickly. However, by introducing some of the options available, we hope you’ve gained an insight on how to take your screen layouts to the next level when you choose to.
If you have more questions about designing for different screen sizes in Excelpoint feel free to give us a call on +44 (0)1325 375930Â or email us at: hello@excelpoint.co.uk.
