Responsive Webdesign mit SharePoint – Teil 2: Technische Grundlagen des Responsive Webdesigns

Im vorangegangen Artikel “Responsive Webdesign mit SharePoint – Teil 1: Einführung” haben wir uns mit der Frage beschäftigt, was “Responsive Webdesign” überhaupt ist und welche Lösungsansätze uns SharePoint für eine Umsetzung dieses Designkonzeptes an die Hand gibt. In dem nun folgenden Artikel werden wir das Thema von der technischen Seite beleuchten und die Grundlagen näher erklären.

Content strukturieren mit System

Um den Content einer Webseite zu strukturieren, hat sich die Arbeit mit sogenannten Grid-Systemen bewährt und seit 6 Jahren sind sie aus der Webentwicklung eigentlich nicht mehr weg zu denken.

Die Idee dahinter: Die Inhalte einer Webseite werden abstrahiert und in Spalten und Zeilen aufgeteilt. Dies erleichtert dem Webdesigner durch vorgegebene Raster die Konzeption des Layouts. Dem Entwickler gibt es die Möglichkeit, die Inhalte bei der Programmierung einer Webseite unter  Zuhilfenahme von modularen CSS-Klassen zu strukturieren, ohne sich jedes Mal neu um Breitenangaben und Abstände zu Nachbar-Elementen kümmern zu müssen.

Grid System Spalten

Das wohl bekannteste ist das Grid-System 960.gs von Nathan Smith. Es basiert auf einem Layout mit 960px Breite und liefert nicht nur das Css-Framework, sondern auch Preset-Dateien für Photoshop und Fireworks, um ein entsprechendes Raster für die Designentwürfe zu erzeugen.

Um die Inhalte einer Webseite nun auch auf unterschiedlichen mobilen Endgeräten zur Verfügung stellen zu können, muss man sich als erstes von festen Pixelangaben befreien. Wenn möglich, sollten Breitenangaben und Abstände immer in % angegeben werden. Hierfür ist natürlich einiges an Vorarbeit nötig. Die Designentwürfe, die der Entwickler vom Webdesigner erhält, sind nicht flexibel, sondern haben feste Pixelwerte und diese müssen erst einmal umgerechnet werden.

And this will do the magic:

ELEMENT * 100 / CONTENT

Beispiel: Nehmen wir an, das Layout im Designentwurf ist auf eine Breite von 1200px (Content) ausgelegt. Die Breite eines beliebigen Elements beträgt 320px (Element). Nach genannter Formel muss die Breite für dieses Element im CSS nun mit 26.66% angegeben werden.

Dieser fluide Ansatz wird bereits von allen gängigen Grid-Systemen, wie dem 960.gs unterstützt. Erwähnt sei an dieser Stelle noch das Golden Grid System. Wer gerne mit einem CSS Pre-Compiler arbeitet, für den bietet das Golden Grid System eine LESS- und SCSS-Datei. Interessant ist auch die JavaScript-Datei des Golden Grid System, die ein Grid-Overlay im Browser erzeugt, welches per Klick auf einen Button ein und ausgeblendet werden kann.

Flexibles Layout mit Media Queries

Ein weiterer wichtiger Aspekt in der mobilen Webentwicklung sind Media Queries. Sie ermöglichen die Definition unterschiedlicher Layouts auf Geräten mit unterschiedlichen Breiten. Als Entwickler ist man somit nicht mehr gezwungen, eine Webseite für eine bestimmte Gerätebreite zu optimieren. Hochauflösende Desktop-Monitore können so zum Beispiel mit einem 4-spaltigen Layout bedient werden, auf mobilen Endgeräte erfolgt die Darstellung in einem 1- oder 2-spaltigen Layout.

Beispiel für Breakpoints und Layout

Über @media mediatype wird das gewünschte Ausgabemedium genauer spezifiziert. Gängige Mediatypes sind all, screen oder print. Danach folgt eine beliebige Anzahl an Einschränkungen, die mit and verknüpft werden und den zu behandelnden Sonderfall genauer spezifizieren. Neben Angaben über Mindest- und Maximalbreite eines Bildschirms, lässt sich unter anderem bei Smartphones auch mit orientation : (landscape/portrait) die Orientierung des Bildschirms überprüfen.

Hier ein kurzes Beispiel für die Verwendung von Media Queries:

