Responsive Webdesign / flexible Webseite erstellen?

[filament]

Hallo Leute,

ich habe ein neues Projekt, dass ich gerade versuche in die Welt zu setzen. Ich möchte dies möglichst benutzerfreundlich gestalten. Daher soll die Seite für alle Endgeräte optimiert werden. Für die Google Ergebnisseiten kann das auch nicht von Nachteil sein, da ich gelesen habe, dass Google seit 2014 Webseiten, die nicht für mobile Endgeräte optimiert sind, abstraft.

Ich habe mich in das Thema eingelesen und einige Webseiten gefunden, die sich mit der Optimierung beschäftigen. Unter anderem:

https://blog.kulturbanause.de/2013/07/einfuhrung-in-das-flexbox-modell-von-css/
https://wiki.selfhtml.org/wiki/HTML/Tutorials/responsive_Webdesign
http://www.lingulo.com/de/tutorials-de/css-tutorials/how-to-build-a-html5-website-from-scratch

Ein wenig hatte ich mich vorher schon mit dem Thema beschäftigt. Unter Anderem habe ich die width Angaben mit Prozenten vorgenommen. Allerdings wusste ich nicht genau, wie ich mit Listenelementen umgehen sollte und Schriftgrößen?

Ich frage mich nun - nachdem ich die obigen Webseiten gelesen habe -, ob es sinnvoller ist das Flexbox Modell zu nutzen, oder ob es sinnvoller ist mit Media Queries zu arbeiten. Bin mir nicht sicher, ob das zwei Paar Schuhe sind oder ob ich beides kombinieren sollte / muss?

Wie gehe ich am sinnvollsten vor? Zumal ich klar sagen möchte, dass ich klar zwischen Desktop Version und Smartphone Version differenzieren möchte. Auf den Smartphones soll es eher wie eine App werden.

Außerdem bin ich mir nicht ganz sicher, wie ich mit der Breite umgehen soll. Wenn jemand eine Auflösung von 19xx hat, dann würden die Webseiten derart verzerrt werden, dass es nicht mehr schön ist. Wenn ich allerdings mit max-width arbeite, wirkt die Webseite auf höheren Auflösungen wie ein abgehakter Teil. Jemand Vorschläge wie man das am besten handeln kann?

Vielen Dank im Voraus.

 

[MrMurphy]

Hallo

Ich frage mich nun - nachdem ich die obigen Webseiten gelesen habe -, ob es sinnvoller ist das Flexbox Modell zu nutzen, oder ob es sinnvoller ist mit Media Queries zu arbeiten.

Beides gleichzeitig, zumal wenn du benutzerfreundliche Webseiten erstellen willst.

Zumal ich klar sagen möchte, dass ich klar zwischen Desktop Version und Smartphone Version differenzieren möchte. Auf den Smartphones soll es eher wie eine App werden.

Vergiß es. Zumal es mit der von dir propagierten Benutzerfreundichkeit nichts zu tun hat.

Zunächst gibt es keine Möglichkeit Smartphones überhaupt zu erkennen.

Du müsstest jedes Gerät (auch zukünftige) auf dem Markt kennen und einen Weg finden, sie eindeutig zu identifizieren. Die Übergänge zwischen sogenannten Smartphones, Tablets und anderen Geräten werden auch immer fließender. Wann also ist ein Gerät überhaupt ein Smartphone?

Damit wärst du weltweit der erste dem das gelingt.

Und Besucher wollen mit Sicherheit auf ihrem Smartphone nicht für jede Webseite eine App installieren.

Apps sind nur noch dann sinnvoll, wenn sie entweder

a) einen echten Mehrwert bieten, den eine Webseite technisch nicht bieten kann

oder

b) wenn die Besucher keine andere Wahl haben, wie zum Beispiel häufig bei den absoluten Marktführern.

Aus deinen Beschreibungen kann ich weder a) noch b) erkennen.

