[vc_row][vc_column][vc_column_text]Vorweg: Responsive Webdesign ist im Moment noch kein reiner Rankingfaktor für SEO, entwickelt sich aber gerade Schritt für Schritt in diese Richtung. Es ist abzusehen, dass in den nächsten 12 Monaten die Wichtigkeit dieser Eigenschaft einer Webseite ins Ranking einfließt und somit dann Responsive Design auch zum Rankingfaktor werden wird. Aktuell ist es aber mitunter schon ein indirekter Rankingfaktor, da es eben die Benutzerfreundlichkeit betrifft. Wenn es richtig umgesetzt ist, kann somit die Bounce Rate mobilen Besuchern verringert werden. Rankings in mobilen und allgemeinen Suchergebnissen können verbessert werden (hier ist die Bounce Rate als Rankingfaktor der treibende Keil). [/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=“1/1″][vc_single_image image=“1225″ img_link_target=“_self“ img_size=“full“][/vc_column][/vc_row][vc_row][vc_column][vc_column_text]Einer der großen Vorteile des Responsive-Designs ist, dass die Webseiten-Benutzer die grafischen Elemente eindeutig wiederkennen können, ganz egal ob sie die Webseite auf dem Desktop, Smartphone oder Mobilephone aufrufen, dadurch wird das Vertrauen zur Webseite auch weiter gestärkt. Bei den meisten WebSeiten, die nicht responsive sind, unterscheiden sich die Desktop- und Mobile Version zu stark, sodass für den Benutzer der Wiedererkennungseffekt verloren geht. Zum Anderen findet sich der Besucher bei Responsive-Designs meist viel besser zurecht, da der Mensch ja wie bekanntlich ein „Gewohnheitstier“ ist ;-)
Der Begriff „responsive“ („reagierend“ bzw. „anpassend“) bezieht sich in diesem Zusammenhang auf das Layout der Webseite, welches sich an die Größe des Viewports (d. h. die Breite des für die Websitedarstellung vorgesehenen Bereichs, z. B. Browserfenster) dynamisch anpassen soll. Das gesamte Layout verkleinert oder vergrößert also entsprechend des Viewports und verschiebt und verändert sich ggf. für eine bessere Darstellung. Schriftgrößen und Zeilenumbrüche können verändert, bestimmte Elemente können ein- bzw. ausgeblendet werden.
Eine grobe Rasterung nach typischen Darstellungsgrößen für Desktop, Tablet und Mobile-Phone ist natürlich sinnvoll, genauso wie eine Berücksichtigung der Horizontal- (Portrait) und Vertikal-Ansicht (Landscape). Hierbei wendet man sogenannte Breakpoints an, welche bestimmen, bei welcher Auflösung das Layout umgebrochen wird. Sog. CSS Media-Queries helfen dabei, die Auflösung der Endgeräte abzufragen und die Darstellung entsprechend anzupassen. Das Layout bringt sich dann somit dynamisch in „Form“.
Um das Responsive-Design zu verwirklichen, muss das Layout einer Webseite im Allgemeinen beweglich gemacht werden. Um dies wiederum zu realisieren, arbeitet man mit einem sehr flexiblen CSS-Raster. Dieses Raster nennt man Fluid Grid. Hierfür gibt es schon diverse Frameworks (z.B: Bootstrap und Foundation sind leicht zu erlernende Frameworks) und Praxis-Beispiele, an denen man sich gut orientieren und bedienen kann, denn warum soll man das Rad neu erfinden?!
Nun kann man sagen, dass das Erstellen von getrennten Seiten für Desktop, Smartphone und Tablet den Vorteil hat, dass man auf gerätespezifische Eigenschaften besser Einfluss nehmen kann. Meiner Meinung nach ist dies aber in einem Großteil der Fälle mit relativ überschaubarem Programmieraufwand auch in einem einheitlichen Responsive-Design zu verwirklichen.
Aber Achtung! Bei diesem Thema ist eine gute Vorbereitung das A und O! Es gilt eine hohe Lernkurve zu überwinden, denn man wächst mit diesem Projekt. Aber ich will es nochmal deutlich machen, wie zu Beginn erwähnt: Langfristig gesehen wird das Responsive-Design die Rankings beeinträchtigen. Der Mobil-Traffic steigt schneller, als jeder bisher erwartet hat (siehe Keynote von Matt Cutts auf der Pubcon 2013).
Da sich das Thema Responsive-Design – auch wenn es beim Einpflegen mit Mehraufwand verbunden ist – immer mehr zum Industrie-Standard forciert, empfiehlt es sich daher frühzeitig umzusetzen, etwa bei einem geplanten Re-Design. Im Nachhinein lässt es sich nur aufwändig implementieren, was den Kostenpunkt nach oben treiben könnte. Die Lernkurve für die Programmierer ist erheblich höher, gerade aufgrund der Komplexität des Themas und der vielen unterschiedlichen Rendering Engines der Web-Browser und Betrachtungsgeräte, die mit unterschiedlichsten Auflösungen und Bedienkonzepten ausgestattet sind.
Einer der wichtigsten Punkte, der für ein Responsive-Design spricht, ist die einheitliche Cross Device Experience für den Besucher. Diese generiert mehr Trust auf den unterschiedlichen Seiten für den Nutzer (am Anfang des Artikels schon kurz erwähnt). Auslöser hierfür ist, dass der User ihm bekannte Seitenelemente etc. unabhängig vom Device wiederfindet und ihm so Vertrauen schenkt. Dieser Umstand sorgt dann für eine geringere Bounce Rate und eine höhere Conversion Rate bei Multi Device Besuchern. Weiterhin muss man auch nur eine (Layout-)Version pflegen und kann somit Bugs ggf. leichter auffindbar machen. Ebenso lassen sich Features und Promotions auf allen Devices gleichermaßen verfügbar machen und müssen nicht in mehreren Frontends gepflegt werden.[/vc_column_text][/vc_column][/vc_row][vc_row][vc_column width=“1/1″][vc_text_separator title=“ERSTE SCHRITTE MIT RESPONSIVE WEBDESIGN“ title_align=“separator_align_center“][/vc_column][/vc_row][vc_row][vc_column width=“1/1″][vc_accordion active_tab=“false“][vc_accordion_tab title=“Responsive Webdesign Tutorials“][vc_column_text]Beginner’s Guide to Responsive Web Design
Responsive Design in 3 Steps
Wie man eine HTML5 Webseite aufbaut
Erstellung eines Responsive Webdesign[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=“Responsive Webdesign Frameworks“][vc_column_text]http://foundation.zurb.com/
http://getbootstrap.com/
http://gumbyframework.com/
http://groundwork.sidereel.com/[/vc_column_text][/vc_accordion_tab][vc_accordion_tab title=“Responsive Webdesign Beispiele“][vc_column_text]squarespace.com
mashable.com
engadget.com
burton.com
aneventapart.com
foodsense.is[/vc_column_text][/vc_accordion_tab][/vc_accordion][/vc_column][/vc_row][vc_row][vc_column width=“1/1″][vc_separator][/vc_column][/vc_row][vc_row full_width=““ parallax=““ parallax_image=““][vc_column width=“1/1″][vc_column_text][socialsharing buttons=“facebook, twitter, gplus, xing, linkedin, pinterest, whatsapp“] [/vc_column_text][/vc_column][/vc_row]
Hollydale Golf Course in Plymouth, Minnesota, is what will be known as a groundstrokes coursea good way to be effective on the basic shots with little potential for running into any trouble. The 6160yard course is compact. So compact there is little or no need for directional signage.
Ich finde, dass mittels responsive Webdesign jede Website im responsive Design erscheinen sollte. Ich finde auch, dass sowas in einer guten Marketingberatung einer Marketing Agentur oder auch Typo3 Agentur vorkommen sollte. Zudem spricht eigentlich nichts dagegen, da ja die Zugriffe mit Smartphones recht hoch sind mit steigender Tendenz.
Webdesign mit Responsive Design ist immer dann eine gute Sache, wenn die Dektop Version genauso viel Informationen und Möglichkeiten beiten kann und soll wie die mobile Webseite. Allerdings ist es meist möglich und nützlich die Desktop Versionen ausführlicher zu gestalten.
Daher denke ich nicht, dass Responsive Webdesign immer passt.
Interessanter Artikel! Ein weiterer Vorteil des Responsive Designs gegenüber separaten Desktop- und Mobile-Seiten ist, dass die Contentpflege mit geringerem Aufwand verbunden ist, da es nur einen Quellcode gibt.
Viele Grüße
Anja