SlideShare ist ein Scribd-Unternehmen logo
WILLKOMMEN BEIM
LUNCH N‘ LEARN
Masseinheiten auf Screens.
Abstand
Rand
Body
Screen
Devices
Touch
Prozent
Bildschirm
Schrift
Smartwatch
Anzeige
Digital
Anzeige
Smartphone
Verhältnis
Handy
Root
Pixel
GRÖSSE.
© evoq labs AG, 27.10.2016
© evoq labs AG, 27.10.2016
Die Fragmentierung der Devices, sprich Geräte, hat auch zu
Folge, dass die unterschiedlichsten Abmasse der Screens
zunimmt. Durch das omnipräsente Internet und das
ersetzten der Plakate durch Screens, ist von einheitlichen
Abmasse und Auflösungen von Anzeigegeräten nicht
auszugehen. Die Herausforderung besteht darin, dass die
selbe Quelle auf allen Screens gut lesbar und beim
beibehalten der grafischen Botschaft dargestellt werden
kann.
FACTS & FIGURES
Geräte & Screens
Aufgabe
SREENS
Welche Sprache und
Einheiten verwenden
wir bisher?
Welche Einheiten
könnten wir sonnst
verwenden?
EINZELN
Welche Geräte
besitze und / oder
verwende ich täglich
die einen Bildschirm
haben?
Wie gross sind diese
Bildschirme,
Auflösung und
Grösse?
GRUPPE
Vergleicht eure
Ergebnisse mit dem
euren Sitznachbarn.
Gibt es unterschiede
und wenn ja welche?
Sind die
Unterschiede
Frappant?
E-MEDIA
Was schliessen wir
daraus auf die reale
Welt?
Was kommt noch auf
uns zu?
27.04.2016
© evoq labs AG
MIT DEN
RICHTIGEN
MASSEINHEITEN
ARBEITEN
Masseinheiten
Einheiten
RELATIONEN
Das Design wird
flexibler, wenn man
Grössen, Abstände in
relative Masseinheiten
angibt.
Einfacher auf
unterschiedliche
Screens adaptierbar.
MASSEINHEITEN
Viele Masseinheiten
im Screendesign
kommen aus dem
Print oder Handwerk.
Es gibt extra
Einheiten für das
Screendesign,
relative Einheiten.
PHYSISCHE MASSE
• Zentimeter cm
• Millimeter mm
• Zoll in
• Pica pc
• Punkt pt
RELATIVE MASSE
• Schriftgrösse em
• Kleinbuchst. xm
• Nullbreite ch
• Wurzel-Em rem
• Viewport Breite vw
• Viewport Höhe vh
27.04.2016
© evoq labs AG
Lorem Ipsum
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet 0.
Lorem ipsum dolor sit amet, consetetur
sadipscing elitr, sed diam nonumy eirmod
tempor invidunt ut labore et dolore magna
aliquyam erat, sed diam voluptua. At vero eos
et accusam et justo duo dolores et ea rebum.
Stet clita kasd gubergren, no sea takimata
sanctus est Lorem ipsum dolor sit amet.
27.04.2016
© evoq labs AG
Aufbau der Einheiten
Viewport Breite = 100vw
ViewportHöhe=100vh
Schriftgrösse = 1em
Nullbreite = 1ch
2em
Kleinbuchstabe = 1xm
Root Grösse = 1rem
Bild = 150px x 70px
KEINE PIXELS
MEHR
Pixel oder nicht?
Einheiten richtig verwenden
Ob man virtuelle oder physische Einheiten einsetzt und dann noch welche
kommt sehr auf den Einsatz und Verwendung des zu dimensionierendem und
positionierendem Objekt an. Da Rasterbilder naturgemäss in Pixels angegeben
werden kann man diese ganz gut in Pixel im Medium dimensionieren. Schriften,
Satz und Abstände lassen sich sehr gut relativ angeben. Bei der proportionalen
Skalierung auf die unterschiedlichen Screens werden die Abstände im richtigem
Verhältnis übernommen. Damit verhindert man das Abschiessen vom Layout!
Linktipp: selfhtml.org
Fragen und Diskussionen zum Thema erwünscht.
Viel Erfolg beim Umsetzten!
29.03.2016
© evoq labs AG
BESTEN DANK!
Das war‘s.
evoq labs AG
Ottikerstrasse 59
8006 Zürich
T +41 44 262 99 33
F +41 44 262 99 22

Weitere ähnliche Inhalte

Andere mochten auch

MUSIQ SOULCHILD OFFICIAL PRESS KIT
MUSIQ SOULCHILD OFFICIAL PRESS KIT MUSIQ SOULCHILD OFFICIAL PRESS KIT
MUSIQ SOULCHILD OFFICIAL PRESS KIT
MoccaStyles KING
 
Qualitätsbeauftragter (QMB)
Qualitätsbeauftragter (QMB)Qualitätsbeauftragter (QMB)
Qualitätsbeauftragter (QMB)
Norbert Helmke
 
Trends für Schulen
Trends für Schulen Trends für Schulen
Trends für Schulen
John van Dongen
 
Lechuga
LechugaLechuga
Lindner eVideo 2009
Lindner eVideo 2009Lindner eVideo 2009
Lindner eVideo 2009
Lindner Martin
 
