Trends

3 Säulen für Responsive Webdesign

Dennis Herzberger
 Lesezeit: 10 Minuten    
34
arrow_down
34

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

Responsive Webdesign 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.

In unserem Growth Ambassador Programm finden regelmäßige Meetups mit Expert:innen aus dem Behavioral Sciences Bereich statt, die sich unter anderem über die Nutzungsmotive der Kunden austauschen. Du kannst dich für das kostenlose Programm bewerben, um die Nutzungsmotive deiner Kunden zukünftig besser zu verstehen und inhaltlich passenden Content zu bieten.

Responsive Webdesign - colly.com

Responsive Webdesign 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

Responsive Webdesign 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.

Über die Autorin

Dennis Herzberger

Senior Growth Consultant

Dennis Herzberger ist Senior Growth Consultant bei konversionsKRAFT – Deutschlands führende Agentur für Conversion Optimierung.

Während des Studiums der Medieninformatik entdeckte Dennis Herzberger seine Leidenschaft für Konsumpsychologie und zu erforschen, wie Nutzer auf Webseiten agieren. Seither hat er sich der Untersuchung von Verhaltensmustern und User Experience verschrieben. Sein leidenschaftlicher Fokus liegt auf der Anwendung von Konsumpsychologie und Behavior Patterns. Sein Wissen vermittelt er in Workshops und Lehrgängen. Außerdem ist er Ansprechpartner für die Growth Ambassador Community.

Zudem ist Dennis Herzberger als Speaker und Interviewpartner für Magazine und Konferenzen gefragt.

Frage zum Artikel? Frag die Autorin!

Welche Frage hast du an die Autorin?

18 [contact-form-7 id="53320" title="Autorkontakt"]

34 Kommentare

  1. Gravatar

    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. Gravatar

    Nils Kattau,

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

  3. Gravatar

    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.

    • Gravatar

      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. 🙂

  4. Gravatar

    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. Gravatar

    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. 😉

    • Gravatar

      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”.

      //b2zo0i6c.myraidbox.de/studien/mobile-commerce-patterns-conversion-mobile-teil1.html

      Oder haben Sie eine spezielle Frage?

      Ich behalte das Thema auf jeden Fall im Auge.

  6. Gravatar

    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.

  7. Gravatar

    Axel,

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

    • Gravatar

      Dennis Herzberger,

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

  8. Gravatar

    R. Friedrich,

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

  9. Gravatar

    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?

    • Gravatar

      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 Studienempfehlen, 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

  10. Gravatar

    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.

  11. Gravatar

    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

    • Gravatar

      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

  12. Gravatar

    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

  13. Gravatar

    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 :- )

    • Gravatar

      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

  14. Gravatar

    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.

  15. Gravatar

    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

  16. Gravatar

    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.

  17. Gravatar

    Silvester,

    Hallo

    Ich bedanke mich für diesen interessanten Beitrag.

    Beste Grüsse aus Thun
    Silvester

  18. Gravatar

    OMU2014,

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

  19. Gravatar

    Robert,

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

    Beste Grüße aus Stuttgart

  20. Gravatar

    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.

    • Gravatar

      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

  21. Gravatar

    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

  22. Gravatar

    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.

    • Gravatar

      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

  23. Gravatar

    Webdesign Karlsruhe,

    Toller Artikel, kann dir zu jedem Punkt zustimmen. Wichtig ist, dass man die Seiten sowohl Mobil und auch auf dem Tablet testet. So wie du es sagtest, Touch ist nicht gleich hover, sind manche Punkte erst garnicht anklickbar.

    Noch zu erwähnen ist, dass man die Bilder passend komprimieren und schneiden sollte, da mobile Endgeräte über eine begrenztes Datenvolument und Geschwindigkeit verfügen. Die Netzwerkanalyse von Firefox ist hier ganz interessant.

  24. Gravatar

    Sascha Thattil,

    Spannend geschrieben.

    Der Responsive Design Ansatz ist definitiv einer der derzeit besten Wege, eine Website auf allen Endgeräten verfügbar zu machen. Eine separate Umsetzung für Native Betriebssysteme wie Android und iOS ist oftmals zu aufwendig und Nutzer laden diese nicht unbedingt heruter, wenn es sich “lediglich” um Marken handelt.

    Eure Aufführung, auch zum technischen Teil, ist sehr interessant. Danke.

    Viele Grüsse
    Sascha Thattil

  25. Gravatar

    Dennis Herzberger,

    Hallo Sascha,

    danke für dein Feedback. Das aufwändigste aus meiner Sicht ist der Spagat zwischen einer Responsive Webseite und der Desktop Seite. Auch wenn responsive als Technik genutzt wird, sind die Erwartungen eines Nutzers auf dem Smartphone, egal ob iOS oder Android, anders als am Tablet oder Desktop. Darum finde ich es wichtig, dass auf die speziellen Bedürfnisse eingegangen wird.

    Wie sieht ihr das?

    Grüße
    Dennis

  26. Gravatar

    CBD Cannafleur,

    Einige Beiträge sind wohl schon ein wenig älter aber immer noch interessant wenn es um responsesive Webdesigns geht. Ich arbeite mit meinen Seite gerne mit Bootstrap das deckt so manches Problem ab und ist ein schnelles Werkzeug.

Schreibe einen Kommentar

Teile diesen Artikel

Kostenlos anmelden