Am 14. September 2017 haben wir eine überarbeitete Fassung unserer Datenschutzrichtlinie veröffentlicht. Wenn Sie video2brain.com weiterhin nutzen, erklären Sie sich mit diesem überarbeiteten Dokument einverstanden. Bitte lesen Sie es deshalb sorgfältig durch.

Erste Schritte mit Responsive Webdesign

HTML und CSS

LinkedIn Learning kostenlos und unverbindlich testen!

Jetzt testen Alle Abonnements anzeigen
Responsive Webdesign basiert auf den zwei Auszeichnungssprachen HTML und CSS. Damit konnten Sie eigentlich auch bisher schon ein Stylesheet für unterschiedliche Ausgabegeräte programmieren.

Transkript

Die Programmierung für verschiedene Endgeräte einer Webseite ist keine neue Erfindung, und das möchte ich Ihnen anhand eines kleinen Beispieles demonstrieren. Ich wechsel dazu in einen HTML-Editor. Ich verwende hier den Dreamweaver, aber Sie können jeden beliebigen anderen Editor ebenfalls dafür verwenden, um die Beispiele dieses Tutorials nachzuvollziehen. Bauen wir eine kleine einfache Seite, und zwar unsere Burgen.info: Schottland, Burgen, Castles, und eine sehr einfache Struktur im Body. Wir nehmen ein "Div" mit der ID "banner" - in diesen Bereich kommt später eine Grafik. Und ein "Div" mit der ID "Content". Und hier haben wir den eigentlichen Text. Das deute ich einfach mal an, indem ich eine Überschrift aufnehme: "Schottland und seine Burgen". In dem Bereich des Banners möchte ich eine Grafik aufnehmen. Dafür greife ich auf Eine zurück, die ich hier schon erstellt habe, und füge sie an die Stelle einfach ein: Dunnottar Castle. So, speichere die Seite schon mal ab als "test.html", und jetzt haben wir ja eine ganz normale Webseite - an sich gesehen noch nichts Bedeutsames. Im Head-Bereich nehme ich jetzt ein Stylesheet auf und zeige Ihnen die Verwendung für unterschiedliche Ausgabegeräte. Und ich denke, das am häufigsten verwendete Ausgabegerät war der Drucker. Und man hat eine Webseite so programmiert, dass sie beim Ausdruck ein anderes Ergebnis zeigte wie bei der Anzeige auf dem Bildschirm. Es gibt zwei Möglichkeiten Stylesheets einzubinden. Einmal direkt, wie ich das jetzt hier mache, im Dokument und einmal ausgelagert in einer Datei. Im head-Container nehme ich nun ein Stylesheet auf und zeige Ihnen, wie Media Querys unterschiedliche Ausgaben auf unterschiedlichen Endgeräten erzeugen können. Die Wahl fällt dabei auf den Screen, also den Bildschirm und den Drucker. So kann ein Objekt der Website im Browser angezeigt, aber bspw. nicht ausgedruckt werden. Das Stylesheet selbst wird eingebunden und ist vom Typ "text/css". Und hier rein definiere ich nun, wie mein Banner aussehen soll oder bzw. wie das Ganze dann ausgerichtet werden soll. Ich nehme also ein Banner auf als ID, und füge einfach ein Text "align center" ein. Das ist jetzt nicht so ganz ideal, aber demonstriert was ich meine. Und ich möchte, dass das an der Stelle angezeigt wird oder verwendet wird, wenn es sich um eine Bildschirmausgabe handelt. Das heißt letztendlich in dem Moment, wenn wir einen Screen haben, soll genau diese Grafik in der Mitte des Screens angezeigt werden. Ich gehe also hin und verwende den Begriff "media". Und da haben wir schon eine Liste von den Möglichkeiten, die schon wesentlich länger existieren, bevor es den Begriff "Responsive Webdesign" gegeben hat. Man sieht hier z.B. die Möglichkeit, speziell für Brail-Systeme Dokumente zu entwickeln. Man sieht, wenn man z.B. das "screen" eingibt, dass man hier auch entsprechend für Screen-Design etwas hat oder für die Sprachausgabe, also das gibt es schon relativ lange. Und ja. Ich verwende den Screen, um mich genau darauf zu konzentrieren. Eine Alternative - und dafür kopiere ich jetzt einfach diesen Block - für die Ausgabe auf einem Drucker soll nun sein, dass der Banner hier an der Stelle nicht angezeigt wird. Der CSS-Befehl dafür lautet "display: none;". Und jetzt muss ich hier an der Stelle nur das Ausgabegerät benennen. Und dieses Ausgabegerät heißt in dem Falle "print". Speichern wir das ab. Schauen uns das im Webbrowser einmal an. So sieht es aus. Wir haben unsere Überschrift und wir haben die Grafik, die - eindeutig erkennbar - in der Mitte des Bildschirmes, oder in der Mitte des Browserfensters angeordnet ist. Wenn ich das Ganze nun im Ausdruck aufrufe. Ich betätige auf dem Mac die Tastenkombination Command+P, auf Windows Strg+P - und schaue mir das Ganez in der Vorschau an, dann sehen wir, dass nun hier meine Überschrift zwar angezeigt wird, aber die Grafik nicht mehr sichtbar ist. Und genau dadurch haben wir eine unterschiedliche Ausgabe für unterschiedliche Endgeräte erreicht, mit einer einzigen HTML-Datei. Sie sehen also: Die Programmierung für verschiedene Ausgabegeräte ist an sich gesehen nichts Neues. Neu bei "Responsive Webdesign" ist es, dass wir nicht nur auf ein einzelnes Ausgabegerät, also wie hier in dem Beispiel eines Druckers, reagieren, sondern auch auf die Maße eines Displays, auf die Auflösung. Und wenn Sie mal an Tablet-PCs oder an Smartphones denken: Sehr viele dieser Geräte haben die Möglichkeit, sich sowohl im Querformat, als auch im Hochkantformat zu bewegen. Und damit haben wir - man bezeichnet das als Protrait- oder Landscapeauflösung - auch noch einen Unterschied in der Handhabung des Gerätes, also des Formates, bzw. des Betrachtungswinkels, wie das Gerät gehalten wird. Und es gibt auch bei den meisten Smartphones und Tablet-PCs noch unterschiedliche Eingabemöglichkeiten wie Tastatur, Maus, Finger oder auch mittlerweile sogar Sprache. Insbesondere durch HTML 5 und CSS 3 oder "HTML 5 and CSS 3" werden etliche neue Funktionalitäten hinzukommen, die das "Responsive Webdesign" noch leistungsfähiger machen werden.

