{"id":3257,"date":"2013-04-22T08:05:06","date_gmt":"2013-04-22T07:05:06","guid":{"rendered":"http:\/\/www.workflowblog.de\/?p=3257"},"modified":"2013-04-22T08:05:06","modified_gmt":"2013-04-22T07:05:06","slug":"responsive-design-und-responsive-publishing","status":"publish","type":"post","link":"https:\/\/www.workflowblog.de\/?p=3257","title":{"rendered":"Responsive Design und Responsive Publishing"},"content":{"rendered":"<p>Responsive Design ist ein mittlerweile g\u00e4ngiger Begriff f\u00fcr die Anpassung von Webinhalten an verschiedene Ausgabeger\u00e4te. Die Forderung nach responsive Design kann als Folge der zunehmenden Nutzung von mobilen Ger\u00e4ten verstanden werden kann. Dabei geht es nicht nur um die M\u00f6glichkeit, Webinhalte auf verschiedenen Ger\u00e4ten zu \u00f6ffnen, sondern um die optimale Darstellung der Inhalte. <!--more-->M\u00fcssen Seiten gezoomt oder mittels Scrollen bestimmte Abschnitte erst gesucht werden, ist dies f\u00fcr den Anwender umst\u00e4ndlich. Die Idee, responsive Online-Inhalte bereitzustellen, zielt daher vor allem auf Nutzerfreundlichkeit und einfache Bedienung ab.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/ausgabeger\u00e4te.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-3264 aligncenter\" title=\"Responsive Design Ausgabeger\u00e4te\" src=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/ausgabeger\u00e4te-300x197.jpg\" alt=\"\" width=\"300\" height=\"197\" srcset=\"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/ausgabeger\u00e4te-300x197.jpg 300w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/ausgabeger\u00e4te.jpg 424w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>Spricht man von responsivem Design, wird HTML5 h\u00e4ufig als die L\u00f6sung schlechthin betrachtet, doch der Einsatz von HTML5 allein ist nicht gleichbedeutend mit responsivem Design. Nur unter der zus\u00e4tzlichen Verwendung von CSS3 ist das Erstellen von responsivem Output m\u00f6glich. Hier spielen vor allem die sogenannten <em>Media Queries<\/em> eine entscheidende Rolle. Media Queries fragen die Eigenschaften der Ger\u00e4te ab, auf denen Webinhalte angezeigt werden sollen und passen das Layout jeweils ger\u00e4tespezifisch an. Auf diese Weise ist die optimale Darstellung \u2013 unabh\u00e4ngig von Betriebssystem und Displaygr\u00f6\u00dfe \u2013 gew\u00e4hrleistet.<\/p>\n<p>&nbsp;<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/Responsive_Output.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"wp-image-3258 aligncenter\" title=\"Responsive_Output\" src=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/Responsive_Output-300x223.jpg\" alt=\"\" width=\"300\" height=\"223\" srcset=\"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/Responsive_Output-300x223.jpg 300w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/Responsive_Output-401x300.jpg 401w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/Responsive_Output.jpg 959w\" sizes=\"(max-width: 300px) 100vw, 300px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p><strong>Responsive Online-Hilfen<\/strong><br \/>\nIn der Technischen Kommunikation spielt die Frage nach der optimalen Darstellung von Inhalten vor allem im Hinblick auf mobile Dokumentationen eine wichtige Rolle. So war <em>Mobile Dokumentation<\/em> bei der tekom Fr\u00fchjahrstagung 2013 in M\u00fcnster eines der Schwerpunktthemen. Dabei ging es neben dem richtigen Ausgabeformat auch um die Frage, welchen Aufwand interessierte Unternehmen betreiben m\u00fcssen, um von herk\u00f6mmlichen Dokumentation zu responsiven Online-Hilfen zu gelangen. Im Kurztutorial\u00a0<em>Online-Hilfen f\u00fcr mobile Ger\u00e4te &#8211; von der Planung bis zur Auslieferung<\/em> demonstrierte SQUIDDS-Experte Georg Eck, wie der optimale Workflow aussehen kann.<\/p>\n<p>Die Folien zum Vortrag finden Sie auf der <a href=\"http:\/\/de.slideshare.net\/squidds\">SQUIDDS-Seite bei Slideshare<\/a>.<\/p>\n<p>&nbsp;<\/p>\n<p><strong>Responsive Publishing<\/strong><br \/>\nMit welchem Werkzeug publiziert man responsive Online-Hilfen? Eine M\u00f6glichkeit ist WebWorks ePublisher, der mit dem responsive Format REVERB \u2013 basierend auf HTML5 und CSS3 \u2013 Ausgaben f\u00fcr alle Displaygr\u00f6\u00dfen und Ger\u00e4te erstellt. Der entscheidende Vorteil des ePublisher besteht darin, dass aus FrameMaker-, Word- und XML\/DITA-Dateien ein einheitlicher Output erzeugt werden kann. Diese Eingabeformate sind als Standards der Technischen Dokumentation zu betrachten, sodass sich die Anpassung der bestehenden Quelldaten in den meisten F\u00e4llen auf ein Minimum reduziert. Responsive Publishing von Technischen Dokumentationen sorgt damit ohne gro\u00dfen Aufwand f\u00fcr die optimale Bereitstellung von technischen Inhalten \u2013 unabh\u00e4ngig vom verwendeten Ger\u00e4t.<\/p>\n<p style=\"text-align: center;\"><a href=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/WebWorks_ePublisher_Workflow.jpg\"><img decoding=\"async\" loading=\"lazy\" class=\"size-medium wp-image-3259 aligncenter\" title=\"WebWorks ePublisher Workflow\" src=\"http:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/WebWorks_ePublisher_Workflow-214x300.jpg\" alt=\"\" width=\"214\" height=\"300\" srcset=\"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/WebWorks_ePublisher_Workflow-214x300.jpg 214w, https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/WebWorks_ePublisher_Workflow.jpg 392w\" sizes=\"(max-width: 214px) 100vw, 214px\" \/><\/a><\/p>\n<p>&nbsp;<\/p>\n<p>Weitere Information finden Sie auch auf folgenden Seiten:<\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"http:\/\/www.squidds.de\/webworks\">www.squidds.de\/webworks<\/a><\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"..\/?cat=12\">www.workflowblog.de\/?cat=12<\/a><\/p>\n<p>&#8211;\u00a0\u00a0\u00a0\u00a0\u00a0\u00a0 <a href=\"http:\/\/www.responsinator.com\/\">www.responsinator.com<\/a> (Ist Ihre Seite responsive?)<\/p>\n<p>&nbsp;<\/p>\n<p>Haben Sie weitere Fragen? Dann schreiben Sie uns einfach eine E-Mail an <a href=\"mailto:kontakt@squidds.de\">kontakt@squidds.de<\/a> oder rufen Sie uns an unter 0911 -21 53 47 16.<\/p>\n<p>&nbsp;<\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Design ist ein mittlerweile g\u00e4ngiger Begriff f\u00fcr die Anpassung von Webinhalten an verschiedene Ausgabeger\u00e4te. Die Forderung nach responsive Design kann als Folge der zunehmenden Nutzung von mobilen Ger\u00e4ten verstanden werden kann. Dabei geht es nicht nur um die M\u00f6glichkeit, &hellip; <a href=\"https:\/\/www.workflowblog.de\/?p=3257\">Weiterlesen <span class=\"meta-nav\">&rarr;<\/span><\/a><\/p>\n","protected":false},"author":4,"featured_media":3272,"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,1,181,29],"tags":[302,34,303,304,109,300,276,41,301,291,576,290,275,66,86,305,574],"jetpack_publicize_connections":[],"jetpack_featured_media_url":"https:\/\/www.workflowblog.de\/wp-content\/uploads\/2013\/04\/ausgabeger\u00e4te1.jpg","jetpack_shortlink":"https:\/\/wp.me\/p3kBRH-Qx","jetpack_sharing_enabled":true,"_links":{"self":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/3257"}],"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=3257"}],"version-history":[{"count":19,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/3257\/revisions"}],"predecessor-version":[{"id":3297,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/posts\/3257\/revisions\/3297"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=\/wp\/v2\/media\/3272"}],"wp:attachment":[{"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fmedia&parent=3257"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Fcategories&post=3257"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/www.workflowblog.de\/index.php?rest_route=%2Fwp%2Fv2%2Ftags&post=3257"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}