3 Säulen für Responsive Webdesign

In der heutigen Zeit der Smartphones und Tablets ist responsives Webdesign oder neudeutsch „Responsive Webdesign“ das A und O der Usability. Die Seite mit den besten Produkten und aktuellsten Inhalten verliert ohne Anpassung auf Mobilgeräte unzählige User - einfach weil es anstrengend ist. Wer hat schon Lust, mit den Fingern beim Lesen von links nach rechts zu scrollen, Texte vergrößern zu müssen und den Button auch nach dem fünften Anlauf zu verfehlen? Wir sind uns einig: Mobiles Webdesign ist heute unverzichtbar. Welche drei essentielle Basics Du bei der Umstellung von „statisch“ auf „dynamisch“ beachten musst, damit Deine Seite auch auf allen Endgeräten rund läuft und Absprungraten sinken erfährst Du, wenn Du weiterliest.

Statisches Grid-Layout – veraltet und wartungsintensiv

Der Browser ist die leere Leinwand eines Webdesigners. Um diese mit kreativem Inhalt und Leben zu füllen, nutzt er ein Grid-Layout. Basierend auf den gängigen Bildschirmauflösungen und den Zielgruppen wurde die feste Größe von 1.024 x 768 Pixeln für die Gestaltung gewählt. In Ausnahmefällen traut er sich auch an die Auflösung von 1.280 x 1.024 Pixeln heran.

Display ist nicht gleich Display

Bei einem klassischen Screendesign kommt ein 4-Spalten-Layout zum Einsatz. Kleinere Displays können dies schon nicht mehr ansprechend darstellen. Die Folge: Eine Reduzierung und Anpassung des Grids ist notwendig.

Responsive Webdesign Content

klein – kleiner – mobile

Innovationen in den letzten Jahren haben uns die Wunderwerke „Smartphone“ und „Tablet“ geschenkt, welche den Webseitenbetreibern nun ein Potpourri an Pixelgrößen bescheren. Nutzer stellen implizit die Anforderung, dass eine Seite auf jedem Gerät gut aussieht, vollen Funktionsumfang bietet und vor allem nutzbar ist. Sind wir uns da einig? Gut.

Leider müssen wir jedoch feststellen, dass eine gute Umsetzung von mobilen Seiten auf allen Devices in den wenigstens Fällen gelingt. Sie sind meist recht rudimentär und bieten die nötigsten Funktionen auch nur sehr spartanisch an. Die User Experience (UX) bleibt komplett auf der Strecke.

Willkommen im Pflege-Dilemma

Webseiten-Betreiber möchten den Usern alles bieten, was eine gute mobile Webseite ausmacht und erstellen mobile Versionen ihrer Seite. Das fängt erst einmal mit drei Versionen an:

  • iPhone-Screen: ab 320 Pixel Breite
  • iPad-Screen: bis 1.024 Pixel Breite
  • Desktop-Screen: über 1.024 Pixel Breite

Zu den drei Versionen kommt, dass iPad, iPhone & Co. nicht immer in der Portrait-Ansicht (hochkant), sondern gerne auch mal im Querformat genutzt werden. Um den Usern aller Geräte gerecht zu werden, wird häufig für jedes Gerät eine spezifisch optimierte Seite erstellt. Natürlich muss dann auch jede Seite einzeln gepflegt werden. Die Folge sind hohe Wartungskosten und ein endloses Pflege-Dilemma.

UX durch Responsive Webdesign

„Responsive“ bedeutet so viel wie „auf jemanden eingehen“ oder „reaktionsfähig bleiben“. Responsive Webdesign reagiert also auf das Endgerät – egal welche Auflösung es verwendet. Bei dem vorherrschenden Wust an Devices bringt dies Licht ins Webdesign-Nirvana. Aber wie genau?

Das Zauberwort heißt FLEXIBILITÄT. Bilder, Tabellen, Logos, Texte, Videos… – alle Elemente müssen sich flexibel anpassen.

