The advantages of responsive design

SpreadsheetConverter supports industry-standard responsive web design, a methodology that automatically optimizes the layout of a web page for each screen. If you split your spreadsheet into logical blocks, these can flow nicely across screens of any size. With responsive design, your calculators and forms look great and work well on any kind of device.

More and more web users have small devices with narrow screens. When you create web pages, you must ensure that these 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.

Most spreadsheets have historically been very wide, which makes them difficult to use on smaller devices with narrow screens. The wide layout requires a lot of horizontal scrolling. With other solutions you may have to create a separate “mobile” version of each spreadsheet. With SpreadsheetConverter you can instead easily divide the spreadsheet into responsive blocks that flow naturally across the screen regardless of what device is being used.

 

A spreadsheet that adapts to the screen

With responsive design, your web calculator or form automatically adapts 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  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