{"id":4292,"date":"2021-02-25T22:15:51","date_gmt":"2021-02-25T22:15:51","guid":{"rendered":"https:\/\/swisstomato.ch\/2021\/02\/25\/bedeutung-von-responsive-webdesign\/"},"modified":"2021-02-25T22:15:51","modified_gmt":"2021-02-25T22:15:51","slug":"bedeutung-von-responsive-webdesign","status":"publish","type":"post","link":"https:\/\/swisstomato.ch\/de\/2021\/02\/25\/bedeutung-von-responsive-webdesign\/","title":{"rendered":"Die Bedeutung von Responsive Webdesign"},"content":{"rendered":"<p><span style=\"font-weight: 400;\">Responsive Webdesign ist heutzutage eine wirklich wichtige Sache im UX-Design. Jeder in der Branche weiss, dass ein wirklich responsives, also reaktionsschnelles Design f\u00fcr Benutzerfreundlichkeit unabdingbar ist. Aber was genau bedeutet \u00abresponsive\u00bb eigentlich? Was unterscheidet eine <a href=\"\/?page_id=6605\" target=\"_blank\" rel=\"noopener\">gut gestaltete responsive Website<\/a> wie die von Swiss Tomato, Ihrer Agentur f\u00fcr Webdesign Z\u00fcrich, von den schlecht gemachten?<\/span><\/p>\n<h2>Was ist Responsive Webdesign?<\/h2>\n<p><span style=\"font-weight: 400;\">Responsive bzw. reaktionsf\u00e4hig bedeutet, dass wir einen Bildschirm an jedes Leseger\u00e4t anpassen k\u00f6nnen, das der Benutzer verwenden k\u00f6nnte. Fr\u00fcher reichte ein Desktop-Bildschirm aus, da es nur Desktop-Computer gab. Jetzt gibt es eine grosse Auswahl an Desktop- und Notebook-Bildschirmen, Tablets mit unterschiedlichen Bildschirmgr\u00f6ssen und auch andere Mobilger\u00e4te wie Handys mit jeweils unterschiedlichem Browser-Erlebnis. Eine gut optimierte Website muss sich an alle Bildschirmgr\u00f6ssen anpassen k\u00f6nnen, um die gleiche Benutzererfahrung f\u00fcr alle zu gew\u00e4hrleisten. Dieser Prozess ist nicht einfach und die vielen Variablen k\u00f6nnen es sehr schwierig machen.<\/span><\/p>\n<h2>Best Practices, die beste Vorgehensweise<\/h2>\n<h3>Optimierte Bilder<\/h3>\n<p><span style=\"font-weight: 400;\">Bilder sind Schl\u00fcsselelemente auf Websites. Am besten ist es, wenn der Fokus des Bildes auf kleineren Bildschirmgr\u00f6ssen immer noch funktioniert, aber wenn nicht, kann Cropping, ein Zuschneiden, erforderlich sein. Nat\u00fcrlich wirken sich mehr Versionen desselben Bildes auf das Laden der Seite aus und beeintr\u00e4chtigen die Suchmaschinenoptimierung. Daher ist es am besten, wenn m\u00f6glich Vektorgrafiken zu verwenden. Swiss Tomato, Ihre Agentur f\u00fcr Webdesign Z\u00fcrich, steht Ihnen gerne bei Ihrer Website-Optimierung zur Seite \u2013 egal, ob Sie wissen, was Vektorgrafiken sind oder nicht.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17800\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2021\/02\/Img-01-1.jpg\" alt=\"responsive design\" width=\"1200\" height=\"613\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><i><span style=\"font-weight: 400;\">Navigation<\/span><\/i><\/h3>\n<p><span style=\"font-weight: 400;\">Hamburger-Men\u00fcs m\u00f6gen als prim\u00e4re Navigation eine schlechte Wahl sein, sind aber eine ausgezeichnete Wahl f\u00fcr Bildschirme von mobilen Ger\u00e4ten. In Mobile-Apps ist die Tab-Bar-L\u00f6sung ebenfalls normal, aber in der Web-Entwicklung kompliziert zu verwenden. Hamburger-Men\u00fcs k\u00f6nnen ein mehrstufiges Men\u00fc haben, um die Desktop-Dropdown-Men\u00fcstruktur beizubehalten.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17803\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2021\/02\/Img-02-1.jpg\" alt=\"responsive webdesign\" width=\"1200\" height=\"613\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3><i><span style=\"font-weight: 400;\">Slider<\/span><\/i><\/h3>\n<p><span style=\"font-weight: 400;\"><a href=\"https:\/\/getbootstrap.com\/docs\/4.0\/components\/carousel\/\" target=\"_blank\" rel=\"noopener\">Slider<\/a> bzw. Schieberegler funktionieren auch auf Mobilger\u00e4ten, aber die manuelle Navigation zwischen Bildern ist oft schwierig zu l\u00f6sen. Wischen nach links und rechts ist auf Mobilger\u00e4ten \u00fcblich, aber die Nachahmung in einem Webcode kann schwierig sein.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17806\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2021\/02\/Img-03-1.jpg\" alt=\"responsivity\" width=\"1200\" height=\"613\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Text-Gr\u00f6ssen<\/h3>\n<p><span style=\"font-weight: 400;\">Effektvolle \u00dcberschriften-Texte eignen sich hervorragend f\u00fcr Desktop-Bereiche, aber wenn wir auf mobilen Bildschirmen die gleiche Gr\u00f6sse beibehalten, kann das den gesamten Bildschirm verdecken. Mobile Textgr\u00f6ssen sollten definiert werden.<\/span><\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone size-full wp-image-17809\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2021\/02\/Img-04.jpg\" alt=\"mobile design\" width=\"1200\" height=\"613\" \/><\/p>\n<p>&nbsp;<\/p>\n<h3>Vertikale L\u00e4nge<\/h3>\n<p>Auf OnePager-Websites kann eine lange vertikale L\u00e4nge Probleme in mobilen Ansichten verursachen. Die Webdesign Agentur sollte dieses Problem mit kreativen L\u00f6sungen wie Text-Dropdowns, gestapelten Abschnitten etc. l\u00f6sen.<\/p>\n<p>&nbsp;<\/p>\n<p><img loading=\"lazy\" decoding=\"async\" class=\"alignnone wp-image-17812 size-full\" src=\"https:\/\/swisstomato.ch\/wp-content\/uploads\/2021\/02\/Img-05.jpg\" alt=\"responsive webdesign\" width=\"1200\" height=\"613\" \/><\/p>\n<p>&nbsp;<\/p>\n<p>Benutzer haben heutzutage sehr hohe Standards. Eine Website muss auf allen Ger\u00e4ten funktionieren. Wenn wir das detaillierte Responsive-Design nicht bieten, ist die Benutzererfahrung schw\u00e4cher, was die Wahrnehmung des Produkts verschlechtert.<\/p>\n<p>&nbsp;<\/p>\n<p>Ein Projekt im Auge? Trinken wir einen Tomatensaft! <a href=\"mailto:hello@swisstomato.com\">hello@swisstomato.com<\/a><\/p>\n","protected":false},"excerpt":{"rendered":"<p>Responsive Webdesign ist heutzutage eine wirklich wichtige Sache im UX-Design. Jeder in der Branche weiss, dass ein wirklich responsives, also reaktionsschnelles Design f\u00fcr Benutzerfreundlichkeit unabdingbar ist. Aber was genau bedeutet \u00abresponsive\u00bb eigentlich? Was unterscheidet eine gut gestaltete responsive Website wie die von Swiss Tomato, Ihrer Agentur f\u00fcr Webdesign Z\u00fcrich, von den schlecht gemachten? Was ist [&hellip;]<\/p>\n","protected":false},"author":1,"featured_media":1704,"comment_status":"closed","ping_status":"closed","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"categories":[5],"tags":[],"acf":{"first_post_thumbnail":"","post_thumbnail":"","home_slider_image":"","custom_class":""},"featured_image_big_url":"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/06\/Importance-of-responsive-webdesign-2.png","featured_image_url":"https:\/\/swisstomato.ch\/wp-content\/uploads\/2022\/06\/Importance-of-responsive-webdesign-2.png","date_formatted":" 25, 2021","month_number":"2","_links":{"self":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/posts\/4292"}],"collection":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/posts"}],"about":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/types\/post"}],"author":[{"embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/users\/1"}],"replies":[{"embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/comments?post=4292"}],"version-history":[{"count":0,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/posts\/4292\/revisions"}],"wp:featuredmedia":[{"embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/media\/1704"}],"wp:attachment":[{"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/media?parent=4292"}],"wp:term":[{"taxonomy":"category","embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/categories?post=4292"},{"taxonomy":"post_tag","embeddable":true,"href":"https:\/\/swisstomato.ch\/de\/wp-json\/wp\/v2\/tags?post=4292"}],"curies":[{"name":"wp","href":"https:\/\/api.w.org\/{rel}","templated":true}]}}