​Responsive design

Responsive design allows us to show the same image in different formats on our website. No matter what device our website visitors use, they will always see the right image format.


This requires a different approach when it comes to images: one large, sharp image with a sufficiently high pixel density is used to make sure all image components are suitable for the device they are viewed on.  

Header images, CTA images and carousels use landscape images. Images in text elements and photo albums can have various aspect ratios (portrait, landscape, panorama or square). Always follow the image instructions to make sure they can be displayed properly. 

Only images in JPEG format are allowed on the new website!

MEMO: minimum sizes

  • Headers
    2000 px wide (W) x 1000 px high (H)
     
  • Images in text elements
    1000 px wide or high
     
  • CTA images and carousels
    1000 px W x 500 px H
     
  • Photo albums 
    1000 px W

Header images

The header image is only shown at the top of the homepage of a subsite, and no longer on underlying pages. In addition to an expressive photo, there is room for a title (heading 1) and intro text (subtitle).

When the new site is launched, a header will automatically be generated in the correct format for each subsite. If the original image is not in our possession or if the quality is insufficient, a placeholder standard header image will be shown. The photo can be modified at a later date by our graphics department, or replaced by a design of our own (in line with header guidelines).

​Example header on the new site​

Formatting

  • Image style ​
    Select a high-quality, expressive image without any text or logos. Collages, group photos and logos are not suitable for use as header images. Headers require spontaneous, natural, documentary-style photographs. Abstract or conceptual images are better suited to illustrate text elements, so save them for that purpose. 
     
  • Template
    Creating header images on the Canva online graphic design platform. 
    For special graphic designs: contact Nik Römer 

    When the new site is launched, a header will be generated in the correct format for each subsite.

Technical specifications

  • Orientation
    Landscape, aspect ratio: 2/1
     
  • Minimum size
    2000 px W x 1000 px H
    Ideal, maximum size: 4000 px W x 2000 px H         
     
  • Upload capacity
    Limited to 40 MB 
     
  • File format​
    Always save images as JPEG
     
  • File name
    Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces. 

Images in text elements

  • Various aspect ratios are possible for images in text elements.
  • Photo editing in the editor on the webpage is no longer possible, so any image editing has to be done beforehand. 
  • Once uploaded into the text element, the photo is scaled at the front end, depending on the device the visitor is using.
  • If you want all images to be the same size, you'll have to make sure they're the same size before uploading them. 
  • Don't use images in tables. 

​Formatting

  • Image style 
    Select a high-quality, expressive image without any text.
     
  • Template
    Formatting images for text elements on the Canva online graphic design platform

Specifications

  • Orientation
    Portrait, landscape, panorama or square
     
  • Minimum width or height: 1000 px W or H
    Maximum width: 6000 px W

    Please note:
    The image will be scaled up or down depending on the size. 
  • ​If the image is the same size as the full width of the text column: 
    full width of the text column
  • If the image is smaller than the full width of the text column:
    the image is automatically centred, with left or right alignment options. 
  • In case of left or right alignment, the image is automatically scaled down to a suitable format.
  • Upload capacity
    Limited to 40 MB 
  • File format
    Always save images as JPEG
  • File name 
    Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces. 

Call-to-action images and carousels

For call-to-action images (CTA images) and carousels, we always use images in landscape mode. The larger the number of pixels, the better the result. 

The CTA image will be scaled up or down depending on the device and the number. The system always crops the image to a consistent format: 

In desktop mode

  • 1 CTA image: large, centred
  • 2 or 3 consecutive CTA images: shown side by side
  • Up to 3 CTA images can be shown side by side; the fourth one will start a new row. 

On mobile screens
​CTA images are always arranged vertically​

​Formatting

  • Image style 
    Select an expressive image without any text or logos.
    In case of carousel images, there's room to add a separate line of text. 
    CTA images have several display options and styles. 
     
  • Template
    Formatting CTA images and carousels on the Canva online graphic design platform

Technical specifications

  • Orientation
    Landscape, aspect ratio: 2/1
     
  • Minimum size
    1000 px W x 500 px H 
    Ideal, maximum size: 6000 px W x 3000 px H
     
  • Upload capacity
    Limited to 40 MB 
     
  • File format
    Always save images as JPEG   
                   
  • File name
    Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces.

Photo-albums

Different aspect ratios are allowed in photo albums. Images may be uploaded directly, but always observe the minimum width. Make a selection of your best images. 

Specifications

  • Orientation
    Portrait, landscape, panorama or square
     
  • Minimum width: 1000 px W
    Maximum width: 6000 px W
     
  • Upload capacity
    Limited to 40 MB 
     
  • File format​
    Always save images as JPEG.
     
  • File name ​
    Give your image files an SEO-friendly name: e.g. 'students.jpg', not 'UA123.jpg'. Use only lower case and avoid spaces.