"Responsives Webdesign"
Der Trick ist relativ simpel: Mit etwas CSS3 fragt man nach der Breite des Bildschirms (bzw. des Fensters) und überschreibt vorher gemachte Angaben, wenn dies nötig ist.
In etwa so überarbeitet man sein Design:
.wrapper {
width:70%; /*hier eine %-Angabe !!!*/
max-width:960px; /*hier eine Pixel-Angabe*/
}
@media screen and (max-width: 480px) {
.wrapper {width:100%;} /*volle Breite auf kleinen Schirmen*/
}
body {font-size: 100%:} /* 16px */
h1 {font-size: 2.25 em;} /* 36px, 36/16=2.25 */
h2 {font-size: 1.5 em;} /* 24px, 24/16=1.5 */
h3 {font-size: 1.3125 em;} /* 18px, 18/16=1.3125 */
p {font-size: 1 em;} /* 16px */
<style>
html,body{margin:0;padding:0;}
h1,h2,h3,h4,h5,h6,p,blockquote,pre,a,abbr,acronym,address,cite,code,del,dfn,em,img,q,s,samp,small,strike,strong,sub,sup,tt,var,dd,dl,dt,li,ol,ul,fieldset,form,label,legend,button,table,caption,tbody,tfoot,thead,tr,th,td{margin:0;padding:0;border:0;font-weight:normal;font-style:normal;font-size:100%;line-height:1;font-family:inherit;}
article,aside,details,figcaption,figure,footer,header,hgroup,nav,section{display:block;}
audio[controls],canvas,video{display:inline-block;*display:inline;*zoom:1;}
html{overflow-y:scroll;background:#fff;font-size:62.5%;}
body { padding : 22px; font-size:16px;font-size:1.6rem;font-family:"Helvetica Neue",Helvetica,Arial,sans-serif;color:#282828;background-color:transparent; }
h2 { margin-bottom : .75em; font-weight : bold; font-size : 36px; }
div { margin-bottom : 1.5em; padding-bottom : 1.5em; border-bottom : 1px solid #ccc;
}
p { margin-bottom : 22px; line-height : 1.5; }
h3 { margin-bottom : 22px; font-weight : bold; }
p.caption { display : inline-block; padding : 6px; font-size : 12px; text-transform : uppercase; background-color : #ccc; }
</style>
-----------------------------------------------------------------------
<style type="text/css">
#container {
margin: 0 auto;
width: 100%;
}
header {
width: 100%;
height: 100px;
margin: 0 0 20px 0;
float: left;
background: #666;
}
#content {
width: 75%;
height: 500px;
margin: 0 2% 0 0;
float: left;
background: #CCC;
}
#sidebar {
width: 23%;
height: 500px;
float: left;
background: #666;
}
</style>
----------------------------------------------------------------------
Dieses Spiel mit Prozentangaben und (wenn nötig) max-width zieht man auf der gesamten website komplett durch.
Auf ältere Browser muss man dabei nicht allzuviel Rücksicht genommen werden: Für diese gilt stets die Desktop-Version, weil man sinnvollerweise die Ausnahmen für Handys macht - und nicht umgekehrt.
Eine besondere Stellung nehmen Bilder ein:
style="float:left; width:25%; margin-right: 1%;"
bewirkt, dass das Bild auf einem Handy viel kleiner als auf dem Desktop ist - eben 25% der Spaltenbreite.
Auf eine Höhenangabe kann man dabei verzichten, sonst wird das Bild eh verzerrt.
Es gibt Ansätze, die Auflösung der Bilder schon beim Ausliefern vom Server anzupassen. Das ist ein komplexes Thema und nicht unbedingt vernünftig.
Durch das Umrechnen der Bilder verlängert sich die Antwortzeit und Serverlast deutlich. Die Bilder müssen neu komprimiert werden, was die Dateigröße aber nicht immer kleiner macht, trotzdem aber die Qualität stark verringert.
Und nicht zuletzt haben Smartphones eine hohe Pixeldichte und die Möglichkeit zu Zoomen. Etwas Overhead ist daher nicht so schlecht.
Die Ladezeit? Mobile Geräte haben nicht unbedingt eine langsame, aber eine instabile Leitung. Die Dateigröße selbst spielt nicht _so sehr_ eine Rolle.
Wie sag ichs dem Handy?
Smartphones gehen zunächst davon aus, dass eine Website für den Desktop gemacht wurde und tun daher so, als ob sie eine Auflösung von 980 Pixel Breite hätten.
Um das zu ändern, müssen Meta-Tags gesetzt werden:
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="HandheldFriendly" content="true" />
<meta name="MobileOptimized" content="320" />
Das sagt dem Smartphone, dass es die Breite so annehmen soll, wie es am besten zum kleinen Bildschirm passt (Das kann 320 Pixel sein, aber auch größer)
Hilfreich beim Umrechnen ist folgendes Tool unter: http://pxtoem.com/