Responsives Webdesign mit Amazium - Beispiel mit dunkelroter Farbgestaltung


Grundlagen

Farbgebung

Diese Beispielseite zum Amazium Framework enthält abweichend vom Standard eine dunkelrote Farbgebung. Alle hierfür gemachten Anpassungen sind in der Datei dark-red.css enthalten. Die Veränderungen der Farbgebeung betreffen die CSS-Attribute

Auperdem wurden die mitgelieferten Grafiken

angepasst.

Media Queries

Basis dieses Frameworks sind Media Queries für:

Zur Bedeutung dieser Media Queries siehe auch die Abschnitte Grid und Offsetting.

Navigation

Die Hauptnavigation befindet sich oben. Sie ist waagerecht ausgerichtet. Dort ist Platz für etwa neun Menüpunkte. Zur Erweiterung könnte man ganz unten noch eine zusätzlich Navigation mit zusätzlichen Links für Gästebuch, Impressum, Kontakt, Pinnwand, und Linksliste einbauen. Auf diesen zusätzlichen Menübereich wird oben unter Kontakt/Impressum verlinkt.

JavaScript

Eigentlich ist für das korrekte Funktionieren des Frameworks keine JavaScript erforderlich. Diese Demonstrationsseite für Amazium enthält dennoch JavaScript. Zunächst wird als Basis jquery.js eingebunden, und zwar als externer Verweis auf die Version 1.3.

Direkt hier enthalten sind:

960 1200 Grid (Raster)

Wie zuvor bereits erwähnt unterstützt Amazium auch sehr breite Bildschirme. Daher wurde das Raster auf eine Gesamtbreite von 1200px ausgedehnt.


1-1
1-2
1-3
1-4
1-5
1-6
1-7
1-8
1-9
1-10
1-11
1-12
4-1
4-2
4-3
4-1
8-1
6-1
6-2
3-1
3-2
3-3
3-4
12

Beispiel I

Der folgende Code erstellt ein Raster mit einer Spalte in einer Breite von 960px.

<div class="row">
<div class="grid_12">
---Your text here---
</div>
</div>

Beispiel II

Wenn man nun also zwei Spalten benötigt, zum Beispiel eine für die seitliche Navigation und eine weitere für den Hauptinhalt, muss man einfach diesen Code nutzen, der eine Spalte mit 280px und eine weitere mit 600px erstellt. (Siehe weiter oben die dritte Zeile der schematischen Darstellung.)

<div class="row">
<div class="grid_4">
---Your text here---
</div>
<div class="grid_8">
---Your text here---
</div>
</div>

Beispiel III

Man kann auch problemlos zwei Spalten in einer größeren verschachteln. Ein Beispiel hierfür ist der untenstehende Code. Es sind keinerlei Anpassungen des CSS-Codes erforderlich.

<div class="row">
<div class="grid_12">
---Your text here---
<div class="row">
<div class="grid_6">
---1 of 2 columns---
</div>
<div class="grid_6">
---2 of 2 columns---
</div>
</div>
</div>
</div>

Wie man an den schematischen Darstellungen erkennen kann, wird das Raster Spaltenzwischenraum bzw. Rändern von 16px links bzw. rechts dargestellt. Es ist kein Problem, diese Zwischenräume zu verkleinern.

Dieser Beispielabschnitt wurde mit grid_6 erstellt.

Offsetting columns (Spaltenabstände)

Amazium bietet auch die Möglichkeit, Spalten mit einem Offset zu versehen. Darunter versteht man, dass eine Spalte mit einem bestimmten Abstand zum linken Rand versehen wird. Auf diese Art und weise kann man auch erweiterte Abstände zwischen zwei Spalten hiinzufügen. Dies geschieht, in dem man die Klasse offset gefolgt von einer Ziffer einfügt. Wenn man also einen Offset von 4 Spalten bei einem Grid von 8 Spalten haben will, muss man grid_8 offset_4 einfügen.

4
4 with 4 spacing
3
3 with 3 spacing
8 with 4 spacing

Typography & Bullets


Amazium enthält eine Reihe typografischer Grundeinstellungen. Die Standardschriftart ist Century Gothic, die Überschriften sind in Georgia. Bei Vorgaben lassen sich leicht anpassen. Die Standardabsätze sind mit einer Zeilenhöhe von 20px und einem unteren Padding von 10px vorgegeben.

