Responsive Design - Verständnis

gd0123456

Hallo Leute,
Ich brauch eure Hilfe zum Thema Responsive Design bzw. es geht mir um das Verständnis.

Ich habe gerade eine Website entwickelt. Je nach Breite des Bildschirms wird dementsprechend die richtige CSS Datei geladen. Media Query frägt auf "width" ab.

So jetzt mein Problem bzw. Frage:

Wie ist es mir möglich die Seite für verschiedene Endgeräte anzusehen? Ich suche im Netz schon eine Zeit lang. Und fand ein paar Seiten wie z.B. http://responsivetest.net oder http://quirktools.com/screenfly.

Damit ich sehe ob die richtige CSS Datei geladen wird, habe ich jede mit einer anderen Hintergrundfarbe definiert. z.B. 1024 hat die Hintergrundfarbe blau wenn die Seite gewechselt wird, 760 hat die Farbe Gelb.

Wenn ich die Seite auf dem IPhone 4 test bekomme ich die Hintergrundfarbe blau. Teste ich es mit den oben genannten Websiten erhalte ich die Farbe Gelb. Warum?

Wie ist es mir möglich die Website zu testen bzw. wie kann ich sehen ob das Design passt?
Hab es auch schon mit Chrome probiert. Mit dem Emulator. Allerdings wird auch hier bei IPhone 4 die Seite nicht richtig dargestellt, obwohl sie beim Endgeräte passt.

Also welche Möglichkeit habe ich, die Seite für mehere Endgeräte zu testen?

Danke für eure Hilfe.

MrMurphy

Hallo,

Zitat

es geht mir um das Verständnis

Das scheint dein Problem zu sein.

Zitat

Je nach Breite des Bildschirms

und

Zitat

z.B. 1024 hat die Hintergrundfarbe blau wenn die Seite gewechselt wird, 760 hat die Farbe Gelb.

deuten darauf hin, dass du die Funktion vom Responsive Design mit Media Queries falsch verstanden hast.

Es ist unmöglich für jedes Gerät bzw. für jede Pixelanzahl Webseiten zu erstellen. Smartphones haben heutzutage teilweise bereits höhere Pixeldichten als Desktop-Bildschirme. Zusätzlich muss die Webseite noch auf Hoch- und Querformat reagieren. Außerdem hat es sich als besucherfreundlich erwiesen wenn Webseiten nicht seitwärts gescrollt werden müssen.

Deshalb hat es sich als praktikabel erwiesen, wenn Webseiten nicht nach Geräten oder Fensterbreiten erstellt werden, sondern auf ihren Inhalt reagieren. Dann entstehen viele deiner Probleme erst gar nicht.

Mit einem Link zu deiner Seite kann dir das eventuell praktischer erläutert werden. Natürlich nur, wenn deine Seite auch bereits Inhalt enthält, auf den sie reagieren kann.

Gruss

MrMurphy

gd0123456

Erstmals danke für die Antwort. Dann versteh ich es wirklich nicht ganz.
http://www.benwillgruber.com/neueSeite.

Diese muss ich je nach Breite des Bildschirms anpassen. Mal ist die Schrift zu klein, oder gewisse DIV's sind verschoben. Wie soll ich es designen wenn nicht auf bestimmte Größen von Bildschirm?
Ich glaub ich hab einen Verständisknoten.
Ein Beispiel ist es z.B. klickst du auf Benjamin Willgruber, kommst du auf die Infoseite. Dort werden Drei Menüpunkte angezeigt. Info, Kontakt, Portfolio. Und diese sollten einigermaßen zentriert sein. Schau ich es mir am Galaxy 4s mini an, passt es. Aber am Galaxy 4 ist es nach unten verschoben. Was muss ich dann machen damit es immer passt?

Danke für die Hilfe

Ach und was ich noch fragen will ist, ich muss jadoch mit media queries doch auf die entsprechende Breite eines Bildschirmes abfragen, und je nach Breite das Design anpassen. Nur wie weiß ich dann ob es passt?

Tags