Kommentare 21

Ein paar Notizen zur Entwicklung von responsive Webdesigns

Da ich hier auf dem Blog schon eine Weile nicht mehr über die Entwicklung von responsive Webdesigns und responsive WordPress-Themes berichtet habe, möchte ich in diesem Artikel ein paar hilfreiche Erkenntnisse und Tipps teilen, die meiner Ansicht nach bei der Entwicklung von responsive Webdesigns besonders wichtig sind.

1. Browser- und Geräte-Kompatibilität

Natürlich will und sollte man Usern auch auf mobilen Geräten ein möglichst modernes und fortschrittliches Erlebnis beim Besuch der eigenen Webseite bieten. Die nativen Apps setzen deutliche Trends und zeigen, was alles möglich ist. Da wollen natürlich auch Web-Apps und mobil-optimierte Webseiten mithalten und ähnlich optimierte Erlebnisse bieten. Beim Einsatz von Effekten oder CSS-Animationen ist es allerdings immer wichtig darauf zu achten, wie verbreitet die Features in den gängigen mobilen Browsern wirklich schon sind. Eine praktische Auflistung bietet hierzu die Webseite Mobile HTML5.

Mobile HTML5 Feature Vergleich

Auf Mobile HTML5 gibt es einen übersichtlichen Feature-Vergleich für mobile Geräte.

Die Browser- und Geräte-Unterstützung von Features wie der Verwendung von SVG Vektor-Grafiken oder CSS Transitions werden in einer übersichtlichen Tabelle angezeigt.

2. Live testen

Die Funktion von Effekten und dem responsive Verhalten des eigenen Designs sollte man auf jeden Fall so früh wie möglich und auf so vielen Geräten wie möglich live testen. Ein guter Tipp ist es, sich eine Test-Installation anzulegen und gleich das erste grobe Layout live im Browser und auf mobilen Geräten zu testen. Am besten funktioniert dies natürlich, wenn Designer und Entwickler so eng wie möglich zusammen arbeiten können. Effekte die auf mobilen Browsern einfach nicht kompatibel funktionieren, können so viel leichter vermieden werden.

3. Gestaltung für Touch-Screens

Auch bei responsive Webdesigns sieht man meiner Ansicht nach noch sehr oft, dass Links, Buttons oder Formulare nicht wirklich für Touch-Screens optimiert wurden. Abstände, besonders bei Text-Links oder Listen sind viel zu eng, so dass man mit dem Finger (vor allem, wenn man nicht die zartesten Finger hat) nur schwer den richtigen Link treffen kann.

4. Schriftgrößen auf mobilen Geräten

Das Leseverhalten auf mobilen Geräten ist in den meisten Fällen ein anderes, als beim konzentrierten Arbeiten am Desktop-Computer. Vielleicht sitzt man gerade im Café, steht in der Schlange beim Fahrkartenverkauf am Bahnhof an oder liegt entspannt auf der Couch. Auf jeden Fall werden mobile Geräte eher zwischendurch genutzt und oft, wenn der Nutzer nicht hundertprozentig konzentriert bei der Sache ist. Auch die Distanz zwischen Augen und Gerät ist nicht so genau festgelegt. Daher sollte bei der Webseiten-Optimierung für mobile Geräte ganz besonders auf eine angenehm lesbare Schriftgröße geachtet werden.

Lesbarkeit auf dem iPad

Der Vergleich zwischen sehr großzügiger und sehr kleiner Schriftgröße auf dem iPad.

Allgemein kann die Schrift auf mobilen Geräten, vor allem auf Tablets (auf denen mehr Platz zur Verfügung steht, als auf Smartphones) ruhig etwas größer sein. So können auch längere Texte noch gut gelesen werden, ohne das die Augen zu sehr angestrengt werden. Auch eine angenehme, gut lesbare Schriftfarbe in Abstimmung mit dem Hintergrund ist dabei wichtig.

5. Optimierung für Retina-Displays

