Responsive Webdesign

[:: RK ::]

Responsive Webdesign ist ein Begriff, über den ich in letzter Zeit immer
öfters stolpere. Was das genau ist und was man damit alles machen kann würd
ich hier gern mit euch diskutieren

Soweit ich das verstanden habe, geht es darum, die Ausgabe einer Webseite für
das jeweilige Ausgabegerät zu optimieren. Unterscheiden kann man das grob
nach Desktop und Laptops (bis mind. 13 Zoll), Tablets und Netbooks (10 bis 12
Zoll) und dann alles was drunter kommt (hauptsächlich Smartphones).

Eine umfangreiche Webseite mag auf nem Desktop-Monitor übersichtlich und
gut bedienbar sein, jedoch funktioniert das Konzept auf kleineren Displays
wohlmöglich nicht mehr. Man muss die Webseite nicht nur vertikal, sondern
auch horizontal scrollen um an die gewünschten Infos zu kommen.
Die Übersicht geht verloren, der Frust dagegen steigt.

Bisher hat bei solchen Fällen immer ein extra eingerichtete mobile Version
herhalten müssen, welche jedoch in Umfang und Funktion stark abgespeckt
ist. Das ist weder für den Besucher noch für den Betreiber eine gute Lösung.
Der Betreiber muss zwei Versionen der gleichen Webseite pflegen und der
Besucher muss mit Einschränkungen leben.

Eine neue Herangehensweise bietet nun Responsive Webdesign. Es gibt im
Prinzip nur eine Version der Webseite. Diese wird jedoch so aufgebaut, dass
sie auf die Größe des des Ausgabegeräts (bzw. an die Größe des Browserfensters)
reagieren kann.

Sagen wir, wir haben eine Webseite mit einer festen Breite von 960px erstellt.
Die Navigation ist horizontal im Header und geht über die gesamte Breite der
Webseite. Die heutigen Monitorauflösungen können eine solche Webseite
problemlos darstellen, es bleibt links und rechts sogar noch Platz für tolle
Hintergrundgrafiken. Was ist jedoch wenn jemand mit seinem Smartphone
diese Seite aufruft? Das aktuelle iPhone 4S z.B. hat mit dem Retina Display
eine Auflösung 960 x 640px, Vorgängermodelle noch weniger. Um die Webseite
bedienen zu können muss also reingezoomt und in alle Richtungen gescrollt
werden.

Viel besser wäre hier eine angepasste Ausgabe der Navigation, in der alle
Punkte vertikal und nicht horizontal angeordnet sind. Man muss nur noch
vertikal scrollen. Reimzoomen und suchen ist damit Geschichte, denn die
Schriftgröße kann somit ebenfalls auf einen gut lesbaren Wert gesetzt werden.

Analog zum Smartphone kann z.B. eine optimierte Ausgabe für Tablets und
Netbooks generiert werden. Das Beispiel mit der Navigation lässt sich natürlich
auf alle weiteren Elemente einer Webseite übertragen (Tabellen, mehrspaltige
Layouts, Bilder, etc).

Folgende Seite soll dies mit Beispielen verdeutlichen:

mediaqueri.es - a collection of sites using media queries

Nun zur Diskussion:

• Was haltet ihr davon?
• Wer hat das schon produktiv eingesetzt?
• Welche Konzepte, Techniken sind hierzu notwendig? Dreh- und Angelpunkt scheinen wohl die seit HTML5/CSS3 erweiterten Media Querie Optionen zu sein. Gibt es noch weitere Voraussetzungen?
• Inwieweit muss man als Webentwickler umdenken?
• Gibt es fertige Frameworks? Mit ist lediglich Foundation bekannt.

Freu mich auf eure Antworten

[Dharokan]

Moin RK,

ich hab meine letzten Projekte bereits so umgesetzt, weil es oftmals leichter ist, als ein funktionierendes "fluides" Layout zu entwickeln.

Media Queries habe ich nicht verwendet, da alles auch in uralten Browsern laufen sollte
Stattdessen habe ich das pfiffige head.js verwendet. Damit kann man per CSS ganz leicht auf vorher definierte Fenstergrößen reagieren. Nachteil: Das funzt nur mit Javascript, aber dafür eben auch noch im IE6.

Mein aktuelles Projekt setzt nun aber auf HTML5 und Media Queries (mit Boilerplate). Media Queries laden ganz einfach immer nur das zur aktuellen Fenstergröße passende CSS, that's all.