Eine aktuelle responsive Webseite hat zudem für dich den Vorteil, dass du Änderungen nur an einer Stelle vornehmen musst. Damit entsteht eine Win-Win-Situation: Du hast weniger Stress, die Besucher freuts.

Jemand Vorschläge wie man das am besten handeln kann?

Ich mache mich jetzt nicht über dich lustig, aber: Allein die Frage zeigt dass dein Wissen doch recht veraltet ist.

Also: Responsive Webseiten mit aktuellem HTML5 und CSS3 erstellen. Warum du mit max-width überfordert bist können wir nur an einem konkreten Beispiel nachvollziehen.

Tipp: Wenn du irgendetwas von 960px, 768px und ähnlichem liest - ganz schnell weglaufen / wegklicken. Solche Breiten haben nie Sinn gemacht, wurden von Anfängern aber gerne als unsinniger Ersatz für fehlende Papiergrößen genommen, um überhaupt eine feste Breite zu haben. Webseiten sind aber kein Papier und haben keine festen Breiten.

Siehe zum Beispiel

http://little-boxes.de/lb1/1-das-web-ist-nicht-aus-papier.html

Für konkrete Hilfe benötigen wir einen Link zu deiner Webseite.

Gruss

MrMurphy

 

[filament]

Du hast mich falsch verstanden. Ich möchte keine App erstellen. Ich möchte, dass die Webseite wie eine App ausschaut auf Smartphones die man horizontal hält.

Du sagst man könne Smartphones nicht erkennen. Aber mit den Queries kann ich doch filtern ob jemand z.B. eine Mindestbreite hat und dementsprechend mit CSS reagieren, oder nicht?

Einen konkreten Link zu meiner Webseite kann ich nicht geben. Ich habe noch nicht viel davon erstellt. Ein grobes HTML Modell mit head, body und ein paar div Containern steht erst. Bin gerade dabei die Navigation zu integrieren via vertikalen Listen.

Ich wollte mich erst erkundigen, wie ich das responsive Erstellen angehen sollte. Ich möchte nämlich ungern die ganze Webseite später umgestalten, weil ich mir zuvor keine Gedanken gemacht habe.

Du hast geschrieben, ich solle das Flexbox Modell mit Queries kombinieren. Du Meinst bestimmt damit zunächst Queries zu nutzen, um die Boxen dann entsprechend bei kleineren Auflösungen anzupassen, richtig?

Vielen Dank für den Link. Ich werde mir diesen genauer ansehen.

 

[MrMurphy]

Hallo

Ich möchte keine App erstellen. Ich möchte, dass die Webseite wie eine App ausschaut auf Smartphones die man horizontal hält.

Das Problem bleibt: Was verstehst du unter Smartphones und wie willst du sie erkennen? Du wärst weltweit der erste dem das gelingt. Alle mir bekannten Lösungen können Smartphones (was immer darunter auch verstanden wird) nur ansatzweise erkennen und weisen eine hohe Fehlerquote auf.

Ich wollte mich erst erkundigen, wie ich das responsive Erstellen angehen sollte.

Dafür hat sich folgendes Vorgehen bewährt:

Zunächst wird der komplette HTML-Teil (also alles im body-Bereich) der Webseite korrekt nach den Regeln vom HTML5 erstellt. Bei HTML5 ist ja ziemlich genau festgelegt, welche Inhalte in welche Elemente/Container gehören. Da kann man also nicht viel falsch machen.

Danach wird das Layout mittels CSS3 gestaltet.

Du Meinst bestimmt damit zunächst Queries zu nutzen, um die Boxen dann entsprechend bei kleineren Auflösungen anzupassen, richtig?

Ich weiß nicht ob wir etwas aneinander vorbeischreiben.

Beim Layout mittels CSS hat es sich als sinnvoll erwiesen, zunächst das Layout für schmale Bildschirme und dann für immer breitere zu gestalten. Das läuft unter dem Schlagwort "Mobile First".

Gruss

MrMurphy

 

[filament]

Naja ich dachte halt dass ich mittels

