CSS Verschiedene Stylsheets werden nicht richtig angenommen

Hi,

Ich hab mal n paar Fragen zu den Responsive Webdesign.

Will ne Site für unsere Kerbegesellschaft erstellen.
Anfangs wollte ich ne stinknormale Seite erstellen und war auch schon so gut wie fertig damit, dann dachte ich ne Mobile Seite wäre nicht verkehrt, da die meisten mim Smartphone surfen.
Also wieder alles übern Haufen geworfen und 2 Seiten erstellt.
War auch irgendwie nicht das Wahre und mir wurde hier im Forum dazu geraten auf Responsive Design zu setzten.

Leider klappt es irgendwie vorne und hinten nicht richtig, entweder funktioniert die Smartphone Seite richtig oder die Desktopseite aber beides will nicht so recht.
Ich hab mich hier an dem Tutorial orientiert Klick

Aber so recht will es nicht.

Was ich rausgefunden hab es liegt an folgenden Parametern:


Eigentlich wird ja nur gesagt, ist die Auflösung X dann Smartphone CSS laden, ist sie Y Desktop dann Desktop CSS laden und ist sie Z dann Tablet CSS laden.
Ich verstehe allerdings nicht warum das nicht richtig funktioniert, ich hoffe mir kann jemand auf die Sprünge helfen.

Hier meine Site Klick

Bootstrap hab ich mir mal kurz angesehen aber ich will lieber selbst die CSS Datein schreiben.

Du kannst bei Bootstrap ja auch dein eigenes Template bauen, bzw musst es sogar. Aber dir werden Dinge an die Hand gegeben die das um ein vielfaches einfacher machen, nämlich das Grid-System. Damit kannst du relativ schnell eine Seite bauen, die über alle Geräte ordentlich skaliert.

Als Freund von Standardsoftware würde ich dir jedoch zu einem CMS raten. Da ich die Komplexität deiner Seite als gering einschätze empfehle ich dir einfach mal Wordpress. Für Wordpress findest du tausende responsive kostenlose und/oder günstige Templates (20-50€) die du nach Bedarf unkompliziert anpassen kannst.

Das hätte dann den Vorteil, dass deine Seite gewissen aktuellen Trends folgt nicht aussieht als wäre sie irgendwann in den 90ern vergessen worden ... der counter

Ja wie gesagt habs mir mal angesehen aber die Seite soll sowieso relativ minimalistisch gehalten werden.
Ein Menü, verschiedene Infos, Gästebuch und Bildergallerie.
Ist sowieso nur ne Infoseite.

Aber das kann ja nicht so schwer sein für verschiedene Auflösungen ne andere CSS zu laden, nur leider klappt es irgendwie nicht so recht.

Zum Verständnis:

media="screen" bedeutet doch normaler Bildschirm und media="only screen" bedeutet Touchscreen oder deute ich das falsch ?

Es IST auch nicht schwer, du machst es nur falsch.
- nicht massig separate Files, das gehört SAUBER STRUKTURIERT in eine. Senkt die Ladezeit
- Mix nicht wild min-width, max-width und dann auch noch AND-Verknüpfungen. Das ist doch das totale Chaos, da sieht kein Mensch mehr durch und Fehler sind vorprogrammiert.

http://mediaqueri.es/
Angucken, abgucken, nachmachen.

Mit einer Datei kam mir auch in den Sinn, würde es dann so machen:

Ja, aber jetzt hast du immer noch nicht weit genug gedacht.
Ein Monitor, der >=1224px hat, führt jetzt BEIDE Blöcke aus, denn er aht ja logischerweise auch >=321px.

Außerdem verhalten sich die Viewports der verschiedenen Geräte auch recht eigen. Sie über "px" anzusprechen, kann derb in die Hose gehen.

Das stimmt natürlich.
Deshalb gibts vermutlich auch diese Probleme.

Aber wie soll ich es denn sonst machen außer mit px ?
Weil % ist ja bei jedem Monitor anders bzw. ich kann ja nicht sagen bei X % Smartphone Design laden.

Kannst du mir vielleicht n kleines Beispiel nennen bzw, nen Link wo sowas erklärt wird.
Im Netz findet man immer 100 verschiedene Varianten und Meinungen dazu.
Wie man sieht findet man dann oft nicht die optimale.

Edit:

habe jetzt es jetzt so gemacht, also läd er zwischen 480px und 1123 px das Smartphone Design und darüber das Desktop.

Edit2:

Okay ich sehe das Problem, es kann nicht genau unterschieden werden zwischen Smartphone und Tablet etc.
Auf meinem Lumia 930 wird jetzt die Tabletansicht angezeigt.

