The advantages of responsive design

If you split your spreadsheet into logical blocks, we can automatically rearrange these blocks for you to fit screens of any size. This enables you to design calculators and forms that look great and work well on any kind of device.

When you work with Excel, you tend to exploit the wide screen of your laptop or desktop computer. When such a wide spreadsheet is converted for the web, it becomes a wide web page that only looks good on other wide screens. If someone visits your web page with a tablet or smartphone, the wide layout will require a lot of horizontal scrolling.

More and more web users have small mobile devices with narrow screens. When you create web pages, you must ensure that they can be easily viewed also on mobile devices. Otherwise, your calculator may become difficult to understand or use for some of your most important visitors.



A spreadsheet that adapts to the screen

The new SpreadsheetConverter version 8 allows you to make your web calculator or form automatically adapt to different screen widths.

  • A visitor with a wide screen sees the original wide layout with six columns in a row at the bottom.
  • On a tablet, the calculator looks best with a three-column layout, so the six columns are grouped into two rows.
  • On a smartphone, there is only room for two columns beside each other, so the same information now appears over three rows.



Defining responsive blocks

Maintaining separate laptop, tablet and smartphone versions of a spreadsheet is time-consuming and complicated. With SpreadsheetConverter version 8 you can divide any Excel spreadsheet into Responsive Blocks of any size.

Each responsive block is a rectangular cell area that is always kept together, regardless of the screen width.

You define responsive blocks in Excel using the Add/Edit Responsive Blocks widget in the SpreadsheetConverter ribbon.



The more width, the more blocks

You specify how much of the screen width to use for each responsive block. If a block doesn’t fit to the right of the previous block, it appears at the beginning of the next row of blocks.

In the screenshot to the right, you can see that the “AS” block requires the full screen width on a smartphone. On a tablet however, it only requires half the screen width, so if the next block requires 50% or less of the screen width it will fit to the right of the “AS” block.

You can create fairly complicated layouts combining blocks of different widths, like

  • 75% + 25%
  • 50% + 33%
  • 50% + 25% + 25%

and many other combinations. This lets you optimize the layout of your calculator for both smartphones and tablets without having to use two or more separate designs.


Preview your layout before you convert

Does this sound complicated? Don’t worry. The Preview function is your best friend. After you’ve split your spreadsheet into responsive blocks, you can preview the automatic layout for both smartphone and tablet, and adjust your settings if necessary.

When the preview looks good it’s time to convert the spreadsheet for the web and study the results in a web browser.

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 size of your browser window. Just resize the browser window and you will see how the responsive blocks automatically reposition themselves for the new window width.

When you convert the spreadsheet to a web page, your calculator or form uses the responsive blocks to adapt itself to any visitor’s screen in a way that you control. Your calculating webpage automatically fits every screen size without scrolling.

See an example of responsive design in action

Read our tutorial on how to use responsive blocks