Responsive Design Frameworks Klausuraufgaben

freigegeben - Volker Schaefer

---

← Zurück zu Responsive Design Frameworks

##LEICHT

Was ist eine Baseline? __/2

_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________

• Einteilung der Website in Zeilen mit identischer Höhe
• Elemente ausgerichtet auf die Unterkante der Zeile
• Bsp.: 7px Baseline = Standardschriftgröße 14px, Überschrift 21px! Größen restlos durch Baseline teilbar.

---

Wie lautet die korrekte Media-Query-Syntax? __/1
[] @media only screen and (min-width: 480px) and (max-width: 767px) {}
[] @media and screen and (min-width: 480px) and (max-width: 767px) {}
[__] @media or screen and (min-width: 480px) and (max-width: 767px) {}

---

Ergänzen Sie den Text mit folgenden Begriffen: __/2

• Spaltenabstand
• Spalten
• Breite
• Grid-System

Alle Responsive Design Frameworks basieren auf einem ______________. Das bedeutet, dass eine Webseite in beispielsweise 16 ___________ aufgeteilt wird. Diese Spalten haben alle die selbe _________ und einen identischen Zwischenabstand. Hat unsere Webseite also eine Breite von 960px und einen ________________ von 20px, so beträgt unsere Spaltenbreite abzüglich der 10px Außenabstand um das Grid bei einem 16er Grid 40px.

Alle Responsive Design Frameworks basieren auf einem Grid-System. Das bedeutet, dass eine Webseite in beispielsweise 16 Spalten aufgeteilt wird. Diese Spalten haben alle die selbe Breite und einen identischen Zwischenabstand. Hat unsere Webseite also eine Breite von 960px und einen Spaltenabstand von 20px, so beträgt unsere Spaltenbreite abzüglich der 10px Außenabstand um das Grid bei einem 16er Grid 40px.

##MITTEL

Erklären Sie anhand diesem grafischen Beispiels ein Grid-System und wofür es gebraucht wird! __/2

_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________

• Anpassung einer Website auf die verschiedenen Endgeräte bei jeglicher Größe
• Grids beinhalten identische Zwischenabstände sowie selbe Breite
• 16er Grid = 960px Breite, somit 40px Grid

---

Benennen Sie 2 verschiedene Frameworks, welche mit Responsive Design in Verbindung gebracht werden! __/2
[] Skeleton
[] jQuery
[] Bootstrap
[] Mootools
[__] Typo3

---

Vervollständigen Sie den Code. Als Basis dient folgende Vorlage: __/3

	<div class="______________">
		<div class="four ________ ________-by-four">Spalte 1</div>
		<div class="four ________">Spalte 2</div>
		<div class="four ________">Spalte 3</div>
	</div>

	<div class="container">
		<div class="four columns offset-by-four">Spalte 1</div>
		<div class="four columns">Spalte 2</div>
		<div class="four columns">Spalte 3</div>
	</div>

##SCHWER

Gegeben ist der folgende Ausschnitt der index.html: __/4

<div class="container">
    <div class="four columns">
        <article> 
	    <img src="images/objektiv_einer_fotokamera.jpg" alt=" Fotokamera"/>
	    <h1>Über den Record</h1>
	    <p> Ut wisi zzril delenit Lorem ipsum dolor sit amet, ...</p>
	</article>
    </div>
      .
      .
      .
</div>

Beschreiben Sie anhand des Beispiels die Klassen .container und .four.columns im Zusammenhang mit Responsive Design und Skeleton.

_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________
_______________________________________________________________________________

• .container = Umfasst einen Bereich auf der Website
• .columns = Zusammenfassung mehrerer Spalten
• Aufteilung in verschiedene Spalten innerhalb eines Containers über die Klasse Columns
• Klasse wird mit der Anzahl der Spalten kombiniert

---

Welche der folgenden Aussagen treffen auf ein Responsive Design Framework zu? __/3

• [__] beinhaltet vorgefertigte Styles
• [__] basiert immer auf einem 16er-Grid-System
• [__] wird immer auf Basis eines CSS-Frameworks betrieben
• [__] nutzt die Einteilung der Website mit Hilfe von "carton"
• [__] bietet Grundlage zum Start neuer Projekte

---

Das Navigationselement #normal soll für Smartphones optimiert werden. Ergänzen Sie die fehlenden Angaben __/4

<nav id="normal">
	<ul>
		<li><a href="seite1.html">Link 01</a></li>
		<li><a href="seite2.html">Link 02</a></li>
	</ul>
</nav>

<nav id="responsive">
	<________>
		<option __________________>Link 01</option>
		<option __________________>Link 02</option>
	</________>
</nav>

<nav id="normal">
	<ul>
		<li><a href="seite1.html">Link 01</a></li>
		<li><a href="seite2.html">Link 02</a></li>
	</ul>
</nav>

<nav id="responsive">
	<select>
		<option value="seite1.html">Link 01</option>
		<option value="seite2.html">Link 02</option>
	</select>
</nav>