Aber ich muss doch irgendwie definieren können ob Smartphone oder Tablet.

Oder soll ich es so machen, das es verschiedene Zwischenschritte gibt, also nicht Smartphone, Tablet, Desktop.
Sondern Von 100px-400px eine Ansicht, von 401px-600px- einer weitere, von 601px-800px eine usw. ?

MetalForLive schrieb:

Aber wie soll ich es denn sonst machen außer mit px ?
Weil % ist ja bei jedem Monitor anders bzw. ich kann ja nicht sagen bei X % Smartphone Design laden.

Zum Vergrößern anklicken....

Prozente sind natürlich Blödsinn, weil ein Monitor IMMER 100% breit ist.
Es gibt verschiedene alte und neue Einheiten, die durchaus als Maß für Viewport und Darstellungsgröße zählen. Sinnvoll wäre z.B. auf "em" zu setzen.

habe jetzt es jetzt so gemacht, also läd er zwischen 480px und 1123 px das Smartphone Design und darüber das Desktop.

Code:

@media only screen and (min-width:480px) and (max-width:1223px)

Zum Vergrößern anklicken....

Sowas ist trotzdem Grütze.
Was passiert mti einem Display <480px, z.B. einem schmalen (320px) Smartphone?
Was ist mit einem 14-15" Display, das zwar nur 1024px schafft, sehr wohl aber als Desktop klassifiziert werden kann?

Was macht überhaupt einen "Desktop" aus, was einen "Mobile"? Wozu diese starre Fixierung auf irgend eine Größe? Was ist z.B. mit Convertibales, die jederzeit zwischen Laptop und Tablet, zwischen Maus, Stift und Touch, wechseln können?

Belies dich mal zum Thema "Mobile First" oder dem Gegenansatz "Desktop First". Dazu gibts allerhand Material, auch hier im Forum.

Aber ganz ehrlich: In der Zeit, in der du hier jetzt herum probierst, hättest du jetzt shcon n ganz paar Euro verdienen können. Damit hättest du problemlos einen Profi bezahlen können. Sich in so ein komplexes Thema wie GUTES Responsive Design selbst einzuarbeiten, ist totale Zeit- und Geldverschwendung.

Da stimmt aber so einiges noch nicht, wenn ich mir so deinen Quelltext ansehe.
Bsp. Kein Doctype angegeben, H1 doppelt, ID´s doppelt ect. ... und, Besucherzähler verwendet man schon seit Jahren nicht mehr

Es ist nicht per se falsch, mehrere <h1> zu verwenden. Man muss sie nur semantisch korrekt verwenden. Semantic HTML5 ist eben auch eine Kunst.
In diesem speziellen Falle hier ist es natürlich ein semantischer Totalschaden.

Wenn ich n Doctype angebe dann macht das CSS wieder Probleme, kein Plan wieso.

Man kann doch pro div/class h1-6 nutzen ?
Aber das änder ich trotzdem noch mal.
Mit den IDs guck ich noch mal, soll ja nicht sein.
Besucherzähler finde ich irgbdwie cool
Aber stimmt schon der passt da nicht rein, den mach ich glaube wieder weg.

MetalForLive schrieb:

Wenn ich n Doctype angebe dann macht das CSS wieder Probleme, kein Plan wieso.

Zum Vergrößern anklicken....

Dann hast du wieder was radikal falsch gemacht. DOCTYPE ist ein Muss, und man muss da auch nicht kreativ werden, man nimmt einfach den HTML5-DOCTYPE. Der ist wenigstens schön kurz.

Man kann doch pro div/class h1-6 nutzen ?

Zum Vergrößern anklicken....

Nein.
1.) hat "class" gar nix zu melden.
2.) ist <div> ein komplett anonymes Blockelement. <div> nimmt man, wenn es kein besseres Blockelement gibt, genauso wie <span> der Inline-Notnagel ist.

Besucherzähler finde ich irgbdwie cool

Zum Vergrößern anklicken....

Du, und 100 andere weltweit... Das ist typischer 90er Style, und selbst damals war es kompletter Schrott. Welchen semantischen Nutzen bietet so ein Zähler? Was genau zählst du? Zählst du auch Bots? Zählst du auch Leute, die die Seite mal kurz neu laden? Wen INTERESSIERT, wie viele Fake-User du auf der Seite hast?

Nur min- und max-width verwenden. device-width verhält sich je nach Plattform bzw. Browser anders und verursacht nur unnötig Probleme.
Und komplett separates CSS für verschiedene Auflösungen zu laden macht eh wenig Sinn. Einfach je nach Größe die vorhandenen Styles überschreiben. Wegen Performance oder so braucht man sich da eh keine Gedanken zu machen.