{"id":2041,"date":"2012-06-27T15:29:27","date_gmt":"2012-06-27T14:29:27","guid":{"rendered":"http:\/\/www.workflowblog.de\/?p=2041"},"modified":"2014-07-04T13:29:04","modified_gmt":"2014-07-04T12:29:04","slug":"was-ist-responsive-ux-design","status":"publish","type":"post","link":"https:\/\/www.workflowblog.de\/?p=2041","title":{"rendered":"Was ist Responsive UX Design?"},"content":{"rendered":"

Immer mehr Menschen nutzen mobile Ger\u00e4te, um Inhalte aus dem Internet abzurufen. Dabei spielt die lesbare und \u00fcbersichtliche Darstellung eine entscheidende Rolle. Zoomen und Scrollen sind dabei ebenso wenig nutzerfreundlich wie Icons oder Men\u00fcpunkte, die via Touchscreen nur mit viel Fingerspitzengef\u00fchl angew\u00e4hlt werden k\u00f6nnen. Mit dem auf HTML5 und CSS3 basierenden Responsive UX Design wird die optimale Darstellung von Webseiten auf unterschiedlichen Ger\u00e4ten und Displays gew\u00e4hrleistet. Da sich die Inhalte somit auf die Bed\u00fcrfnisse des Anwenders einstellen, bieten responsive Websites das bestm\u00f6gliche Nutzererlebnis (User experience = UX).<\/p>\n

Um die flexible Anpassung an verschiedene Display und Modi zu unterst\u00fctzen, wird beim Responsive UX Design in erster Linie mit relativen Angaben gearbeitet. Das hei\u00dft, konkrete Pixelangaben k\u00f6nnen zwar beispielsweise im Sinne einer prozentualen Festlegung eingestellt oder vom entsprechenden Programm erfasst werden, sind aber keine Voraussetzung f\u00fcr eine nutzerfreundliche Darstellung. Stattdessen passen sich die Schriftgr\u00f6\u00dfen je nach Ger\u00e4t an.<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

\u00c4hnlich verh\u00e4lt es sich mit Layoutvorgaben. Deren Flexibilit\u00e4t ist allerdings ein wenig gew\u00f6hnungsbed\u00fcrftig, da die Seiten auf unterschiedlichen Ger\u00e4ten zum Teil auch sehr verschieden dargestellt werden. So sind beispielsweise Grafiken, die in der Desktop-Ansicht eine zentrale Position einnehmen, auf dem Smartphone m\u00f6glicherweise nicht mehr ber\u00fccksichtigt, stark verkleinert oder in den Hintergrund ger\u00fcckt.<\/p>\n

 <\/p>\n

\"\"<\/a><\/p>\n

 <\/p>\n

Der gr\u00f6\u00dfte Vorteil des responsiven Webdesigns ist sicher in der enormen Zeit- und Kostenersparnis zu sehen. Mit Responsive Design ist die Erstellung von alternativen Inhalten f\u00fcr die mobile Darstellung nicht mehr n\u00f6tig. Dadurch reduziert sich nicht nur der Aufwand f\u00fcr das Erstellen, sondern auch f\u00fcr die Pflege der Webinhalte.<\/p>\n

Wie generiert man nun aber einen responsiven Output? Die einfachste M\u00f6glichkeit besteht in der Verwendung eines Publishing-Tools, das die M\u00f6glichkeit einer automatischen Anpassung beinhaltet. WebWorks ePublisher ist ein solches Werkzeug. Das Output-Format WebWorks REVERB hat alle Elemente, die den responsiven Output ausmachen, bereits integriert, sodass der Anwender mit wenigen Klicks seine Inhalte in\u00a0 responsive content \u00a0konvertieren kann.<\/p>\n

 <\/p>\n

Weiterf\u00fchrende Informationen finden Sie auch in unserem Whitepaper \u201eResponsive UX Design – Flexible und interaktive Webseitengestaltung\u201c (PDF)<\/a>.<\/p>\n

Um zu testen, ob Ihre eigene Website den Anforderungen der mobilen Ausgabeger\u00e4te gerecht wird, k\u00f6nnen Sie beispielsweise The Responsinator<\/a> nutzen.<\/p>\n","protected":false},"excerpt":{"rendered":"

Immer mehr Menschen nutzen mobile Ger\u00e4te, um Inhalte aus dem Internet abzurufen. Dabei spielt die lesbare und \u00fcbersichtliche Darstellung eine entscheidende Rolle. Zoomen und Scrollen sind dabei ebenso wenig nutzerfreundlich wie Icons oder Men\u00fcpunkte, die via Touchscreen nur mit viel … Weiterlesen →<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":1730,"comment_status":"open","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_s2mail":"","jetpack_post_was_ever_published":false,"jetpack_publicize_message":"","jetpack_is_tweetstorm":false,"jetpack_publicize_feature_enabled":true},"categories":[23,12,468,1,29],"tags":[133,34,95,94,276,132,301,576,290,275,134],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2012\/05\/Logo_ePublisher-Designer_72.png","jetpack_shortlink":"https:\/\/wp.me\/p3kBRH-wV","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/2041"}],"collection":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/users\/4"}],"replies":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcomments&post=2041"}],"version-history":[{"count":22,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/2041\/revisions"}],"predecessor-version":[{"id":4175,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/2041\/revisions\/4175"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/media\/1730"}],"wp:attachment":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=2041"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=2041"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=2041"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}