nicht angemeldet
Design buggt bei Freunden
Gunnar Bittersmann
Der Martin
Matthias ApselHallo,
ich bin 15 Jahre alt und möchte gerne später mal einen Ausbildungsberuf als Fachinformatiker - Anwendungstechnik erlernen. Deshalb möchte ich gerne meine HTML und CSS Kenntnisse verbessern und habe mich mal an eine Webseite gesetzt.
Die Webseite soll eine Fanseite zum deutschsprachigen Habbo Hotel sein und deshalb habe ich schon mal mit Photoshop ein Design erstellt. Das Design mit Hilfe von HTML und CSS gecodet.
Das Design fertig gecodet.
Nun habe ich das Design meinen Freunden gezeigt, wobei die gleich gesagt haben:"Irgendwie ist das bei mir verschoben [...]" Dann hat mir ein Freund gesagt, dass die Verschiebung des Designs mit dem Bildschirm des anderen Besuchers zu tun hat. Möglicherweise, hatten meine Freunde entweder größere Bildschirme oder kleinere und je nach dem, verkleinerte sich das Design oder vergrößerte sich.
Nun wollte ich mal euch fragen, wie man so etwas überprüfen kann, damit es auch bei anderen "Besuchern" mit kleineren oder größeren Bildschirmen gut aussieht.
Hoffe auf eine Hilfe...
Viele Grüße Hakan [Mzuki]
-
Hallo,
Nun wollte ich mal euch fragen, wie man so etwas überprüfen kann, damit es auch bei anderen "Besuchern" mit kleineren oder größeren Bildschirmen gut aussieht.
Du musst doch nur die Größe deines Brwosers abändern.
Viele Grüße
Siri-
Ja, aber wie erkennt man sowas, wenn ich jz auf 150% reinzoome, geht z.B. die Login box nach rechts d.h. die inhalte müssen auch bei 150% zu erkennen sein, ohne das man nah links und rechts scrollt?
-
Ja, aber wie erkennt man sowas, wenn ich jz auf 150% reinzoome, geht z.B. die Login box nach rechts d.h. die inhalte müssen auch bei 150% zu erkennen sein, ohne das man nah links und rechts scrollt?
Damit macht "reinzoomem" genau das was es soll. Worin sollte der Sinn des Zoomens liegen, wenn sich nichts vergrößert?
-
-
-
@@Hakan | Mzuki:
nuqneH
Nun wollte ich mal euch fragen, wie man so etwas überprüfen kann, damit es auch bei anderen "Besuchern" mit kleineren oder größeren Bildschirmen gut aussieht.
Indem du dein Browserfenster verkleinerst.
Da hättest du auch selbst drauf kommen können?
Vergiss nicht, dass viele Besucher ziemlich kleine Browserfenster haben. Und dass Lauftexte auf Webseiten fehl am Platz sind.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer)-
Versteh' schon, ihr habt eure Regeln.
Arm.Cheers,
Baba-
Hallo,
Versteh' schon, ihr habt eure Regeln.
ja, du darfst gern konkret kritisieren, aber nicht einfach nur beleidigen.
Arm.
Lieber arm dran als Arm ab.
Ciao,
Martin--
Viele Fachleute vertreten die Ansicht, jedes Feature eines Programms, das sich nicht auf Wunsch abstellen lässt, sei ein Bug.
Außer bei Microsoft. Da ist es umgekehrt.
Selfcode: fo:) ch:{ rl:| br:< n4:( ie:| mo:| va:) de:] zu:) fl:{ ss:) ls:µ js:(
-
-
-
Lieber Hakan | Mzuki,
ich bin 15 Jahre alt und möchte gerne später mal einen Ausbildungsberuf als Fachinformatiker - Anwendungstechnik erlernen. Deshalb möchte ich gerne meine HTML und CSS Kenntnisse verbessern und habe mich mal an eine Webseite gesetzt.
das nenne ich ein ehrenwertes Vorhaben.
Die Webseite soll eine Fanseite zum deutschsprachigen Habbo Hotel sein und deshalb habe ich schon mal mit Photoshop ein Design erstellt. Das Design mit Hilfe von HTML und CSS gecodet.
Du gehst also von einem visuellen Vorbild aus. Das ist oft der Weg, den Webdesigner beschreiten. Jetzt stellt sich nur die Frage, wie man die Dokumentstruktur sinnvoll umsetzt, deren Darstellung dann mittels CSS an die visuelle Vorlage angenähert werden soll.
Da sehe ich eine <div>-Suppe, die keinen wirklichen Strukturwert hat. Stelle in Deinem Browser einmal die CSS-Unterstützung ab, damit er das Dokument mit dem default-Stylesheet darstellt. Wenn die Seite dann noch sinnvoll und gut benutzbar dargestellt wird, dann hat Dein HTML-Dokument eine sinnvolle Struktur.
So, wie es aber im Moment aussieht, hat es keine sinnvolle Struktur. Also beginnen wir neu:
1. (Haupt-)Inhalt
2. "stehende Elemente" (das, was auf jeder Seite zu sehen ist)
3. NaviSo bemühe zumindest ich mich, meine Webprojekte zu erstellen. Mit CSS sorge ich dann dafür, dass die Dinge an Ort und Stelle erscheinen und so aussehen, wie sie das sollen.
Mein Vorschlag für XHTML:
<body> <div id="content"> ... </div> <div id="header"> ... </div> <div id="search"> ... </div> <div id="navi"> ... </div> </body>Mein Vorschlag für HTML5:
<body> <section id="content"> ... </section> <header> ... </header> <section id="search"> ... </section> <nav> ... </nav> </body>Wenn die Struktur steht, kann man mit CSS (und relativen Maßeinheiten!) an das Layouten der "Boxen" gehen. Wenn man dabei min-width und max-width zusätzlich zu width einsetzt (mit der Höhe kann das etwas anderes sein), dann sollte das mit dem Verschieben besser werden.
Bei Webseiten solltest Du Dich gedanklich ein gutes Stück weit von Photoshop trennen, da eine Website kein Printmedium ist, sondern dynamisch auf den verschiedenen Ausgabegeräten angezeigt wird (Smartphone, Tablet, PC, TV, Spielekonsole...).
Sorge also in erster Linie dafür, dass die Seite ein Dokument hat, welches eine vernünftige Struktur enthält(!!), bevor Du Dir um visuelle Abweichungen von Deiner PS-Vorlage Gedanken machst!
Liebe Grüße,
Felix Riesterer.
--
ie:% br:> fl:| va:) ls:[ fo:) rl:| n4:? de:> ss:| ch:? js:) mo:} zu:)-
@@Felix Riesterer:
nuqneH
Mein Vorschlag für HTML5:
<section id="content">Dafür wäre dann wohl das main-Element angebracht.
Qapla'
--
„Talente finden Lösungen, Genies entdecken Probleme.“ (Hans Krailsheimer) -
Mein Vorschlag für XHTML:
<body>
<div id="content">
...
</div>
<div id="header">
...
</div>
<div id="search">
...
</div>
<div id="navi">
...
</div>
</body>> > > Mein Vorschlag für HTML5: > > ~~~html <body> > <section id="content"> > ... > </section> > <header> > ... > </header> > <section id="search"> > ... > </section> > <nav> > ... > </nav> > </body>HTML5 hat auch einen XHTML-Modus, bekannt unter XHTML5.
-
-
Om nah hoo pez nyeetz, Hakan | Mzuki!
ich bin 15 Jahre alt und möchte gerne später mal einen Ausbildungsberuf als Fachinformatiker - Anwendungstechnik erlernen. Deshalb möchte ich gerne meine HTML und CSS Kenntnisse verbessern und habe mich mal an eine Webseite gesetzt.
Das finde ich cool.
Lass dich von dem teilweise etwas rauheren Ton hier nicht unterkriegen. Ich kenne sowohl Siri als auch Gunnar hier aus dem Forum als "Leute, die Ahnung davon haben". Sicher war ihnen im Moment der Antwort nicht bewusst, einen 15jährigen vor sich zu haben. Bedenke: Es gibt keine dummen Fragen, auch wenn man in diesem Forum manchmal den Eindruck hat, dass sich einige von Anfängerfragen genervt fühlen. Gunnar und Siri gehören aber mMn eher nicht dazu.
Dieses Forum liefert allerdings selten fertige Lösungen. Deshalb solltest du Felix' Antwort als Grundlage für deine weitere Arbeit sehen. Zum Abschluss möchte ich dich noch auf einen Blogartikel hinweisen, der zeigen soll, dass die Trennung von Inhalt und Design sehr wichtig ist.
Matthias
--
1/z ist kein Blatt Papier.