@media screen and (max-width: 480px) {
    #main {
        width: 100%;
        display:block;
    }
    aside {
        display: none;
    }
}

@media screen and (mmin-width: 481px) and (max-width: 1024px) {
    #main {
        width: 70%;
        float:left;
    }
    aside {
        width:30%;
        float:left;
    }
}

Für eine Ausgabe auf Geräten mit einer Maximalbreite von 1024px und einer Minimalbreite von 481px hat dieses Layout eine Haupt- und eine Marginalspalte. Auf Geräten mit einer Breite von maximal 480px wird der Marginalbereich ausgeblendet.

Natürlich ist die Anzahl von unterschiedlichen Gerätebreiten schier unendlich und nicht alle können und müssen in jedem Fall berücksichtigt werden. Will man aber eine möglichst große Bandbreite an Geräten ansprechen, sollten folgende Media Queries auf jeden Fall Beachtung finden.

@media (min-width:320px) {
    /* Smartphones, iPhone, Portrait-Modus bei 480px x 320px */
}
@media (min-width:481px) {
    /* Portrait-Modus bei E-Readern (z.B. Kindle),
    kleine  Tablets mit 600px oder 640px Breite. */
}
@media (min-width:641px) {
    /* Portrait-Modus bei Tablets,
    Portrait-Modus beim iPad,
    Landscape-Modus bei E-Readern,
    Landscape-Modus bei 800px x 480px oder 854px x 480px */
}
@media (min-width:961px) {
    /* Tablets, Landscape-Modus iPad,
    Laptops und Desktop-PCs mit geringer Aulösung */
}
@media (min-width:1025px) {
    /* Große Tablets (Landscape-Modus),
    Laptops und Desktops */
}
@media (min-width:1281px) {
    /* Hochauflösende Laptops und Desktop PCs */
}

Responsive Typografie

„Webdesign ist zu 95% Typografie“ – Treffender hätte es Oliver Reichenstein, Gründer einer der weltweit führenden Designagenturen, iA – information Architects, nicht beschreiben können. Informationen auf Webseiten werden vorwiegend über Text vermittelt, Emotionen über Bilder. Wichtig ist daher eine optimale Lesbarkeit der Informationen zu gewährleisten und das auch auf vielen unterschiedlichen mobilen Endgeräten.

Welche Schriftgröße und Zeilenhöhe für welchen Kontext am besten geeignet ist, lässt sich mit Hilfe des goldenen Schnitts berechnen. Hierbei hilft die Webseite http://www.pearsonified.com/typography/. Nach der Eingabe von Content-Breite und Buchstabenanzahl pro Zeile (das Optimum liegt bei 45-55 Zeichen pro Zeile) generiert ein Algorithmus die optimale Schriftgröße und Zeilenhöhe für den normalen Fließtext und für verschiedene Überschriften.

Goldener Schnitt Typografie

Im Zusammenhang mit responsivem Webdesign sollte aber von einer Angabe in Pixeln abgesehen werden, es hat sich hier inzwischen die Einheit em für die Angabe von Schriftgrößen etabliert. Im Vergleich zu festen Pixelangaben lassen sich mit em-Werten Schriftgrößen in Abhängigkeit untereinander skalieren, da sich der em-Wert stets an der Schriftgröße des Elternelements orientiert. 1em entsprechen hierbei immer 100% der Schriftgröße des Elternelements. Setzt man nun die Font-size im Body auf 100%, passt sich die Schriftgröße an den Standardeinstellungen des Browsers an, die in den meisten Fällen bei 16px liegt.

Ein gutes Online-Tool, das dem Entwickler hier die Umrechnung von px zu em-Angaben abnimmt, findet sich auf pxtoem.com. Man kann sich die Werte aber auch selbst mit der Formel “Ausgangsschriftgröße”/”Basisschriftgröße” ausrechnen. Wie in folgendem Beispiel verdeutlicht wird, ist die Definition von Schriftgrößen in em etwas abstrakter als in px.

body {
    font-size: 100%;
    /* Setzt die Font-Size in den meisten Fällen auf 16px */
}
h1 {
    font-size: 2.5em;
    line-height: 1.45;
}
h2 {
    font-size: 2em;
    line-height: 1.2;
}
h3 {
    font-size:1.5 em;
    line-height:1;
}

