Tutorial 2 (super-fast): using Bootstrap to make the images responsive to screen size

In order to make sure that my floorplan images are responsive to screen size, I used the Bootstrap framework.

You have to add a few lines to the header of your HTML file, and then you can tap a huge range of design shortcuts all masterminded by someone else.

For instance, to make my floorplan images resize for any screen, I just had to call the image as 'fluid':

<object type="image/svg+xml"  class="img-fluid" height="80%" preserveAspectRatio="xMidYMid meet"  data="http://users.sussex.ac.uk/~alfi1/tutorial/sample-floorplan.svg">

Try resizing my sample image here.

 Using the cleverness of Bootstrap, I saved myself a vast amount of time in all aspects of the design and prototyping, and the end product was much more professional visually than I could ever have created.