Kategorie: HTML5 & CSS3

“rem” vereinfacht Nutzung flexibler Schriftgrößen

Es existieren unterschiedliche Möglichkeiten die Schriftgröße im Webdesign zu definieren. Am häufigsten werden sicherlich “px”, “em” und “%” verwendet. Die jeweiligen Nachteile liegen auf der Hand. “px” ist eine absolute Größenangabe und findet vorrangig in festen Designs Anwendung. Gerade im Bezug auf Responsive Webdesign und “Mobile First” ist aber eine flexible Gestaltung der Schriftgröße fast unumgänglich.

Aus diesem Grund setzen viele moderne Designs auf “em”. Die relative Angabe der Größe mittels “em” birgt in der Praxis aber Probleme bei der Vererbung. Die “em”-Einheit richtet sich meist an der Schriftgröße des Elternelements aus. In simplen Designs ist das noch kein Problem. Bei komplexen Umgebungen mit vielen Verschachtelungen verliert man aber schnell den Überblick und die Gestaltung mittels “em” wird sehr aufwendig. Beispielsweise wird eine Schriftgröße welche als “0.875em” definiert ist, bei jeder Verschachtelung ein Stück kleiner.

“rem” als Lösung?

Die CSS3-Schriftgrößeneinheit “rem” (root em) könnte in Zukunft eine gute Lösung darstellen. “rem” vereint die Vorteile von “px” und “em”. Im Grund funktioniert “rem” genauso wie “em”, mit einem entscheidenden Unterschied: Die Nachteile bei der Vererbung sind nicht vorhanden, weil sich “rem” immer am Root-Element, also die Schriftgröße für html, orientiert.

Üblicherweise wird die Schriftgröße des Root-Elements auf “100%” gesetzt, was einer Standard-Schriftgröße von 16 Pixel entspricht. Alle weiteren mit “rem” definierten Schriftgrößen orientieren sich nun an diesem Ausgangswert. Zur Errechnung des “rem”-Werts muss nur die gewünschte Pixelgröße durch den Standardwert 16 geteilt werden. Nachfolgend ein kleines Beispiel:

html { font-size: 100%; } /* 16px Standard-Schriftgröße */
h1 { font-size: 1.875rem; } /* 30/16 = 1.875 */
h2 { font-size: 1.5rem; } /* 24/16 = 1.5 */
h3 { font-size: 1.25rem; } /* 20/16 = 1.25 */
p { font-size: 0.875rem; } /* 14/16 = 0.875 */

Zur Anpassung der Schriftgröße reicht es aus, wenn die Standard-Schriftgröße der des Root-Elements geändert wird. Das Verhältnis aller definierten Schriftgrößen bleibt dabei unverändert.

Nachteile von “rem”

Wie immer gibt es jedoch Probleme mit älteren Browsern. Die Übersicht unter http://caniuse.com/rem zeigt genauere Details:

rem_support

Problematisch ist im Grunde nur der IE vor Version 9. Auch Opera Mini kann mit “rem” nichts anfangen, was jedoch zu verschmerzen ist. Wenn diese Browser vernachlässigt werden können ist der Einsatz von “rem” absolut empfehlenswert.

Andernfalls muss eine Fallback-Lösung verwendet werden, welche jedoch nicht optimal ist.

html {
    font-size: 100%;
}
h1 {
    font-size: 30px;
    font-size: 1.875rem;
}
h2 {
    font-size: 24px;
    font-size: 1.5rem;
}
h3 {
    font-size: 20px;
    font-size: 1.25rem;
}
p {
    font-size: 14px;
    font-size: 0.875rem;
}

Ältere Browser verwenden den Pixelwert und ignorieren die “rem”-Angabe. Moderne Browser können diese jedoch Nutzen und überschreiben somit den zuerst angegebenen Pixelwert.

Weitere Infos gibts im Artikel “CSS-Tipp: rem als Einheit für Schriftgröße nutzen” bei Elmastudio.

Kategorien: HTML5 & CSS3 Web-Design

HTML5 UP: Kostenlose und moderne HTML5-Templates

Im Internet existieren viele kostenlose Webtemplates, die aber von der Qualität des Quelltexts und der Optik oft nicht überzeugend sind. Die Templates von HTML5 UP gehören definitiv nicht dazu. Aktuell stehen 14 sehr unterschiedliche Templates zum kostenlosen Download bereit. Egal ob man Fotos präsentieren, einen Blog betreiben oder eine Unternehmenswebseite gestalten möchte, für alle Bedürfnisse ist ein passendes Template vorhanden. Dank der Creative-Commons-Lizenz können die Templates frei angepasst und sogar kommerziell verwendet werden. Einzige Voraussetzung ist ein Verweis auf HTML5 UP.