@media (min-width: 30em) { /* Kompaktes Layout */ }

Smartphones erkennen könnte. Zumindest suggeriert mir das die Wiki von selfhtml.

Ist dem nicht so?

 

[MrMurphy]

Hallo

Du meinst wohl eher max-width.

Ist dem nicht so?

Nein. Mit der Media Query werden alle Fensterbreiten über 30em (bzw. bei max-width bis 30em) erkannt. Ob es sich um die komplette Bildschirmbreite, ein Browserfenster im Vollbild-Modus oder einfach ein schmal gezogenes Browserfenster handelt ist damit aber nicht unterscheidbar. Auch nicht, ob es sich um ein Smartphone, ein Tablet, ein Notebook oder ein Desktop-Gerät handelt. Wobei die Übergänge bei der heutigen Vielzahl der Geräte fließend sind.

Auch nicht, ob das Fenster im Hoch-, Querformat oder (der neuste Trend) quadratisch angezeigt wird. Schon gar nicht ob bestimmte, bei einem Smartphone zu erwartende, Techniken, wie ein Touchscreen oder eine Tastatur vorhanden sind.

Es ist überhaupt nicht festgelegt, was ein Smartphone überhaupt ist. Die haben zum Beispiel heutzutage mit den hochauflösenden Displays mehr Pixel als Desktop Bildschirme. Und sind Tablets mit Telefonfunktion auch Smartphones? Oder zählen Smartphones noch zu Smartphones wenn sie höhere Auflösungen als die meisten Tablets haben?

Leg doch einfach mal fest, was für dich ein Smartphone von anderen Geräten unterscheidet. Danach wirst du feststellen, dass du "deine" Smartphones mit CSS nicht gezielt ansprechen kannst, sondern immer auch andere Geräte erwischt.

Gruss

MrMurphy

 

[filament]

Hallo nochmal,

ich habe mich jetzt intensiver mit allem beschäftigt und begonnen das "mobile" Layout zu erstellen. Das hat bisher auch ganz gut funktioniert und es wird langsam eine Webseite draus (wenn auch noch nicht vorzeigbar; Habe aufgrund von Arbeit etc. wenig Zeit). Kommt noch einiges an Arbeit auf mich zu in den nächsten Wochen / Monaten. Das Projekt eilt aber auch nicht, von daher ist es in Ordnung, zumal ich mich dann gezielt mit Problemstellungen auseinandersetzen kann, bevor ich mit der Programmierung in PHP / MySQL anfange.

Da gerade bei mobilen Geräten (oder kleinen Fenstern im Browser) viel mit CSS3 gebaut ist, stellte ich mir die Frage, was ich eigentlich mit älteren Browsern machen soll (Auch eine Frage: Welche Browser können z. B. mit display: none; umgehen oder mit :target / :hover. Diese Elemente habe ich vorwiegend genutzt bisher.). Dazu habe ich einfach mal den Begriff CSS3 ältere Browser bei Google eingegeben. Gefunden habe ich einige Seiten, die versuchen mit Javascript und sonstigem Zeug die neuen Befehle zu simulieren. Klingt alles sehr nett und auch plausibel. Auf der anderen Seite habe ich aber auch vereinzelt Autoren gefunden, die der Meinung waren, dass man sich nicht zu sehr auf veraltete Browser fokussieren sollte und die neuen Webstandards nutzen solle. Denn letztendlich soll laut einer Statistik der Anteil von alten Browsern, welche gewisse Sachen nicht verarbeiten können, mittlerweile schwindend gering sein. Gerade bei mobilen Endgeräten seie es doch auch so, dass bereits relativ neue Browser vorinstalliert sind.

Ist dem wirklich so? Kann man auf zusätzliche Prozesse für ältere Browser daher gezielt verzichten?

Hat Jemand mit diesem Thema Erfahrungen?

 

[MrMurphy]

Hallo

Hat Jemand mit diesem Thema Erfahrungen?

Ja.

Ist dem wirklich so? Kann man auf zusätzliche Prozesse für ältere Browser daher gezielt verzichten?