Im Endeffekt ist's alles eine Frage von CSS. Und Deine Javascripte solltest Du ggf. auch an die entsprechenden Größen anpassen.
Die wahre Kunst fängt imho übrigens da an, wo man auch versucht, das Handling an Touchscreens zu optimieren. Größere Klick-Flächen, kein Verlassen auf MouseOver etc...

Viele Grüße,
Dharo

[marc]

Hio,

ein gutes Buch dazu ist das von Ethan Marcotte bei A Book Apart. Dort wird sehr schön erläutert, worum es hier genau geht.

Außerdem ergänzend sehr gut zu lesen: Adaptive Web Design von Aaron Gustafson

[Ouroborus23]

Zitat von marc

ein gutes Buch dazu ist das von Ethan Marcotte bei A Book Apart. Dort wird sehr schön erläutert, worum es hier genau geht.

Auch die anderen Bücher dieser Reihe sind sehr empfehlenswert. "Responsive Webdesign" ist super gut geschrieben und leicht verständlich - das sollte eigentlich jeder Flasher mal gelesen haben, da die Grundprinzipien jeder im Kopf haben sollte.

Rensponsives Design sollte meiner Meinung nach schleunigst State of the Art werden. Und es ist schließlich kein Hexenwerk

[marc]

Zitat von Ouroborus23

Auch die anderen Bücher dieser Reihe sind sehr empfehlenswert. "Responsive Webdesign" ist super gut geschrieben und leicht verständlich - das sollte eigentlich jeder Flasher mal gelesen haben, da die Grundprinzipien jeder im Kopf haben sollte.

Rensponsives Design sollte meiner Meinung nach schleunigst State of the Art werden. Und es ist schließlich kein Hexenwerk

Stimme ich dir zu. Leider ist durch den teuren Versand aus den Staaten die Buchreihe nicht so super günstig. Aber ich finde toll, dass die Bücher sich auf das wesentliche beschränken. Hier gilt nicht Masse = Content, sondern in der Tat Klasse = Content. Auf der beyond tellerrand Verlose ich im übrigen 10 von den Büchern – auch das von Ethan.

[:: RK ::]

Zitat von Dharokan

Media Queries habe ich nicht verwendet, da alles auch in uralten Browsern laufen sollte
Stattdessen habe ich das pfiffige head.js verwendet. Damit kann man per CSS ganz leicht auf vorher definierte Fenstergrößen reagieren. Nachteil: Das funzt nur mit Javascript, aber dafür eben auch noch im IE6.

Moin moin,

das verstehe ich gerade nicht. Was haben die Media Queries mit dem Laden von
Javascript zu tun? Media Queries kommen doch im CSS zum Einsatz, oder etwa
nicht? Kannst du das noch mal genauer erläutern?

@marc und Ouroborus23:

danke für den Buchtipp. Aber wie Marc schon sagte, die Frachtkosten machen
das ganze wieder etwas unattraktiv hehe aber anschaffen kann man es sich ja
dennoch

Was haltet ihr von diesem Foundation Framework? Macht das Sinn? Benutzt ihr
das, oder etwas ähnliches?

[marc]

Zitat von Dharokan

[…]
@marc und Ouroborus23:

danke für den Buchtipp. Aber wie Marc schon sagte, die Frachtkosten machen
das ganze wieder etwas unattraktiv hehe aber anschaffen kann man es sich ja
dennoch
[…]

Du kannst ja auch nur das PDF erwerben. Geht auch…

[:: RK ::]

Zitat von marc

Du kannst ja auch nur das PDF erwerben. Geht auch…

Ja stimmt ... aber ein Buch besteht für mich immer noch aus greifbarem Papier hehe

[Ouroborus23]

Also ich habe die neusten 2 Bücher zusammen für je 15 Dollar gekauft, inkl. Versand ist das dank super Dollar-Kurs so um die 35 Euro - das finde ich für 2 gut verwertbare Fachbücher nicht zu viel. Sicher - wenn man nur eins bestellen möchte, sind über 20 Euro für ein schmales Paperback ne Menge.

ABER: Es ist ja kein rausgeschmissenes Geld, sondern ne sinnvolle Investition

[marc]

Zitat von Ouroborus23

Also ich habe die neusten 2 Bücher zusammen für je 15 Dollar gekauft, inkl. Versand ist das dank super Dollar-Kurs so um die 35 Euro - das finde ich für 2 gut verwertbare Fachbücher nicht zu viel. Sicher - wenn man nur eins bestellen möchte, sind über 20 Euro für ein schmales Paperback ne Menge.

ABER: Es ist ja kein rausgeschmissenes Geld, sondern ne sinnvolle Investition