Responsive Webdesign - 3 Säulen

Säule A – Keine festen Layout-Grids

Für viele Designer sind Responsive Webdesigns ein Dorn im Auge. Feste Layout-Grids mit fixen Größen genau platzierter Bilder und Texte gewährleisten ihrer Meinung nach, dass die Seite gut aussieht und alles seine gewollte Position hat.

Beim Responsiven Webdesign müssen wir uns von dem Gedanken der totalen Kontrolle über alle Devices verabschieden: „Give up control, not quality“ (Zitat: Jeremy Keith). Für Seiten und Elemente werden prozentuale statt fester Pixelwerte verwendet. Der Vorteil: die Seite passt sich den Gegebenheiten an, unter denen sie verwendet wird und reagiert so auf das Gerät des Nutzers. Trotzdem bedarf eine responsive Seite einer guten Planung, denn auch bei flexiblen Layouts wird nichts dem Zufall überlassen. In der Planungs- und Konzeptionsphase kostet das Responsive Design zwar mehr Schweiss und Arbeit – dafür wird die anschließende Pflege deutlich reduziert.

„Mobile First“ – für neu konzipierte Webseiten
Möchtest Du eine Webseite grundlegend neu konzipieren, so empfehlen wir Dir, nach der „Mobile First“-Maxime vorzugehen. Bei diesem „Bottom-Up“-Vorgehen betrachtest Du als erstes die kleinste Konstante – also das Smartphone mit geringer Leistung. Hierfür legst Du die wichtigsten Informationen und deren Darstellung fest, denn es ist deutlich einfacher, Details hinzuzufügen als diese später entfernen zu müssen. Außerdem wird die Entwicklung der Seite ganzheitlich betrachtet und bietet sich bei der Erstellung einer grundlegend neu konzipierten Webseite an.

„Graceful Degradation“ – für bestehende Webseiten
Du besitzt bereits eine bestehende Webseite und möchtest diese für Tablet und Smartphone optimieren? Dann ist die Lösung „Graceful Degradation“. Bei diesem „Top-Down“-Vorgehen konzentrierst Du Dich auf die leistungsstarken Geräte – also Notebook oder Desktop, an dem alles dargestellt werden kann. Mehr Infos hierzu findest Du bei Kulturbanause.

User First – Content vor Design
Bei der Erstellung von mobilen Seiten geht es häufig nur um Technik und Design. Der Blick auf den User wird zu oft vergessen. Sei schlau, dreh Deine Denkweise um und folge der „User First“-Maxime! Vergiss für einen Moment das Design und stell Dir die Frage: „Welche Inhalte kann ich einem Mobilen Nutzer zumuten und welche sind absolut wichtig für ihn?“. Denn wenn Du weißt, welche Inhalte der Nutzer auf welchem Gerät benötigt, kannst Du Deinen Content auch besser für ihn planen.

User, die über Smartphones auf Deine Seite kommen, sind meistens gerade unterwegs, vielleicht in Eile und haben ein häufig ein konkretes Anliegen. Sie haben daher keine Zeit, sich durch endlos lange Texte und Produktbeschreibungen zu wühlen. Unterwegs ist die Internetverbindung auch nicht immer die beste, also mache Deine Seite schneller, indem Du auf unnötige (Hintergrund-) Bilder und Elemente verzichtest. Arbeite also im ersten Schritt die Inhalte aus und wende Dich erst im zweiten dem Design zu.

Responsive Webdesign - colly.com

Säule B – Keine festen Schriftgrößen

Passe Headlines und Fließtexte so an, dass sie auch auf Smartphones gut lesbar sind. So vermeidest Du einen echten Konversionskiller. Infos sollen auch auf kleinstem Raum ohne Aufwand zu entschlüsseln sein. Eine 14pt-Schrift kann vielleicht am PC gut gelesen werden. Auf dem Smartphone hingegen bedeutet das Lesen Augenschmerzen und Quälerei. Prüfe die Lesbarkeit der Schriftarten daher immer direkt auf dem Gerät.

