Responsive Webdesign Tutorial - Media Queries - Teil 2

0 | 44948 Aufrufe
Sie können diese Wikiseite nach der Anmeldung auf Webmasterpro bearbeiten. Helfen Sie mit und verbessern Sie "Responsive Webdesign Tutorial - Media Queries - Teil 2" mit Ihrem Wissen!

Anzeige Hier werben

Zielsetzung unserer Site

Nun möchten wir Beispielhaft die Internetseite unserer Agentur im Stile von responsive Webdesign und Media Queries umsetzen. Dazu wollen wir in diesem Tutorial 3 Design Abstufungen durchführen. Eine Desktop Version, eine für das iPad und noch eine Ausgabe für ein Smartphone. Natürlich kann man dann in der Praxis viel weiter differenzieren, aber dies ist jetzt in diesem Beispiel nicht sinnvoll.

Voraussetzung

Um die Site dann gut Testen zu können empfehle ich das Firefox-Plugin Web-Developer für diejenigen, die es noch nicht haben. Dort kann man oben unter "Größe" verschiedene Screengrößen für unsere Media Queries festlegen.

Bild zu Responsive Webdesign Tutorial - Media Queries - Teil 2

Das Html Gründgerüst

Unsere index.html  
HTML
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
<!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
  1
  2
  3
  4
  5
  6
  7
  8
  9
 10
 11
 12
 13
 14
 15
 16
 17
 18
 19
 20
 21
 22
 23
 24
 25
 26
 27
 28
 29
 30
 31
 32
 33
 34
 35
 36
 37
 38
 39
 40
 41
 42
 43
 44
 45
 46
 47
 48
 49
 50
 51
 52
 53
 54
 55
 56
 57
 58
 59
 60
 61
 62
 63
 64
 65
 66
 67
 68
 69
 70
 71
 72
 73
 74
 75
 76
 77
 78
 79
 80
 81
 82
 83
 84
 85
 86
 87
 88
 89
 90
 91
 92
 93
 94
 95
 96
 97
 98
 99
100
101
102
103
104
105
106
107
@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
1
2
@media all and (max-width: 1000px) {
...

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

 
css
1
2
3
#main {
    width: 650px;
} 

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

 
css
1
2
3
.left{
    float:none;
}

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

 
css
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
@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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
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
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
    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;
    }   
}

Jetzt können wir wieder mit Web-Developer unser Resultat beobachten, oder einfach das Browserfenster manuell verschieben. Ich bin mir nicht sicher, ob diese Vorgehensweise den optimalen Königsweg darstellt, deshalb würde ich mich über Kommentare und Feedback freuen!

Zurück zu Teil 1


Wikiseite bearbeiten

Diese Seite kann von jedem registrierten Benutzer bearbeitet werden. Bisher haben 3 Personen an der Seite "Responsive Webdesign Tutorial - Media Queries - Teil 2" mitgewirkt.

Sie haben einen Fehler entdeckt oder möchten etwas ergänzen? Dann können Sie nach der Anmeldung "Responsive Webdesign Tutorial - Media Queries - Teil 2" hier bearbeiten.

Mitarbeiter