Hallo CSS Experten,
ich würd gern die mobile Version (Handy) meine Webseite genaus darstellen wie am Computer-Browser.
Leider hab ich dort ein paar Verunstalltungen, wobei ich nicht weiss von wo diese kommen.
Ich hab die Fehler im PDF beschrieben:
http://www.bestaltmed.at/Memory/SReading.pdfEs soll genauso wie auf der Internetseite aussehen:
www.bestaltmed.at/speed_readingKann mir jemand helfen?
Lg,
Chris
…ich würd gern die mobile Version (Handy) meine Webseite genaus
darstellen wie am Computer-Browser.
Hallo Chris,
ist zu erreichen, wenn die Seite in Respons Design erstellt ist. Hierbei wird die Seite über Mobile Geräte aufgerufen und optimal angezeigt. Auch die Navigation. Im PC Fenster in einer fixen Breite.
Wave
Hallo Wave,
danke für deine AW. Wie kann ich ein Respons Design machen?
Kenn mich mit CSS nicht sogut aus.
Danke,
Chris
…danke für deine AW. Wie kann ich ein Respons Design machen?
In unserer Seite:
http://waveswebdesign.de/referenzen/respons.html
haben wir eine Kurz-Information hierzu eingestellt.
Wave
kann bitte jemand die wirklich sinnlose und unnötige werbung löschen?
Hallo,
ich würd gern die mobile Version (Handy) meine Webseite genaus
darstellen wie am Computer-Browser.
darauf hast du keinen strikten Einfluss, da HTML und CSS gar nicht in der Lage sind, auf unterschiedlichen Geräten, in unterschiedlichen Betriebssystemen, auf unterschiedlichen Viewport-Größen usw. exakt gleiche Darstellungen zu liefern. Jeder Gerätenutzer kann und darf sogar selbst entscheiden, ob er das Layout des Designers verwenden will oder nicht.
Sieh HTML und CSS in deinem Webauftritt als ein Regelwerk aus „Vorschlägen“, wie Inhalte deiner meinung nach strukturiert und angezeigt werden sollen. Was im Viewport des Nutzers damit passiert kann (und wird) immer mal von deinen Ideen abweichen.
Meines Erachtens ist das eine der ersten Regeln, die man beim Webdesign lernen muss: Webseiten sind keine pdf-Printvorlagen, die immer und überall identisch aussehen.
Gruß
A.
Danke für deine AW.
Ich muss leider wiedersprechen man kann CSS Befehle verwenden die am Handy und am Browser gleich dargestellt sind. Ich spreche hier jz nicht von der mobilen Version.
Hallo.
Ich muss leider wiedersprechen man kann CSS Befehle verwenden
die am Handy und am Browser gleich dargestellt sind. Ich
spreche hier jz nicht von der mobilen Version.
Es mag sein, dass du HTML und CSS verwenden kannst, um auf deinem(!) Handy ein scheinbar gleiches Erscheinungsbild zu erhalten. Aber was meinst du dann schon damit? Halte das Handy mal neben deinen PC-Monitor. Sind alle Abmessungen der Darstellungen identisch? Sind die Größenverhältnisse bis ins kleinste Detail gleich? bei einer vollständig gelayouteten Webseite wohl kaum.
Noch großartiger ist aber, dass verschiedene Handys deine Webseite verkleinert darstellen werden, andere wiederum in einer Original-„Pixelmaßgröße“ mit Rollbalken, manche werden die Infos der Seite seriell untereinander setzen, manche die von dir gewünschten Hintergrundbilder nicht darstellen.
Dazu kommt, dass selbst auf zwei baugleichen Handys zwei unterschiedliche User die Browser so konfigurieren können, dass dieselbe Webseite unterschiedlich aussieht. Auch wenn ich in den Firefox-Einstellungen auf einem PC nur die Standardschriftart oder die minimal erlaubte Schriftgröße ändere oder einmal bei gedrückter Strg-Taste das Rollrad der Maus drehe, sieht eine Seite nicht mehr so aus, wie du sie dir vorstellst.
Dieses Verhalten kannst du nie 100%ig beeinflussen und damit solltest du dich abfinden. Diese Dynamik ist ein grundlegendes Feature von HTML/CSS-Präsentationen. Das ist im wesentlichen auch so gewollt, nur wird dieses User-freundliche Feature immer noch nicht in allen Design-Lehr- und -studiengängen diskutiert. Dort meint man oftmals noch, man könne mit HTML und CSS ein überall identisch aussehendes Layout bauen, dabei gibt es 1000e Kombinationen von Betriebssystemen, Viewportgrößen, Browserprogrammen und deren Konfigurationen. Ganz zu schweigen von Blocker-Addons wie AdBlockPlus oder ähnlichem.
Also: Die Browser machen von sich aus schon in Teilen darstellerische Unterschiede. Ich selbst kann mit der Konfiguration des Browsers für weitere darstellerische Unterschiede sorgen. Wenn ein designtes Layout nervt, kann mein Browser es für mich vollständig deaktivieren, und wenn mich eine Info-Box in deiner Webauftritt stört, schmeißt AdBlock sie für mich raus und sie ist weg - und zwar für immer.
Wie willst du verhindern, was auf Browserseite passiert? Es gib sogar Browser, die können(!) gar keine grafische Darstellung. Stichwort Lynx.
HTML/CSS liefert keine(!) starre Ausgabe wie z.B. eine pdf-Druckseite. Was auf Userseite passiert, hast du nur dann in der Hand, wenn du selbst der einzige User bist.
Gruß
A.
Danke jz versteh ich was du meinst.
Allerdings muss es ja auch nicht für jeden Handybrowser passen.
Es sollte halt passen für die Browser iphone 4 und Samsung.
Die Größen wären da mehr 2 rangig, jedoch sollte dass Layout passen.
Also die Webseite ( www.bestaltmed.at/speed_reading ) sollte am Handy genauso wie im Safari, Firefox, Google chrome aussehen.
Allerdings verschieben sich die verschiedenen Frames, sowie hier beschrieben:
http://www.bestaltmed.at/Memory/SReading.pdf
Ich kenn mich allerdings zuwenig aus um den CSS Code richtig zu stellen.
Lg,
Chris
Hallo.
Also die Webseite ( www.bestaltmed.at/speed_reading ) sollte
am Handy genauso wie im Safari, Firefox, Google chrome
aussehen.
Allerdings verschieben sich die verschiedenen Frames, sowie
hier beschrieben:
http://www.bestaltmed.at/Memory/SReading.pdf
Tja, und da gibt’s doch schon das erste Problem. Schon in meinem Firefox sieht die Seite ganz anders aus als du es in der PDF-Datei beschreibst.
Vor(!) dem Block der blauen Felder rechts vom Videobereich liegen bei mir die Eingabefelder für Benutzername und Kennwort sowie das Anhakfeld „Remember me“, der Loginschalter und die Hyperlinks „Register“ und „Lost Password“.
Ich schätze, dein gesamtes Seitendesign ist problematisch. Das Design ist optisch eigentlich recht schlicht, aber du hast einen Riesenbatzen CSS-Regeln in den CSS-Dateien stecken. Dann ist fast die Hälfte deines HTML-Quelltexts mit JavaScript vollgepackt, das u. a. auch die Anzeige verändert.
Da ist schwer durchzukommen und es ist meines Erachtens gar kein Wunder, dass es auf unterschiedlichen Ausgabegeräten zu schwerwiegenderen Effekten kommt.
Mein Tipp:
Quelltexte (HTML und CSS) ausdünnen und auf das beschränken, was man tatsächlich braucht. Ich persönlich würde auch auf den JavaScript-Code soweit wie möglich verzichten.
Gruß
A.
Hallo.
http://wiki.selfhtml.org/wiki/CSS/Media_Queries
bist du dir sicher, das css das nicht kann?
Ja, ganz sicher.
Sobald man beginnt, ein „schickes“ Design jenseits der linearen Standardausgaben zu stricken, also Bereiche positionieren und mit Größenvorgaben versehen will, wird es unmöglich, die tatsächliche Darstellung auf den Endgeräten zu steuern. Das eigene Designwerk ist immer nur ein Vorschlag(!), wie es aussehen soll.
Und selbst bei den o.g. linearen Inhalten ohne besondere Positionierungen kann bei unterschiedlichen Betrachtern verschiedene Ansichten herauskommen, z.B. in welcher Schriftart und -größe die Inhalte angezeigt werden, ob Überschriften doppelte Schriftgröße haben oder einfach nur fett gezeigt werden usw.
Von mir aus: Nenne mir eine Webseite, die angeblich bei allen Internetusern gleich aussieht, und ich nenne dir die Unterschiede, die ich als ein einzelner Internetuser schon auf unterschiedlichen Browsern und Geräten entdecke.
Gruß
A.