Alle Templates sind auf Basis von HTML5 und CSS3 umgesetzt. Sie sind vollständig responsiv aufgebaut und für Tablets sowie Smartphones optimiert. Außerdem ist eine JavaScript-Bibliothek in Form von jQuery enthalten. Bei HTML5 UP können alle Templates auf einer Demoseite genauer betrachtet werden. Sogar für die Darstellung auf Tablets und Smartphones ist eine Vorschau vorhanden.

Download HTML5UP Themes

HTML5UP

(via)

selfoss RSS-Reader + Google Reader Design

In weniger als zwei Monaten ist es soweit: der Google Reader wird zum 1. Juli 2013 eingestellt. Sehr schade, da ich vor allem die Weboberfläche sehr intensiv genutzt habe. Aus diesem Grund habe ich euch in einem Artikel auch schon zahlreiche Alternativen zum Google Reader vorgestellt.

Obwohl ich bereits alle Dienste mit Weboberflächen getestet habe, konnte ich mich bisher für keine Alternative begeistern. Aktuell kommt einfach nichts an den Google Reader heran. Daher wurde es Zeit erneut die selbstgehosteten Möglichkeiten auszuprobieren. Aktuell gefällt mir selfoss sehr gut.

Der minimalistische RSS-Reader wird von Tobias Zeising als Open-Source-Projekt bei Github entwickelt. Seit der Ankündigung von Google hat selfoss einige Updates erhalten und bekommt auch viel Unterstützung durch die Community. Der Import von Google funktioniert prima und auch die Bedienung weiß zu gefallen. Tastaturkürzel werden unterstützt und auch eine eigene API ist seit der letzten Version verfügbar. selfoss bietet so gut wie keine Möglichkeiten zur Anpassung. Dadurch wirkt der Reader aber auch nicht so überladen wie beispielsweise Tiny Tiny RSS. Andererseits kann der Reader aber auch nicht den eigenen Bedürfnissen angepasst werden. Dennoch hat selfoss großes Potential, ich blicke erwartungsvoll in die Zukunft!

Download selfoss

Google Reader Design für selfoss

Da ich selfoss seit einigen Tagen nutze und mir das Standarddesign etwas unübersichtlich vorkommt, habe ich es kurzerhand etwas modifiziert. Herausgekommen ist ein Design, welches eine große Ähnlichkeit zum Google Reader besitzt ;-) Der Screenshot unten zeigt selfoss mit meinem Design. Bei Interesse könnt ihr euch das Google-Reader-Design für selfoss bei Github herunterladen.

selfoss mit Google Reader Design

selfoss mit Google Reader Design

Windows 8 Design mit CSS3 und jQuery nachbauen

Nach gefühlten 100 Jahren mal wieder ein Artikel von mir über das Thema Web-Design. Bei Google+ hat Sergej heute einen Link gepostet, den ich sehr interessant fand: “Windows 8 Animations“.

Wie der Name schon sagt geht es um die neue Windows 8 Oberfläche und wie man diese mit HTML5, CSS3 und JavaScript bzw. jQuery realisieren kann. Neben dem ausführlichen Tutorial ist auch ein Demo vorhanden, welche das beeindruckende Ergebnis zeigt. Die Demo läuft in aktuellen Versionen von Firefox, Opera, Chrome und Safari. Ebenso im Internet Explorer 10.

Zum Tutorial “Windows 8 Animations”

HTML5 soll 2014 erscheinen, HTML5.1 im Jahr 2016

html5_logo

Das W3C (World Wide Web Consortium) möchte HTML5 unbedingt bis Ende 2014 fertig stellen. Dafür werden einige geplante Neuerungen gestrichen und aus HTML5 herausgenommen. Diese werden dann als Erweiterungen separat weiterentwickelt. Falls sie rechtzeitig fertig werden, sollen die Erweiterungen dann doch noch in HTML5 aufgenommen werden. Ansonsten bleiben sie unabhängige Erweiterungen. Außerdem sollen Tests von bereits im Internet verwendeten Funktionen deutlich geringer ausfallen. Dies betrifft beispielsweise SVG oder MathML.

Des Weiteren wurde festgelegt, dass HTML5.1 bereits im Jahr 2016 erscheinen soll. Die Version wird neue Funktionen ebenfalls in Form von Erweiterungen beinhalten. Verzögern sich geplante Funktionen, werden sie aus HTML5.1 herausgenommen und entsprechend in HTML5.2 integriert werden.

Automatische Silbentrennung mit CSS3