Die Angabe der Zeilenhöhe erfolgt hier bewusst ohne Einheit. Dabei bezieht sich die Zeilenhöhe immer auf die Schriftgröße des Elements. Die H1 Überschrift hat als Zeilenhöhe also das 1,45-fache der angegebenen Schriftgröße. Alternativ lässt sich auch line-height: 145%; definieren.

Um nun eine optimale Lesbarkeit der Inhalte auf allen Geräten sicher zu stellen, ist es notwendig, mit Hilfe von Media Queries verschiedene Schriftgrößen und Zeilenhöhen für die unterschiedlichen Gerätebreiten zu definieren. Hierbei kann man sich wieder an den empfohlenen Media Queries aus dem vorangegangenen Abschnitt orientieren.

Wem das alles zuviel Aufwand bedeutet, der kann sich an dieser Stele mit FlowType.JS behelfen. Nach dem Einbinden der JavaScript-Datei passt sich die Schriftgröße der Webseite automatisch an die Fensterbreite an.

Zu guter Letzt noch ein Tipp für die Optimierung von Schrift auf Smartphones mit kleinen Displays, aber sehr hoher Auflösung, wie dem iPhone 5. In der mobilen Version des Safari wird die CSS Eigenschaft text-size-adjust standardmäßig mit auto interpretiert. Dies gibt dem Browser die Möglichkeit Texte selbst zu skalieren, was meist dazu führt, dass die Schriften größer dargestellt werden, als im CSS vorher definiert wurde. Abhilfe schafft hier die Angabe

html { -webkit-text-size-adjust:none;}

im eigenen CSS.

Bilder, Videos und andere Medien

Um Bilder in optimaler Größe auf mobilen Geräten darzustellen, reicht es nicht aus, die Bilder, die im Desktop-Layout verwendet wurden, einfach nur zu skalieren. Eine Skalierung per CSS à la

img {width:20%;}

führt zwar zu einer Verkleinerung im Browser, das Bild selbst wird jedoch in seiner kompletten Größe vom Server angefordert. Aus Performanzgründen ist das absolut nicht zu empfehlen. Eher sollte man sich bereits im Vorfeld darüber Gedanken machen, welche Medientypen überhaupt auf mobilen Endgeräten ausgegeben werden sollten. Auf das ein oder andere Bild kann sicher verzichtet werden, sofern es sich um ein Stilelement des Layouts handelt, wie Hintergrundbilder o.ä.

Um Bilder im Inhaltskontext, wie zum Beispiel Beitragsbilder, flexibel zu machen, kann man sich dann mit folgendem CSS Code behelfen:

img {
    max-width:100%;
    height:auto;
}