Zeugnis Diplomprüfung
Zeugnis DiplomprüfungZeugnis Diplomprüfung
Zeugnis Diplomprüfung
Dirk Engelen
 
A3_Markowsky
A3_MarkowskyA3_Markowsky
A3_Markowsky
ICLEI_ITC
 
Dino
DinoDino
Micro Communities
Micro CommunitiesMicro Communities
Micro Communities
Kupferwerk GmbH
 

Andere mochten auch (13)

MUSIQ SOULCHILD OFFICIAL PRESS KIT
MUSIQ SOULCHILD OFFICIAL PRESS KIT MUSIQ SOULCHILD OFFICIAL PRESS KIT
MUSIQ SOULCHILD OFFICIAL PRESS KIT
 
Qualitätsbeauftragter (QMB)
Qualitätsbeauftragter (QMB)Qualitätsbeauftragter (QMB)
Qualitätsbeauftragter (QMB)
 
Trends für Schulen
Trends für Schulen Trends für Schulen
Trends für Schulen
 
Lechuga
LechugaLechuga
Lechuga
 
DissertationFindings
DissertationFindingsDissertationFindings
DissertationFindings
 
Lindner eVideo 2009
Lindner eVideo 2009Lindner eVideo 2009
Lindner eVideo 2009
 
Zeugnis Diplomprüfung
Zeugnis DiplomprüfungZeugnis Diplomprüfung
Zeugnis Diplomprüfung
 
A3_Markowsky
A3_MarkowskyA3_Markowsky
A3_Markowsky
 
Weblogs.Key
Weblogs.KeyWeblogs.Key
Weblogs.Key
 
Dino
DinoDino
Dino
 
MENSWEAR FLORALS
MENSWEAR FLORALSMENSWEAR FLORALS
MENSWEAR FLORALS
 
Binder1
Binder1Binder1
Binder1
 
Micro Communities
Micro CommunitiesMicro Communities
Micro Communities
 

Masseinheiten auf Screens

  • 1. WILLKOMMEN BEIM LUNCH N‘ LEARN Masseinheiten auf Screens.
  • 3. © evoq labs AG, 27.10.2016
  • 4. © evoq labs AG, 27.10.2016 Die Fragmentierung der Devices, sprich Geräte, hat auch zu Folge, dass die unterschiedlichsten Abmasse der Screens zunimmt. Durch das omnipräsente Internet und das ersetzten der Plakate durch Screens, ist von einheitlichen Abmasse und Auflösungen von Anzeigegeräten nicht auszugehen. Die Herausforderung besteht darin, dass die selbe Quelle auf allen Screens gut lesbar und beim beibehalten der grafischen Botschaft dargestellt werden kann.
  • 6. Aufgabe SREENS Welche Sprache und Einheiten verwenden wir bisher? Welche Einheiten könnten wir sonnst verwenden? EINZELN Welche Geräte besitze und / oder verwende ich täglich die einen Bildschirm haben? Wie gross sind diese Bildschirme, Auflösung und Grösse? GRUPPE Vergleicht eure Ergebnisse mit dem euren Sitznachbarn. Gibt es unterschiede und wenn ja welche? Sind die Unterschiede Frappant? E-MEDIA Was schliessen wir daraus auf die reale Welt? Was kommt noch auf uns zu? 27.04.2016 © evoq labs AG
  • 8. Einheiten RELATIONEN Das Design wird flexibler, wenn man Grössen, Abstände in relative Masseinheiten angibt. Einfacher auf unterschiedliche Screens adaptierbar. MASSEINHEITEN Viele Masseinheiten im Screendesign kommen aus dem Print oder Handwerk. Es gibt extra Einheiten für das Screendesign, relative Einheiten. PHYSISCHE MASSE • Zentimeter cm • Millimeter mm • Zoll in • Pica pc • Punkt pt RELATIVE MASSE • Schriftgrösse em • Kleinbuchst. xm • Nullbreite ch • Wurzel-Em rem • Viewport Breite vw • Viewport Höhe vh 27.04.2016 © evoq labs AG
  • 9. Lorem Ipsum Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet 0. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. 27.04.2016 © evoq labs AG Aufbau der Einheiten Viewport Breite = 100vw ViewportHöhe=100vh Schriftgrösse = 1em Nullbreite = 1ch 2em Kleinbuchstabe = 1xm Root Grösse = 1rem Bild = 150px x 70px
  • 11. Einheiten richtig verwenden Ob man virtuelle oder physische Einheiten einsetzt und dann noch welche kommt sehr auf den Einsatz und Verwendung des zu dimensionierendem und positionierendem Objekt an. Da Rasterbilder naturgemäss in Pixels angegeben werden kann man diese ganz gut in Pixel im Medium dimensionieren. Schriften, Satz und Abstände lassen sich sehr gut relativ angeben. Bei der proportionalen Skalierung auf die unterschiedlichen Screens werden die Abstände im richtigem Verhältnis übernommen. Damit verhindert man das Abschiessen vom Layout! Linktipp: selfhtml.org Fragen und Diskussionen zum Thema erwünscht. Viel Erfolg beim Umsetzten! 29.03.2016 © evoq labs AG
  • 12. BESTEN DANK! Das war‘s. evoq labs AG Ottikerstrasse 59 8006 Zürich T +41 44 262 99 33 F +41 44 262 99 22