CSS3 bietet in allen Bereichen viele neue Möglichkeiten. Unter anderem auch bei der Textgestaltung. Mit der CSS3-Eigenschaft “hyphens” wurde eine automatische Silbentrennung eingeführt. Damit kann die Darstellung von langen Texten verbessert werden. Wie die Silbentrennung mit CSS3 in der Praxis aussieht, könnt ihr beispielsweise in meinem SSDblog anschauen.

Damit die Silbentrennung funktioniert, muss die korrekte Sprache für die Seite definiert werden. Diese kann für das gesamte Dokument oder für einzelne Textabschnitte angegeben werden.

<html lang="de">

<p lang="de">deutscher Text</p>
<p lang="en">englischer Text</p>

Aktuell muss noch mit den verschiedenen Browser-Präfixen gearbeitet werden, damit die Silbentrennung funktioniert.

p {
   -moz-hyphens: auto;
   -o-hyphens: auto;
   -webkit-hyphens: auto;
   -ms-hyphens: auto;
   hyphens: auto;
}

Mit “auto” entscheidet der Browser selbst, wo getrennt werden muss. Bei “none” wird keine Silbentrennung angewendet. Der Standardwert der Eigenschaft ist “manual”. In diesem fall wird lediglich bei solchen Stellen getrennt, die mit “&shy;­” gekennzeichnet sind.

Firefox und Safari unterstützen die CSS3-Eigenschaft “hypehns” bereits. Opera und Chrome sollten demnächst nachziehen. Auch der Internet Explorer wird die Silbentrennung mit Version 10 unterstützen.

Vector Maps – SVG-Karten mit jQuery

Interaktive Karten auf Webseiten sind ein toller Blickfang und können für verschiedene Zwecke eingesetzt werden. Mit modernen Webtechnologien lassen sich mittlerweile vektorisierte Land- oder Weltkarten realisieren, komplett ohne Flash. Stattdessen kommt bei den beiden jQuery-Plugins jQuery Vector Maps und jVectorMap SVG und JavaScript zum Einsatz.

Die Plugins werden von Firefox, Chrome, Opera, Safari und IE9 unterstützt. jQuery Vector Maps ist dabei eine modifizierte Version von jVectorMap, mit einigen Veränderungen und neuen Funktionen. Beide Plugins bieten auf ihrer Homepage eine ausführliche Dokumentation und einige Beispielkarten an. So ist es unter anderem möglich, eigene Karten zu erstellen oder die Farben anzupassen.

jVectorMap – Weltkarte

Kostenloses, responsives HTML5-Template

Bei EGrappler gibt es seit wenigen Tagen ein kostenloses, responsives HTML5-Template zum Download. Das Template hört auf den Namen “Brownie” und ist primär für Portfolio- oder Business-Webseiten ausgelegt. Nichtsdestotrotz kann das Template als Basis für ein modernes Design dienen und an die eigenen Bedürfnisse angepasst werden. Auch die gute Dokumentation ist dabei sehr hilfreich.

Neben einem Slider auf der Startseite sind auch eine Fotogallerie, ein Kontaktformular, eine Blog-ähnliche Ansicht und ein- bis vierspaltige Layouts vorhanden. Das Template ist in validem HTML5 und CSS3 erstellt und soll auf allen aktuellen Browsern ohne Probleme funktionieren. Außerdem passt sich das responsive Layout automatisch auf die Auflösung von Desktop, Tablet und Smartphone an. Eine Demo von “Brownie” gibts direkt bei EGrappler.

Download Brownie-Template

Gastartikel – HTML5 – die wichtigsten Elemente

Marie arbeitet bei der Projektplattform twago im Online-Marketing. Sie schreibt über App-Programmierung, HTML, iPhone/iPad und Android. Im heutigen Text beschreibt Sie die wichtigsten Elemente von HTML5.

Diese nützliche Technik ermöglicht es, Web-Anwendungen zu entwickeln und bis jetzt nicht denkbare Eigenschaften zu implementieren. Die textbasierte Einführungssprache HTML5 beinhaltet viele neue und zum Teil auch sehr nützliche Elemente. In diesem Artikel werden nun die wichtigsten HTML5-Elemente dargestellt und kurz beschrieben, um einen Überblick über die interessantesten Änderungen zu geben. Die Elemente lassen sich in viele Kategorien einteilen. Fangen wir mit der Kategorie der Gruppierungselemente an.

Gruppierungselemente

figure
Das figure-Element  hat die Aufgabe, die Auszeichnung zusätzlicher Inhalte, beispielsweise Abbildungen mit Bildunterschriften, zu vereinfachen; Damit können Abbildungen mit einer Beschriftung versehen werden, wie man es aus dem Printbereich kennt.

