Responsive blocks

In this Help page, we will show you how to split a spreadsheet into responsive blocks that wrap nicely on all screens. 

If you are new to responsive design, you may first want to read the introduction to responsive design.

Before you create your first responsive spreadsheet, we suggest you read our best practices for responsive blocks to avoid the most common mistakes.

Define the responsive blocks

This part of the tutorial shows you how to define the responsive blocks in your spreadsheet.

Open the settings

Open the Responsive blocks settings from the ribbon.

Screenshot of the Responsive Blocks option in the Prepare section of the SpreadsheetConverter ribbon

Add New

Click on the Add new button.

Screenshot of the Add New button in the Responsive Blocks settings

 

Select Range

This opens the widget properties panel, in which you select the cell range for the first block. Click on Select Range.

Screenshot of the Select Range button in the settings for Responsive Blocks

When the Select Range box appears, place the cursor in the input field and type the coordinates for the block or drag the cursor diagonally across the cell range.

properties2_responsive

Block Name

Give the block a name that makes it easy to understand its function in the spreadsheet, and its contents.

Screenshot of the Name setting for a Responsive Block

Block Width on phone and tablet

Specify how much of the screen width to use for the block. There are separate settings for phones and tablets.

In the below screenshot, the block will use 100% of a phone screen but only 50% on a tablet. This gives room for additional blocks to the right if they use 50% or less of the screen width.

Screenshot of the width settings for a responsive block

Preview your block definitions

This part of the tutorial shows you a preview of how the screen will be used on a phone and tablet.

The orange visualizer

Click the Add button. An orange dotted line appears in your spreadsheet to visualize the responsive block. At the bottom of the visualizer, you see the name of the block. Please do not directly edit the visualizer graphic.

visualizer_responsive

 

The Preview tool

The Preview section shows you how the blocks you have created will appear on phone screens. Since the width was set to 100%, each block fills the screen so only one block at a time is shown.

Screenshot of the Preview tool for resonsive blocks on phones

If you want to see how your blocks will fill a tablet screen, press Switch to Tablet. Since each block only requires 50% of the screen, they now fit beside each other.

Screenshot of the Preview tool for resonsive blocks on tablets

Continue defining responsive blocks until all active cells in the spreadsheet belong to a responsive block.

Convert your spreadsheet

Press Convert in the ribbon to convert the spreadsheet for the selected target environment.

Adjust the window width

You don’t need a tablet or smartphone to verify your responsive design. The layout is responsive already on your laptop and will automatically adapt to any change to the width of your browser window. Just make the browser window more narrow and you will see how the responsive blocks automatically reposition themselves for the new window width.

Screenshots of the spreadsheet in Excel and on a smartphone

To verify the results in your phone or tablet, use Instant Testing.

Test an example of responsive design in your mobile device

Learn how to edit or delete responsive blocks

Before you create your first responsive spreadsheet, we suggest you read our best practices for responsive blocks to avoid the most common mistakes.