Responsive Webdesign - Forefather

Eine feste Schriftgröße ist also tabu. Es kann mit prozentualen Werten gearbeitet oder auf alternative Maße wie em zurück gegriffen werden. Tipp: JavaScript-Plugins wie FitText skalieren dabei eigenständig die Größe von Headlines.

Responsive Webdesign - FitText

Säule C: Keine festen Bildgrößen

Die Darstellung von Bildern bei responsiven Seiten führt uns schnell in eine Zwickmühle. Bilder müssen auf kleinen Devices entsprechend skaliert werden, sollen aber gleichzeitig auf hochauflösenden Displays scharf dargestellt werden. Große Bilder werden auf stationären PCs mit großem Bildschirm und schnellem Internet flott geladen und gestochen scharf dargestellt. Auf dem Smartphone mit mobilem Internet ärgert sich der User dafür aber mit langen Wartezeiten herum.

Als schöne Lösung, um auch hier flexibel zu agieren, empfehlen wir Dir zum Beispiel das JavaScript Plugin der Filament Group, welches die gewünschte Grafik abhängig von der Bildschirmauflösung lädt. Die Ladezeit wird reduziert und die Nerven des Nutzers geschont. Auch mit Adaptive Images kannst Du Dir über HTML die korrekte Bildgröße ausliefern lassen.

Update: Es geht auch ohne JavaScript-Plugin
Inzwischen hat sich in der Bildverarbeitung für responsive Seiten einiges getan. Seit 2014 gibt es das -Element mit erweiterten Attributen, welches erlaubt, mehrere Bilder für unterschiedliche Größen einfach zu deklarieren. Einfacher gesagt: Das Bild wird in verschiedenen Größen auf den Server geladen und die passende Größe automatisch für das jeweilige Gerät angezeigt. Das spart Traffic und schont die Nerven des Betrachters durch kürzere Ladezeiten.

Der Quellcode könnte wie folgt aussehen:

<img src="bild.jpg"
srcset="bild_klein.jpg 667w,
bild_mittel.jpg 1024w,
bild_gross.jpg 1280w">

Bis inklusive 667px: image_klein.jpg (z.B. iPhone 6)
Bis inklusive 1.024px: image_mittel.jpg (z.B. iPad)
Ab 1.280px wählt der Browser image_gross.jpg (z.B. Desktop)

Es kommt allerdings nicht nur auf den Viewport an, denn Bilder in einer Auflösung von 72dpi werden auf einem hochauflösenden Display (Retina) auf iPhones und MacBooks nur in der doppelten Auflösung von 144dpi knackig scharf angezeigt. Die einfache Code Variante dazu lautet:

<img src="bild.jpg"
srcset="bild.jpg 1x,
bild@2x.jpg 2x">

Die Beispiele sollen zeigen, dass es weitreichende einfache Möglichkeiten gibt, um Bilder perfekt darzustellen.

Responsive Webdesign - cacaotour.com
Das Headerbild verschwindet bei kleineren Auflösungen. Sehr Ressourcenschonend!

Ausführliche Infos findest Du hier:
http://pmueller.de/blog/responsive-bilder-ein-ueberblick.html
https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

Wie wird die richtige Seite ausgeliefert?

Möchtest Du den Inhalt einer Seite zum Drucken formatieren, so muss die entsprechende CSS-Datei mitgeliefert werden. Der Browser fragt dann ab, wie er die Seite darzustellen hat. Bei mobilen Seiten liefert der „viewport“ die Info, dass es sich zum Beispiel um ein iPad handelt. Nach Auswertung dieser Info lassen sich die Inhalte über CSS3 Media Queries bequem anpassen. So wird der Content auf dem iPad nicht mehr auf 100% angezeigt, sondern auf 65% skaliert. Auch Schriftgröße, Header und Footer lassen sich auf diese Weise komfortabel steuern. Navigationsleisten können neu positioniert oder komplett ausgeblendet werden.