Retina (HiDPI) Displays werden immer verbreiteter. Entsprechend setzt sich immer mehr durch, Bilder in der benötigten doppelten Größe vorzubereiten. Besonders bei kleinen, detaillierten Icons wie Social Media Icons fällt die unscharfe Darstellung auf Retina-Displays besonders auf. Um Retina-Displays anzusprechen, kann man im Stylesheet die folgenden Media Queries einsetzen:

@media only screen and (-moz-min-device-pixel-ratio: 1.5), only screen and (-o-min-device-pixel-ratio: 3/2), only screen and (-webkit-min-device-pixel-ratio: 1.5), only screen and (min-device-pixel-ratio: 1.5) {
...
}

Alle im Design genutzten Bilder sollten dann in doppelter Größe z.B. in einem extra Bilder-Ordner “x2″ vorbereitet werden. Wenn möglich sollte man aber auf jeden Fall auf Bilder im Design verzichten und stattdessen CSS-Effekte oder Fonts einsetzen, die sich entsprechend skalieren können ohne dabei verpixelt angezeigt zu werden.

6. Überlegungen zum iPad Mini

In den letzten Tagen bin ich auch endlich dazu gekommen, mir das neue iPad Mini live anzuschauen. Wow, das Gerät ist wirklich sehr schön leicht. Allerdings ist mir auch gleich aufgefallen, dass alle Elemente und Schriftgrößen sehr klein dargestellt werden. Genau gesagt ist die Bildschirmauflösung exakt die des iPads 1 und 2 nur wird alles um 19% verkleinert angezeigt. Das 14 oder 12px Schriftgrößen dann (ohne Zoomen) nur noch sehr schwer bis gar nicht mehr lesbar sind, ist auf jeden Fall ein neuer Aspekt, den man bei der Optimierung von responsive Designs für die Tablet-Bildschirmformat 768x1024px beachten sollte. Auch bei den Button-Größen und Text-Links (z.B. in Listen) sollte man also genug Platz einräumen und die Tablet-Ansicht großzügig umsetzen. Speziell über Media Queries im CSS ansprechen kann man das iPad Mini übrigens nicht, da es ja genau das gleiche Maß wie iPads 1 und 2 hat.

7. Keine abgespeckte Version der Inhalte

Insgesamt denke ich ist es wichtig, bei der Gestaltung von responsive Webdesigns die Webseiten-Inhalte immer vorrangig zu behandeln. Denn natürlich wird man auf keinen Bildschirmen immer im Platz eingeschränkt sein. Dennoch sollten Nutzer auf mobilen Geräten keine abgespeckte oder reduzierte Version der Inhalte angeboten bekommen. Alle wichtigen und relevanten Informationen und Funktionen der Webseite sollten auch auf mobilen Geräten zugreifbar sein.

Vielleicht kann man ja Webdesign für mobile Geräte ein wenig mit Innenarchitektur vergleichen, um diesen Aspekt noch etwas deutlicher zu machen. Der 27 Zoll Desktop-Bildschirm wäre dabei dann wohl das große Haus mit vielen Zimmern und jeder Menge Platz. Ein Smartphone im Vergleich ein Studio-Apartment mit der kompletten Wohnfläche in einem kleinen Raum. Doch wenn ein Studio-Apartment geschickt und clever eingerichtet ist, muss man auch auf kleinem Raum auf nichts verzichten. Die Herausforderung liegt also beim Designer (bzw. Architekten), auch für kleine Bildschirme (bzw. kleine Räume) praktische und effiziente Lösungen zu finden.

8. Neues ausprobieren und Erfahrungen teilen

Da für die Entwicklung von responsive Webdesigns ständig neue Techniken, Scripts und Plugins entwickelt werden ist es meiner Ansicht nach besonders wichtig, das eigene Wissen zu teilen und sich miteinander auszutauschen. So können wir insgesamt bessere Lösungen finden und die Entwicklung von responsive Webdesigns und responsive WordPress-Themes weiter optimieren.

Dein Feedback und weitere Tipps

