pcgamer1 schrieb:
Bessere bedienbar, übersichtlicher, kein extremen Zooms notwendig...
Nur, wenn der Designer sein Salz nicht wert ist.
Ein fähiger Webentwickler verwendet einen Mobile First - Ansatz. Dadurch ist von einer Minimalauflösung (so ca. 320px horizontal) bis zu einer Maximalauflösung immer alles hübsch les- und bedienbar.
TNM schrieb:
Gewohntheit, man weiß wo welcher Button/Menu ist.
Klar, man sollte in der DEsktop-Ansicht nicht das Menü oben links platzieren, im Mobile dann oben rechts...
Übrigends...da viele HPs völlig mit Werbung/Anzeigen überladen sind ist responsive Webdesign schwer da man die Werbung als Platzverschwender eigentlich aus den Weg räumen müsste...und daran haben viele kein Interesse.
Auch das kann man lösen, z.B. indem man die Werbung mit skalieren lässt oder vernünftig in den Content Flow einbettet, statt sie (wie z.B. hier auf CB) außerhalb des Flow in "Freiräumen" zu parken.
Geht man davon aus, dass Werbung auch Content ist, wird alles viel klarer. Dafür muss man sich lediglich von Billig-Bannern und vor allem diesen Abscheulichkeiten Marke "Wir machen den gesamten Background Aggro-Rot oder Tucken-Rosa und nerven dazu noch mit Layovers!" trennen.
sebbolein schrieb:
Zudem sind die mobilen Seiten dann manchmal so schlecht, dass Dropdown Menüs viel zu klein sind um die mit dem "dicken" Finger zu treffen.
Dann wollte der Entwickler wieder zu viel. Er wollte unbedingt ein Menü im Look&Feel der restlichen Seite schaffen, anstatt einfach das Offensichtliche zu verwenden. <select>-Auswahlfelder werden vom System gestaltet, CSS hat hier quasi keinen Einfluss. Das angenehme Resultat ist, dass ein <select> auf Smartphones eine sehr gut bedienbare Struktur aufweisen, nur eben im Look&Feel des Gerätes, nicht der Seite.
Ein kleiner Preis für perfekte Usability...
Viele Webseiten sehen in 2560x1600 einfach nur bescheuert aus, wenn man das Browser Fenster auf Vollbild hat, dabei könnte man so schön viel mehr Inhalt anzeigen, seien es Waren in nem Shop oder Text bei einer Textlastigen Seite.
Das hat zu gleichen Teilen psychologische als auch technische Gründe.
Psychologie: Menschen können längere Texte besser erfassen, wenn einzelne Zeilen wenige Worte umfassen. Ein Text-Content, der sich über die volle Breite eines UHD-Monitors erstrecken würde, könnte einfach nicht mehr gelesen werden. Mein Post hier würde sich über 5-6 Zeilen erstrecken und wäre komplett unverständlich. Um das zu umgehen, begrenzt man den Content-Bereich für Texte auf ~1000px. Das ist noch angenehm lesbar.
Technologie: Printmedien umgehen das psychologische Problem, indem sie ihre Texte in balancierte Spalten verteilen. CSS3 bietet eine solche Möglichkeit zwar ebenfalls, nur werden diese Columns nur von den allerwenigsten Browsern voll unterstützt. Grob 3/4 aller im Einsatz befindlichen Browser können den Kram korrekt, das ist zu wenig. Außerdem haben die Columns noch weitere, hässliche Probleme. Unter anderem kriegt man Probleme mit links/rechts vom Absatz floatenden Bildern. Außerdem kommt man sehr schnell an den Punkt, ab dem jede Spalte so hoch ist, dass man scrollen muss, um die Spalte zu Ende zu lesen. Absolutes No-Go. Dieses Problem könnte man mit "column-span" eindämmen, aber genau dieses Attribut beherrscht Firefox (>30% Marktanteil) nicht.
Außerdem ist der Umgang mit columns, und vor allem column-span, in einem CMS extrem umständlich. Der Plan bei einem CMS ist ja, dass LAIEN ihre Inhalte pflegen können. Wie soll man denen eintrichtern, dass sie regelmäßig Zwischenüberschriften anlegen sollen und diesen das Attribut column-span zuweisen müssen?
Martinus33 schrieb:
Das wird bei meiner Site zwar alles nicht (kaum) zutreffen, aber ihr habt mich dennoch "bekehrt" und ich werde den Link mitsamt seinem Footer dann doch anbieten.
Lass den Mist weg. Wie willst du überhaupt so einen Link anbieten, wenn du doch ein Responsive Design planst? Responsive Design heißt: Alles fließt, und nur die Media Queries entscheiden, wie es sich verhält.
Hier gibt es keinen magischen Schalter, außer du willst einen Desktop-First - Ansatz schreiben und alle Media Queries in eine separate CSS einbetten, die du dann im Desktop-Layout nicht einbettest. Totaler Bullshit, sag ich dir.
Könnte mir außerdem vorstellen, dass manche rein aus Neugier oder nur vorübergehend auf Desktop wechseln, z.b. um ein Bild ordentlich zu sehen, und dann wieder zurück zu mobile gehen. Oder?
Warum sollten sie? Kann das Smartphone das Bild plötzlich größer darstellen, bloß weil der Fluss des Layouts anders ist?
Responsive heißt aber doch nicht automatisch, dass alles vorhanden bleibt und schön dargestellt wird?
Doch, im weitesten Sinne ist genau DAS der Sinn von ordentlichem Responsive Design. Schließlich verwendest du für JEDE Display-Größe denselben DOM, dieselbe CSS-Datei, dieselben JS-Files,... Oder anders: Es GIBT keine Display-Größen. Es gibt nur Viewport-Größen. Zieht der User seinen Desktop-Browser auf 50% des Bildschirms, dann kriegt er eben dasselbe Bild wie n iPad hochkant (abzgl. Touch-Fixes). Das ist KORREKT so.
Was muss?
- Alle RELEVANTEN Steuerelemente müssen vorhanden sein. Sie dürfen durchaus ihre Gestalt wandeln, wenn es der Bedienbarkeit zuträglich ist. Form follows function!
- Alle RELEVANTEN Inhalte müssen sichtbar bleiben.
- Touch-Devices haben kein (zuverlässiges) :hover, denk dran!
Was kann?
- Für niedrige Auflösungen können (und sollten) niedriger aufgelöste Bilder bereitgestellt werden. Oh, ich freu mich auf <picture> bzw. <img srcset="...">. Bis dahin gibts ja gute Polyfills.
- Icons sollten (so oder so) als Vektoren oder Font eingebettet werden. Dadurch bleiben sie immer gestochen scharf
http://mediaqueri.es/
Gucken und Staunen! So und nicht anders wirds gemacht. DAS ist gutes Responsive Design.
Solche Seiten sind zwar einfach gehalten, dafür aber leider nicht nur hässlich, sondern auch noch kompliziert bedienbar.
Und das um die Zeit. 