Tipp: Es ist möglich, den Inhalte entsprechend des Gerätes anzupassen, also „Responsive Content“ einzusetzen. Fließtexte kannst Du zum Beispiel für Smartphones verkürzt in Listenform aufbereiten.

Mehr Infos findest Du im Keywordmonitor.

Responsive Content

Auch komfortabel – den Nutzer einfach fragen, welche Textversion er lesen möchte
Quelle: http://nextlevelseo.de/seo-responsive-content-3352/

Du siehst, der Inhalt wird nicht automatisch korrekt in Position gerückt. Eine flexible Darstellung erfordert eine flexible und durchdachte Planung. Nur so kann eine perfekte Seite entstehen, die sich auf jede beliebige Größe anpasst.

Vorsicht Stolperfallen:

Diese Punkte solltest Du beachten, wenn Du eine responsive Webseite planst:

  • Der Browser muss CSS3 Media Queries beherrschen und mit diesen umgehen können.
  • Ladezeiten im Auge behalten und mediale Inhalte entsprechend anpassen.
  • JavaScript hilft bei der Entwicklung, kann aber auch zu langen Ladezeiten führen.
  • Navigation ist nicht gleich Navigation! Ein Touchscreen reagiert nicht auf Mouseover-Menüs.
  • Der Content der Seite muss gut bemessen sein. Andernfalls können Seiten lang werden und weit unter Fold führen.

Mehr Inspirationen für Responsive Webdesigns:

Best Practice - Responsive Webdesign
50 Best Practices auf Design Modo

Inspiration für Responsive Webdesign

Sehr gute Beispiele auf MediaQueries

Fazit

Wer heutzutage mitspielen möchte, der muss seine Angebote auf allen Geräten für seine Kunden zugänglich machen. Eine Lösung ist Responsive Webdesign. Du brauchst zwar anfangs einen langen Atem, aber ersparst Dir langfristig das Pflege-Dilemma.

Ob Responsive Design wirklich die Lösung aller Probleme ist, kannst Du gerne mit uns in den Kommentaren diskutieren. In der Infografik: Mobile Commerce Deutschland – die TOP 100 Shops im Benchmark findest Du eine interessante Gegenüberstellung von Responsive und Adaptive Design.

Egal welche Lösung Du für Deine mobile Seite verwendest: Stelle den User in den Fokus! Er muss die Seite bedienen können und dabei schnell und einfach zum Ziel kommen.

Schnell, einfach, effizient! Was mobile Nutzer wirklich wollen verrate ich Dir in meinem Artikel Mobile Commerce Patterns: Der Bauplan für Conversion im mobilen Webshop.

Wir freuen uns auf Feedback, Erfahrungen und Prognosen zur Zukunft des mobilen Designs.

  • Send to Kindle
  • http://kKrft.ly/FJj
Dennis Herzberger Als Senior Conversion Architect bei der Web Arts AG hat sich Dennis Herzberger der Usability und User Experience von Webseiten gewidmet. Sein leidenschaftlicher Fokus liegt auf der Konzeption und Optimierung von mobilen Webseiten und Onlineshops. Folgen Sie ihm auf Twitter.

, , ,

44 Reaktionen auf  “3 Säulen für Responsive Webdesign”