header
Das header-Element benennt den Kopfbereich einer Webseite. In diesem Bereich könnte man ein gewünschtes Logo, die Nagivation oder ein Inhaltsverzeichnis platzieren.

footer
Das footer-Element hingegen legt den Fußbereich der Seite fest. Man kann dort Querverweise, Autor-Informationen oder Informationen über die Webseite platzieren.

nav
Das nav-Element ist zum Auszeichnen der Navigation gedacht. Es wird oft nur für die Hauptnagivation verwendet, muss aber nicht.

section
Dieses HTML5-Element hat die Aufgabe zwei Inhaltsbereiche von einander zu differenzieren und trennt somit verschiedene Bereiche der Website. Dies ist auch der Grund, warum es mehrfach verwendet werden kann.

article
Das article-Element eignet dafür Artikeltexte in Form eines Blocks zu umschließen und somit den wichtigsten Inhalt herauszuheben und auszuzeichnen. Durch das zusätzliche section-Element können die Blöcke in mehrere Abschnitte unterteilt werden.

aside
Mit diesem Element kann man eine Sidebar erstellen. Diese Abschnitte, müssen nicht unbedingt mit dem eigentlichen Inhalt zusammen hängen.

details
Das details-Element führt ergänzende Informationen zu einem Thema an. Meistens wird dieser Inhalt bereits standardmäßig ausgeblendet und muss über einen Klick eingeblendet werden.

Formularelemente

input
Diese Element wurde zur Eingabe von Suchbegriffen, Telefonnummern, URL- und E-Mail-Adressen, Datums- und Zeitangaben, Zahlen sowie Farbangaben erweitert.

datalist
Mit dem datalist-Element können Vervollständigungsvorschläge angegeben werden

output
Das output-Element stellt Ergebnisse von Berechnungen dar.

progress
Das progress-Element bildet die Fortschritte einer Aktion ab. Der Fortschritt einer Aktion kann als Prozent- oder Sekundenangabe angezeigt werden und laufend aktualisiert werden.

meter
Das Element gibt einen statistischen Überblick über einen aktuellen IST-Zustand

source
Mit dessen Hilfe können für Medien verschiedene Quellen angegeben werden, aus denen der Browser dann die angemessenste auswählt.

Textauszeichnungselemente

time
Mit dem time-Element können feste Zeitangaben im Dokument integriert werden.

mark
Mit diesem Element können Textabschnitte oder einzelne Wörter, sowie Passagen hervorgehoben werden. Es wird oft verwendet, um Schlüsselbegriffe auf einer Seite hervor zu heben, die als Ergebnis einer Suche geliefert wurden.

Multimedia-Elemente

Video/audio/canvas
Das wichtigste dieser drei Elemente ist das canvas-Element. Mit diesem Element wird eine rechteckige Zeichenoberfläche erzeugt, die mit Inhalten gefüllt werden kann und in der auch Bewegungen eingebaut werden können. So können dynamische und interaktive Grafiken erstellt werden. Es wird behauptet, dass dieses Element das meiste Potenzial für neue Entwicklungen bietet.

Der große Vorteil von HTML5 ist, dass vieles für den HTML-Programmierer vereinfacht wurde und er durch die Anwendung Zeit einspart. Die Web-Entwickler sparen sich viele unnötige Handgriffe und die Suchmaschinen finden HTML Seiten wesentlich schneller.

Marie Schubert

Kategorien: HTML5 & CSS3 Internet

HTML5-Nachfolger HTML.Next in Entwicklung

html5_logo

Obwohl HTML5 vermutlich erst im Jahr 2014 fertiggestellt sein wird, hat das W3C (World Wide Web Consortiums) mit der Entwicklung am Nachfolger begonnen. Die neue HTML-Version trägt vorerst den Namen HTML.Next. Außerdem hat das W3C aufgerufen, erste Vorschläge für HTML.Next einzusenden.

Gleichzeitig plant man weiterhin mit der WHATWG (Web Hypertext Application Technology Working Group) zusammenzuarbeiten. Die WHATWG setzt sich aus Mitarbeitern der Browserhersteller Mozilla und Opera zusammen. Auch einige W3C-Mitglieder sind Teil von WHATWG. Die WHATWG arbeitet schon länger an einem Nachfolger für HTML5. Wenn es nach der WHATWG geht, soll die nächste HTML-Version ohne Versionsnummer auskommen und stattdessen dynamisch weiterentwickelt werden. Es ist davon auszugehen, dass HTML.Next auf einem Vorschlag der WHATWG basieren wird.