Webdesign-Tipps für Smartphone und Tablets

Wir haben neue Tipps und Tricks für Sie parat. Hier lesen Sie Nützliches zu CSS3-Eigenschaften für mobile Websites und Apps. Das Framework jQuery Mobile beinhaltet nicht nur einen Javascript-Part, sondern erzeugt natürlich auch die typische Optik für Web-Apps und setzt hierfür auf CSS. Ganz besonders zeichnet sich jQuery Mobile auch dadurch aus, dass es eine beeindruckende Anzahl von Browsern und Systemen unterstützt. Aus diesem Grund lässt es sich gut als Referenzbeispiel nutzen, wie man CSS(3) für mobile Browser schreibt.

CSS3-Tipps: Farbverläufe

Vergleicht man jQuery Mobile etwa mit jQuery UI, das sich nicht speziell an mobile Endgeräte richtet, zeigen sich deutlich die unterschiedlichen Strategien: Während jQuery UI für Hintergründe und Verläufe auf Bilder setzt, werden diese bei jQuery Mobile nur über CSS3 realisiert. Die einzigen verwendeten Bilder sind Icons.

Zwei Gründe gibt es dafür: Zum einen werden über CSS3 erzeugte Farbverläufe von mobilen Geräten gut unterstützt und zum anderen ist es gerade für mobile Geräte wichtig, für eine bessere Performance HTTP-Requests einzusparen. Allerdings sollten Sie Farbverläufe nur für Buttons, Tabs oder kleine Bereiche nutzen, aber nicht bildschirmfüllend , da bildschirmfüllende Farbverläufe Performance-intensiv sind und deswegen besser vermieden werden.

Ratgeber: Die beste Security-Freeware

Und so werden die Farbverläufe realisiert: Für Browser ohne eine entsprechende Unterstützung wird zuerst eine klassische Hintergrundfarbe angegeben. Dann folgt hinter background-image der Wert linear-gradient mit Start- und Endpunkt des Farbverlaufs, wobei linear-gradient mit browserspezifischen Präfixen angegeben werden muss.

Beim Desktop können Sie ältere Webkit-Browser eigentlich fast schon ignorieren, nicht jedoch bei Smartphones, wo die Browseraktualisierungen nicht in diesem Maße stattfinden und ältere Webkit-Browser noch wesentlich weiter verbreitet sind. Also geben Sie bei Websites für Smartphones besser noch die Syntaxvariante dafür an, und zwar vor der Variante für die neueren Webkit-Browser.

Nach sämtlichen herstellerspezifischen Varianten folgt die Variante ohne Präfix, die derzeit beispielsweise schon vom Windows Phone 8 unterstützt wird. Der folgende Farbverlauf verläuft von oben nach unten, von #222 nach #444.