Kommentare

  1. Nils Kattau Nils Kattau

    Ein sehr schöner Artikel zu diesem leider viel zu wenig beachteten und umgesetzen Thema. Es sei jedoch gesagt, dass Media Queries nicht CSS3, sondern CSS2 sind 😉 -Nils

  2. Nils Kattau Nils Kattau

    Korrigiere: In CSS3 wurden sie erweitert; in CSS2 eingeführt. Aktuelle Version laut W3C nennt sich CSS3 Media Queries. Mein Fehler 😉

  3. Webstandard-Blog Webstandard-Blog

    @nils: In CSS2 wurden Media Types (screen, handheld,…) eingeführt, aber nicht Media Queries. Diese wurden als Module erst mit CSS3 eingeführt!

    Das hier genannte Argument keine festen Schriftgrößen zu verwenden verstehe ich zwar, aber man kann mit den angesprochenen MediaQueries den jeweiligen Viewportgrößen jeweils individuelle feste Schritftgrößen zuweisen ohne dafür JavaScript nutzen zu müssen.

  4. Oliver Oliver

    Ich konnte gerade den ersten Kunden überzeugen, dass responsive Webdesign genau das Richtige für ihn ist. Viele (kleinere) Kunden sagen, dass Sie das nicht brauchen, da Ihre Kunden Webseiten nicht auf dem Smartphone anschauen.
    Verschenkte Chancen…

  5. Georg S. Kuklick Georg S. Kuklick

    Schöner Einstieg in das Thema. Allerdings ist mir die Betrachtung zu einseitig. Mir fehlt die Unterscheidung in informationsgetriebene und interaktionsgetriebene Systeme. Außerdem wird in dem Artikel noch das Device zu sehr in den Fokus gerückt und die Nutzungssituation kommt zu kurz.

    Beispiel: Diesen Kommentar schreibe ich auf dem iPhone in der Berliner U-Bahn. Es wackelt und das Licht ist nicht so doll. Dabei fällt auf, daß die Textgröße des Eingabefeledes viel zu klein ist. Ich kann meinen Text kaum lesen und Korrekturen werden zum Geduldsspiel. Da ist der User schneller weg als Ihr „Wir haben doch kommentierenswerte Artikel hier“ sagen könnt. 😉

  6. Dennis Herzberger Dennis Herzberger

    @Webstandard-Blog
    Danke für den Hinweis. Das ist natürlich korrekt und es gibt verschiedene Möglichkeiten die Schriftgrößen zu ändern. Je weniger JavaScripte eingesetzt werden, desto weniger muss zusätzlich geladen werden. 🙂

  7. Dennis Herzberger Dennis Herzberger

    Hallo Herr Kuklick,
    Unser Blog arbeitet mit dem WPTouch Plugin. Eine angemessene Schriftgröße ist natürlich unerlässlich. Ich hoffe Sie kommentieren unseren Blog weiterhin 😉
    Eine explizite Betrachtung der Motive und Erwartungen im Bereich Des Responsive Design habe ich nicht vorgenommen. Genauere Betrachtungsweisen der nutzergetriebenen Motive finden Sie jedoch in der dreiteiligen Serie der „Mobile Commerce Patterns“.

    //www.konversionskraft.de/studien/mobile-commerce-patterns-conversion-mobile-teil1.html

    Oder haben Sie eine spezielle Frage?

    Ich behalte das Thema auf jeden Fall im Auge.

  8. Frank Rix Email Marketing Blog Frank Rix Email Marketing Blog

    Schöner Artikel mit nützlichen Tipps! Schade, dass wir im E-Mail-Marketing unser HTML nicht vergleichbar dynamisch ausgeben können.

  9. Axel Axel

    Sehr guter Beitrag! Ich habe hier eine Liste guter Responsive WordPress Themes zusammengestellt: http://www.axeldittmann.de/47-responsive-wordpress-themes/

  10. Dennis Herzberger Dennis Herzberger

    Schöne Liste Axel, Danke. Hast Du für unsere Leser, die das ausprobieren möchten auch kostenlose Varianten parat?

  11. R. Friedrich R. Friedrich

    So sieht man sich wieder… oder besser gesagt liest sich 😉 Schöner Artikel, lese gern mehr davon. Viel Erfolg weiterhin! Gruß Rolf

  12. Frank Hamm Frank Hamm

    Sehr interessanter Artikel, danke. Ich selbst gestehe das ich in der Vergangenheit dem Thema responsives Webdesign keinen ausreichenden Raum in meinen Projekten gegeben habe.

    Meine Kunden sind in der Regel kleine und mittlere Unternehmen, kleine Gewerbetreibende und Handwerker. Nun frage ich mich wie ich meinen Kunden den Sinn und Nutzen von responsivem Webdesign klar machen soll.

    In der Vergangenheit kam bei dem Thema. „Meine Kunden surfen nicht mobil und wenn mit einem Laptop, daher ist dieser ganze mobile Internet-Kram Quatsch.

    Ich selbst sehe das anders und will zukünftig dem Thema Rechnung tragen. Nur wie mache ich das meinen zukünftigen Kunden klar?

  13. Dennis Herzberger Dennis Herzberger

    Hallo Frank,
    mit welcher Technik ein mobiler Internet Auftritt umgesetzt wird ist zunächst zweitrangig. Als wichtiger erachte ich, dass die Kunden sich mit den Möglichkeiten, welche dieses Medium bietet auseinandersetzen. Allem voran kann ich Studien (Mobile Effects 2013) empfehlen, welche seit mehr als 2 Jahren einen wachsenden Mobile-Markt prognostizieren und bestätigen.
    Weiteres Indiz für die Notwenigkeit sind die Analytics Zahlen des Kunden. Wie hoch ist der prozentuale Anteil mobiler Geräte des Gesamt-Traffics?

    Ich hoffe ich konnte Dir helfen.
    Viele Grüße
    Dennis

  14. Harald Mix Harald Mix

    Hallo,

    auch ich bin auf ein neues Onlineshop System mit responsivem Design umgestiegen. Und in Zeiten der „Monitore jeder Grösse und Auflösung“ ist dies ein notwendiger Schritt. Selbst GOOGLE empfiehlt dies. Einfach mal „responsive google“ bei GOOGLE suchen.
    Ich denke, die Zeit der zusätzlichen mobilen Webseiten sind vorbei.

  15. Serge Serge

    Hallo Dennis,

    Sehr toller Blog.

    Ich arbeite grade für einen guten Freund an einer responsive Webseite im WordPress. ( Seite ist zur Zeit offline)

    Dieser Freund ist Restaurantbesitzer und seine aktuelle Seite ist leider auf Flash aufgebaut.
    Zudem auf vielen „Devices“ sieht sie nicht grade benutzerfreundlich aus oder wegen Flash kann mann sie nicht mal auf I-Phone oder I-Pad öffnen.
    Schlechte Kundenberatung eben 🙂

    Als ich ihm den Unterschied von einer sagen wir mal herrkömlischen Webseite und der einer responsive Webseite zeigte war er überwältigt.

    PS: Welches Plugin für Facebook benutz du auf deiner Seite?

    Sorry wegen meinem schlechten Deutsch 🙂

    MfG

    Serge

  16. Dennis Herzberger Dennis Herzberger

    Hallo Serge,

    unser mobile Theme von konversionsKRAFT ist selbst programmiert. Solltest Du aber für WordPress eine schnelle und effiziente Lösung suchen, kann ich dir das kostenfreie Plugin WPtouch empfehlen. Eine weitere Möglichkeit besteht darin, ein bereits responsive fähiges Theme für WordPress zu wählen. Das Facebook Plugin ist das Standard Facepile der Facebook Developer Seite, welches über ein Widget eingebunden wurde.

    Ich hoffe ich konnte Dir helfen und danke für Dein Feedback.
    Beste Grüße
    Dennis

  17. Anja Kraft Anja Kraft

    Vielen Dank für diesen tollen Artikel, ich bin der Meinung, dass Responsive Webdesign schon bald Standard werden wird – auch für Onlineshops natürlich. Die Zahl der unterschiedlichen internetfähigen Geräte wird schließlich stetig größer und meiner Meinung nach führt bald kein Weg mehr an einem anpassungsfähigen Webdesign vorbei.
    Viele Grüße
    Anja

  18. Roland Hentscel Roland Hentscel

    Hallo!

    Ich habe gerade angefangen, mich mit „responsive webdesign“ zu beschäftigen, und ich tu‘ mich noch ziemlich schwer damit.

    Ich verstehe nicht, warum meine Schrift nicht mitskaliert wird,
    wenn ich die Größe des Browserfensters ändere :

    http://rh-balingen.de/Grid-Layout/960-Grid-System.html
    http://rh-balingen.de/Grid-Layout/960.ZIP

    Für Hilfe wäre ich sehr dankbar !

    MfG R. Hentschel, aka ( -: roland :- )

  19. Dennis Herzberger Dennis Herzberger

    Hallo Herr Hentschel,

    mein Kollege Manuel Brückmann hat sich Ihrem Problem gewidmet. Hier sein Lösungsvorschlag:

    Sie nutzen rem (was übrigens eine merkwürdige Einheit ist) für eine relative Schriftgröße, aber die ist relativ zum Dokumentstandard, nicht zur Anzeigegröße des Browserfenster.
    D.h. Sie müssen über CSS Mediaqueries einzelne Abstufungen definieren. Z. B.

    @media screen and (max-width: 640px){
    h1, .px26 {
    font-size: 1.2rem;
    }
    }

    Ich hoffe das hilft Ihnen weiter und und wünsche viel Erfolg

  20. Gebäudereinigung in Berlin: Immo-Clean Gebäudereinigung in Berlin: Immo-Clean

    Wir haben in der Vergangenheit öfters von diesem responsive Design gehört. Heute habe ich das gegoogelt und kam auf diese Webseite. Super informativer Bericht, das ständige reinzommen mit zwei Fingern ist wirklich nervig. Ich denke, dass auch wir von der Gebäudereinigung in Berlin: Immo-Clean davon profitieren können, wenn ein Kunde mal schnell jemanden für die Bodenreinigung etc. mit seinem Tablet oder Smartphone sucht. Macht ist heute manchmal sehr faul, wenn es um technische Weiterentwicklungen geht. Aber danke nochmal für den tollen Artikel.

  21. Mika Mika

    Hi Dennis,

    heutzutage kommt man um Responsive Design nicht mehr rum wenn man eine erfolgreiche Website oder Shop führen möchte. Ein richtig guter Artikel.

    Gruß Mika

  22. Cyntia Cyntia

    Diese Seite hier sieht gut aus im Smartphone und ist dort gut lesbar.
    Auf grösseren Endmedien finde ich die Schrift zu gross und zu
    breit. Das liest sich schlechter als ein schmales Layout.

    In Smartphones kann die Schrift vergrössert werden, falls sie
    zu klein scheint. Je nach Kunde, resp. Zielgruppe des Kunden, wird es sinnvoller sein, die Seiten auf grösseren Endmedien so angenehm und kundenfreundlich zu erstellen wie nur möglich.

    Gute Infos können zudem ausgedruckt werden. Was auch in Zukunft
    gemacht wird.

    Ich habe das Gefühl, dass der Boom jetzt in die Richtung geht,
    alles in einem Smartphone bestmöglichst darzustellen und die anderen
    Grössen zu vernachlässigen.

    Gute Geschäfte werden sich nie über das kleinste Endmedium abwickeln lassen und relevante Infos nicht darüber lesen.

  23. Silvester Silvester

    Hallo

    Ich bedanke mich für diesen interessanten Beitrag.

    Beste Grüsse aus Thun
    Silvester

  24. OMU2014 OMU2014

    Vielen Dank für diesen tollen Beitrag. Macht weiter so!

  25. Robert Robert

    Zum Thema gibt es ein interessantes Interview mit Patrick Lobacher: http://goo.gl/36pDrB

    Beste Grüße aus Stuttgart

  26. Inge Inge

    Ich finde den Artikel richtig gut. Habe mich auch schon informiert, dass man mehrere Bilder hinterlegen sollte, die dann je nach Geräte aufgerufen werden. Welche px-Größe sollte ich dann vorsehen für z.B. 1024×738 (980×680) bei PCs und für Smartphone bzw. Taplet? Danke für die Rückantwort.

  27. Dennis Herzberger Dennis Herzberger

    Hallo Inge,

    danke für Deine Rückmeldung. Inzwischen hat sich in der Bildverarbeitung für responsive Seiten einiges getan. Seit 2014 gibt es das -Element, welches erlaubt mehrere Bilder für unterschiedliche Größen einfach zu deklarieren. Am einfachsten ist es, sich auch die minimale Breite der Geräte zu beschränken, mit der die Nutzer Deine Seite besuchen. So können Smartphones ab 320px Breite beginnen, die nächst höhere Instanz können 640px Breite sein und danach folgen Tablets mit 1024px Breite.

    Hier zwei Links, die das ganze ausführlich beschreiben:
    http://pmueller.de/blog/responsive-bilder-ein-ueberblick.html
    https://html.spec.whatwg.org/multipage/embedded-content.html#the-picture-element

    Ich hoffe, ich konnte Dir helfen
    Viele Grüße
    Dennis

  28. Carra85 Carra85

    Danke für die hilfreichen Beitrag zum responsive Webdesign.
    Hab jetzt auch schon mehrmals gelesen, dass das responsive Design auch starke Auswirkungen auf das Ranking in Suchmaschinen hat. Werde meine Webseite demnächst mal anpassen lassen von einer Webagentur.
    LG

  29. Michel Michel

    Prinizpiell ja eine gute Sache, aber warum zum Teufel lande ich bei diesem Artikel, will in einen Teil davon (auf einem iPad) reinzoomen, und kann das nicht, weil die Darstellung fix ist und den Zweifinger-Zoom nicht erlaubt. Seiten mit dieser Art von Gängelei meide ich, wenn möglich.

  30. Dennis Herzberger Dennis Herzberger

    Hallo Michel,

    wir haben den Zoom testweise aktiviert. Ich hoffe damit konnten wir Dir den Spass am Lesen erhalten. An welchen Stellen hat es Dich denn genau gestört, keine Möglichkeit zum Panchen/Zoomen zu haben?

    Grüße
    Dennis

