Best practices for responsive blocks

This page contains tips and tricks to help you become successful with responsive blocks. We hope this collection of best practices help you create the best possible responsive designs for your calculator or forms.

Before you separate a spreadsheet into responsive blocks you may want to prepare it a bit for the new challenge.

With responsive design, one or more responsive blocks will be placed side by side on the screen until the whole width of the screen has been utilized. The first block that doesn’t fit at the end of the current row of blocks will instead appear first in a new row of blocks.

Portrait blocks are better than landscape

Already from the start, the screen of your mobile device is probably more narrow than that of your office computer. To make matters worse, many mobile devices are most conveniently used in their portrait orientation, i.e. with the shortest side up, while most office computers typically operate in landscape orientation with the longest side of the screen at the top.

When you design spreadsheets for portrait-mode devices, you may have to rethink the entire design of the sheet. Try to divide the contents of the spreadsheet into rectangular areas with portrait orientation. The contents of each block should be as independent as possible of things in the spreadsheet since each block may fill the entire screen on smaller devices. To see anything outside the currently visible block, the user will have to scroll up or down.

On the other hand, if you try to show too many spreadsheet columns at the same time on a small screen in portrait mode, they will become zoomed out and difficult to read. Try to make your blocks contain as few spreadsheet columns as possible.

Don’t create horizontal information structures in your spreadsheet if you can avoid it.

Do repeat the row headings for every data column to increase the readability on narrow screens where only one data column may be shown at a time.

Repeat row headings for large tables

Responsive blocks cannot overlap

Keep in mind that responsive blocks are rectangular cell areas that cannot overlap.

Don’t include any cell in the spreadsheet in more than one responsive block.

Do move things about in the spreadsheet if necessary to create non-overlapping rectangular areas.

Screenshot showing rectangular blocks in a spreadsheet

Blocks always appear in the same order

Regardless of the screen width, responsive blocks always appear on the screen in the same sequence as in the original spreadsheet when reading from left to right, going down.

Before you define the responsive blocks for spreadsheet you may want to redesign it so that the order of the blocks will be natural also for users of mobile devices that view the calculator’s responsive blocks in a rearranged form.

Don’t use arrows to point to another part of the spreadsheet. With responsive blocks, the designated section may in fact appear below the current.

Do put the most important or summary information in the left-most, upper-most responsive blocks, so that it appears first on all devices.

A personal budget with a summary in the top left-hand corner

Try to keep white-space to the right

Some responsive blocks contain more spreadsheet rows than other blocks, making them longer. When two or more blocks appear side-by-side, it often looks best if the left-hand block is the longest. Having a lot of white-space in the left part of the screen can look strange for people that read from left to right.

Don’t assume that the blocks will relate to each other the same way on small screens like they do on your office computer.

Do test your spreadsheet on both smartphones and tablets to see how white-space appears as you scroll through the worksheet.

A table with lots of whitespace to the left

Tables are tricky

One of the main purposes of responsive design is to avoid horizontal scrolling. For tabular data, this can be impossible to achieve. Let’s say you have a table of financial data per month. We currently do not offer a way to automatically decompose such a table into responsive blocks without losing the row headings.

Don’t create a single responsive block for a large table. Narrow screens will zoom out for all columns to fit, and the text will be impossible to read.

Do move every complex table to a separate worksheet, without defining any responsive blocks for it. In this case, responsive design will not be enabled for the worksheet. Users can scroll horizontally to see the entire table.

Use a separate block for each chart

Charts are special objects and making them responsive requires special attention. Try to use a separate responsive block for each chart so it does not mix with other charts or texts.  

Don’t

8-20-2015 2-54-42 PM

 Do

8-20-2015 2-50-45 PM

Put the headings with the chart or data

If you have heading on the top of a chart or data column, put it inside the same block as the chart or data. Otherwise the heading may be separated from the chart or data.

Don’t

If you separate the heading of each chart into 2 blocks, then the heading of the second chart will move below the heading of the first chart.

8-20-2015 2-55-58 PM

Do

Define the blocks like this instead:

8-20-2015 2-57-22 PM

Border lines and block boundaries

Border lines between columns in spreadsheets may look like they are shared by the two columns, but they aren’t. Column A may have a right border or columns B may have a left border. To you it looks the same but to Excel it’s two different things.

When you define responsive blocks with border lines along the edges of the block, Excel may consider the borders part of another responsive block than you do, and so the blocks appear for the wrong responsive block. 

Don’t use border lines at the boundaries of responsive blocks.

Do use other visual signals like background colors to visually separate blocks from each other.

A spreadsheet where every second block has a light red background color

All or nothing is responsive

In a responsive worksheet, all active cells must belong to a responsive block.

Don’t forget any active cells when you define the responsive blocks. 

Do create unresponsive worksheets by not adding any responsive blocks at all. For some sheets it is the only way to go.

Beware of single cell widgets

We don’t like restrictions but we do have a few. You may be tempted to create a responsive block that contains only one cell, and that cell contains a widget. This is usually a large multi-line text widget that you think would work as a Responsive block. And here comes the restriction: you can’t.

Don’t create a responsive block that contains only one cell, and that cell contains a widget.

Do include some extra cells in every responsive block that contains a single cell with a widget in it. Just add a cell above the widget with a text heading and it will work fine.

A cell with a widget that works as a resposnive block only together with its heading

Use margins for maps or images

Add an extra column to the left- and right-hand side of every Google map. If you don’t, users may become unable to scroll through the web page.

Don’t let maps fill the whole screen. The map will just follow the users’ finger movements on the screen to a new center location, and users can no longer scroll to a different location on the webpage. 

Do use margins also for responsive blocks that only contain an image.

8-21-2015 3-56-02 PM