background: #222;
background-image: -webkit-gradient
(linear, left top, left bottom, from( #444), to( #222)); /* Saf4+, Chrome */
background-image: -webkit-linear-
gradient( #444, #222 ); /* Chrome 10+, Saf5.1+ */
background-image: -moz-linear-
gradient( #444, #222 ); /* FF3.6 */
background-image: -ms-linear-
gradient( #444, #222 ); /* IE10 */
background-image: -o-linear-gradient
( #444, #222 ); /* Opera 11.10+ */
background-image: linear-gradient
( #444, #222 );

Typisch an diesem Beispiel ist, dass die Farbverläufe sehr diskret eingesetzt werden, hier etwa zwischen zwei Grautönen, die nicht sehr weit auseinanderliegen. Deswegen fällt es auch in älteren Browsern, die dies nicht unterstützen, weniger auf, wenn nur die Farbe ohne Farbverlauf angezeigt wird.

CSS3-Tipps: Abgerundete Ecken

Abgerundete Ecken werden ebenfalls über CSS3 realisiert. Dabei ist keine Fallbacklösung vorgesehen; wer rund nicht kann, zeigt eben eckig. Dabei gibt es unterschiedliche Klassen, je nachdem, welche Ecke abgerundet werden soll. Die folgenden Beispiele zeigen eine runde Ecke oben links und oben rechts, für die anderen Varianten gibt es auch entsprechende Angaben:

.ui-corner-tl {
-moz-border-radius-topleft: .6em;
-webkit-border-top-left-radius: .6em ;
border-top-left-radius: .6em ;
}
.ui-corner-tr {
-moz-border-radius-topright: .6em ;
-webkit-border-top-right-radius:
.6em ;
border-top-right-radius: .6em ;
}

Hier werden ebenfalls die für ältere Firefox- und Webkit-Browser benötigten Angaben geschrieben. Abgerundete Ecken können besonders bei Webkit unschön verschwommen wirken, dagegen hilft background-clip: padding-box.

Die etwas weniger bekannte CSS3-Eigenschaft background-clip definiert, wie weit der Hintergrund bei einem Element reicht, mit background-clip: border-box erstreckt er sich auch hinter dem Rahmen, mit background-clip: padding-box hört er vor dem Rahmen auf. Letzteres hilft dabei, unerwünschte Effekte in Webkit-Browsern an den abgerundeten Ecken zu verhindern und wird bei jQuery Mobile für alle abgerundeten Ecken zusätzlich definiert.

/* radius clip workaround for
cleaning up corner trapping */
.ui-btn-corner-tl,
.ui-btn-corner-tr {
-webkit-background-clip: padding-box;
-moz-background-clip: padding;
background-clip: padding-box;
}

Wie Sie im Beispiel sehen, muss die Eigenschaft neben der Standardvariante auch mit dem Webkitpräfix versehen sein und für ältere Firefox-Versionen heißt der Wert padding anstelle von padding-box.

CSS3-Tipps: Transparenzen

All die durch CSS3 neuen Möglichkeiten für Transparenzen werden bei jQuery Mobile verwendet. Für halbtransparente Farben wird auf rgba() zurückgegriffen, wobei für Browser, die es nicht unterstützen, einfach eine Farbe ohne Transparenz angegeben ist, die vor der rgba()-Angabe stehen muss. Hier sehen Sie ein Beispiel, wie ein dünner, leicht transparenter Rahmen festgelegt wird:

.ui-br {
border-bottom: rgb(130,130,130);
border-bottom: rgba(130,130,130,.3);
border-bottom-width: 1px;
border-bottom-style: solid;
}

CSS3-Tipps: Overlays mit Fallback

Auch Overlays, die sich als halbtransparente Schicht über die gesamte Seite legen, werden über CSS realisiert: position: absolute in Kombination mit einer Breite und einer Höhe von 100 Prozent bewirkt eine bildschirmfüllende Größe, opacity: 0.5 erzeugt eine Halbtransparenz. An dieser Stelle wird für ältere IEs (vor Version 9) über filter nachgebessert.

.ui-overlay {
background: #666;
opacity: .5;
filter: Alpha(Opacity=50);
position: absolute;
width: 100%;
height: 100%;
}

opacity ist allerdings der einzige Fall, in dem zusätzlich filter-Angaben für ältere IEs angegeben sind; so wird etwa bei Schatten (box-shadow), rgba(), Transformationen oder auch Farbverläufen darauf verzichtet. Das ist aus Performance-Gründen auch sinnvoll, da filter sich hier negativ auswirkt.

CSS3-Tipps: Tricks und Kniffe für Icons

Bei den Icons für Buttons gibt es eine Reihe von raffinierten Techniken:

• Dank CSS-Sprites wird nur ein HTTP-Request benötigt.
• Die kleinen Kreise, auf denen die Icons sitzen, sind nicht Teil der Bilder, sondern werden über CSS generiert.
• Ein Set Icons kann dank durchsichtiger Hintergrundfarbe unterschiedlich eingefärbt werden.
• Für hochauflösende Displays gibt es besondere Icons.

Schauen wir uns das alles im Detail an: Bei CSS-Sprites werden sämtliche Icons auf einem Bild angeordnet und dieses Bild wird den Elementen, die Icons haben sollen, zugewiesen. Über die Eigenschaft background-position steuern Sie, dass der jeweils benötigte Ausschnitt gezeigt wird. In einem vereinfachten Beispiel gehen wir einmal von dem folgenden HTML-Code aus; nach dem Text "löschen" soll das passende Icon angezeigt werden.

<span class="ui-btn-text">loeschen</
span><span class="ui-icon ui-icon-
delete">&nbsp;</span>

Zur Platzierung des Icons ist folgender Code notwendig: Die allgemeinen Formatierungen, die für alle Icons gelten, werden über die Klasse .ui-icon realisiert.

.ui-icon {
margin-top: -9px;
position: absolute;
top: 50%;
left: 10px;
height: 18px;
width: 18px;
background-image: url(images/icons-
18-white.png);
background-color: rgba(0, 0, 0, 0.4);
border-radius: 9px;
}

Am wichtigsten ist natürlich erst einmal die Zuweisung des Hintergrundbilds; dies ist das PNG-Bild, auf dem sich auf einem transparenten Hintergrund alle Icons befinden. Die benutzten Breiten- und Höhenangaben entsprechen genau der Größe eines Icons. Für die mittige Position sorgt die absolute Positionierung in Kombination mit top: 50% mit einem negativen Wert für margin-top. Mit top: 50% wird die obere linke Ecke des Elements zentriert, ein negativer Margin-Wert, der halb so groß ist wie das Element (in diesem Fall -9 Pixel), schiebt es so weit nach oben, dass nicht die linke Ecke, sondern das Element mittig ist.

Kaufberatung: Shared-Webhosting-Anbieter

Für das konkrete Icon wird eine halbtransparente Hintergrundfarbe definiert. border-radius zeichnet den Kreis, auf dem das Icon steht. Zur Erstellung eines Kreises mit border-radius ist zweierlei notwendig: Zuerst einmal muss das ursprüngliche Element quadratisch sein (im Beispiel 18 Pixel mal 18 Pixel) und zum Zweiten muss der bei border-radius angegebene Wert halb so groß sein wie die Breite/Höhe des Elements (hier: 9 Pixel).

Zurück zur Sprite-Definition: Der eben gezeigte Code gilt für alle Icons. Damit jetzt aber jeweils das richtige Icon angezeigt wird, werden bei den speziellen Klassen die passenden Werte für background-position angegeben und dadurch das Hintergrundbild so verschoben, dass der richtige Ausschnitt zu sehen ist. Für das "Löschen"-Icon lautet er folgendermaßen:

.ui-btn-delete {
background-position: -72px 50%;
}

Bei verschiedenen Themes werden die Icons in unterschiedlichen Farben benötigt. Dafür ist nur ein Icon-Bild nötig, das dank des transparenten Hintergrunds unterschiedlich eingefärbt wird. Das erspart die Erstellung zusätzlicher Iconsets und erlaubt unproblematische Anpassungen. Und jetzt greifen wir noch mal in die Icon-Trickkiste, da war doch noch die Sache mit den hochauflösenden Displays ...

CSS3-Tipps: Hochauflösende Displays

Auf hochauflösenden Bildschirmen wie Retina-Displays wirken normale Icons unscharf. Glücklicherweise ist die Abhilfe hier relativ simpel: Sie brauchen die Bilder in zwei Varianten, die Variante für die Retina-Displays wird doppelt so groß erstellt, wie sie benötigt werden. Danach wird dieses Bild über die CSS3-Eigenschaft background-size auf die richtige Größe skaliert.

Ratgeber: So optimieren Sie Web-Inhalte für Retina-Displays

Damit das nur bei Retina-Displays und nicht bei anderen Bildschirmen passiert, stehen diese Angaben innerhalb von Media Queries, die über device-pixel-ratio beziehungsweise min-resolution nur die hochauflösenden Displays ansprechen.

Zuerst gibt es die Angaben für die normalen Bildschirme, für diese wird das Sprite-Bild icons-18-white.png eingebunden:

.ui-icon {
background: url("images/icons-18-
white.png") no-repeat scroll 0 0 rgba(0, 0, 0, 0.4);
}

Dann kommen innerhalb von Media Queries die Angaben für die hochauflösenden Bildschirme: Das zweite Bild wird eingebunden und über background-size auf die halbe Größe geschrumpft.

@media only screen and (-webkit-min-
device-pixel-ratio: 1.5),
only screen and (min-moz-device-
pixel-ratio: 1.5),
only screen and (min-resolution:
240dpi) {
.ui-icon-plus /* weitere ausgelassen
*/ {
background-image: url(images/icons-
36-white.png);
-moz-background-size: 776px 18px;
-o-background-size: 776px 18px;
-webkit-background-size: 776px 18px;
background-size: 776px 18px;
}
}

Die Größenangabe von 776 Pixel mal 18 Pixel im Beispiel hinter background-size entspricht der Größe des normalen Sprite-Bildes. Damit können anschließend einzelne Icons über dieselben Werte für background-position angesprochen werden, so dass im Weiteren keine Unterschiede mehr zwischen hochauflösender und normaler Icon-Variante gemacht werden müssen.

CSS3-Tipps: Seitenübergänge

Schön animierte Seitenübergänge sind wichtig für mobile Web-Apps und werden bei jQuery Mobile über CSS3-Animationen realisiert. Sehen wir uns das am Beispiel des Fading an, also des Ein- und Ausblendens durch die Änderung der Transparenz. Hierfür werden zuerst die Animationen definiert. Diese laufen von opacity: 0 (ganz durchsichtig) bis hin zu opacity: 1 (ganz sichtbar).

Die @keyframes-Regeln werden mit den Präfixen für Gecko- und Webkit-Browser gekennzeichnet; um Windows Phone 8 zu unterstützen, müssten Sie noch eine @keyframes-Regel ohne Präfix ergänzen.

@-webkit-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}
@-moz-keyframes fadein {
from { opacity: 0; }
to { opacity: 1; }
}

Das Ausblenden geschieht sinngemäß in der umgekehrten Richtung, das heißt von opacity: 1 (normal sichtbar) zu opacity: 0 (ganz durchsichtig):

@-webkit-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}
@-moz-keyframes fadeout {
from { opacity: 1; }
to { opacity: 0; }
}

Damit sind die Animationen definiert, aber sie müssen zugewiesen werden, damit sie auch ablaufen können. Hierfür gibt es die Klassen .fade.out, bei der die oben definierte Animation angegeben und ihre Dauer festgelegt ist. Zusätzlich ist über opacity: 0 der Endzustand definiert.

.fade.out {
opacity: 0;
-webkit-animation-duration: 125ms;
-webkit-animation-name: fadeout;
-moz-animation-duration: 125ms;
-moz-animation-name: fadeout;
}

Dazu gibt es natürlich auch das Gegenstück .fade.in:

.fade.in {
opacity: 1;
-webkit-animation-duration: 225ms;
-webkit-animation-name: fadein;
-moz-animation-duration:
225ms;
-moz-animation-name:
fadein;
}

Für alle Animationen festgelegt ist die Übergangsart:

.in, .out {
-webkit-animation-timing-function:
ease-out;
-moz-animation-timing-function: ease-
out;
}

Um die Animationen auszulösen, werden über Javascript die richtigen Klassen zugewiesen. Übrigens können Sie auch allein über einen auf diese Art erstellten CSS-Code eigene Seitenübergänge in jQuery Mobile definieren.

Für andere Seitenübergänge als das einfache Ein- und Ausblenden werden CSS3-Transformationen herangezogen, für Pop-in und Pop-out modifiziert man die Größe der Elemente über transform: scale(), ein Hereinschieben von der Seite benötigt transform: translate(), die Animation flip kombiniert Drehung mit Skalierung transform: rotateY() scale() und so weiter. Die komplexeren Animationen setzen alle auf 3D-Transformationen, weil diese hardwarebeschleunigt sind.

Nicht alle CSS3-Elemente aus jQuery Mobile wurden hier besprochen - nicht erwähnt sind beispielsweise die Verwendung von text-shadow für Textschatten und box-shadow für Schatten um Elemente, diese zeigen aber wenige Besonderheiten.

CSS3-Tipps: CSS-Strategie für Smartphones

Geht es um Websites, die sich besonders an Smartphones und mobile Geräte richten, so kann man CSS3-mäßig aus dem Vollen schöpfen und dank border-radius, box-shadow und Farbverläufen in vielen Fällen auf Bilder verzichten. Nachbessern muss man auch nur minimal, wo unbedingt notwendig: eine Alternativfarbe bei rgba()-Angaben, vielleicht ein Alphaopacity-Filter für ältere IEs, eine opake Farbe anstelle des Farbverlaufs. Unterschiede im Aussehen werden in Kauf genommen - auf Smartphones und anderen mobilen Geräten sind diese optischen Unterschiede eher akzeptabel als eine schlechte Performance.

Animationen über CSS3 anstelle von Javascript zu realisieren hat den Vorteil, dass diese im Allgemeinen performanter sind, wobei man hier aber natürlich auch immer Tests durchführen muss (was das jQuery-Mobile-Team auch fleißig tut).

Auch wenn im Smartphone-Bereich webkitbasierte Browser vorherrschend sind, sind sie dort nicht die einzigen und zusätzlich werden manche der Smartphone-spezifischen Seiten ja auch mit herkömmlichen Desktop-Browsern angezeigt.

Deswegen ist es wichtig, wo notwendig, die CSS3-Eigenschaften mit allen herstellerspezifischen Präfixen anzugeben und nicht nur mit dem -webkit-Präfix, so wie es auch bei jQuery Mobile praktiziert wird. Und bei den Farbverläufen empfiehlt es sich - im Gegensatz zum Desktop - immer noch zusätzlich die eigentlich veraltete Webkit-Variante zu schreiben, da auf Smartphones ältere Webkit-Derivate länger im Umlauf bleiben.