Damit passen sich Bilder in Breite und Höhe immer dem Eltern-Element an. Nutzt man für die Einbindung von Bildern das HTML5-Tag „picture“, lassen sich sogar unterschiedlich große Bilder in Abhängigkeit der Device-Breite laden. [siehe http://html5hub.com/]

<picture>
<source media=”(min-width: 1200px)” src=”high-res.jpg”>
<source media=”(min-width: 640px)” src=”med-res.jpg”>
<source src=”low-res.jpg”>
<img src=”fallback.jpg” alt=”Fallback”>
</picture>

Auch Videos und andere eingebetteten Medien (Iframes, Objects usw.) lassen sich mit einem kleinen Trick in flexible Elemente umwandeln. Wie auf der Webseite Webdesignerwall.com beschrieben wird, muss dafür das jeweilige Objekt in einem Wrapper (DIV-Container) untergebracht werden. Dieser Wrapper erhält dann eine Höhe von  0 px und ein padding-Wert zwischen 50 und 60%. Das Objekt selbst benötigt dann ein position:absolute; und eine Höhe und Breite von jeweils 100%, um sich flexibel an sein Eltern-Element anzupassen.

Hier der entsprechende CSS-Code:

.wrapper {
    position: relative;
    padding-bottom: 55 %;
    padding-top: 30px;
    height: 0;
    overflow: hidden;
}

.wrapper iframe,
.wrapper object,
.wrapper embed {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

Frameworks für Responsive Webdesigns

CSS und JavaScript Frameworks sind ein enorm wichtiger Bestandteil moderner Webentwicklung, da sie durch ihren modularen Aufbau und ihre vordefinierten Elementen den Design- und Entwicklungsprozess einer Webseite enorm verkürzen können und somit Zeit sparen. Da die Entwicklung eines eigenen Frameworks Unmengen an Mehraufwand bedeuten würde, kann und sollte auf eines zurückgegriffen werden, welches den eigenen Ansprüchen am ehesten entspricht. Im Bereich des Responsive Webdesign hat sich eines in besonderem Maße hervorgetan: Bootstrap von Twitter.

Bootstrap deckt durch sein fluides Grid-System und eine Vielzahl an CSS-Klassen zum Stylen verschiedenster Webseiten-Elemente wie Navigation, Buttons, Tabs, Suchleisten und Bildern fast sämtliche Bedürfnisse eines Webauftritts ab. Um Bootstrap für das eigene Webprojekt nutzen zu können, ist lediglich die Einbindung einer JavaScript und einer CSS Datei notwendig. Das Framework besitzt bereits vordefinierte Media Queries, bei denen die Elemente sich entsprechend der Bildschirmbreite verhalten und lässt sich durch eigene Styles erweitern.

Der Clou ist, viele Elemente lassen sich durch bestimmte CSS-Klassen bereits verschiedenen Größen auf unterschiedlichen Geräteauflösungen zuordnen. Hierfür müssen keine eigenen Media Queries erzeugt werden. Dazu gibt man den entsprechenden Elementen einfach die Klassen col-lg-*, col-md-*, col-sm-* und col-xs-* mit einer Ziffer zwischen 1 und 12 für die gewünschte Breite des Elements. Das Kürzel lg bedeutet large, md medium, sm small, xs very small und bezieht sich jeweils auf eine bestimmte Mindest- und Maximalbreite der Bildschirmauflösung.

<div id="parent" class="row">
 <div id="child_1" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
 <div id="child_2" class="col-lg-6 col-md-6 col-sm-12 col-xs-12"></div>
</div>

Dieser HTML-Code zeigt exemplarisch die Verwendung von CSS-Klassen des Bootstrap Grid-Systems. Da sich das Grid-System auf ein 12 Spalten-Layout bezieht, verursacht die Verwendung der Klassen col-lg-6 und col-md-6 das die beiden inneren DIV-Container auf großer und mittlerer Desktop-Auflösung 6/12 (entsprechend 50%) der Größe des Elternelements einnehmen und nebeneinander dargestellt werden. Auf kleineren Auflösungen für Smartphones nehmen sie dann 12/12, also 100% der Breite des Elternelementes ein und werden untereinander dargestellt.

exemplarisches Verhalten von Bootstrap Grid Containern

Zusätzlich bietet das Framework eine JavaScript-Bibliothek, die nahezu alle Elemente steuern kann, welche von modernen Webauftritten nicht mehr wegzudenken sind. Dazu gehören zum Beispiel Dialogfenster, Tooltips, Media-Slideshows oder Akkordeon-Menüs. Wer auf bestimmte Elemente verzichten kann, der kann sich auch sein eigenes Bootstrap-Framework erstellen und an die eigenen Bedürfnisse anpassen: http://getbootstrap.com/customize/

Zu den Frameworks, die sich in den letzten Jahren im Bereich Responsive Webdesign einen Namen gemacht haben, zählt auch Skeleton. Dies ist ein, wie der Name bereits vermuten lässt, sehr schlankes Framework, welches nur das Gerüst auf technischer Ebene bietet. Auf Designvorgaben für UI-Elemente wurde bei diesem Framework bewusst verzichtet, um dem Designprozess keinerlei Schranken zu geben. Diese Umstände machen es um einiges schlanker als Bootstrap. Auch Foundation von zurb ist an dieser Stelle ein nennenswertes Framework für mobile Webentwicklung. Der Vorteil sämtlicher responsiven CSS-Frameworks sind die einfache Einbindung und die Möglichkeit schnell und unkompliziert erste Prototypen einer Webseite zu entwickeln, die auf aktuellsten Web-Standards beruhen.

Nachdem wir nun die technischen Grundlagen von “Responsive Webdesign” mit HTML und CSS näher beleuchtet haben, werden wir im 3. Teil dieser Reihe auf die direkte Implementierung von responsivem Design im SharePoint-Umfeld eingehen. Neben Lösungsansätzen zu bekannten Fallstricken, werden wir auch das Zusammenspiel von SharePoint und dem Framework Bootstrap unter die Lupe nehmen.

, , , ,

Keine Kommentare

Hinterlasse eine Antwort