Dieser Absatz nutzt die Klasse .intro, die mit einer Schriftgröße und einem Zeilenhöhe von 130% hervorragend für einen Einführungstext geeignet ist. Somit mus dieser nicht mit H1 formatiert werden.

This is a Button..!

<strong> This text is rendered as bold.

<em> This text is rendered as italicized.

<small> This text is rendered for fine print.

<sup> This text is rendered as Superscript

<sub> This text is rendered as Subscript

.highlight This text is Highlighted


Normale Bullets (Benutzergrafik)

Für Standard-Aufzählungen <ul> wird eine kleine Grafik genutzt, die leicht ausgetauscht werden kann.

<ul>
<li>Your text here</li>
</ul>

Geordnete Listen

  1. Cras mattis consectetur purus sit amet fermentum.
  2. Donec ullamcorper nulla non metus auctor fringilla.
    1. Aenean eu leo quam.
    2. Nullam quis risus eget urna mollis ornare vel eu leo.
  3. Maecenas sed diam eget risus varius blandit sit amet non magna.

Für geordnete Listen <ol> wurde etwas zusätzlicher CSS-Code eingefügt, damit sie etwas gefälliger wirken.

<ol>
<li>Your text here</li>
</ol>

Runde Bullets

Um ein kreisförmiges Aufzählungszeichen zu nutzen, muss man nur die Klasse .circle zum Tag <ul> hinzufügen.

<ul class="circle">
<li>Your text here</li>
</ul>

Quadratische Bullets

Um ein quadratische Aufzählungszeichen zu nutzen, muss man .squarezum Tag  <ul> hinzufügen.

<ul class="square">
<li>Your text here</li>
</ul>

Formulare & Tabellen

Formular

Yes No
One Two

Tabelle

Title
Item: Category: Description: Size:
Bananen Obst Desc 1KG
Äpfel Obst Desc 3KG
Orangen Obst Desc 2.5KG
Mango Obst Desc 6KG

In Amazium wurden Stile für Tabellenelemente (z.B. Tabellenüberschriften) eingefügt. Außerdem besteht die Möglichkeit, gerade und ungerade Zeile unterschiedlich sowie einzelne Tabellenzellen unterschiedlich einzufärben.


Bilder

Ziel von Amazium ist es, alle Elemente einer Webseite so darzustellen, dass sie mit jedem Gerät optimal dargestellt werden. Daher unterstützt Amazium auch die auflösungsadäquate Darstellung von Bildern. Man muss lediglich die Klasse class="max-img" hinzufügen, und das Bild wird entsprechend dem Raster angezeigt. Im folgenden Beispiel wird immer die selbe Bilddatei angezeigt.

blank image

blank image

blank image

Beispielcode:

<img src="images/blank.jpg" border="0" alt="blank image" class="max-img">

Videos

Wie bereits im Zusammenhang mit Bildern erwähnt, sollen alle Seitenelemente in das responsive Design einbezogen werden. Das betrifft dann natürlich auch die Anzeige von Videos.

Die Lösung, die das Framework anbietet, ist so effektiv wie simple. Man muss dem Code nur in ein div einschließen, das die Klasse video-container bekommt. So erfolgt auch die Videoanzeige responsiv.

Vimeo

YouTube

Beispielcode Video:

<div class="media">
<iframe src="http://www.youtube.com/embed/d3J12dNz4xo" frameborder="0" allowfullscreen></iframe>
</div>

Auf jeden Fall muss man darauf achten, dass der von Youtube gelieferte Einfügecode ohne die Größenangaben übernommen wird.

Ein Problem kann es mit HTC Smartphones geben. Deren Browser kommen offensichtlich nicht mit dem aktuelleren Youtube Code klar. In solchen Fällen ist es sinnvoller, den Einfüge-Code alten Stils für zu verwenden. Allerdings, dass kann man aus dem Beispiel weiter unten erkennen , ist dieser Code deutlich umfangreicher.

<div class="media">
<object width="640" height="390">
<param name="movie" value="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0"></param>
<param name="allowFullScreen" value="true"></param>
<param name="allowscriptaccess" value="always"></param>
<embed src="http://www.youtube.com/v/d3J12dNz4xo?version=3&hl=en_US&rel=0" type="application/x-shockwave-flash"
width="640" height="390" allowscriptaccess="always" allowfullscreen="true"></embed>
</object>
</div>