Ich gebe hier ein paar Tipps dazu, wie man eine Webseite für die verschiedenen Bildschirmgrössen optimieren kann. So dass die Webseite auf den verschiedenen Bildschirmgrössen wunschgemäss dargestellt wird.
Unter Inspiration habe ich hilfreiche Links dazu aufgelistet.
Als erstes um sich ein Bild von den zu machen, was ich überhaupt meine: http://mediaqueri.es/
Eine anpassungsfähige Webseite (Responsive Webdesign) erreicht man mittels sogenannter Medienabfragen (Media Queries).
Definition und Erklärung zu Medienabfragen:
http://de.wikipedia.org/wiki/Responsive_Webdesign
http://wiki.selfhtml.org/wiki/CSS/Media_Queries
1. Schritt
Breakpoints genau definieren. Was sind überhaupt Breakpoints? Mit Breakpoint ist eine bestimmte Bildschirmbreite gemeint, an der man definiert wie sich das Design der Webseite ändert.
Auf dieser Webseite wird es genauer erklärt: http://www.mediaevent.de/css/media-query.html
Für diese Anleitung verwende ich folgende Breakpoints:
- Bildschirmbreite kleiner als 480px für Smartphones
- Bildschirmbreite grösser als 1024px für grössere Desktop Computer
2. Schritt
Das Meta Element viewport einfügen, dieser Meta Element erzählt dem Browser wie er die Webseite darstellen soll, inklusive Zoomgrad.
Erklärung und Beispiele zum Meta Element viewport:
http://html5-mobile.de/blog/meta-viewport-fuer-mobile-anpassen
Für diese Anleitung werde ich folgenden Code in meine HTML Datei einfügen:
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0">
3. Schritt
Ältere Internet Explorer Versionen unterstützen keine Medienabfragen daher muss man für diese Browser die Javascript Datei css3-mediaqueries.js einbinden.
Für diese Anleitung werde ich folgenden Code in meine HTML Datei einfügen:
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]-->
Desweiteren habe ich die Javascript Datei modernzir.js heruntergeladen und eingefügt, ist für Browser die Probleme mit HTML5 Elemente haben. Zu finden unter: http://modernizr.com/
Für diese Anleitung ist die HTML-Datei ganz einfach aufgebaut (Kopfzeile, Linker Bereich, Rechter Bereich, Fusszeile) und sieht so aus:
<!doctype html>
<html lang="de">
<!--[if IE 7]><html class="no-js ie7"><![endif]-->
<!--[if IE 8]><html class="no-js ie8"><![endif]-->
<!--[if IE 9]><html class="no-js ie9"><![endif]-->
<!--[if gt IE 9]><!--><html class="no-js"><!--<![endif]-->
<!--[if lt IE 9]>
<script src="http://css3-mediaqueries-js.googlecode.com/svn/trunk/css3-mediaqueries.js"></script>
<![endif]--> //für ältere Internet Explorer Versionen
<head>
<meta charset="utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>Titel der Webseite</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0"> //Meta Element viewport
<link rel="stylesheet" href="design.css"> //CSS-Stylesheet
<script src="modernizr.js"></script> //Javascript Datei für Browser die Probleme mit HTML5 haben
</head>
<body>
<header>
<p>Kopfzeile</p>
</header>
<div id="content">
<article>
<p>Linker Bereich</p>
</article>
<aside>
<p>Rechter Bereich</p>
</aside>
</div>
<footer>
<p>Fusszeile</p>
</footer>
</body>
</html>
4. Schritt
Jetzt muss man nur noch das CSS-Stylesheet erstellen und die Medienabfragen einfügen. Schon hat man eine anpassungsfähige Webseite. Die Medienabfragen sind unten im Stylesheet integriert.
body {
margin:20px auto;
padding:0 20px;
width:100%;
background-color:#ccc;
text-align:center;
}
header {
position:relative;
float:left;
width:100%;
background-color:#ddd;
}
#content {
position:relative;
float:left;
width:100%;
background-color:#eee;
}
article {
position:relative;
float:left;
width:66.66%;
background-color:#fff;
}
aside {
position:relative;
float:left;
width:33.33%;
background-color:#ff0000;
}
footer {
position:relative;
float:left;
width:100%;
background-color:#ddd;
}
/* Medienabfragen */
@media (min-width: 1024px) {
body {
max-width: 1024px;
}
}
@media (max-width: 480px) {
body {
padding: 0px;
}
article {
width:100%;
}
aside {
display: none;
}
}
Erklärung: Habe 2 Breakpoints definiert.
- 1. Breakpoint (min-width: 1024px):Bildschirm ist mindestens 1024px breit.
- 2. Breakpoint (max-width: 480px):Bildschirm ist höchstens 480px breit.
1. Breakpoint: Sobald Bildschirm breiter als 1024px wird, habe ich die Breite des body auf 1024px gesetzt. Sonst ist die Breite des body 100%.
2. Breakpoint: Sobald Bildschirm schmaller als 480px wird, verändert sich das Design folgenderweise: body hat kein Abstand zum Bildschirmrand mehr (padding:0px), linker Bereich übernimmt komplette Breite des Bildschirms (width:100%) und rechter Bereich wird nicht mehr angezeigt (display:none).
5. Schritt
Zu guter Letzt muss man nur noch die Grösse des Browserfensters verändern (gemäss selbst definierter Breakpoints) und kontrollieren ob es auch klappt.
Inspiration
http://dev.w3.org/csswg/mediaqueries4/
http://webdesignerwall.com/tutorials/responsive-design-in-3-steps
http://webdesignerwall.com/tutorials/responsive-design-with-css3-media-queries
Kommentar eingeben