Rslidy Layouts

Titleslide

Fabian Platzer

Graz University of Technology, Austria

Fri 30 Mar 2026

© Copyright 2025 by the author(s), except as otherwise noted.
This work is placed under a Creative Commons Attribution 4.0 International (CC BY 4.0) licence.

1. Simple Layouts

Single Bullet Points

Single Image or Diagram

Example Slide SVG.
The Rslidy image viewer is automatically attached to every <img> element, and is activated by left click. It enables pan and zoom via mouse, keyboard, or on-screen controls.

Responsive Image (Art Direction)

Photo of Graz Clock Tower, in three diffeent crop widths.
This slide demonstrates responsive images using the <picture> element. Depending on screen width, a different crop of the same image is loaded.
Image from Pixabay, used under the terms of the Pixabay licence.

Responsive Image (Resolution Switching)

The clock tower overlooking the city of Graz, Austria
This slide demonstrates responsive images using the srcset and sizes attributes on an <img> element. The image is fetched at the appropriate resolution for the device.
Image from Pixabay, used under the terms of the Pixabay licence.

Single Video

Short skiing video with sound.
Video from Pexels, used under the terms of the Pexels licence.

Responsive Table with Sorting

Smartphone Operating System Battery (mAh) Display Size (″) Storage (GB) Price ($) Release Date
Samsung Galaxy Android 5000 6.8 512 1199 2025-03-15
iPhone iOS 4500 6.7 512 1399 2025-09-22
Xiaomi Android 4800 6.7 256 899 2025-02-28
Oppo Find Android 4600 6.7 256 999 2025-05-10
Vivo Android 4700 6.8 512 849 2025-07-05
Realme Android 4500 6.7 256 749 2025-04-18
Huawei HarmonyOS 5000 6.8 512 1099 2025-06-01
Motorola Android 4400 6.5 256 699 2025-08-12
Google Pixel Android 4350 6.4 256 799 2025-01-30

2. Multi-Column Layouts

Two Columns: Bullet Points (Incremental)

  • Left Bullet Point 1
  • Left Bullet Point 2
  • Left Bullet Point 3
  • Left Bullet Point 4
  • Left Bullet Point 5
  • Right Bullet Point 1
  • Right Bullet Point 2
  • Right Bullet Point 3
  • Right Bullet Point 4
  • Right Bullet Point 5

Two Columns: Bullets Left, Image or Diagram Right

  • Bullet Point 1
  • Bullet Point 2
  • Bullet Point 3
  • Bullet Point 4
  • Bullet Point 5
Generic diagram as SVG.
Generic diagram as SVG.

Two Columns: Two Images or Diagrams

Generic diagram as SVG.
Generic diagram as SVG.
Photo of the Graz clock Tower as JPEG.
Photo of the Graz Clocktower as JPEG from Pixabay, used under the terms of the Pixabay licence. .

Two Columns: One Image or Diagram, One Video

Generic diagram as SVG
Generic diagram as SVG.
Short skiing video with sound.
Video from Pexels, used under the terms of the Pexels licence.