Zur Optimierung von Webseiten (z.B. für die mobile Nutzung,)gehört auch die Optimierung für verschiedene Bildschirme, das Responsive Design.
Hierbei geht es darum den Inhalt für den Benutzer möglichst einfach überblickbar und gut lesbar darzustellen.
Hier ein Beispiel
Für Browserfenster 0-900px:
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res1.png]
für Browserfenster, breiter als 900px:
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res2.png]
für Browserfenster, breiter als 1500px:
[Blockierte Grafik: http://wolf.wolfgang-m.de/beispiele/res3.png]
Warum überhaupt?!
- Standert Webseiten sind meistens nur für eine Bildschirm Größe geschrieben
- Oft muss man dann auf kleineren Geräten horizontal scrollen (sehr nervig)
- Auf Größeren Geräten sehen Normale Seiten doch meistens sehr bescheiden aus
- Auf kleineren Gerätemn muss man erstmal zoomen um den Text ansatzweise Lesen zu können
- ...
Was wir brauchen:
- CSS Kenntnisse
- Ein bisschen Zeit
- ...
Was wir tun:
- Wir legen für verschiedene Bildschirm/Browserfenster Größen, verschiedene Syles an.
Wie wir das machen:
- Durch sog. Media Queries und über die Bildschirm Größe, da z.B. Apple nicht das handheld Prefix akzeptiert.
Media Queries wissen verschiedene Dinge über Den Benutzer:(genaueres später)
- Breite und Höhe des Browserfensters
- Breite und Höhe des Gerätes
- Orientierung (Quer- oder Hochformat)
- Bildschirmauflösung
- ...
Tips:
- Im Stylesheet, zuerst Grund Anweisungen z.B. html, body{} , dann das "kleinste" Design und am Ende das "größte" Design im Stylesheet, da z.B. auch noch heute die mobile Internet-Verbindung meistens langsam ist und dann nicht erst der ganze unwichtige Style geladen wird.
- Wenig Code gewurschtel produzieren
- Für Mobile stylesheets:
- Text Größe +30% ungefähr. (der lesbarkeit wegen)
- Buttons mindestens 30x30px eher mehr! (es gibt auch Personen mit größeren Daumen und Fingern, denen wir es nicht schwer machen wollen)
Nun zum eigentlichen:
Speziefische stylesheets kennt man eventuell von
@media print {
/* Styles für Drucker */
}
Bezogen auf Mobile-Web könnte man auch so arbeiten:
@media handheld{
/* Styles für Mobile Geräte (Außer Apple + Safari) */
}Funktioniern,
doch da zieht uns Apple einen Strich duch die Rechnung.
Also steuern wir unseren neuen Style mit Media Querries, da wir ja auch z.B. style für extrem große Geräte bereit stellen wollen können:
@media screen and (min-width: 1024p){
/* Styles für alle Browserfenster die breiter als 1024px sind */
}an.
article{
width: 100%;
}
@media screen and (min-width: 1024px){
article{
width: 50%;
}
}Jetzt wird auf allen Browser Fenster, die breiter als 1024px sind das 2. Article atribut (width: 50%) gelten.
Dies kann man z.B. auch so erreichen:
<head>
<link rel="stylesheet" type="text/css" media="all and (min-width: 1024px)" href="css/desktop.css" />
</head>Hier werden die Media Queries nur vom Html verarbeitet.
Im Bereich des Mobile Web;
wird so mancher daran verzweifeln, wenn er versucht seinen Inhalt 1024px breit zu machen und das Ganze dann in auf dem iPad in Safari ausprobiert.
Apple und damit Safari will „Das reale Internet“ darstellen und zoomt deswegen alle Webseiten einfach mal viel kleiner, so das der Inhalt keine 1024px breit ist sondern nur z.B. 700 px.
Hierfür kommt in die betreffenden Seite dieses Stück Code:
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
</head>Sorgt dafür das der Inhalt in „orginal“ Größe angezeigt wird.
Okay, stell dir vor, das wars eigentlich auchschon! 
Hier mal ein mini Beispiel-Code:
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<style type="text/css" rel="stylesheet">
header{
height: 60px;
border: 1px solid black;
}
article{
width: 100%;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
margin-left: 5px;
margin-right: 5px;
height: 500px;
border: 1px solid black;
}
@media screen and (min-width: 1024px){
article{
width: calc(50% - 10px);
float: left;
}
}
</style>
</head>
<body>
<header>
</header>
<article>
</article>
<article>
</article>
</body>
</html>Hier einmal ein paar Media Querries:
@media screen and (max-width: 765px){
/* Browserfenster mit maximaler Breite von 765px */
}
@media screen and (min-width: 1280px), print and (min-resolution: 300dpi){
/* Browserfenster mit mindestens 1280px Breite und einer Auflösung von 300dpi */
}
@media screen and (min-device-width: 480px){
/* Gerät mit mindestens 480px Breite (es zäht die Breite! bei Handys also Querformat)
* min-device-height: 480px würde das Gleiche erzielen
*/
}
@media screen and (max-device-width: 480px){
/* Gerät mit maximal 480px Breite (es zäht die Breite! bei Handys also Querformat)
* max-device-height: 480px würde das Gleiche erzielen
*/
}
@media screen and (max-device-width: 480px) and (orientation: portrait){
/* Bildschirm mit maximal 480px Breite und im portrait Modus (Hochformat)*/
}
@media screen and (orientation: landscape){
/* Bildschirm der im landscape Modus ist (Querformat) */
}
@media screen and (-webkit-min-device-pixel-ratio: 2) and (max-device-width: 480px){
/* Geräte wie das Iphone4 */
}
@media screen and (-webkit-min-device-pixel-ratio: 2) and (min-device-width: 768px){
/* Geräte wie das Ipad3 */
}Ein paar wichtige Parameter: (für alle kann man mit min- /max- arbeiten, außer bei orientation! )
- width
Fenster-Breite - device-width Display-Breite
- height Fenster Höhe
- device-height Display-Höhe
- aspect-ratio (z.B. 16/9) ||Fenster-Seitenverhältnis
- device-aspect-ratio (z.B. 16/9) Display-Seitenverhältnis
- color (z.B. 0 für farblose Geräte) Fenster-Farb-Bits
- resolution (z.B. 300dpi) Fenster-Auflösung
- orientation (z.B. landscape oder portrait) Quer/Hochformat
Anbei noch ein paar Parameter für Medien spezifische Stylesheets:
@media print{
body{
color: black;
}
}
@media
- all Stylesheet gilt für alle Ausgabegeräte
- screen Bildschirme
- print Drucker
- handheld Handhelds (Palmtops, PDAs, WinCE-Geräte)
- projection Video-Beamer, Overhead-Projektoren
- tv Tv's
- tty Ausgabegeräte mit feststehenden Zeichentypen (z. B. Terminals, ältere Mobiltelefone)
- speech (CSS2: aural) aurale Ausgabegeräte (z. B. Screenreader)
- braille Blindenschriftfähige Ausgabegeräte
- embossed Blindenschriftfähige Drucker
Hoffe es hilft mal jemandem.
Wenn ihr fragen habt, ich etwas vergessen habe, ihr Fehler entdeckt, sonnstwas ist, Kommentiert 