Welche Erfahrungen hast du bei der Nutzung oder der Entwicklung von responsive Webdesigns und responsive WordPress-Themes gemacht? Wo siehst du noch Probleme und Optimierungsbedarf und welche hilfreichen Tipps kannst du weitergeben? Über deinen Kommentar freue ich mich sehr!

21 Kommentare

  1. Responsive Webdesign ist für mich noch ein rechte neues Gebiet und ich lerne da auch grade erst das Laufen. Zur Zeit lese ich noch recht viel darüber und werde wohl erst in den nächsten Wochen dazu kommen, mal das eine oder andere auszuprobieren. Von daher finde ich deinen Blog sehr hilfreich.
    Vielleicht kann ich ja in Bälde auch etwas von meinen Erfahrungen preisgeben und dadurch bereichern.

  2. Rob

    Nun bin ich auch noch ausgerechnet Architekt und fühle mich zu o.a. Beispiel der Innenarchitektur angesprochen, auch etwas zu den Überlegungen zum iPad Mini zu sagen:
    Wenn man in eine kleine Wohnung um ein Fünftel geschrumpfte Möbel hineinstellt, dann ist das nicht “geschickt und clever eingerichtet”, sondern einfach nur der dämliche Versuch, aus einer kleinen Fläche mehr rauszuholen.
    Ob es jetzt tatsächlich sinnvoll ist, das Design hinsichtlich der auch von anderen Tablets verwendeten Auflösung von 768 x 1024 Pixeln für das iPad Mini zu ändern, möchte ich mal dahingestellt sein lassen.

    • @Rob: Vielen Dank für dein Feedback, ja, du das stimmt, ich habe das iPad Mini selbst noch nicht länger getestet oder Artikel etc. darauf gelesen. Im ersten Moment bin ich auch ehrlich gesagt auch noch nicht 100% überzeugt von den 19% verkleinerten Inhalten, vor allem da ich die “normale” iPad-Größe richtig klasse und angenehm finde. Ich glaube das iPad Mini ist einfach für einen etwas anderen Gebrauch gut, die Leichtigkeit ist zumindest schon ein sehr großes Plus…

      Das mit dem Platz-Mangel hatte ich übrigens so gemeint, dass gerade auf Smartphones von Designern und Entwicklern neue, clevere Lösungen gefunden werden müssen, wie z.B. der Off-Canvas Ansatz. Viele Grüße, Ellen

  3. Ich erstelle mittlerweile nur noch responsive Themes und meine Kundenprojekte sind zu etwa 90% auch responsive. Ich teste meist mit dem Viewport Resizer (http://lab.maltewassermann.com/viewport-resizer/) und dem Opera Mobile Emulator (http://de.opera.com/developer/tools/mobile/). Und natürlich “in echt” auf meinem iPhone und iPad.

    Aber die Simulationen sind natürlich keine echten Tests auf echten Geräten. Nun kann ich mir aber schlecht 10 verschiedene Smartphones und 5 Tablets anschaffen. Das ist leider so ein Knackpunkt. Wie macht Ihr das?

    • @Michael Oeser: Klasse, vielen Dank für deine Tipps zum Testen von responsive Layouts den Viewport Resizer kannte ich bisher nicht, ich habe bisher meist Google Chrome Erweiterungen oder Screenfly für das Testen der Responsiveness genutzt. Das Tool sieht aber spannend aus, werde es auf jeden Fall ausprobieren :)

      Das man nicht unzählige Geräte zu Hause haben kann ist ja klar. Genial ist es natürlich, wenn man in der Nähe eines Testing-Labs oder “Open Device Lab” wohnt. Davon gibt es immer mehr, in Berlin kann man glaube ich bei co.up (co-up.de/open-device-lab.html) anfragen.

      Ansonsten spicke ich immer gerne in diversen Handy-Shops/Elektronikgeschäften rein und teste, wenn ich z.B. in der Stadt unterwegs bin, die Test-Versionen unserer Themes hier und dort auf möglichst vielen Geräten. Auch Freunde und Bekannte kann man bitten, die eigene Arbeit einmal live zu testen und Screenshots oder Fotos zu senden. Viele Grüße, Ellen

  4. Harald

    Ich habe erst heute eure Seite entdeckt und surfe von Thema zu Thema. Selten habe ich erlebt, dass Sachverhalte so klar, deutlich und einfach erklärt werden. Ganz große Klasse.
    Aber ich habe auch selten so gelacht wie heute morgen als ich den Satz: “Vielleicht sitzt man gerade im Kaffee …” gelesen habe. Ich habe mir das bildlich vorgestellt.
    Ich gehe nachher los und setze mich ins Café …

    You made my day

    • @Harald: Wow, vielen Dank, das ist ein wirklich tolles Feedback! Hehe, habe den Kaffee-Café Verdreher gerade doch korrigiert, obwohl ich es auch sehr lustig fand, vor allem bildlich vorgestellt. Das würde dann wohl ungefähr so aussehen: Kubi im Café ;) Viele Grüße, Ellen

  5. nik

    Zum iPad Mini bin ich geneigt zu sagen: „Na und?“ Wer sich freiwillig in die Abhängigkeit eines solchen beschnittenen Gerätes oder Clients begibt, muss halt auch mit den Folgen leben. Mit der gleichen Argumentation wird heute nämlich auch der IE6 zunehmend nicht mehr beachtet, obwohl es immer noch eine signifikante Nutzerbasis gibt. Ich sehe da thematisch jetzt keinen Unterschied. Wenn Apple meint, dermaßen querschießen zu müssen, hat der Nutzer halt ein Problem.

  6. Basti13503

    Hallo,
    ich möchte auch meine Erfahrungen bzw. Anmerkung teilen.
    HiDPI-Devices sind natürlich für RWD schon ziemlich problematisch, da es schwer ist einerseits Bilder (Fotos) in der richtigen Auflösung zu liefern, andererseits die Ladezeiten gering zu halten. Hier wird aber an Lösungen gearbeitet, hoffentlich kommen sie. Für Icons sind SVGs mit Fallback und Iconfonts natürlich super und die Devices mit hohen Auflösungen haben meist auch Browser, die damit umgehen können.
    IPad Mini, auch ich sehe das so wie mein Vorschreiber. Man kann sich nicht von einer Firma diktieren lassen, wie man Websites erstellen soll. Ausserdem denke ich, dass man nicht für Devices optimieren sollte, sonder dann reagiert, wenn das Layout bricht.
    Ich finde den mobile first + progressive enhancement Ansatz am besten, also zuerst fürs Smartphone erstellen, und dann immer eine Stufe höher gehen. Das ist vor allem aus Performance-Gründen sinnvoll.
    Das auf allen Geräten mit allen Browsern usw. eine Website immer gleich (gut) aussehen soll, ist sowieso utopisch, aber trotzdem sollte man auch den Usern mit alten Browsern etc immer einer ordentliche Website ausgeben können, die allerdings nicht so gut sein muss vor allem sollte wie auf aktuellen Browsern.
    Gestaltung für Touchscreens wird tatsächlich oft vernachlässigt, da gab es mal eine Empfehlung (ich glaube von Microsoft) dass alles klickbare mindestens 45px hoch und breit sein soll. Meiner Erfahrung passt das gut.
    Generell sollte bei RWD die Ladezeit mit im Vordergrund stehen, d.h. auch zum Beispiel auf unnötige Jquery-Spielereien zu verzichten (zumindest auf Mobilgeräten).
    Ich habe auch festgestellt, das RWD einen anderen Workflow benötigt, und Kunden in diese Richtung erst “erzogen” werden müssen. Es erfordert eine sehr viel längere Planung und Testaufwand als wenn man einfach mal schnell eine “normale” pixelbasierte Monitorwebsite macht.
    Ich finde es schön auch mal einen deutschen Blog zu haben der sich so damit beschäftigt, darüber würde ich gerne mehr Diskussionen haben.

    Viele Grüße

  7. Pingback: #iPhoneography #Kopenhagen #Theme #Demo | PadLive - Kopfkino zum iPad und iPhone

  8. Hallo Ellen, mit deinem Artikel hast du mir jede Menge Recherche gespart. Ich nutze zum Testen des Responsive Designs ein kostenloses Tool namens Mobilizer (http://www.springbox.com/mobilizer). Das ist zwar nicht so umfangreich wie Screenfly, aber man bekommt eine sehr gute Vorstellung, wie es auf einem iPhone 4 oder Blackberry aussieht – Live! Vielleicht ist es für den ein oder anderen ein hilfreiches Tool. Viele Grüße, Marc

  9. Oli

    Ich bin Webmaster einer Hochschule in der Schweiz. Vor kurzem standen wir auch vor der Entscheidung, sollen wir die eigen Webseite umbauen mittels responsive Webdesign, oder bauen wir eine Mobile Webseite?
    Schlussendlich haben wir uns für die Mobilewebseite entschieden. Gründe dafür waren z.B. zuviel Inhalt auf der herkömmlichen Webseite, als Konsequenz müsste mann dann sehr weit nach unten scrollen, oder aber auch Bilddateien, welche in responsive Design jeweils sehr grosse Dateien sind, ausser man arbeitet mit Javascripts welche die richtigen Bilder für die entsprechende Auflösung laden. Das macht dann aber die Webseite wieder langsamer und funktioniert nicht auf allen Geräten sauber.
    Ich kann also sagen, responsive ist eine sehr gute Sache, allerdings für grössere Unternehmen mit sehr viel Inhalt eher unbrauchbar. Oder wie sehr ihr das?
    Gruss aus der Schweiz
    Oli

  10. Was ist deiner Meinung nach, insbesondere im Hinblick auf das iPad Mini, am sinnigsten? Sollte man alle Schriftgrößen kleiner als 16 (zumindest in Artikeln) ausschließen? Also grundsätzlich min. Schriftgröße 16 benutzen?

  11. Pingback: Links der Woche | Der Kamener

  12. Pingback: Today’s Readings | Aaron T. Grogg

  13. Steffen

    Hallo,

    Ihr habt wirkich wundervolle Artikel! Ich möchte mich mit der Thematik nun auch mehr auseinandersetzen und hätte zwei Fragen.

    1. Für Font-Size habe ich schon immer EM genutzt. Damals als der IE6 noch mehr genutzt wurde und das Thema Barriefreieheit habe ich Div-Größen in EM und nicht in Pixel angelegt. Nachdem auch der IE7 das Skalieren ganzer Webseite unterstützt bin ich wieder auf Pixel umgestiegen. Was ist denn nun sinnvoll? Prozentangaben, EM-Angebaben oder kann ich weiterhin Pixel verwenden, wenn ich dort mit min-width und max-width arbeite? Oder sollte man generell auf PX verzichten? Das macht es dann aber wieder ganz schwer wenn man mit den empfohlenen Sprite.png arbeitet. Hier erstelle ich ein Div, gebe diesen eine Weite und Höhe und weise ja im CSS die Background-Position zu! Skalierbar sind diese Sprites dann nicht (also es gibt ja Möglichkeiten Hintergrundgrafiken zu sklaieren, aber das klappt nicht in der Praxis, wenn diese Hintergrundgrafik mehre Bereiche hat die man mit Background-Position zuweiset).

    2. Wie sind eure Erfahrungen, bzgl dem zeitlichen Mehraufwand gegenüber eine Webseite die nicht responsive programmiert und gestaltet wird?!

    Vielen Dank

    MfG Steffen

    2.

  14. Vielen Dank für diese tollen Tipps.

    Wir haben in unserer Agentur selber gerade ein grösseres Projekt umgesetzt und es ist trotz allen Parallelen zu fixen Design doch eine neue Herausforderung.
    Beiträge wie dieser helfen Webentwicklern wie mir beim Erstellen von unseren Seiten sehr.

    Vielleicht kennen Sie schon folgene Seite, die sehr nützlich sein kann:
    responsivedesign.is

    freundliche Grüsse
    Raphael

Schreibe eine Antwort