...
| Expand | ||||
|---|---|---|---|---|
| ||||
|
Im PEIQ PORTAL integrierte Logos und Grafiken
Folgende Logos und Grafiken werden seitens PEIQ hinterlegt:
Grafik | Dateityp | Größe | Anmerkungen | ||||||
|---|---|---|---|---|---|---|---|---|---|
Logo |
| keine Einschränkungen | Aktuelles Logo als Vektor-Grafik (vektorbasiertes | ||||||
monochromes Logo |
| keine Einschränkungen | Dieses Logo wird beispielsweise beim Sticky-Header verwendet. Das Logo muss nicht zwangsläufig monochrom sein, sondern sollte im Kontrast zum Sticky-Header stehen. Bitte als Vektor-Grafik (vektorbasiertes | ||||||
Favicon |
| 16×16 oder 32×32 | Das Favicon ist ein sehr kleines Symbol bzw. Logo, wie es typischerweise in der Adresszeile eines Webbrowsers links von der URL bzw. im Tab angezeigt wird. Das Favicon dient meist dazu, die zugehörige Website auf wiedererkennbare Weise zu kennzeichnen. | ||||||
Apple Touch Icons |
| In den folgenden Auflösungen:
| Touch Icons werden von gängigen Smartphones und Tablets genutzt, um Lesezeichen auf dem Homescreen darzustellen. Zudem nutzen gängige Browser Touch Icons auf der Startseite des Browsers, um die regelmäßig besuchten Seiten des Benutzers bzw. der Benutzerin anzubieten. | ||||||
Icon |
| 192x192 | Icon für andere Systeme. | ||||||
Open Graph Logo |
| Best Practices siehe hier. | Das Open Graph Logo wird als Fallback verwendet, um auf Facebook geteilte Links zu Seiten zu bebildern, die über keine eigenen Bilder verfügen, wie beispielsweise die Startseite. Bei Beiträgen wird beispielsweise immer das erste Bild des Beitrags genutzt. | ||||||
AMP-Publisher-Logo |
| Höhe von 60px | Informationen und Hinweise zum AMP-Publisher-Logo finden sich hier. Das AMP-Publisher-Logo wird auch ohne aktiviertes AMP für die Schema-org-Auszeichnung benötigt. | ||||||
Segmentmarkierungen
|
| keine Einschränkungen | Um eine optimale Darstellung des Logos auf allen Endgeräten zu gewährleisten, bindet PEIQ die Grafiken ausschließlich als |
SVG-Dateien überprüfen
Die SVGs müssen kundenseitig angeliefert werden. Hierbei ist auf einige Punkte zu achten. Nachfolgend werden einige nützliche Hinweise zum Umgang und zur Überprüfung von SVG-Dateien gegeben.
...
| Note |
|---|
Enthält ein SVG eingebettete |
Daumenregel anhand der Dateigröße
Ohne sich den Inhalt der SVG-Datei selbst in einem Editor anzuzeigen, lässt sich oftmals schon anhand der Dateigröße sehen, ob es sich um ein gewünschtes vektorbasiertes SVG oder um ein unerwünschtes SVG mit eingebetteten oder verlinkten Grafiken handelt!
...
Je nach Komplexität (oder eben nicht) des Motivs kann aber auch fälschlicherweise die ein oder andere Daumenregel greifen. Deswegen ist eine exakte Kontrolle unter Zuhilfenahme eines Editors unabdingbar.
SVG aus Adobe Illustrator exportieren
Um ein möglichst brauchbares SVG aus Adobe Illustrator zu exportieren, empfiehlt es sich folgende Einstellungen zu beachten.
Datei → Exportieren → Exportieren als…
Dateityp: SVG (*.SVG) und Option Zeichenflächen verwenden
deaktivieren, wenn nur das Objekt selbst ohne Rand exportiert werden soll. Das ist üblicherweise die gewünschte Einstellung.
aktivieren, wenn die Zeichenfläche gewünscht ist, z. B. um einen Abstand um das eigentliche Element zu haben.
Stil: Inline-Format
Schrift: SVG
Bilder: Beibehalten
Objekt-IDs: Eindeutig (erstellt UUIDs)
Dezimalstellen: 2
Minifizieren: AN
Responsiv: AN
...
Optimierung von SVG-Dateien
Abhängig vom Tool, mit dessen Hilfe die SVG-Datei erstellt wurde, sind in der Datei zusätzliche, meist überflüssige Informationen enthalten. Mit einem Tool wie beispielsweise SVGOMG! lassen sich diese (meist) verlustfrei entfernen.
...
| Note |
|---|
ACHTUNG: Wenn ein SVG mit SVGOMG optimiert werden soll, muss die Option Clean IDs deaktiviert sein, sonst macht SVGOMG aus den UUIDs wieder a, b, c, … was bei mehreren SVGs pro Seite wieder zu Konflikten führt! |
Responsive SVG-Dateien
Im Zusammenhang mit responsiven SVG-Dateien ist darauf hinzuweisen, dass eine verlustfreie Skalierung nicht automatisch zu einer guten Lesbarkeit des entsprechenden Motivs führt. Mittels Media-Queries kann ein SVG selbst responsiv bzw. adaptiv werden.
...
| Info |
|---|
Ggf. ist es auch hier sinnvoll, die Klassen |
Verwandte Seiten
| Filter by label (Content by label) | ||||||
|---|---|---|---|---|---|---|
|
...