Haupt-Reiter

U5: Responsive Webdesign

Anleitung für das Wiki
In diesem Wiki könnt ihr gemeinsam Lerninhalte erstellen. Jedes Wiki ist direkt und für jeden angemeldeten User editierbar. Wenn bereits bei vorherigen Prüfungs-Wikis zum Thema (manchmal auch nur Teilgebiete streifend) erstellt wurden, so werden sie unten verlinkt. Ansonsten einfach hier diesen Eintrag überschreiben und mit entsprechenden Inhalten füllen.
Um Beispielaufgaben etc. zu bearbeiten haben wir extra eine Lerngruppe (https://mediencommunity.de/lerngruppe-mediengestalter-ap-sommer-2019) eingerichtet, bitte diese für das gemeinsame Lösen von Aufgaben nutzen.

Viel Erfolg beim Lernen.
Das Team der mediencommunity

AnhangGröße
PDF icon U5 Responsive Webdesign.pdf1.43 MB
Bewertung: 
0
Bisher keine Bewertung

Kommentare

<p>Hallo zusammen!</p>
<p>Derzeit bin ich dabei ein Handout für dieses Thema zu erstellen. Folgende Themen möchte ich mit aufnehmen:<br>-Adoptive und responsive Layouts (als Ergänzung adoptives Web Design und responsive Web Design)<br>-Fixes Layout, Elastisches Layout, Fließendes Layout<br>-Absolutes Maß und Relatives Maß<br>-Media-Queries</p>
<p>Mir kommt das ein bisschen wenig vor, hat jeamdn noch Ideen, was man noch mit aufnehmen könnte?</p>

Was ist Responsive Webdesign

Responsive Webdesign stellt eine aktuelle Technik zur Verfügung, welche es ermöglicht mit Hilfe von HTML5 und CSS3 Media-Queries das einheitliche Anzeigen von Inhalten auf einer Website zu gewährleisten. Hierbei wird das Layout einer Website so flexibel gestaltet, dass dieses auf dem Computer- Desktop, Tablet und Smartphone eine gleichbleibende Benutzerfreundlichkeit bietet und der Inhalt gänzlich und schnell vom Besucher aufgenommen werden kann.

Bedeutung von "Responsive Webdesign"

"Form follows function" - beim Responsive Webdesign folgen Funktion, Design und Inhalt der jeweiligen Bildschirmauflösung des verwendeten Desktop, Tablet oder Smartphone.

Der Begriff Responsive Webdesign bedeutet im übertragenen Sinne "reagierendes Webdesign". Inhalts- und Navigationselemente sowie auch der strukturelle Aufbau einer Website passen sich der Bildschirmauflösung des mobilen Endgeräts an – es reagiert auf und korrespondiert mit der Auflösung des mobilen Endgeräts. Responsive Webdesign folgt dem Nutzer, und nicht wie gegenwärtig, der Nutzer den meist starr konstruierten Layouts konventioneller Websites und Online-Shops.

Vorteile der "Mobile Website Optimierung"

Die Vorteile von Responsive Webdesign zeigen sich in Statistiken und Trends zur Nutzung mobiler Endgeräte. Der steigende Marktanteil von Smartphones und Tablets wie iPhone und iPad erzwingen auch das Umdenken beim Gestalten von Webseiten. Wurde bis dato für eine Bildschirmauflösung von maximal 1000px Breite auf dem Computer- Desktop optimiert, muss heutzutage auf eine Vielzahl verschiedener Endgeräte Rücksicht genommen werden:

Standard Auflösungen von Smartphones und Tablets:

Smartphones:
320px bis 480px
Tablets:
768px bis 1024px
Computer-Desktop:
1024px+

 

Bei einer strikten Trennung von Mobil- und Desktop-Version der Website, also einer nicht responsive fähigen Website, entsteht ein erhöhter Pflegeaufwand von redaktionellem Content und Bildmaterial. Dazu kommt, dass die Website unter Umständen für zukünftige Tablet- oder Smartphone-Formate eine dritte oder vierte Version des Layouts benötigt.

 

Hallo,

danke für deinen ausführlichen Beitrag.
Wenn du die Ausführungen im Wiki oben einträgst, können andere auch ergänzen. Bei Kommentaren geht das nicht. 

Grüße

Peter

 

Hallo zusammen!
Derzeit bin ich dabei ein Handout für dieses Thema zu erstellen. Folgende Themen möchte ich mit aufnehmen:

-Adaptive und responsive Layouts (als Ergänzung adaptives Web Design und responsive Web Design)

-Fixes Layout, Elastisches Layout, Fließendes Layout

-Absolutes Maß und Relatives Maß

-Media-Queries

Mir kommt das ein bisschen wenig vor, hat jemand noch Ideen, was man noch mit aufnehmen könnte?

Hallo an alle,

ich wundere mich gerade nur ob "Adaptive Webdesign" wirklich auch unter dieses Thema fällt. Weil eigentlich sind Responsive Webdesign und Adaptive Webdesign doch etwas komplett unterschiedliches?

Denke ich auch. Dachte zuerst, dass Adaptive Webdesign eine Unterkategorie vom Responsive Webdesign ist, aber da es eher eine Art Vorläufer hierzu ist, gehört dieser Begriff (meiner Meinung nach) nicht zu diesem Thema. Außer man will auf Nummer sicher gehen und die Unterschiede lernen, falls hierzu eine Aufgabe käme. Hier ein Link, wo es ganz verständlich beschrieben wird: https://blog.kulturbanause.de/2012/11/adaptive-website-vs-responsive-website/