Außerdem sehen die alle nebeneinander im Regal nett aus *lach*

[Dharokan]

Zitat von :: RK ::

das verstehe ich gerade nicht. Was haben die Media Queries mit dem Laden von Javascript zu tun? Media Queries kommen doch im CSS zum Einsatz, oder etwa nicht? Kannst du das noch mal genauer erläutern?

Media Queries haben erstmal überhaupt nix mit Javascript zu tun, stimmt schon. Aber um ein ähnliches Verhalten in alten Browsern zu erhalten, brauchst Du Javascript.
Meine Aussage war auch auf head.js bezogen. Das arbeitet überhaupt nicht mit Media Queries, sondern gibt dem <body>-Element eine CSS Klasse, abhängig von der Fenstergröße. (z.B. <body class="lt1024"> oder so)

Zitat von :: RK ::

Was haltet ihr von diesem Foundation Framework? Macht das Sinn? Benutzt ihr das, oder etwas ähnliches?

Kannte es nicht, habs mir nur kurz nach Deinem Posting angeguckt.
Klingt erstmal recht lecker, aber ich bin bei solchen Sachen immer eher zurückhaltend.

A Book Apart kann ich generell auch sehr empfehlen!

Gruß...

[:: RK ::]

Zitat von marc

Außerdem sehen die alle nebeneinander im Regal nett aus *lach*

Natürlich, das ist der einzige Grund wieso man sich überhaupt Bücher anschafft haha

Sofern sich die Anschaffung inhaltlich lohnt sind die Kosten auch wieder relativ zu betrachen

@Dharokan:

ah ok, jetzt versteh ich . So genau hat ich mit die head.js Page nicht angeschaut.

[Steven_LS5]

Schöne Diskussion.

Ich verweigere mich noch der Technik. Ich sage nicht, dass ich sie für untauglich halte, nur erschliesst sich der sinn dahinter nicht ganz und zwar aus folgenden gründen:

wenn ich eine relativ umfangreiche website bastel, gehe ich davon aus, dass diese zu einem sehr geringen anteil mit dem smartphone genutzt wird. klar wird es hier und da jemanden geben, der mal eben reinschaut.
Etwas mehr bedeutung würde ich tablets zukommen lassen. Nicht jeder hat eins, aber sie sind zum surfen gemacht. da hat man aber schon wieder ein besseres seitenverhältnis (im gegensatz zum smartphone).

von daher sind für mich 2 ding erelevant: zum einen die bedienbarkeit, zum anderen die ladezeit (als referenz nutze ich 3g).

Bei unserem letzten projekt tätigen wir eine browserabfrage und switchen die navigation. diese hat dann zwar noch die selbe optik, lässt sich aber per touch bedienen.

wegen der ladezeit: ich hab gelesen, dass responsive webdesign die möglichkeit bietet, bildmaterial in verschiedenen größen/auflösungen zu hinterlegen. das empfinde ich als halbwegs unnütz, da - zumindest hier in deutschland - die provider die seite beim laden übers mobil-netz sowieso nochmal komprimieren.

Noch halte ich responsive webdesign als gutes argument, um beim kunden den preis etwas hochzuschrauben.

allerdings muss ich hinzufügen, dass ich mich mit der thematik noch nicht intensiv befasst habe, lediglich überflogen.

[Dharokan]

Zitat von Steven_LS5

Bei unserem letzten projekt tätigen wir eine browserabfrage und switchen die navigation. diese hat dann zwar noch die selbe optik, lässt sich aber per touch bedienen.

Hier würde mich interessieren, wie Ihr die Abfrage gemacht habt. So viel ich weiß, gibt es doch noch keine sichere Möglichkeit, um zu erkennen, ob die Seite auf einem Touch-Display angezeigt wird oder nicht.

[Ouroborus23]

Zitat von Steven_LS5

Ich verweigere mich noch der Technik. Ich sage nicht, dass ich sie für untauglich halte, nur erschliesst sich der sinn dahinter nicht ganz und zwar aus folgenden gründen

Dann hast du nicht weit genug gedacht, oder zu engstirnig. Responsive Webdesign bedeutet keineswegs nur, dass Webseiten sich automatisch für mobile Formate anpassen. Es geht vor allem auch darum, das die Seiten den Platz des Browsers optimal nutzen, da muss man noch nicht mal an Zugriffe über Mobile denken... Und ich hasse Seiten, bei denen ich nen Scrollaps bekommen obwohl links und rechts 600 leere Pixel schlafen... Das Flashforum natürlich ausgenommen.