Responsive Webdesign bezeichnet eine gestalterische und technische Art mit der Webseiten erstellt werden, die auf die Eigenschaften des jeweiligen Endgerätes (z.B. Smartphone oder Tablet-Computer, ..) reagieren. Je nach dem welches Endgerät verwendet wird, erfolgt der grafische Aufbau der Webseite, z.B. die Anordnung und Darstellung der Navigation, Seitenspalten und Texte. Die Basis dafür stellen die Webstandards HTML5, CSS3 und JavaScript dar.

die Gestaltung:

Zuvor war es üblich, dass eine Webseite eine zumeist bestimmte und unveränderbare Größe hatte. Da aber die Größe und die Auflösung der Displays von Notebooks, Desktop-PCs, Tablets und Smartphones vollkommen unterschiedlich sind, müssen die Webseiten mit einem reaktionsfähigen Design ausgestattet sein, die sich an die Anforderungen der Endgeräte anpassen. Aber auch die Eingabemethoden sind davon betroffen.

Während am PC vorwiegend die Maus zur Anwendung kommt, ist es z.B. am Smartphone das Touchscreen. Insbesondere Blockelemente müssen dabei angepasst werden. Wenn Darstellungen nebeneinander nicht mehr passen, müssen diese z.B. untereinander positioniert werden und große Hintergründe mit Motiv werden am Smartphone unter Umständen weggelassen. Die Texte dürfen hingegen nur geringfügig kleiner skaliert werden, damit die Lesbarkeit erhalten bleibt.

Vorteil zur mobilen Webseite:

Bei der mobilen Seite wird nach der klassischen Methode ein zusätzliches und unabhängiges Template für mobile Endgeräte hinzugefügt. Dies hat allerdings den Nachteil, dass der Wartungsaufwand deutlich höher ist. Bei einer Seite die mit responsive Design erstellt ist, gibt es hingegen nur eine Seite, die sich entsprechend an das Endgerät anpasst.

diesen Artikel als Ebook (PDF) ohne Registrierung downloaden:

einfach hier klicken und kostenlos downloaden

einen Screenshot des Ebooks (zusammengefasst auf 2 Seiten) können Sie hier sehen

Ebook responsive-Design

und Ihnen schöne Grüße,

Ing. Schönberg Christian

XING.com - Netzwerk für Beruf und Leben    Facebook    Twitter

Und hier noch ein Glitze-Kleines-Bisschen Werbung :-(

http://schoenberg.co.at

{"id":117,"date":"2014-12-12T20:43:19","date_gmt":"2014-12-12T20:43:19","guid":{"rendered":"http:\/\/schoenberg.co.at\/marketing\/?p=117"},"modified":"2016-08-18T16:04:53","modified_gmt":"2016-08-18T16:04:53","slug":"responsive-web-design","status":"publish","type":"post","link":"http:\/\/schoenberg.co.at\/marketing\/responsive-web-design\/","title":{"rendered":"Responsive Web-design:"},"content":{"rendered":"","protected":false},"excerpt":{"rendered":"

Responsive Webdesign bezeichnet eine gestalterische und technische Art mit der Webseiten erstellt werden, die auf die Eigenschaften des jeweiligen Endgerätes (z.B. Smartphone oder Tablet-Computer, ..) reagieren. Je nach dem welches Endgerät verwendet wird, erfolgt der grafische Aufbau der Webseite, z.B. die Anordnung und Darstellung der Navigation, Seitenspalten und Texte. Die Basis dafür stellen die Webstandards […]<\/p>\n","protected":false},"author":1,"featured_media":0,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":[],"categories":[1,7,3,5],"tags":[76,402,144,143],"_links":{"self":[{"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/posts\/117"}],"collection":[{"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/comments?post=117"}],"version-history":[{"count":3,"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/posts\/117\/revisions"}],"predecessor-version":[{"id":307,"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/posts\/117\/revisions\/307"}],"wp:attachment":[{"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/media?parent=117"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/categories?post=117"},{"taxonomy":"post_tag","embeddable":true,"href":"http:\/\/schoenberg.co.at\/marketing\/wp-json\/wp\/v2\/tags?post=117"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}