Vorsicht Stolperfallen:
-----------------------

Editoren nutzen regelmäßig fremde Bibliothekeb z.B. BootStrap, so dass
	neben den Editoren auch die Webseiten immer angepasst werden müssen.

	Responsive Design ist EXTREM statische Programmierung mit
		statischen Seiten, deren Dynamik per CSS-Animation
		vorgetäuscht wird.

	Deswegen werden Fremdbibliotheken benutzt, um so das Desing
		zu erleichtern UND die permanente Anpassung an
		die aktuellen Mobil-Geräte und deren Fähigkeiten
		überhaupt in den Griff zu bekommen.

		Webseiten werden von den Bibliotheken abhängig gemacht.

Diverse Editoren arbeiten nur per Drag und Drop, also visueller Zusammenbau
		der Webseite, z.B.

			RocketCake
			WYSIWYG Web Builder

Man benötigt keinen Editor an sich. Notepad reicht schon aus.


	Editoren mit Coding sind transparenter.

	CSS-Editoren sind regelmäßig spezialisiert und damit keine HTML-Editoren.

Diese Punkte solltest Du beachten, wenn Du eine responsive Webseite planst:

    Der Browser muss CSS3 Media Queries beherrschen und mit diesen umgehen können.
    Ladezeiten im Auge behalten und mediale Inhalte entsprechend anpassen.
    JavaScript hilft bei der Entwicklung, kann aber auch zu langen Ladezeiten führen.
    Navigation ist nicht gleich Navigation! Ein Touchscreen reagiert nicht auf Mouseover-Menüs.
    Der Content der Seite muss gut bemessen sein. Andernfalls können Seiten lang werden und weit unter Fold führen.

Meta Viewport
-------------

Um zu verhindern, dass Mobilgeräte die gesamte Web-Seite in einer sehr kleinen Ansicht darstellen, kann man mit
folgender Einstellung erreichen, dass die Seite sich an den Viewport anpasst, aber dennoch ein Skalieren ermöglicht:

Beispiel
<meta name="viewport" content="width=device-width, initial-scale=1.0, user-scalable=yes">

Folgende Angaben sind möglich:

    initial-scale: 			(Zoom) (initial-scale=1.0 Inhalte werden 1:1 dargestellt)

    user-scalable: 			Mit diesem Attribut kann man definieren, ob der Nutzer auf der Seite zoomen kann (yes) oder nicht (no), der default-Wert ist yes.

    minimum-scale bzw. maximum-scale: 	ermöglichen es, den Zoomgrad einzuschränken. (z.B.: maximal scale=2.0 Inhalt kann maximal 2x-fach vergrößert werden.) 

Da hiermit etwas eingestellt wird, das mit der Darstellung zu tun hat, ist eine Metaangabe natürlich nicht ideal. Langfristig wird diese Metaangabe 
auch entfallen können und statt dessen in CSS erfolgen. Die entsprechende Regel ist aber noch nicht offiziell verabschiedet, wird von den aktuellen 
Browsern leider noch nicht berücksichtigt.

Sie können dieses meta-Element ohne jegliche Nebenwirkungen für jede Ihrer Webseiten einsetzen, um die Darstellung auf Mobilgeräten zu verbessern. 
Die Benutzbarkeit und der Komfort werden auf keinen Fall leiden.

Empfehlung: Unterbinden Sie das Zoomen auf Mobilgeräten nicht. Verwenden Sie <meta name="viewport" content="width=device-width, initial-scale=1.0">

Responsive Content mit CSS umsetzen
-----------------------------------


Attribute von media

width

	Das Merkmal width (Breite) beschreibt bei fortlaufenden Medien die Breite des Anzeigebereichs (Viewport) und bei paginierten Medien die Breite einer Seite.

	    CSS 3.0

	    abgefragter Wert: Eine positive Längenangabe.
	    betrifft: sichtbare und fühlbare Medien.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (width: 60em) { /* Breite entspricht genau 60em */ }
		@media (min-width: 50em) { /* Breite beträgt mindestens 50em */ }
		@media (max-width: 70em) { /* Breite beträgt höchstens 70em */ }

	Beachten Sie: Bei Merkmalen, die sich auf den Anzeigebereich beziehen ist es fast immer sinnvoll, eines der möglichen Präfixe zu verwenden, 
		da die tatsächliche Anzeigebreite beim Benutzer nicht vorhersehbar ist.

height

	Das Merkmal height (Höhe) beschreibt bei fortlaufenden Medien die Höhe des Anzeigebereichs (Viewport) und bei paginierten Medien die Höhe einer Seite.

	    CSS 3.0

	    abgefragter Wert: Eine positive Längenangabe.
	    betrifft: sichtbare und fühlbare Medien.
	    Die Präfixe min- und max- sind erlaubt. 

		Die Anwendung erfolgt analog zum Merkmal width.

device-width

	Das Merkmal device-width (Geräte-Breite) beschreibt die Breite des Ausgabegerätes, z.B. Breite eines Bildschirms in Pixel.

	    CSS 3.0

	    abgefragter Wert: Eine positive Längenangabe.
	    betrifft: sichtbare und fühlbare Medien.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (device-width: 800px) { /* Breite entspricht genau 800 Pixel */ }
		@media (min-device-width: 800px) { /* Breite beträgt mindestens 800px */ }
		@media (max-device-width: 1024px) { /* Breite beträgt höchstens 1024px */ }

	Beachten Sie: Auch wenn ein Ausgabegerät bestimmte Abmessungen besitzt, sagt das nichts darüber aus, ob der verfügbare Bereich auch verwendet wird.

	Empfehlung: Verwenden Sie lieber das Medienmerkmal min-width, bzw. max-width in Verbindung mit relativen Größen.

device-height

	Das Merkmal device-height (Geräte-Höhe) beschreibt die Höhe des Ausgabebereichs, z.B. Höhe eines Bildschirms in Pixel.

	    CSS 3.0

	    abgefragter Wert: Eine positive Längenangabe.
	    betrifft: sichtbare und fühlbare Medien.
	    Die Präfixe min- und max- sind erlaubt. 

	Die Anwendung erfolgt analog zum Merkmal device-width.

device-pixel-ratio

	Das Merkmal device-pixel-ratio (Geräte-Pixel-Verhältnis) beschreibt die Anzahl der tatsächlichen Pixel des Ausgabegeräts pro Pixel auf der Webseite.


	eachten Sie: device-pixel-ratio entspricht keinem Standard. Deshalb kann die Browserunterstützung auch wieder eingestellt werden.
	Verwenden Sie stattdessen resolution.


orientation

	Das Merkmal orientation (Orientierung) beschreibt das Seitenformat eines Ausgabemediums. Die Orientierung entspricht dem Wert landscape (Querformat), 
	wenn der Wert des Merkmals width größer ist als der Wert des Merkmals height. Andernfalls entspricht die Orientierung dem Wert portrait (Hochformat).
	
	    CSS 3.0

	    abgefragter Wert: Eines der Schlüsselwörter portrait oder landscape
	    betrifft: Bitmap-Medientypen. 

	Beispiel

		@media (orientation: portrait) { /* Formate für hochformatige Ausgabemedien */ }



aspect-ratio

	Das Merkmal aspect-ratio (Seitenverhältnis) beschreibt das Verhältnis des Merkmals width zum Merkmal height.

	    CSS 3.0

	    abgefragter Wert: Ein Verhältniswert.
	    betrifft: Bitmap-Medientypen.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (aspect-ratio: 4/3) { /* Fall 1 */ }
		@media (min-aspect-ratio: 4/3) { /* Fall 2 */ }
		@media (max-aspect-ratio: 4/3) { /* Fall 3 */ }

		In diesem Beispiel wird der Verhältniswert 4/3 den Varianten des aspect-ratio-Merkmals zugewiesen. Das Stylesheet wird verarbeitet, wenn
		das Seitenverhältnis des Anzeigebereichs (Viewport) genau 4 zu 3 entspricht (Fall 1). Das ist z.B. bei einem Anzeigebereich von 492 zu 369
		Pixel der Fall. Das Stylesheet in Fall 2 wird angewendet, wenn das Seitenverhältnis 4/3 oder höher (z.B. 5/3 oder 6/3) beträgt. Im Fall 3
		wird das Stylesheet entsprechend nur verarbeitet, wenn das Seitenverhältnis 4/3 oder geringer ist (z.B. 2/3 oder 1/3).

device-aspect-ratio

	Das Merkmal device-aspect-ratio (Geräte-Seitenverhältnis) beschreibt das Verhältnis des Merkmals device-width zum Merkmal device-height.

	    CSS 3.0

	    abgefragter Wert: Ein Verhältniswert.
	    betrifft: Bitmap-Medientypen.
	    Die Präfixe min- und max- sind erlaubt. 

	Die Anwendung erfolgt analog zum Merkmal aspect-ratio.

color

	Das Merkmal color (Farbe) beschreibt die Anzahl der Bits, die ein Gerät pro Farbkomponente (z.B. Rot, Grün oder Blau) verwendet. Kann das Ausgabegerät
	keine Farben anzeigen, ist der Wert 0 (Null) zutreffend. Wird für verschiedene Farbkomponenten eine unterschiedliche Anzahl an Bits verwendet, so 
	zählt die niedrigste verwendete Bit-Anzahl des Geräts.

	    CSS 3.0

	    abgefragter Wert: Eine nicht negative Zahl.
	    betrifft: sichtbare Medientypen.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (color: 2) { /* Einfaches Farblayout */ }
		@media (min-color: 3) { /* Komplexes Farblayout */ }
		@media (max-color: 2) { /* Einfaches Farblayout */ }

color-index

	Das Merkmal color-index (Farbindex) beschreibt die Anzahl der Farbdefinitionen in der Farbtabelle des Ausgabemediums. Verfügt das Medium nicht über 
	eine Farbtabelle, ist der Wert 0 (Null) zutreffend. Üblicherweise besitzen nur Medien eine Farbtabelle, deren Farbfähigkeit eingeschränkt ist.

	    CSS 3.0

	    abgefragter Wert: Eine positive Zahl.
	    betrifft: sichtbare Medientypen.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (color-index: 16) { /* genau 16 Farben stehen zur Verfügung */ }
		@media (min-color-index: 20) { /* Mindestens 20 Farben stehen zur Verfügung */ }
		@media (max-color-index: 256) { /* Höchstens 256 Farben stehen zur Verfügung */ }

monochrome

	Das Merkmal monochrome (schwarz-weiß) beschreibt die Anzahl der Bits, die zur Beschreibung eines schwarz-weiß-Farbtons verwendet werden. 
	Handelt es sich nicht um ein Gerät, das nur Graustufen darstellen kann (sondern auch Farben), ist der Wert 0 (Null) zutreffend.

	    CSS 3.0

	    abgefragter Wert: eine positive Zahl.
	    betrifft: sichtbare Medientypen.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (monochrome: 1) { /* nur schwarz und weiß stehen zur Verfügung */ }
		@media (min-monochrome: 4) { /* Mindestens 16 Graustufen stehen zur Verfügung */ }
		@media (max-monochrome: 8) { /* Höchstens 256 Graustufen stehen zur Verfügung */ }

light-level

	Das Merkmal light-level (Lichtstärke) beschreibt die Lichtverhältnisse der Umgebung, die durch den Helligkeitssensor der Kamera erfasst werden.[1][2]

	    CSS 3.0

	Folgende Einstellungen sind möglich

	    dim: gedämpftes Licht
	    normal
	    washed: sehr hell, in Licht gebadet 

	Beachten Sie: Die Spezifikation verwendet absichtlich keine festen Lux-Werte, da
	    viele Geräte eine eigene Kontrastanpassung vornehmen
	    die Technologien zu unterschiedlich sind (e-ink bleibt im Hellen leserlich, während Flüssigkristall-Displays keinen Kontrast mehr bieten.)
	    Die Helligkeitssensoren häufig nicht geeicht sind.

	Beispiel

		@media (light-level: normal) {
		  p { 
		    background: url("texture.jpg"); 
		    color: #333 }
		}
		@media (light-level: dim) {
		  p { 
		    background: #222; 
		    color: #ccc }
		}
		@media (light-level: washed) {
		  p { 
		    background: white; 
		    color: black; 
		    font-size: 2em; }
		}

pointer

	Das Merkmal pointer (Zeiger) unterscheidet die Genauigkeit der Angabe. So kann die sonst oft schwierige Unterscheidung zwischen 
	Touch-Geräten einerseits (Smartphones und Tablets, aber auch Konsolen wie der Wii) und Geräten mit Maus, Touchpad oder Eingabestiften 
	getroffen werden.[3]

	    CSS 3.0

	Folgende Einstellungen sind möglich:

		fine: für Geräte mit Maus, Touchpad oder Eingabestift
    		coarse: für Geräte mit Touch- oder Gestensteuerung
    	none: nur Tastatureingabe möglich 

	Beispiel

		@media (pointer: coarse) {
		  input {
		    padding 1em;
		    font-size: 2em;
		  }
		}

	Bei Touchgeräten werden die Schriftgröße und der Innenenabstand des Eingabefelds entsprechend vergrößert.

	Da die meisten Geräte mehrere Eingabemöglichkeiten haben, deren Gebrauch aber nicht vorhergesagt werden kann, kann man mit any-pointer herausfinden, 
	ob es die eingabegeräte überhaupt gibt.

	Beachten Sie: Sie können mit pointer und any-pointer nicht 100% auf bestimmte Geräte schließen. Allerdings können Sie in Kombination mit 
	der Displaybreite sehr gut erkennen, ob jemand per Smartphone, Tablet oder Desktoprechner unterwegs ist. Dadurch können Sie Webseiten 
	künftig noch genauer für bestimmte Geräte optimieren.

resolution

	Das Merkmal resolution (Auflösung) beschreibt die Auflösung, also die Dichtigkeit der Bildpunkte auf einem Ausgabemedium. Besitzt das verwendete 
	Ausgabemedium keine rechteckigen Bildpunkte (beispielsweise Drucker), so kann das Merkmal nur in Verbindung mit einem Präfix verwendet werden.

	    CSS 3.0

	    abgefragter Wert: Eine Auflösung.
	    betrifft: Bitmap-Medientypen.
	    Die Präfixe min- und max- sind erlaubt. 

	Beispiel

		@media (resolution: 96dpi) { /* Die Auflösung beträgt 96 Bildpunkte pro Zoll */ }
		@media (min-resolution: 200dpcm) { /* Die Auflösung beträgt mindestens 200 Punkte pro Zentimeter */ }
		@media (max-resolution: 300dpi) { /* Die Auflösung beträgt höchstens 300 Punkte pro Zoll */ }

scan

	Das Merkmal scan (Abtasten) beschreibt den Bildaufbau von Ausgabegeräten des Typs tv. Dieser kann progressiv erfolgen, das entspricht etwa dem 
	Bildaufbau auf einem Computerbildschirm, dann trifft der Wert progressive zu, oder mit Hilfe von Zeilenbildung (d.h. einzelne Bildzeilen werden
	nach und nach dargestellt), dann trifft der Wert interlace zu.

	    CSS 3.0

    	abgefragter Wert: Eines der Schlüsselwörter progressive oder interlace
    	betrifft: Medientyp tv 

	Beispiel

		@media (scan: progressive) { /* Bildschirmlayout */ }


grid

	Das Merkmal grid (Raster) beschreibt die Rastereigenschaft von Ausgabemedien. Bei Ausgabegeräten, die Inhalte in einem Raster darstellen, trifft
	der Wert Eins (1) zu, andernfalls der Wert Null (0).

	    CSS 3.0

    	abgefragter Wert: Eine Zahl (Null oder Eins).
    	betrifft: sichtbare und fühlbare Medientypen 

	Beispiel

		@media (grid: 0) { /* Zahlreiche Schriftformatierungen */ }

Beispieöe zu media
------------------

Ist unsere Seite mit Responsive Design ausgestattet, können wir in der CSS-Datei ziemlich exakt sagen, 
ab welcher Bildschirmbreite sich ein Objekt verändern soll. Dazu benötigen wir lediglich folgende Zeilen in der CSS-Datei:


@media only screen and ( max-width: 767px ) 
{
 HIER KOMMT ALLES CSS REIN
}

Was wir hier sagen ist: Wenn die Auflösung des Browsers (korrekt übersetzt: 
Die Breite des Bildschirms, aber egal…) kleiner ist als 767 Pixel, dann verwende folgende CSS-Elemente noch dazu 
(„HIER KOMMT ALLES CSS REIN„). Und hier können wir ganz gewöhnlich die CSS-Sachen eintragen, die wir sonst so 
in die CSS-Datei schreiben würden.

Erzeugen wir hier also eine eigene Klasse mit dem Namen „hide767“. Die Klasse hat den Auftrag, ein HTML-Objekt ab 
einer niedrigeren Auflösung als 767 Pixel Breite nicht mehr anzuzeigen. Das sieht dann so aus:


@media only screen and ( max-width: 767px )
{
 .hide767
 {
  display: none;
 }
}

Jedes Objekt, das wir nun mit dieser Klasse ausstatten, wie etwa ein

<p class="hide767">MOBIL UNSICHTBARER TEXT</p>

wird nun mobil nicht mehr dargestellt, wenn das Gerät weniger als 767 Pixel Breite ausgibt.


Was für eine Möglichkeit. Wir können jedem Text, jedem Absatz, jedem DIV sagen, dass es unsichtbar sein soll, 
wenn es die bestimmte Breite unterschreitet.

Das geht natürlich auch für andere Größen. Um beispielsweise Text auf einem Smartphone im Querformat noch anzuzeigen, 
es im Hochformat aber nicht anzuzeigen, könnte man diese Breite verwenden:


@media only screen and ( max-width: 479px )
{
 .hide479 {
  display: none;
 }
}

Was passiert mit den Inhalten?

Nun, jedes Element, das die Klasse besitzt, wird trotzdem an alle Geräte übermittelt. Der Unterschied ist nur, dass 
die Elemente ab Unterschreiten der jeweiligen maximalen Breite unsichtbar gemacht werden. Sie sind noch da, aber
eben nicht für den User sichtbar.


Prozentangaben und "Liquid Designs"
-----------------------------------

Eine Zwischenlösung waren die so genannten "Liquid Designs". Hier wird mit
Prozentangaben gearbeitet, anstatt mit festen Pixeln. Dies funktioniert immer bis zu
einem gewissen Grad solange das Layout nicht zu groß/klein wird. Irgendwann sieht es
aber nur noch schlecht aus.
 
css

/* Fixe Breite */
body 
{
  width: 1000px;
}
 

/* Dynamisch */
body
{
  width: 90%;
}


Media Querys anlegen
--------------------

Voraussetzung für Media Queries ist natürlich eine klare Trennung von Gestaltung und Layout!

Es gibt verschiedene Wege die zusätzlichen Eigenschaften einzubinden: So ist es z.B. möglich 
das link Element zu verwenden, wobei das media Attribut dazu dient, das jeweilige Ausgabemedium zu bestimmen.
 
HTML

<link rel="stylesheet" type="text/css" href="style.css" media="screen" />

Es ist aber auch möglich erweiterte Angaben zu machen:
 
HTML


<link rel="stylesheet" type="text/css" href="styles.css" media="screen and (min-width: 750px)" />

Es ist natürlich an dieser Stelle sinnvoll für verschiedene Ausgabemedien jeweils eine separate Stylesheet 
Datei anzulegen. Vergessen Sie nicht, dass immer sämtliche Daten geladen werden, auch die Inhalte der Desktopversion. 
So kann sich die Datenübertragung insbesondere im (noch) langsamen Handynetz sehr in die Länge ziehen.

Mit einer Eigenschaft wie device-width ist es auch möglich gezielt die Breite eines mobilen Geräts wie 
zum Beispiel des iPhones 3G mit der Auflösung 480x320 Pixel anzusprechen.
 
HTML

<link rel="stylesheet" type="text/css" href="mobile.css" media="only screen and (max-device-width:480px)" />


Portrait oder Landscape?

Da es auf dem Smartphone mit Portrait und Landscape zwei unterschiedliche Ansichtsformate zur Darstellung des Inhaltes gibt,
können Sie mit orientation die Merkmale height und width miteinander vergleichen. Wenn height also größer als width ist,
besitzt die Darstellung den Wert portrait, im anderen Fall den Wert landscape.
 
HTML

<link rel="stylesheet" media="all and (orientation:portrait)" href="portrait.css" />
<link rel="stylesheet" media="all and (orientation:landscape)" href="landscape.css" />


Media Query Abfragen für verschiedene Ausgabegrößen in der Übersicht
--------------------------------------------------------------------

Desktop & Laptops
 
css

@media only screen and (min-width: 1224px){... }


Große Bildschirme
 
css


@media only screen and (min-width:1824px){... }

iPads(Portrait)
 
css


@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation:portrait){... }

iPads (Landscape)
 
css


@media only screen and
(min-device-width:768px) and
(max-device-width:1024px) and
(orientation: landscape){... }

Smartphones (Landscape & Portrait)
 
css


@media only screen and
(min-device-width:320px) and
(max-device-width:480px){... }

Smartphones (Landscape)
 
css


@media only screen and
(min-device-width:321px)
{... }

Smartphones (Portrait)
 
css


@media only screen and
(min-width:320px){... }

iPhone 4
 
css


@media only screen and
(-webkit-min-device-pixel-ratio: 1.5), only screen and
(min-device-pixel-ration: 1.5)
{... }


Das Html Gründgerüst
--------------------

Unsere index.html  


<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
       "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<title>Responsive Webdesign</title>
<link rel="stylesheet" type="text/css" href="style.css">
<link rel="stylesheet" type="text/css" href="style-mobile.css">
</head>
<body>

<div id="main">
    <div id="header">
    </div>
    <ul id="navigation">
        <a href="#"><li>Startseite</li></a>
        <a href="#"><li>Wer wir sind</li></a>
        <a href="#"><li>Leistungen</li></a>
        <a href="#"><li>Referenzen</li></a>
        <a href="#"><li>Kontakt</li></a>
    </ul>   
    <div class="clear">
    </div>
    <div id="content">      
        <h1>Jetzt auch f&uuml;r das iPhone verf&uuml;gbar!</h1>     
        <img src="dummybild.jpg" alt="iphone" class="main-img">
        <p class="left">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod 
        tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et 
        accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, 
        no sea takimata sanctus est <strong>Lorem ipsum dolor sit amet.</strong> Lorem ipsum dolor sit 
        amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore 
        et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. 
	Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor 
        invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. 
        At vero eos et accusam et <i>justo duo dolores et ea rebum.</i> Stet Da
        clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet, 
        consetetur sadipscing elitr, <strong>sed diam nonumy eirmod</strong> tempor invidunt ut labore et 
        dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo d</p>
        <div class="clear">
        </div>
    </div>
</div>

</body>
</html>


Unsere Html Datei besitzt 2 CSS Dateien. Eine normale style.css und eine style-mobile.css. 


Unsere Standard CSS Datei für den Desktop Rechner

Hierbei handelt es sich um ein fixes Layout mit 2 Spalten Text Content und einer horizontalen Navigation.
Um eine schöne Typografie zu erhalten binden wir die Font Gentium Basic von den Google Web Fonts ein.
Mit der Anweisung max-width:100%; sorgen wir dafür, dass das Bild immer passend eingefügt wird.

style.css  
css

	

@import url(http://fonts.googleapis.com/css?family=Gentium+Basic);

/* Allgemein */

body{
    background-color:#E8E8E8;
    font-size:14px;
    font-family: 'Gentium Basic', serif;
}

h1, ul, li, p{
    padding: 0;
    margin: 0;  
}

blockquote{
    float:right;    
}

h1{
    font-size:50px; 
    color: #4A4A4A;
    margin-bottom:13px;
    text-shadow: 1px 1px #333;
}

.main-img{
    margin: 0 40px 22px 0;
    float:left;
    max-width: 100%;
}

.left{
    float:left;
    width:570px;
    margin-right:40px;
}

/* Content */

#main{
    margin:0 auto;
    padding: 10px;
    width:1000px;
}

#header{
    background-image:url("logo-website.png");
    width:149px;
    height:68px;
    margin: 15px 0 15px 0;
}

#content{
    padding:15px 15px 35px 30px;
    background-color:white;
    border-bottom-right-radius: 5px;
    border-bottom-left-radius: 5px;
}

/* Navigation */

ul#navigation {
    background-color:#E0E0E0;
    border-top-right-radius: 5px;
    border-top-left-radius: 5px;
    float:left;
    width:100%;
}

ul#navigation li {  
    float:left;
    position:relative;
    list-style: none;
    margin:10px 16px 10px 4px;
    padding:15px;
    background-color:white;
    border-radius: 5px;
    border:1px solid grey;
    font-size:12px;
    font-weight:bold;
    width:161px;
}

ul#navigation li:last-child{
    margin-right:2px;
}

ul#navigation li:hover{ 
    background-color:grey;  
}   

ul#navigation a{
    text-decoration:none;
}

ul#navigation a:visited{
    color:black;
}

ul#navigation li a:hover{
    color:#7A7A7A;
}

.clear{
    clear:both; 
}

Jetzt müsste es so aussehen: (Screenshot)

Unser Standard Layout steht jetzt. 


Eine Version für den Tablet PC

Nun legen wir die Datei style-mobile.css an. Danach implementieren wir Media Queries für eine Breite von 1000px:
 
css


@media all and (max-width: 1000px) {
...

Wir verkleinern nun mit folgenden CSS Anweisung das #main Div auf 650px.
 
css

	

#main {
    width: 650px;
} 

Den Textcontent machen wir jetzt auch einspaltig, indem wir der Klasse .left die float Eigenschaft nehmen:
 
css
	

.left{
    float:none;
}

Damit das Layout auch weiterhin stimmig aussieht habe ich noch weitere Änderungen durchgeführt:
 
css


h1{
    font-size:30px; 
    margin-bottom:7px;  
}

ul#navigation li {  
    width:100px;  
    padding: 5px;
}     

/* Content */
    
#content{
    padding: 5px 15px 15px 10px;  
}

} /*Klammer der Media Queries wird zugemacht! */

Nun können wir mit der Web-Developer Erweiterung und das erste Resultat anschauen. (Bild Screnshoot 800x600)




Eine Version für das Smartphone / iPhone

Bei einem Ausgabemedium wie dem iPhone muss man natürlich Bedenken, dass hier andere Gesetze für die
grafische Gestaltung gelten, als für einen Desktop Monitor der auf euerem Schreibtisch steht. So hat
sich auf Smartphones Blocksatz und Weiß als Schriftfarbe auf schwarzem Hintergrund bewährt. Zusätzlich
machen wir die Buchstaben größer und erhöhen ein bisschen mit der Anweisung line-height:1.2 die Zeilenhöhe.
Wer tiefer in die Materie "Lesbarkeit auf dem iPhone" einsteigen will wird in der aktuellen Ausgabe
der Typo Page fündig.

Desweiteren haben wir es auch mit einem Touchscreen und dem Portrait Format zu tun. Wir müssen also dafür sorgen, 
dass man das Menü bequem mit den Fingern bedienen kann. Die CSS Pseudoklasse :hover hätte in diesem Anwendungsfall
also keinen Sinn.
 
css


@media all and (max-width: 350px) {   
    
    /* Allgemein */
    
    body{
        font-size:24px; 
        line-height: 1.2;
    }
    
    #main {
        padding: 0px;
        width:340px;
        float:left;
    }
    
    #header{
        margin:0 auto;
    }

Hier wieder ein paar zusätzliche Anpassungen an den Content, damit das Layout weiterhin stimmig bleibt. Auch die 
oben genannten Farbändernungen werden jetzt durchgeführt.
 
css


h1{
        font-size:28px; 
        color:#E0E0E0;
    }
    
    .left{
        width:100%;
        float:none; 
    }
    
    .main-img{
        margin: 0 0 5px 0;  
    }
    
    /* Content */
    
    #content{
        margin-top:4px;
        padding: 10px 15px 25px;    
        text-align: justify;
        background-color:black;
        color:white;    
        border-radius: 5px;
        width:280px;
    }

Nun wird es richtig Interessant, wir bearbeiten unsere Navigation. Wie vorhin schon gesagt ist diese Navigation jetzt nicht
mehr horizontal, sondern vertikal, damit man sie mit dem Finger auf dem Smartphone gut steuern kann.
 
css

	

    ul#navigation {
        max-width:100%;
        background-color:#E8E8E8;
    }
    
    ul#navigation li {  
        list-style: none;
        margin: 3px 0 0 0;
        text-align:center;
        font-size:18px;
        width:300px;
    }
    
    ul#navigation li:active{
        background-color:black;
        color:white;
    }
    
    ul#navigation li:hover{
        background-color:black;
        color:white;
    }   
}

Viewport-Meta-Tag
-----------------

Das Viewport-Meta-Tag weist Ihren Browser an, wie Abmessungen und Skalierung der Seite auf die Breite des Geräts 
angepasst werden sollen. Wenn das Meta-Viewport-Element nicht gefunden wird, zeigen mobile Browser die Seite 
standardmäßig in der Desktop-Bildschirmbreite an, was in der Regel ca. 980 px entspricht, sich jedoch von 
Gerät zu Gerät unterscheiden kann. Anschließend versuchen mobile Browser, für eine bessere Darstellung zu sorgen, 
indem sie die Schriftgrößen erhöhen und die Inhalte entweder skalieren, damit sie auf den Bildschirm passen, 
oder nur einen Teil der Inhalte anzeigen, die auf den Bildschirm passen. 

<meta name="viewport" content="width=device-width, initial-scale=1.0" optional>

content

   width=device-width zur Abstimmung auf die Breite des Bildschirms in geräteunabhängigen Pixeln.

initial-scale

   initial-scale=1, um eine 1:1-Beziehung zwischen CSS-Pixeln und geräteunabhängigen Pixeln zu gewährleisten.

optional

   minimum-scale=

   maximum-scale=

   user-scalable=


CSS-Datei einbinden
-------------------

Beispiel für Brwoser-Fensterdimension

<link rel="stylesheet" media="(max-width: 640px)" href="max-640px.css">
<link rel="stylesheet" media="(min-width: 640px)" href="min-640px.css">
<link rel="stylesheet" media="(orientation: portrait)" href="portrait.css">
<link rel="stylesheet" media="(orientation: landscape)" href="landscape.css">
<style>
  @media (min-width: 500px) and (max-width: 600px) {
    h1 {
      color: fuchsia;
    }

    .desc:after {
      content:" In fact, it's between 500px and 600px wide.";
    }
  }
</style>

    Wenn der Browser zwischen 0 px und 640 px breit ist, kommt max-640px.css zum Einsatz.
    Wenn der Browser zwischen 500 px und 600 px breit ist, kommt @media zum Einsatz.
    Wenn der Browser 640 px breit oder breiter ist, kommt min-640px.css zum Einsatz.
    Wenn der Browser in der Breite größer ist als in der Höhe, kommt landscape.css zum Einsatz.
    Wenn der Browser in der Höher größer ist als in der Breite, kommt portrait.css zum Einsatz.

min-width und max-width basieren auf der Größe des Browserfensters.


Relative Größen für Bilder verwenden
------------------------------------

img, embed, object, video {
  max-width: 100%;
}


Der nächste Code-Schnipsel ist banal, aber wirkungsvoll. Mit ihm skaliert ihr alle Bilder auf die jeweilige Breite des Displays und 
bewirkt die typische großflächige “Mobile-Optik”.

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

Bilderlayout festlegen
----------------------

.example {
  height: 400px;
  background-image: url(small.png);
  background-repeat: no-repeat;
  background-size: contain;
  background-position-x: center;
}

@media (min-width: 500px) {
  body {
    background-image: url(body.png);
  }
  .example {
    background-image: url(large.png);
  }
}

Urls
----

Annotation im HTML-Code

Fügen Sie auf der Desktop-Seite http://www.example.com/page-1 Folgendes hinzu:

	<link rel="alternate" media="only screen and (max-width: 640px)" href="http://m.example.com/page-1" >

Auf der mobilen Seite http://m.example.com/page-1 lautet die erforderliche Annotation wie folgt:

	<link rel="canonical" href="http://www.example.com/page-1" >

	Das Tag rel="canonical" auf der mobilen Seite, das auf die Desktop-Seite verweist, ist obligatorisch.