Responsive Webdesign – Praxis-Projekt – Teil 1: Einleitung

In dieser Video-Trainingsreihe baue ich ein Praxis-Projekt nach. Als Grundlage für die HTML-/CSS-Programmierung dient das HTML5Boilerplate und nachprogrammiert wird die Webseite Webdesign-Podcast.de.

In diesem Teil wird vor allem der konzeptionelle Bereich abgedeckt und ein Einstieg in die Thematik vermittelt.

Wir empfehlen:
Dreamweaver-Video-Training

Schritt 1

Herzlich willkommen zum ersten Tutorial zum Webdesign Volume 3 mit dem Schwerpunkt Responsive Webdesign. In diesem ersten Tutorial möchte ich dir einige Basics zu Responsive Webdesign nahebringen.

Als Beispiel dient uns hier die Webseite www.webdesign-podcast.de.

Schritt 2

Bei der Seite handelt es sich einen relativ standardkonformen Blog. Wir sehen es hier, wir haben hier eine Sidebar:

Schritt 3

Wir haben den Hauptartikel-Bereich mit Bildern und verlinkten Überschriften.

Schritt 4

Oben den Header mit Navigation:

Schritt 5

Eine kleine Slideshow.

Schritt 6

Und hier drei Teaser-Bilder, die in dem Fall einige Beispiele beziehungsweise Auszüge aus der Kategorie Podcast darstellen.

Schritt 7

Die Seite selber ist relativ einfach angepasst für weitere Geräte. Um das zu zeigen, ziehe ich hier am rechten Browserrand die Seite etwas zusammen und wir sehen bis zu diesem Punkt, hier kommt der Übergang, die aktuelle Desktop-Variante.

Schritt 8

Wenn ich über diesen Punkt hinausgehe, treten die ersten Veränderungen auf.

Schritt 9

Wenn ich jetzt nach unten scrolle, sehen wir als Erstes, dass hier die Sidebar weg ist.

Schritt 10

Das heißt, es gibt mehrere Formen von Responsive Webdesign. In dieser Form wird mit Reduktion gearbeitet. Das heißt, auf dieser Seite werden einfach überflüssige Informationen ausgeblendet.

Ich ziehe das Ganze noch mal zurück und wir gucken uns die Sidebar noch mal etwas genauer an.

Schritt 11

Wir haben die sozialen Netzwerke, die Suche, Podcast abonnieren, Newsletter …

Schritt 12

… die Kategorien, …

Schritt 13

… letzte Kommentare und einige Anzeigen.

Schritt 14

Wenn ich jetzt also von einem Tablet-Computer diese Seite aufrufe oder auch von einem Desktop-Computer, dann interessiert natürlich in erster Linie der Inhalt. Zum Beispiel weil ich in Google nach einem entsprechenden Thema gesucht habe, hier auf die Seite gekommen bin, dann möchte ich natürlich in erster Linie den Inhalt lesen und nicht die Seite weiter durchsuchen oder mich mit den sozialen Netzwerken beschäftigen.

Genau aus diesem Grund wird dann die Seitenleiste reduziert und ausgeblendet. Damit bekommen wir eine einfachere Übersicht über den Inhalt.

Schritt 15

Die Slideshow bleibt als Element weiterhin bestehen, hier könnte man sich auch noch überlegen, ob diese mit ausgeblendet wird.

Schritt 16

Auf Unterseiten ist das auch der Fall. Wir können einfach mal diesen Artikel öffnen …

Schritt 17

… und haben hier die Slideshow auch nicht mehr mit drin. Das betrifft also in dem Fall nur die Startseite.

Schritt 18

Hier gibt es als Beispiel auch gleich ein sehr interessantes Element, und zwar ein sogenanntes Fluid-Element beziehungsweise ein fließendes Element.

Wenn ich die Größe des Fensters weiter anpasse, dann seht ihr jetzt in dem Bereich, dass sich die Bilder automatisch skalieren, …

… genauso wie die Box drum herum, die weiße Box mit dem grauen Hintergrund. Das ist ein sogenanntes fließendes Element, weil es ähnlich wie Wasser sich einfach dem Raum drum herum anpasst.

Schritt 19

Diese fließenden Elemente wirken oftmals relativ komplex beziehungsweise erst einmal beeindruckend, wenn man sich noch nicht großartig damit beschäftigt hat. In Wirklichkeit sind diese fließenden Elemente oder auch generell fließende Rasterlayouts relativ einfach anzulegen. Man muss nur wissen, wie.

Im Endeffekt – nehmen wir einmal als Beispiel das Bild – basiert dieses Element nur auf der Technik, dass wir hier eine maximale Breite von 100% angegeben haben, was eigentlich nicht mehr heißt, als dass sich dieses Bild immer in seiner Weite maximal dem äußeren Rahmen hier anpasst.

Schritt 20

Wenn ich es entsprechend kleiner ziehe, dann ändert sich natürlich auch die maximale Breite beziehungsweise die 100%, da wir hier natürlich einen relativen Wert haben und sich das Bild verkleinert. Die Höhe wird automatisch gesetzt und so bleibt es auch im richtigen Seitenverhältnis. Und die Schrift bricht standardmäßig mit um.

Schritt 21

Jetzt ist es gerade schon ein paar Mal durchgeblitzt, wir ziehen es weiter kleiner und sehen dann hier die Ansicht für Mobiltelefone beziehungsweise Smartphones.

Schritt 22

Auch hier haben wir weiterhin mit fließenden Elementen gearbeitet, da die Smartphones natürlich auch unterschiedliche Auflösungen haben. Auch hier wurde weiter mit Reduktion gearbeitet, das heißt zum Beispiel, dass diese Boxen wegfallen …

… und das Ganze hier etwas kleiner wird. Hier unten folgen die Kommentare.

Schritt 23

Auch die Boxen hier sind von der Größe angepasst worden, ich kann das auch wieder ein bisschen größer ziehen …

… und dann sieht man das hier auch ganz gut.

Schritt 24

Wenn ich noch weiter nach unten gehe, sehen wir hier den Footer. Auch der Footer ist weiter angepasst und enthält hier wichtige Links, …

… die oben aus dem Header der Webseite weggefallen sind.

Schritt 25

Hier hatten wir zum Beispiel Banner und Impressum.

Schritt 26

Wenn ich das Ganze zusammenziehe, dann sind diese Informationen hier Impressum und hier die Banner. Die Leute, die dann in diesen Bereich rein wollen, erreichen das Ganze dann über die Footer-Navigation.

Schritt 27

Das wäre unser erstes Beispiel, an dem wir jetzt gemeinsam arbeiten werden. Bevor ich mich mit dir gemeinsam in die Programmierung dieser Seite stürze, noch ein kleines Vorwort zur Konzeption einer solchen Seite.

Generell ist es natürlich wichtig, sich vorher beziehungsweise in der Layoutphase Gedanken zu machen, wie man seine Webseite für die unterschiedlichen Endgeräte ausliefern möchte beziehungsweise, wie sie dargestellt werden sollen. Denn hätten wir jetzt essenzielle Informationen in der Sidebar, dann würde das Ganze etwas schwieriger werden.

Schritt 28

Zum Beispiel haben wir hier noch Artikelinformationen. Das Datum des Artikels, den Autor, die Kategorien, Feedback zu den Kommentaren und Tools zum Drucken beziehungsweise den Trackback-Link.

Schritt 29

Diese können unter anderem wichtig sein für einige Nutzer, für andere auch nicht. Hier muss man sich dann entsprechende Gedanken machen, ob diese Informationen so wichtig sind, dass sie auf jeden Fall auf der Seite untergebracht werden sollen, und da könnte man dann zum Beispiel die Sidebar ähnlich wie die Hauptcontent-Boxen einfach unten anstellen, dass heißt, unter dem eigentlichen Content werden die Sidebar-Elemente angezeigt und laufen dann auch als fließende Elemente über die komplette Weite.

Das ist natürlich eine persönliche Entscheidung und von Webseite zu Webseite unterschiedlich. Hier in dem Fall bin ich der Meinung, dass man sie einfach ausblenden kann.

Es gibt mehrere verschiedene Vorlagen für CSS-Frameworks beziehungsweise Grid-Systeme, mit denen man arbeiten kann, um Responsive Webdesign-Layouts zu erstellen.

In diesem Fall beziehungsweise für diese Seite habe ich keins dieser Tools beziehungsweise Frameworks verwendet.

Schritt 30

Hier kommt das HTML5 Boilerplate zum Einsatz. Das HTML5 Boilerplate kannst du dir unter www.html5boilerplate.com herunterladen.

Schritt 31

Dabei handelt es sich um eine einfache Vorlage mit vielen nützlichen Funktionen zur Arbeit mit HTML5 und CSS3. Spezielle Vorlagen für Responsive Webdesign bietet das HTML5 Boilerplate so nicht beziehungsweise nicht in gesonderter Form.

Dennoch haben wir hier eine nützliche Vorlage, um HTML5- und CSS3-Code zu bekommen. Wir laden uns jetzt die aktuellste Version herunter. Wir können noch auf Deutsch klicken, um noch einige weitere Informationen zu bekommen.

Schritt 32

Und laden uns dann das Boilerplate Stripped, also ohne Kommentare im Code, herunter.

Schritt 33

Diese zip-Datei entpacken wir jetzt …

… und können uns sämtliche Inhalte kopieren.

Schritt 34

Ich wechsele auf meinen Schreibtisch und lege mir hier einen neuen Ordner an …

… und nenne diesen webdesign-podcast.de, weil wir diese Seite jetzt programmieren werden.

Schritt 35

Hier füge ich die gerade kopierten Elemente wieder ein und einige können wir direkt löschen.

Schritt 36

Als Erstes fliegen readme.md, humans.txt, crossdomain.xml und die robots.txt sowie die 404.html …

… aus dem Ordner raus.

Schritt 37

Prinzipiell sind das Dateien, die wir natürlich nutzen können beziehungsweise die auch du auf deinen Webseiten verwenden kannst. Da es sich hier allerdings um ein späteres WordPress-Theme handelt, brauchen wir diese Dateien nicht, denn unter anderem die robots.txt und die humans.txt müssten auf der Hauptebene liegen und haben also im eigentlichen Theme-Ordner nicht viel verloren.

Als Nächstes öffnen wir den Ordner CSS.

Schritt 38

Nehmen die CSS-Datei …

… und kopieren auch diese auf die Hauptebene.

Schritt 39

Denn das Ganze soll wie gesagt später ein WordPress-Theme werden und bei WordPress muss die style.css auf der Hauptebene des Themes liegen.

Damit können wir dann auch den CSS-Ordner löschen.

Schritt 40

Der nächste Schritt besteht darin, dass wir unseren Dreamweaver öffnen.

Schritt 41

Hier im Dreamweaver werden wir uns eine neue Site erstellen, extra für dieses Projekt. Dafür gehen wir auf Site>Neue Site

Schritt 42

… und geben als Erstes den Site-Namen ein. Hier verwenden wir einfach wie beim Ordner Webdesign-Podcast.de.

Schritt 43

Als Nächstes müssen wir den lokalen Site-Odner festlegen.

Schritt 44

Den Ordner haben wir hier auf dem Schreibtisch, webdesign-podcast.de anwählen und dann hier unten mit Auswählen bestätigen.

Schritt 45

Danach gibt es noch einige weitere Informationen beziehungsweise Einstellungen, die wir festlegen können. Beispielsweise den FTP-Server, um diese Seite direkt auf einem Webspace zu publishen.

Schritt 46

Das brauchen wir hier aber nicht, denn in dem Fall werden wir erst mal lokal entwickeln. Es reicht also, wenn wir nach Eingabe dieser beiden Felder auf Speichern klicken.

Schritt 47

Nun erscheint hier unten im rechten Bereich die Baumstruktur der aktuellen Site.

Schritt 48

Hier oben könnten wir die Site wechseln, wenn noch weitere vorhanden wären, aktuell ist das die einzige, deswegen gibt es hier auch keine weitere Auswahl außer weiteren lokalen Medien.

Schritt 49

In der Übersicht können wir das Ganze etwas umstellen. Das hier ist die klassische Übersicht von Dreamweaver …

Schritt 50

… und wir brauchen in dem Fall, da wir hauptsächlich mit dem Code-Editor arbeiten, eine andere Übersicht beziehungsweise ich persönlich finde es angenehmer, in dieser zu arbeiten, und zwar ist das im Bereich Arbeitsbereichlayout die Coder-Variante.

Fenster>Arbeitsbereichlayout>Coder.

Schritt 51

Hier haben wir im linken Bereich dann relativ groß die Struktur unserer Site und rechts unseren Editor.

Schritt 52

Hier haben wir den Begrüßungsbildschirm und den können wir jetzt schließen.

Schritt 53

Wir öffnen als Erstes unsere index.html.

Schritt 54

Die index.html ist soweit schon ganz gut gefüllt. Es gibt einen Schritt, den wir hier als Erstes durchführen müssen, und zwar ist in der Zeile 13 der Pfad zur CSS-Datei nicht korrekt.

<link rel=„stylesheet“ href=„css/style.css“>

Schritt 55

Die CSS-Datei lag vorher in dem Ordner CSS, wir haben sie auf die Hauptebene gezogen, entsprechend müssen wir den Pfad anpassen und das css/ entfernen.

<link rel=„stylesheet“ href=„style.css“>

Schritt 56

Dann können wir die Datei speichern (Strg+S oder Cmd+S) und uns den Entwurf-Modus einmal ansehen. Aktuell ist hier wirklich noch nicht viel zu sehen.

Schritt 57

Ich kann also wieder zurück in den Code-Modus und ich möchte ein paar Worte zum Aufbau verlieren.

Schritt 58

Unser Dokument beginnt mit dem typischen Doctype, der die entsprechende HTML-Version angibt. Dieser kurze Doctype steht für ein HTML5-Dokument.

<!doctype html>

Schritt 59

Als Nächstes folgt der HTML-Tag. Hier in einer etwas spezielleren Form, denn das Ganze gibt es noch in verschiedenen Varianten mit Conditional Comments, die entsprechende Klassen für verschiedene Versionen des Internet Explorers hinzufügen. Diese eignen sich besonders gut, um speziell für den Internet Explorer bestimmte Bugs zu beheben. So funktioniert das Ganze wesentlich leichter als zum Beispiel, eine extra CSS-Datei für den IE einzubinden oder andere Wege.

Schritt 60

Danach folgt der Head-Bereich.

Schritt 61

Hier haben wir als Erstes die Angabe unseres charsets; wie arbeiten mit utf-8.

Schritt 62

Als Nächstes haben wir eine etwas spezifischere Meta-Tag-Angabe, und zwar wird hiermit der IE Chrome Frame aktiviert, insofern dieser installiert ist. Das heißt, obwohl man sich im Internet Explorer befindet, wird zur Darstellung, also zum Rendering einer Webseite, die Chrome Engine verwendet.

Schritt 63

Danach folgt der Titel unseres Dokumentes.

Schritt 64

Dann der Meta-Tag für die description.

Schritt 65

Dann eine viewport-Angabe für das iPhone beziehungsweise die iOS-Geräte. Hiermit wird im Prinzip festgelegt, dass die Weite des Dokuments beziehungsweise die maximale Weite der device-Weite entspricht.

Schritt 66

Danach wird unsere CSS-Datei eingebunden.

Schritt 67

Der letzte Abschnitt im Head-Bereich ist der modernizr.

Schritt 68

Das modernizr-Skript kann ich ganz kurz mal zeigen. Dazu rufe ich mir hier im Chrome die Developer Tools auf. Das funktioniert mit Cmd+Shift+C oder Strg+Shift+C. Und hier oben der HTML-Tag – da können wir schon sehen, dass es hier jede Menge Klassen gibt. Diese Klassen geben an, welche Funktionen der Browser unterstützt beziehungsweise nicht unterstützt.

Schritt 69

Das heißt, der Chrome kann zum Beispiel canvas, canvastext, webgl. Dann haben wir als Nächstes die Klasse no-touch, damit wird angegeben, dass es sich hier nicht um ein Touch-Gerät handelt.

Würde ich jetzt hier mit einem iPhone oder iPad surfen, dann hätten wir hier nicht no-touch, sondern dann würde die Klasse einfach touch heißen. Darüber lassen sich diverse Alternativen hier mit einpflegen, ganz einfach auf CSS-Klassenbasis. So könnte man zum Beispiel Schaltflächen, die sonst für die Finger zu klein wären, mit der Klasse touch einfach vergrößern.

Schritt 70

Danach folgt im HTML-Aufbau ein weiterer Part mit Conditional Comments, und zwar haben wir hier einen Conditional Comment für alle Internet Explorer, die älter sind als IE7. Das heißt hier ganz speziell der Internet Explorer 6.

Falls also hier die Seite von einem Internet Explorer-6-User aufgerufen wird, dann wird ihm empfohlen, dass er sich am besten den vorher erwähnten Chrome Frame installiert.

Schritt 71

Danach geht es weiter mit einigen Standard-HTML5-Tags für den Aufbau einer ganz normalen Webseite. Das beginnt mit dem header-Tag.

Schritt 72

Dann der div role=„main“ für den Hauptinhalt der Seite und der Footer.

Schritt 73

Danach wird standardmäßig die jQuery eingebunden.

Schritt 74

Und zwar funktioniert das Ganze so, dass sie standardmäßig über die Google-APIs gezogen wird.

Schritt 75

Falls diese einmal nicht erreichbar sein sollte, dann wird entsprechend eine lokale Variante eingebunden.

Schritt 76

Danach werden die Skripte weiter eingebunden; das ist einmal die plugins.js; diese Datei ist dafür vorgesehen, entsprechende jQuery-Plug-Ins mit zu integrieren, und danach folgt die Standardscript-Datei script.js. Beide Dateien sind standardmäßig angelegt, enthalten aber soweit keine Inhalte, die von Bedeutung sind.

Schritt 77

Danach haben wir den asynchronen Code für Google Analytics. Den können wir verwenden, um Besucher auf unserer Seite zu tracken.

Schritt 78

Hier in diesem Beispiel, vor allem auf unserer lokalen Entwicklungsumgebung, benötigen wir das nicht, deswegen werde ich auch diesen Code entfernen.

Schritt 79

Als Nächstes widmen wir uns der CSS-Datei.

Schritt 80

Die CSS-Datei hat im oberen Bereich als Erstes einen entsprechenden Reset. Dieser CSS-Reset ist dafür gedacht, dass die Standard-Einstellungen des Browsers erst einmal überschrieben werden und wir dadurch quasi bei allen gängigen Browsern erst einmal auf einem Stand sind.

Schritt 81

Danach folgen weitere Standard-Angaben, die quasi gewisse Standard-Werte wie gerade schon erwähnt für die verschiedene Elemente festlegen. Dazu gehören zum Beispiel die Markierungsfarbe, das ist hier der Bereich moz-selection, selection. Das ist im Prinzip die Farbe, die angewandt wird, wenn ich Text markiere.

Schritt 82

Als kleines Beispiel – hier beim Webdesign Podcast ist es dann das Orange, da hier Orange generell die Hauptfarbe ist, das kann in diesem Bereich festgelegt werden.

Schritt 83

Dann Standard-Linkfarben, Standardfarben für Blockquotes und so weiter und so sofort. Danach folgen noch einige hilfreiche Standardklassen, Angaben für den Druck von Webseiten, also für Media-Print, und hier in dem leeren Bereich können wir unsere eigenen CSS-Angaben schreiben.

Schritt 84

Wir wechseln also wieder in den Haupt-Quellcode, löschen die Standardelemente und beginnen jetzt, in unserem Dokument zu schreiben.

Schritt 85

Dazu benötigen wir als Erstes die Bilder der Webseite. Die Bilder kopiere ich mir aus dem fertigen Ordner …

… und füge sie in den Ordner, in dem wir jetzt arbeiten, wieder ein.

Schritt 86

Wir gehen sie kurz gemeinsam durch. Wir haben als Erstes ein Beispielbild für das Article Image.

Schritt 87

Also dieses Bild direkt unter der Überschrift.

Schritt 88

Als Nächstes den Hintergrund der Webseite.

Schritt 89

Also der graue Hintergrund, dabei handelt es sich um einen kleinen Verlauf, wir haben hier links und rechts ein etwas dunkleres Grau und in der Mitte wird es ein Hellgrau.

Schritt 90

Dann haben wir ein Bild für die Slideshow.

Schritt 91

Und zwar für diesen Bereich.

Schritt 92

Danach den Pfeil für comment replies.

Schritt 93

Und das sieht dann zum Beispiel so aus. Hier haben wir den kleinen Pfeil.

Schritt 94

Danach folgt ein Bild, das wir für Facebooks Open Graph Protocol benötigen.

Das tut hier in dem Fall nicht allzu viel zur Sache, deswegen werden das hier an der Stelle überspringen.

Schritt 95

Danach haben wir den Header Background …

… in einer entsprechend hohen Auflösung. Wir haben hier 1600 Pixel in der Breite, damit passt das Ganze für die meisten Monitore.

Schritt 96

Das ist ein Bild für den Teaser-Bereich, …

Schritt 97

… also für diese drei Boxen.

Schritt 98

Danach haben wir sämtliche Icons, die auf der Seite verbaut werden. Die sind alle in einer PNG-Datei zusammengefasst, damit sparen wir im Endeffekt einige HTTP-Requests und können die Geschwindigkeit der Webseite optimieren.

Schritt 99

Danach folgt der Hintergrund (dabei handelt es sich um eine eine Pixel-Grafik mit einer entsprechenden Höhe) – wird natürlich dann wiederholt. Das ist der Hintergrund für die Input-Grafiken.

Schritt 100

Hier haben wir den Platzhalter, falls ein AdBlock aktiviert ist, auch das ist jetzt an der Stelle für die eigentliche Arbeit erst mal irrelevant.

Schritt 101

Danach die drei Bilder für die Anzeigen, …

Schritt 102

… hier in dem Bereich:

Schritt 103

Dann den linken Bereich des Schattens.

Schritt 104

Den rechten Bereich des Schattens, …

Schritt 105

… der unter den Boxen überall angezeigt wird.

Den können wir an der Stelle so in der Form mit Box-Shadow von CSS3 nicht realisieren, deswegen haben wir PNG-Grafiken.

Schritt 106

Und zu guter Letzt das Logo.

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