Trackbacks/Pingbacks

  1. […] Die 3 Säulen des Responsive Webdesign […]

  2. […] der Blog-Autoren. Wie 3D-Planer die Conversion pushen könnenStaples optimiert US-Shop für das iPadDie 3 Säulen des Responsive WebdesignConversionsoptimierung und ROI – E-Commerce Trend 2012Thoughts on Personas & Personality […]

  3. […] HTML 5 und Responsive Design. Wie bitte? Responsive?!? Jap, Mobile-Ready sozusagen. Einfach mal das Browserfenster […]

  4. […] Die 3 Säulen des Responsive Webdesign | Conversion Optimierung, Landingpage Optimierung – Kon… […]

  5. […] täglich weltweit aus dem Boden und bereichern das Internet. Die Möglichkeiten wachsen und so verändert sich auch das Webdesign an sich, immer mehr und entwickelt sich weiter. Viele User sind daran interessiert, selbst eine […]

  6. […] Bildschirm optimiert sein. So kann die Schriftgröße, als auch die Textweite bspw. durch responsive Webdesign angepasst werden. Auch das Prinzip Skim, Scan, Read sollte mobil nicht verloren […]

  7. […] Die 3 Säulen des Responsive Webdesign – konversionskraft.de […]

  8. […] //www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html […]

  9. […] Die 3 Säulen des Responsive Webdesign | Conversion Optimierung, Landingpage Optimierung – Kon…. […]

  10. […] gibt verschiedene Ansatzpunkte, die umstritten diskutiert werden. Soll nun eine mobile Webseite mit responsive Webdesign erstellt werden, erfordert dies auch eine neue Konzeption der Webseite. Auch das verwendete CMS […]

  11. […] drei Säulen des responsive Webdesign //www.konversionskraft.de/trends/die-3-saeulen-des-responsive-webdesign.html Der Artikek beantwortet die Fragen, was responsive Websites so interessant macht und wie sie […]

Hinterlassen Sie einen Kommentar