Erste Schritte mit Responsive Webdesign

Erarbeiten Sie sich die grundlegenden Techniken zu Responsive Webdesign und stellen Sie damit sicher, dass sich Ihre Webseiten auf unterschiedlichen Endgeräten einsetzen lassen.

1 Std. 32 min (11 Videos)
Für Designer nicht geeignet
Nora G.
Als Screendesignerin wollte ich mehr Infos zu der Umsetzbarkeit bei Responsive Websites lernen. Dieser Kurs richtet sich an Menschen, die eine Seite selber bauen wollen.
 

Dieser Online-Kurs ist als Download und als Streaming-Video verfügbar. Die gute Nachricht: Sie müssen sich nicht entscheiden - sobald Sie das Training erwerben, erhalten Sie Zugang zu beiden Optionen!

Der Download ermöglicht Ihnen die Offline-Nutzung des Trainings und bietet die Vorteile einer benutzerfreundlichen Abspielumgebung. Wenn Sie an verschiedenen Computern arbeiten, oder nicht den ganzen Kurs auf einmal herunterladen möchten, loggen Sie sich auf dieser Seite ein, um alle Videos des Trainings als Streaming-Video anzusehen.

Wir hoffen, dass Sie viel Freude und Erfolg mit diesem Video-Training haben werden. Falls Sie irgendwelche Fragen haben, zögern Sie nicht uns zu kontaktieren!