Designing For Different Screen Sizes In Excelpoint

13 December, 2016 Resources, Technical Tips

Excelpoint Software On Laptop Tablet and Phone

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 screen shots are actually reduced in size to fit this article but they are in proportion.

Larger desktop layout

Medium desktop/laptop layout

One FIeld On Laptop

Tablet layout

One Field On Tablet

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 it’s name above, like this:

One Field On Phone

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:

Two Fields On Laptop

On a phone, the fields would stack on top of each other like this:

Two Fields On Phone

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:

Survey

Leaving it as the default of two columns for the field names would have looked like this:
Survey Wrapped

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.

Field Shortcuts

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.

Layout Editor Columns

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 this 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.

Show On Mobile

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.

Move Column

You can move individual field boundaries between columns. To do this, uncheck the ‘Snap to columns’ option in 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 at 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.

Layout Preview

Summary

This has been a quick tour of just some of Excelpoint’s 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 our 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 01325 328839 or tweet @Excelpoint.

Tags: