Gestaltungsraster # Der Desktop-Version liegt ein dreispaltiges Raster mit 1230 px maximal-breite zugrunde.

Transkript

1 Gestaltungsraster # Der Desktop-Version liegt ein dreispaltiges Raster mit 1230 px maximal-breite zugrunde. # Der Smartphone-Version liegt ein zweispaltiges Raster zugrunde. # Die Zwischengröße für Tablets bedient sich je nach Größe ebenfalls einem drei- oder zweispaltigen Raster. Die Spaltigkeit wird ab etwa 620 px von drei auf zwei Spalten reduziert. Praktikabilität und Darstellung ist bei der Umsetzung optimal abzuwägen

2 Content-Aufteilung # Die Seite besteht aus 5 Content-Bereichen: Head, Primär-Content, Sekundär-Content, Foot und Notes: Head Primär-Content Sekundär-Content Foot Notes # Jeder Aufteilungsblock wird mit einer 1 px-linie von dem Angrenzenden visuell getrennt # Geschäftszeiten und Telefonnummer sind stets am oberen Rand angeheftet und sind selbst beim vertikalen Scrollen sichtbar # Der Sekundär-Content ist optional und beinhaltet in der Regel drei wichtige Downloads oder drei aktuelle Neuigkeiten # Platzbedingt wird der Inhalt des Geschäftszeiten-Adresse-Block im Head je nach verfügbarer Displaygröße angepasst: 1. Desktop: Geschäftszeiten, Adresse 2. Tablet: Adresse 3. Smartphone: weicht dem Telefonnummer-Block

3 Responsiveness # Ab einer Breite von etwa 615 px wandelt sich das Raster in ein zweispaltiges Raster um. Dies ist notwendig für die korrekte Darstellung auf Tablets # Die Inhalte im Raster verhalten sich generell fluid, bedeutet, dass der Inhalt auf Zusammenschieben (oder kleinere Displays) weich reagiert # Das Menü wird ab einer Breite von etwa 615 px eingeklappt und hinter einem Menü-Button versteckt. Dies entspricht der Menüdarstellung der Smartphone-Variante. Die Listenpunkte werden dann untereinander in der vollen Breite dargestellt. # Das Kontaktformular wird in der Smartphone-Variante eingeklappt und kann mit einem Button bei Bedarf entsprechend ausgeklappt werden # Content-Elemente mit mehreren runden Bildern und beschreibendem Text daneben hintereinander werden in der Desktop-Variante zweispaltig untereinander (links nach rechts) angezeigt. Die Tablet- und Smartphone-Variante verwandelt das je erste Vorkommen eines runden Bildes in ein rechteckiges, vollbreites Bild. Dessen beschreibender Text wird nun darunter dargestellt. Einzige Ausnahme: Einstiegspunkte (Reparatur, Leistungen, Verkauf) auf der Startseite. Diese werden stets rechteckig dargestellt.

4 Besonderheiten # Bilder sind stets in quadratischer Dimension zu liefern # Alle Bilddaten und Symbole sind für retina-fähige Geräte aufzubereiten. Es ergeben sich also folgende Dimensionierungen: 1. Smartphone-Größe X/2 2. Desktop-Größe X 3. Desktop-Größe für retinafähige Geräte: X * 2 # Smartphone-Geräte zeigen generell die kleinste Variante an. Für retina-fähige Smartphones werden die Bilder der Desktop-Variante (doppelt so groß) verwendet. # Menü-Links werden in der Umsetzung subtil mit Animationen versehen # Tablet- oder Desktop-Geräte zeigen zunächst die Desktop-Größe an. Retina-fähige Geräte verwenden (doppelt so große) Variante. # für die Standortkarte wird Google Maps eingebunden # Die Anzeigereihenfolge ist stets: Smartphone-Auflösung < Desktop-Auflösung < Retina-Auflösung # Logos, Signets und Schriften werden als frei skalierbare Vektoren eingebunden. Zu Signets und Logos zählen: - CMC Computer & Service-Logo - Social Network Logos - Apple Premium Service Provider-Logo - Zertifikate-Logos - Pfeil nach rechts - Pfeil nach links - Pfeil nach unten - Telefonhörer-Symbol - -Symbol - Standort-Symbol - Download-Symbol - Fehler-Symbol - Erfolg-Symbol # Textinhalte von Neuigkeiten werden in der Teaser-Darstellung stets ab einer fest vorgegebenen Anzahl von Worten abgeschnitten und mit Auslassungspunkten ( ) versehen um das Folgen von weiterem Text zu symbolisieren und die Notwendigkeit von Interaktion seitens des Besuchers zu suggerieren # Das CMC Computer & Service Logo ist klickbar und führt zur Startseite zurück. Hierfür ist kein Hover-Effekt vorgesehen # Die Standort-Karte im Foot wird den Farben des CD nach Möglichkeit angepasst # Die Sonderseite Aktuelles zeigt zunächst nur die vier aktuellsten Neuigkeiten an. Mit Klick auf den Link weitere Neugikeiten laden werden asynchron weitere vier Neuigkeiten nachgeladen und der Liste angefügt. Sind keine neuen Neuigkeiten mehr in der Datenbank verfügbar, so wird der Link weitere Neuigkeiten laden wird dann ausgeblendet. Der Nachlade-Link wird zentriert mit ausreichend Freiraum unter den Neuigkeiten angezeigt.

5 # Eventuell entstehender Weißraum unter Foot ist mit der Farbe des letzten Abschnittes zu aufzufüllen

6 Interaktionen # Hover-Zustände sind in der Desktop-Version definiert und dienen der Tablet- und Smartphone- Version als Orientierung # Es wird bei Buttons zwischen den drei Stadien mouse out (standard), mouse over ( hover ) und mouse down ( active, tapped, clicked ) unterschieden: Mouse out Mouse over Mouse down, Text und Pfeil ruscht 1px nach unten; eindrücken wird simuliert!andere Farbvarianten der Buttons verhalten sich analog zu dem Beispiel! # Hover-Stadien von Texten werden mit einer 1 px-linie darunter dargestellt. Bei Fließtexten mit Headline wird stets nur die Headline mit einer Linie darunter versehen. # Bildelemente & Standortkarten werden bei hover leicht hereingezoomt # Der Menüpunkt Kontakt springt bei Klick zum Kontaktformular und setzt bei JavaScript-fähigen Geräten den Eingabe-Fokus direkt im ersten Feld # Eingabefelder besitzen stets ein bezeichnendes Textelement, welches ausgeblendet wird, sobald das zugehörige Eingabefeld mit Text versehen wird. Wird das Feld zurückgesetzt oder der Text daraus entfernt, ist das bezeichnende Textelement wieder sichtbar. Leeres Eingabefeld Befülltes Eingabefeld # Pflichtfelder in Formularen werden nicht hervorgehoben, wenn alle zugehörigen Felder Pflichtfelder sind # Klickbare Inhaltselemente (beispielsweise mit Bild, Headline, Fließtext) sind stets als einheitliches Element anzusehen und können als solches angeklickt, angetappt, mit der Maus berührt werden: # In der Detailansicht einer Neuigkeit kann per Klick auf die Pfeile blättern durch die Neuigkeiten geblättert werden. Dies soll außerdem auch mit der Wischen-Geste ausgeführt werden können.