Uhr HTML-Vorlagen

Uhr-HTML-Vorlagen für digitale, analoge und Weltzeitanzeigen

Eine Uhrenoberfläche hat eine sichtbare Aufgabe: die aktuelle Uhrzeit so anzuzeigen, dass man sie in einer Sekunde ablesen kann. Uhr-HTML-Vorlagen liefern das Markup für die Anzeige und die restlichen Quelldateien, bereit zum Bearbeiten und Veröffentlichen auf Ihrem eigenen Hosting. Darin befindet sich möglicherweise eine Digitalanzeige, ein analoges Zifferblatt oder eine Übersicht aus Städtekarten.

Die Wahl zwischen Ziffern und Zifferblättern

Eine Digitalanzeige ist der schlichtere Ausgangspunkt und benötigt kaum mehr als Container für Stunden, Minuten und Sekunden. Eine Markierung für AM/PM oder ein 12-/24-Stunden-Umschalter befindet sich meist daneben. Ein analoges Zifferblatt funktioniert anders, da das Zifferblatt, die Stundenmarkierungen und die Zeiger jeweils ein eigenes Element benötigen, bevor ein Skript sie dreht.

Die meisten Uhrenoberflächen bestehen aus einigen wiedererkennbaren Teilen:

• Zeitwerte mit einem separaten Platz für Sekunden
• Stunden- und Minutenzeiger über einem skalierten Zifferblatt
• eine Datumszeile, eine Wochentagsanzeige oder ein Alarmsymbol
• ein Stadtname und eine Zeitverschiebung für jede zusätzliche Zeitzone

Bei den Städtekarten beginnt sich das Markup zu wiederholen, da eine Übersicht von acht Städten einen Block achtmal verwendet. Der Nicepage Grid-Repeater deckt dieses Muster ab, und die Grid Repeater Element-Dokumentation erklärt, wie ein einzelnes Element das Layout für viele Einträge definiert. Produktzeilen für Wanduhren wiederholen sich auf dieselbe Weise.

Markup, das sich jede Sekunde aktualisiert

Zwei völlig unterschiedliche Dinge laufen hier unter demselben Namen. Manchmal ist die Uhrzeit fest in die Datei geschrieben und bewegt sich nie, was für einen Screenshot in Ordnung ist, in der Produktionsumgebung jedoch irreführend wirkt. Eine funktionierende Uhr benötigt JavaScript, um die lokale Zeit auszulesen und sie wieder in die dafür vorbereiteten Elemente zu schreiben, während ein Countdown dasselbe Prinzip rückwärts auf ein Ziel-Datum anwendet.

Der Sekundenzeiger ist der ehrliche Test. Eine Demo kann überzeugend wirken, während im Hintergrund nichts abläuft – daher verdient eine Vorschau einige Sekunden Ihrer Aufmerksamkeit.

Lesbarkeit auf kleinen Bildschirmen

Uhren werden aus größerer Entfernung abgelesen als die meisten anderen Oberflächenelemente. Ziffern, die auf dem Desktop elegant wirken, verschwimmen auf einem Smartphone bei ausgestrecktem Arm zu einem grauen Brei, und ein dünner Sekundenzeiger geht vor einem unruhigen Foto verloren.

Was später angepasst wird, sind der Ziffernstil, die Stärke der Zeiger und die Frage, ob die Anzeige hell oder dunkel gestaltet ist. Kontrast ist am wichtigsten, denn eine Uhr, die niemand auf einen Blick ablesen kann, hat ihren einzigen Zweck verfehlt. Es empfiehlt sich, frühzeitig festzulegen, was genau Sie erstellen, da eine einzelne Uhr, eine Zeitzonentafel und ein Countdown mit unterschiedlichen Elementen beginnen.