Responsive Webdesign – Kaffee am Meer – Teil 1: Der Grundaufbau

In diesem Tutorial möchte ich dir das Thema Responsive Webdesign nahebringen. Dieser erste Teil behandelt vor allem allgemeine Basics wie den Grundaufbau und das richtige Speichern von Bildern fürs Web in Photoshop usw.

Wer sich hier bereits auskennt, kann diesen Teil überspringen und mit dem darauffolgenden weitermachen.

Hinweis: Die beigefügten Arbeitsdateien sind bei allen vier Teilen dieselben und enthalten die komplette fertige Webseite mit Responsive-Design-Anpassung.

Hinweis: Dieses Tutorial ist die im Rahmen unseres Vertextlichungsaufrufs entstandene Textversion des zugehörigen Video-Trainings von Pascal Bajorat. Die Texte können daher durchaus auch einen umgangssprachlichen Stil aufweisen.

Wir empfehlen:
Dreamweaver-Video-Training
In diesem Workshop möchte ich dir anhand einer kleinen und fiktiven Webseite die Grundlagen von Responsive Webdesign erklären.

Schritt 1

Bei dieser Seite handelt es sich um die Miniseite des "Kaffee am Meer", einem fiktiven Unternehmen bzw. Café.

In diesem ersten Tutorial werden wir diese Seite umsetzen und die einfache Grundprogrammierung machen.

Schritt 2

Die Seite an sich ist nichts Spektakuläres. Wir haben oben einen kleinen Farbbalken, der sich im unteren Bereich nochmal spiegelt.

Schritt 3

Wir haben das Logo und den Namen, die Navigation, ein kleines Headerbild, den Text und rechts ein Sidebar-Element mit den Spezialitäten des Cafés.

Schritt 4

Als Erstes schneiden wir die Grafiken aus.

Wir beginnen mit den Linien. Dazu markiere ich den entsprechenden Linien-Bereich und kopiere das Ganze einfach über Strg+Shift+C.

Schritt 5

Lege das Ganze in ein neues Dokument.

Das sieht dann so aus.

Schritt 6

Hier habe ich etwas zu viel kopiert, denn wir haben hier unten noch eine kleine weiße Linie.

Schritt 7

Dann gehen wir jetzt über Bild->Arbeitsfläche und …

… rechnen das Ganze auf 5 Pixel runter.

Schritt 8

Somit entfernen wir die kleine weiße Linie und speichern das Ganze jetzt fürs Web.

Schritt 9

Das heißt, wir gehen auf Datei->Für Web speichern.

Schritt 10

Dann wählen wir als Dateiformat GIF, denn wir haben hier nur relativ wenige Farben und können so über das GIF einiges an Dateigröße sparen.

Vorgabe: GIF 32 kein Dithering

Schritt 11

Hier habe ich einen kleinen Ordner angelegt, "kaffee-am-meer".

Darin erstellen wir jetzt einen weiteren Ordner, den wir "images" nennen.

Schritt 12

Darin speichern wir jetzt die Grafik "linie.gif".

Schritt 13

Als Nächstes benötigen wir das Logo. Dazu füge ich die beiden Ebenen zusammen.

Schritt 14

Ich kann dann das Logo genauso wie die Linie einfach ausschneiden. Ich habe das dann transparent im Hintergrund und …

… speichere das Logo als PNG-Grafik und zwar hier PNG-24 mit Transparenz.

Schritt 15

Die Seite hat sowieso nur einen weißen Hintergrund, das heißt, wir könnten es eigentlich auch als JPG speichern und dann mit weißem Hintergrund.

Mit einem PNG lässt sich aber arbeiten und zwar besser in der Hinsicht, dass wir die Grafik für weitere Fälle besser weiter verwenden bzw. weiter verarbeiten können, wenn wir zum Beispiel für kleinere Ansichten noch einen Hintergrund unter das Logo legen.

Ich nenne das Ganze dann "logo.png" und speichere diese Grafik ebenfalls im Ordner "images".

Schritt 16

Die Schrift "Kaffee am Meer" selber werden wir nicht als Grafik speichern. Bei der Schrift handelt es sich um den Font Alex Brush.

Dieser Font ist über die Google Web Fonts zu beziehen. Dabei handelt es sich um eine kostenfreie und unter Open Source Lizenz gestellte Schriftart, die wir auch direkt im Browser einbetten können. Wir benötigen hier an der Stelle also wie gesagt keine Grafik.

Schritt 17

Bei der Navigation haben wir als Schrift die Trebuchet MS. Auch diese wird ganz normal über den HTML-Code eingebunden.

Schritt 18

Dann kommt die Header-Grafik. Diese markiere ich durch einen Klick auf die Ebenenminiatur und …

… kopiere sie in ein neues Dokument.

Schritt 19

Wir gehen hier wieder über Für Web speichern oder entsprechend mit dem Shortcut cmd+Alt+Shift+S bzw. unter Windows statt der cmd einfach Strg.

Diese Grafik speichere ich jetzt als JPG in hoher Qualität und …

… setze das Ganze hier auf Qualität 75.

Vorgabe: JPG Hoch
Qualität: 75

Schritt 20

Dadurch, dass über dem Bild ein Kunstfilter liegt, der sowieso etwas am Rauschen ist, ist es in dem Fall nicht wesentlich, dass wir 60 haben – es würde sogar noch bei 50 gut aussehen. Auch bei 40 könnten wir Artefakte noch als Kunstfilter deuten.

Generell kann man aber bei Bildern in der Regel 70 bis 75 nehmen, damit die Qualität stimmt. Bei diesem Bild ist es eine Ausnahme.

Schritt 21

Daher speichern wir es mit Qualität 50, aber wie eben erwähnt: Bei allen anderen Bildern spielt man am Besten mit der Einstellung und achtet auf die Qualität.

Qualität: 50

Schritt 22

Das Bild speichern wir jetzt als "header.jpg".

Schritt 23

Als Nächstes benötigen wir nur noch das kleine Icon.

Hier verfahren wir nach demselben Prinzip wie bei allen anderen Grafiken auch.

Schritt 24

Und auch das Icon speichern wir als PNG-24

… und nennen es "icon.png".

Schritt 25

Damit haben wir sämtliche Bilder so weit zusammen.

Jetzt öffnen wir Dreamweaver. Ich habe bereits ein leeres Dokument angelegt. Darin enthalten ist die Standardstruktur eines HTML5-Dokuments.

Und wie es an dieser Stelle weiter geht, erfahrt ihr im zweiten Teil dieser Tutorialserie.

Bildquellen: http://fotolia.com – Fotolia © alder #14697790, http://fotolia.com – Fotolia © Stephan Leyk #7982735

Wir empfehlen:
PHP-Workshop-DVD - Basics & Tricks

Unsere Empfehlung für dich

Grundlagen HTML, CSS und JavaScript

Grundlagen HTML, CSS und JavaScript

Die drei wichtigsten Säulen des Webs – HTML, CSS und JavaScript. Wer die Grundlagen kennt, navigiert mit klarer Sicht durchs Netz und ist zudem in der Lage, ganz einfach selbst in die Programmzeilen einzugreifen.

  • 62 Lektionen in über acht Stunden Video-Training zum Einstieg in HTML, CSS und JavaScript
  • Einfach Grundlagenkenntnisse erwerben und in inklusiven Übungen direkt ausprobieren
  • Von Jan Brinkmann, einem Web-Entwickler aus Leidenschaft mit über 15 Jahren Erfahrung

Zum Training