Das ist nicht ganz einfach zu beantworten.

Zunächst: Zusätzliche Prozesse gibt es bei HTML / CSS nicht, da es keine Programmiersprache ist.

Es gibt auch bei mobilen Geräten noch veraltete Browser.

Es gibt aber trotzdem keinen Grund auf das aktuelle HTML5 und CSS3 zu verzichten, sowie die neuen Möglichkeiten zu verwenden.

Ein einfaches Fallback ist zwar kein muss, aber sinnvoll. Grade beim Ansatz "Mobile First" ist dies auch überhaupt kein Problem.

Gefunden habe ich einige Seiten, die versuchen mit Javascript und sonstigem Zeug die neuen Befehle zu simulieren.

Die Zeiten sind vorbei. JavaScript sollte nur noch verwendet werden um Lösungen umzusetzen, die nur mit HTML und CSS nicht möglich sind. Und das werden immer weniger. Zur Unterstützung von älteren Browser ist JavaScript nicht sinnvoll.

Auch eine Frage: Welche Browser können z. B. mit display: none; umgehen oder mit :target / :hover. Diese Elemente habe ich vorwiegend genutzt bisher.

Alle. Das "Problem" sind eher die Touchscreens, da die keinen hover-Effekt kennen. Aus mir nicht nachvollziehbaren Gründen können viele Webseitenersteller das nicht erkennen. So werden immer noch fleißig Navigationen mit hover-Effekt erstellt, die auf Touchscreens nicht oder nur eingeschränkt nutzbar sind. Oder Bilder werden mit dem hover-Effekt vergrößert, obwohl bei Touchscreens dann genau die Sicht auf das Bild durch die Hand verdeckt wird.

Gruss

MrMurphy

 

[filament]

Kannst Du mir vielleicht ein paar Seiten / Tutorials für solch ein Fallback zur Hand geben?

Wie Kann ich mittels CSS erkennen, ob ich es mit einem älteren Browser zu tun habe, um entsprechend den Code anzupassen bzw. zu implementieren?

Das diese Scripte nicht mehr zeitgemäß Sind gerade wegen JavaScript habe ich mir fast gedacht. Gerade weil JS auch nicht auf jedem Gerät aktiviert ist.

Das mit dem Hover und dem Touchscreen habe ich berücksichtigt. Habe die Navigation so gebaut, dass diese durch einen Klick aufklappt und bleibt bis man erneut klickt. Off Canvas mit Hilfe von :target.

 

[MrMurphy]

Hallo

Kannst Du mir vielleicht ein paar Seiten / Tutorials für solch ein Fallback zur Hand geben?

So etwas gibt es nicht. Fallback ist ein Oberbegriff, das Vorgehen ist aber individuell. Ohne deine Seite zu kennen ist eine konkrete Hilfe deshalb nicht möglich.

Im Prinzip wird beim Fallback für Responsive Design mit Mobile First zunächst für schmale Fenster ein Layout mit lange eingeführten CSS-Anweisungen erstellt. Das wird dann bei Bedarf mit modernen CSS-Anweisungen überschrieben.

Wie geschrieben: Bei Bedarf und dann nur die erforderlichen Anweisungen. Die CSS-Anweisungen, die für alle Fensterbreiten passen, müssen und sollten nicht überschrieben werden.

Der Quelltext soll übersichtlich und einfach wartbar bleiben. Es geht dabei nicht darum unstrukturiert und unkontrolliert möglichst viele vermeintlich alte CSS-Anweisungen durch neue zu überschreiben. Dafür gibt es keinen Grund.

Wie Kann ich mittels CSS erkennen, ob ich es mit einem älteren Browser zu tun habe, um entsprechend den Code anzupassen bzw. zu implementieren?

Das ist weder möglich noch sinnvoll. Das Responsive Design wird an die Fensterbreite angepasst. Alles andere hat sich als Irrweg / Sackgasse erwiesen.

Gruss

MrMurphy