Vorschau zeigt 1920px-Variante nicht; Seitenaufbau One-Page-Website

ChrisMusic schrieb am 04.06.2020 um 13:46 Uhr

Hallo,

ich hätte zwei Fragen:

1. kann es sein, daß die eingebaute Website-Vorschau des WD (17 Premium) nur Varianten mit höchstens der Seitenbreite des Monitors darstellen kann, auf der die Website-Vorschau dargestellt wird?

Ich weiß, daß man Varianten, die eine kleinere Seitenbreite haben als der verwendete Monitor, einfach durch das Verkleinern des Vorschau- (oder Browser-) Fensters darstellen kann, aber gibt es umgekehrt auch eine Möglichkeit, eine größere Seite in der WD-Vorschau (oder Browser) darzustellen? Ich weiß gar nicht, wie viel Pixel mein treuer Asbach-Uralt-Montitor (B37,5xH30cm) darstellen kann, aber mit der von mir angelegten 1920-Pixel-Variante ist er defintiv überfordert...

Und falls es hier keinen Workaround für die WD-Vorschau geben sollte: meines Wissens gibt es doch Seiten, auf denen man Webseiten in verschiedenen gängige Monitor- und Smartphone-Formaten anzeigen lassen kann. Welche würdet Ihr empfehlen?

2. Meine One-Page-Seite (aktuell hier in der Baustellen-Version geparkt) scheint sich recht langsam aufzubauen. Gibt es hier noch einen von mir unentdeckten Trick oder eine Einstellung im WD, um die Ladezeiten etwas zu erhöhen?

Und: gibt es in WD eine Möglichkeit, die ungefähre Ladezeit der erstellten Website bei verschiedenen Internet-Verbindungsgeschwindigkeiten anzeigen zu lassen? Das gute alte FrontPage hatte sowas meiner Erinnerung nach im Arbeitsfenster eingeblendet.

LG

Chris

Kommentare

marboe schrieb am 04.06.2020 um 14:06 Uhr

kann es sein, daß die eingebaute Website-Vorschau des WD (17 Premium) nur Varianten mit höchstens der Seitenbreite des Monitors darstellen kann, auf der die Website-Vorschau dargestellt wird?

Nein. Maßgeblich ist dein Monitor. Der WD nutzt eine abgespeckte IE-Variante. Und selbstredend kannst du ja einige andere Browser ausprobieren. Dazu musst du sie nur ausgehend von der Vorschau aus anklicken.

Und dort in Chrome oder FireFox kannst du zB auch Bildschirmgrößen simulieren. Hilfe dazu findest du dort in den Supportseiten des Browsers oder in den Developereinstellungen. gruß marboe

ChrisMusic schrieb am 04.06.2020 um 14:30 Uhr

Hi marboe,

danke für die schnelle Antwort. Irgendein Tipp, wo ich das z. B. bei Chrome konkret aufrufen kann? Ich kann mich dunkel erinnern, mir das dort irgendwann schon mal angeschaut zu haben, aber über die Entwicklertools und Hilfe habe ich es nicht gefunden. Und wenn mich mein Gedächtnis nicht trügt, wurden da ohnehin nur zwar zahlreiche mobile Endgeräte, aber kaum PC-Monitorgrößen berücksichtigt...

Ebenso dunkel habe ich noch in Erinnerung, daß es da ein paar Websites gab, wo man nur die URL eingeben mußte, und schon wurde deren Inhalt in vielen verschiedenen Formaten dargestellt. Ich hab mal gegoogelt, aber entweder waren die Websites nicht mehr online oder es wurde nur ein einziges PC-Monitor-Format (meist 1024 px Breite) angezeigt. Ich brauche aber 1090px Breite... Irgendein Tipp diesbezüglich?

BeRo schrieb am 04.06.2020 um 15:14 Uhr

[...] brauche aber 1090px Breite... Irgendein Tipp diesbezüglich?

Wie der Seitenaufbau einer Website auf unterschiedlich großen Monitoren (Browserfester Größen) aussehen kann, das kannst Du ganz einfach simulieren, wenn Du die Zoomstufen änderst. Das geht mit den Tastenkombinationen "STRG und +" = Zoom in, bzw. mit "STRG und -" = Zoom out.

Du hast dann zwar keine direkte Info über die Größe des simulierten Monitors, der Seitenaufbau wird aber selbst für gigantische Monitor Auflösungen ganz einfach sichtbar...

   

Zuletzt geändert von BeRo am 04.06.2020, 15:37, insgesamt 1-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

ChrisMusic schrieb am 04.06.2020 um 20:23 Uhr

BeRo, you're my hero! Verneigung vor dem Meister!!! Genialer Tipp, und so einfach und praktisch! Und wie bei allen genialen Tipps fragt man sich hinterher, weshalb man auf sowas geniales aber einfaches nicht selbst gekommen ist...! (Was die Genialität des Tipps sogar noch verdeutlicht!)

Damit ist meine Frage 1 prima beantwortet, danke!!!

Hat jemand noch eine gute Antwort auf meine Frage 2? Vielleicht auch sowas genial einfaches wie die Zoom-Ansicht à la BeRo?

BeRo schrieb am 04.06.2020 um 23:12 Uhr

[...] Gibt es hier noch einen von mir unentdeckten Trick oder eine Einstellung im WD, um die Ladezeiten etwas zu erhöhen? [...]

Aber ja, Du musst dazu nur noch ein paar Bild "Schwergewichte" einfügen, dann wird die Ladezeit schnell gegen unendlich gehen... 😀

In der o. a. (nicht ernst gemeinten) Antwort findest Du die Lösung zu Deinem Problem, das tatsächlich in deutlich zu "dicken" Bild Dateien begründet ist.

Alleine 11 (PNG komprimierte) Dateien belegen schon ca. 8 MB an Speicher

Die für die Bild Dateien verwendete Auflösung (Px) ist deutlich zu hoch. Du wirst die Ladezeit drastisch verkürzen, wenn Du die Bilder im JPG Format anlegst und die Auflösung verringerst.
So kann das an einem Beispiel aussehen:

 

Die geringere Auflösung wirst Du auf einem Bildschirm, der i. d. R. nicht mehr als 96 dpi darstellt, kaum bemerken.
Experimentier' ein bisschen mit unterschiedlichen Auflösungen, dann bekommst du schnell ein Gefühl für die "richtigen" Werte...

Zuletzt geändert von BeRo am 04.06.2020, 23:28, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

ChrisMusic schrieb am 05.06.2020 um 00:11 Uhr

Hi BeRo,

ja, genau, Ladezeit erhöhen war genau meine Absicht! 😁 Da sieht man mal wieder, wie wichtig es ist, die Posts vor dem Abschicken nochmal gegenzulesen! Und wie falsch man (in diesem Falle ich) in der Sache liegen kann. Ich war immer davon ausgegangen, daß der WD automatisch alle importierten Bilder optimiert und in der Auflösung an die Größe der einzelnen Varianten anpasst, sodaß das Bild immer in der idealen - will heißen: ladezeitoptimiertesten - Auflösung geladen wird.

Ulkigerweise war ich sogar ganz fest dieser Überzeugung, weil ich meinte, mich daran erinnern zu können, sowas ziemlich eindeutig im Handbuch zum WD 17 Premium gelesen zu haben! Ich hatte mir das eingeprägt, weil ich das als ein ganz besonders vorteilhaftes Feature dieser Software empfand und auch ganz happy darüber war.

Sollte ich mich derart verlesen haben?? Ein Fall von Wishful thinking?

Hm. Na, jedenfalls vielen lieben Dank für die prima Hinweise, die ich mir natürlich zu Herzen nehmen werde. Tatsächlich habe ich immer ziemlich sorglos und fröhlich einfach alles an Bildern und Grafiken reinimportiert, ohne mir irgendwelche Gedanken über deren Dateityp oder deren Auflösung und damit deren Größe zu machen. War offensichtlich ein Fehler.

Nun noch eine praktische Frage zur sinnvollen Anlage der Bildgröße. Ich habe ja vier Varianten in meiner Website angelegt, nämlich 480, 760, 1090 und 1920 px. Sollte ich nun die Bilder als JPEGs in genau diesen Bildbreiten anlegen, oder doch lieber jeweils etwas breiter? Ich hatte die Angaben im Handbuch so verstanden, daß zum Beispiel ein Bild für eine mit 1090px angelegte Variante auf Monitoren von 925 bis 1505px Bildschirmbreite korrekt dargestellt wird, da das Bild bei Monitorgrößen unter 1090 verkleinert und bei Größen über 1090 (bis zu maximal 1505) vergrößert dargestellt wird. Dann müßte ich doch sicherheitshalber für die 1090er-Variante ein Bild mit 1505px Bildbreite verwenden, damit es auch bei der maximal möglichen Vergrößerung von 1505px korrekt und scharf genau dargestellt wird, richtig? Oder habe ich da einen Denkfehler?

LG,

Chris

BeRo schrieb am 05.06.2020 um 00:48 Uhr

[...] Nun noch eine praktische Frage zur sinnvollen Anlage der Bildgröße. Ich habe ja vier Varianten in meiner Website angelegt, nämlich 480, 760, 1090 und 1920 px. Sollte ich nun die Bilder als JPEGs in genau diesen Bildbreiten anlegen, oder doch lieber jeweils etwas breiter? [...]

Wenn Du keine seitenfüllenden Hintergrundbilder für das Browser Fenster anlegen willst, dann kannst Du große Bilder durchaus auf die jeweilige Seitenbreite (480, 760, 1090 und 1920) beschränken. Sie müssen nicht größer sein.

Der Wechsel zwischen den Varianten erfolgt auf Desktop Geräten immer genau am Breakpoint, also bei 50% der Differenz zwischen 2 benachbarten Seitenbreiten.
Die Seitendarstellung wird bei Zwischengrößen i. d. R. nicht automatisch angepasst. Das heißt, dass die Seite entweder mit einem horizontalen Scrollbalken- oder mit seitlich sichtbaren Rändern in der Hintergrundfarbe dargestellt wird, wenn die Seitenbreite von der nächsten, eingestellten Variante um weniger als 50% der Differenz abweicht.

Eine automatische, weiche Vergrößerung/Verkleinerung der jeweils angezeigten Seitenbreiten zwischen den Varianten kannst Du erreichen, wenn Du die Option "Adaptive Seitenanpassung" aktivierst.

<del>Aber Achtung, die Option bringt ein paar Einschränkungen "Fallstricke" bei der Anzeige der Seiten mit, weil hier gleichzeitig die Option "Seiteneffekt Website" aktiv sein muss.</del>
Probier's einfach mal aus...

Edit: 13:15 h

Wie @marboe in ihrem Kommentar von heute, 07:11 h richtig angemerkt hat, ist die Seiteneffekt Option tatsächlich nicht zwangsweise aktiv, wenn die "Adaptive Seitenanpassung" aktiviert wird. Insofern also Entwarnung... 🙃

Zuletzt geändert von BeRo am 05.06.2020, 13:15, insgesamt 2-mal geändert.

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

marboe schrieb am 05.06.2020 um 07:11 Uhr

Aber Achtung, die Option bringt ein paar Einschränkungen "Fallstricke" bei der Anzeige der Seiten mit, weil hier gleichzeitig die Option "Seiteneffekt Website" aktiv sein muss.

Nein.

Ich fahre bisher sehr gut mit dieser Einstellung:

Es wird innerhalb meiner drei Varianten je nach Browsergröße der Inhalt gezoomt - bis die neue Variante einrastet.

 

Wie der Seitenaufbau einer Website auf unterschiedlich großen Monitoren (Browserfester Größen) aussehen kann, das kannst Du ganz einfach simulieren, wenn Du die Zoomstufen änderst. Das geht mit den Tastenkombinationen "STRG und +" = Zoom in, bzw. mit "STRG und -" = Zoom out.

Das macht imho nur Sinn, wenn man eine einzige Variante hat. Sobald man mehrere hat, nicht mehr, da nur die ursprüngliche geladene Variante im Fenster gezoomt wird.

 

Ulkigerweise war ich sogar ganz fest dieser Überzeugung, weil ich meinte, mich daran erinnern zu können, sowas ziemlich eindeutig im Handbuch zum WD 17 Premium gelesen zu haben! Ich hatte mir das eingeprägt, weil ich das als ein ganz besonders vorteilhaftes Feature dieser Software empfand und auch ganz happy darüber war.

Sollte ich mich derart verlesen haben?? Ein Fall von Wishful thinking?

Nein, da hast du dich nicht verlesen.

Du findest dieses globale Feature unter:

Du musst auch nicht für jede Variante eigene Bilder erstellen. Das kann der WD schon alleine.
Er legt automatisch Bildvarianten in allen drei Variantengrößen an um die Ladezeit zu optimieren. Einfach ein geteiltes Bild erstellen bzw geschieht dies beim Varianteerstellen automatisch, wenn das Bild schon vorhanden war.
Gruß Marboe

 

marboe schrieb am 05.06.2020 um 07:30 Uhr

Ich liefere dir hier auch gern noch ein paar Fotos zu den Bildern

Desktopversion im WD

veröffentlichte Größe der Bilder

 

Variante für Smartphone erstellt

Die automatisch in der Smartphoneseite erscheinenden Bilder auf eine angenehme Größe geändert.

Veröffentlicht - hier abgebildet im verkleinerten Browserfenster. Es sind also die Smartphonebilder.

 

Im index_htm_Ordner sieht das Ganze so aus - völlig automatisch vom WD so erstellt:

Rot umrahmt siehst du hier die Bilder der Smartphone-Variante. Der WD hat also 4 Bilder selbst gespeichert. Die Benennung @2.jpg kommt zustande, wenn die Erstellung von Retina-Bildern eingestellt ist. Bild 1+2 gehören zur Desktopseite; Bild 3+4 zur Smartphoneseite.
Daraus kannst du ableiten, dass alle Bilder automatisch in geeigneter Größe vom WD für den User vorgehalten werden.

Unabhängig davon ist es schön zu wissen, dass dies nicht deine reine Projektdatei belastet. Hier speichert der WD nur das Bild einmal und eine Notiz welche Veränderungen daran an anderen Stellen vorgenommen wurden. Dies stellt er bei Bedarf aus dem Originalbild schnell wieder her. Deine Projektdatei wird also nicht belastet durch das Erstellen von vielen Varianten mit vielen Bildern; sie bleibt recht klein. Gruß Marboe

 

Ergänzung:

Mein Fazit für deine Fragen wäre also:

- lasse alle Bilder auf 96 dpi optimieren
- Binde das Bild einmal auf der größten Variante in guter Optik ein (das wird wohl Desktop sein). Hintergrundbilder dürfen natürlich ein wenig breiter sein als reine Bilder auf der Seite. In deinem Fall bietet sich ca 1600 oder 1900 px an, da du ja für große Bildschirme optimierst. Teile diese Bilder und alles wird automatisch gut. 😁
Es ist dabei egal, ob du von einem Hintergrundbild in Pastebord Background ausgehst, oder von üblichen normalen Bildern im Text oder einem Header usw.

Dass geteilte Bilder dann in den Varianten noch in der Größe angepasst werden können, ist klar. Aber du solltest kein zusätzliches Bild dafür einbinden; denn dann werden noch mehr Bilder exportiert und somit auch beim User geladen.

BeRo schrieb am 05.06.2020 um 13:25 Uhr

@marboe

[...] Das macht imho nur Sinn, wenn man eine einzige Variante hat. Sobald man mehrere hat, nicht mehr, da nur die ursprüngliche geladene Variante im Fenster gezoomt wird. [...]

Einspruch, Euer Ehren! 😇

Wenn Du mehrmals die Tastenkombination für zoom-in oder zoom-out drückst, siehst Du alle angelegten Vrianten nacheinander. Du musst nur fleißig drücken... 😚

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

ChrisMusic schrieb am 06.06.2020 um 14:03 Uhr

Hallo BeRo und marboe,

vielen herzlichen Dank für Eure interessanten Hinweise und für den Aufwand, den Ihr dabei selbstloserweise treibt! Echt toll!

Ich hatte schon an meinem Verstand (naja, zumindest an meinem Erinnerungsvermögen) gezweifelt, weil ich mir so sicher war gelesen zu haben, daß die Anpassung importierter Bilder an die verschiedenen angelegten Varianten durch den WD automatisch geschieht. Da ich mich als ziemlicher Laie jedoch nicht zutraue, mich in Eure Expertendiskussion einzumischen, denke ich, es gibt wie so oft auch hier viele verschiedene Wege nach Rom. Und genauso wie bei physischen Wegen kommt es vermutlich auch bei technischen Lösungswegen immer auch darauf an, welche Mittel, Vorkenntnisse und Kondition der Betreffende zur Verfügung hat, sodaß jeder Weg für einen anderen "Wanderer" ideal ist. Soweit jedenfalls meine kleine laienhafte Theorie... 🙂

So ganz verstehe ich zwar noch nicht, weshalb es dann überhaupt noch der Bilder-Optimierungs-Funktion bedarf. Oder ist die deshalb unverzichtbar, weil bei der automatischen Optimierung durch den WD beim Teilen mit Varianten immer standardmäßig 192 DPI verwendet wird, wie mich der bei der Optimierungs-Funktion als Default voreingestellte Wert von 192 DPI vermuten läßt, und man dem Benutzer einfach die Möglichkeit geben will, mittels dieser Funktion auch mit anderen DPI-Einstellungen zu optimieren?

BeRo scheint mir mit der Zoom-Möglichkeit tatsächlich einen prima Weg aufgezeigt zu haben, auch solche Varianten, die größer sind als der Monitor auf dem der Browser läuft, anzuzeigen. Bei mir hats funktioniert. Ist natürlich nur ein Workaround - nichts geht über die Darstellung auf einem entsprechend großen, gut kalibrierten Monitor, zumal man auch nur dann ein echtes "Feeling" für die Darstellung des Layouts bekommt. Dazu gehören ja auch solche Parameter wie der tatsächliche Abstand des Betrachters zum Monitor, und das ist mit der Zoom-Darstellung nur begrenzt simulierbar.

Jetzt hätte ich noch folgende Dinge auf dem Herzen:

1. Die Optimierung aller Bilder sollte man doch sicher erst ganz am Ende des Einbindungsprozesses aller Bilder in allen Varianten durchführen, oder? Oder macht es nichts, wenn man vorher schon mal in den einzelnen Varianten verschiedene Bilder einzeln optimiert hat? Ich vermute mal, die "Alle Bilder Optimieren"-Funktion überschreibt am Ende auch alle zuvor an einzelnen Bildern individuell durchgeführten Optimierungen, oder?
Und: der korrekte DPI-Wert ist auch bei der Einstellung 96 DPI, richtig?

2. Ich hadere ehrlich gesagt noch ziemlich mit der "In allen Varianten teilen"-Funktion. Bei Bildern funktioniert das gut, aber bei anderen Elementen mußte ich schon wiederholt feststellen, daß ich nach dem Verändern der geteilten Elemente in einer Variante in eine andere Variante wechsele, und siehe da, auch dort hat sich das Element verändert! Das ist nervig, denn dann habe ich ja noch mehr Arbeit, weil ich nach dem Anpassen eines Elements in einer Variante immer auch nochmal in den anderen Varianten nachschauen muß, ob sich das gleiche Element auch dort verändert hat (und es ggf. anpassen). Wenn ich das mit dem In-Varianten-teilen richtig verstanden habe, sollte doch genau das eigentlich nicht passieren. Oder habe ich hier irgendwas Wesentliches übersehen bzw. irgendeine Einstellung mißachtet?

3. Aufgrund meiner Frustration mit Punkt 2 bin ich dazu übergegangen, immer einfach einen Teil der Elemente (Bilder, Grafiken, Texte usw.) in der bereits fertigen Variante "einzufangen", zu kopieren, in die noch in Bearbeitung befindliche Variante einzufügen und dann die einzelnen Elemente in das Layout der Baustellen-Variante einzubauen. Das scheint tadellos zu funktionieren und letztlich ist das im Grunde das Gleiche wie beim Teilen, nur daß man später nicht von der automatisierten Synchronisierung geteilter Elemente bei Veränderung in einer Variante profitieren kann (was in meinem Fall aber zu vernachlässigen ist, da ich nicht viele Veränderungen erwarte). Oder gibt es bei dieser Vorgehensweise sonst noch irgendeinen monumentalen Nachteil, an den ich nicht gedacht habe?

4. Die Einstellung mit der "adaptiven Seitenanpassung" ist prima und funktioniert auch gut. Ich habe aber irgendwie das Gefühl, daß in der Browseransicht immer dann, wenn ein Bild beim Fenster-Erweitern automatisch vergrößert wird, um das Browserfenster bis zur nächstgrößeren Variante auszufüllen, die Bildqualität etwas flauer wird. Was irgendwie Sinn macht, denn das Bild ist ja schließlich für eine bestimmte Bildschirmbreite optimiert, sodaß es bei der Vergrößerung zwangsläufig etwas "verpixeln" muss. Ich bin mir nur selber nicht sicher, ob mich das wirklich stört, oder ob ich da einfach zu viel Perfektionismus an den Tag lege. Ich tendiere im Zweifelsfall dazu, diese Funktion lieber auszulassen und mit den sich in der Breite veränderten Bildschirmhintergründen rechts und links vom Website-Inhalt zu leben, was ja gar nicht so schlecht aussieht.
Wie seht Ihr das?

5. Für E-Mail-Links gibt es bekanntlich - sowohl für Smartphone- als auch PC-Varianten - die Mailto-Linkfunktion, d. h. beim Klicken auf den Link öffnet automatisch sich das Mailprogramm. Kann man es eigentlich auch irgendwie hinbekommen, daß sich beim Klick auf einen Telefon-Link im Bereich "Kontakt" (bei meiner noch im Aufbau befindlichen Smartphone-Variante wäre das hier) automatisch die Telefonfunktion anspringt und auch gleich die Telefonnummer zum Anwählen ins Display übernimmt? Und gibt es sowas auch für WhatsApp, sodaß sich beim Klick auf den Link in "Kontakte" automatisch WhatsApp öffnet? Wäre toll, wenn ja. Wenn nicht, ist aber auch kein Problem.

6. Wie kann man verhindern, daß die Links immer unterstrichen dargestellt werden? Die häßliche Linkfarbe kann man ja im Link-Dialog ausschalten, aber für die Unterstreichungen habe ich nichts gefunden...

LG

Chris

marboe schrieb am 06.06.2020 um 16:59 Uhr

So viele Fragen auf einmal...

https://wa.me/49176xxxxxx und

tel:+49176123456 als Link setzen unter Webeinstellungen.

 

Bilder werden nur einmal auf 96dpi bzw 192 optimiert, egal wie oft du die Optimierung durch laufen lässt.

 

Für den Rest empfehle ich : https://www.magix.info/de/tutorials/varianten-geteilter-text-mobile-navileisten--1231669/

Gruß Marboe

ChrisMusic schrieb am 08.06.2020 um 11:02 Uhr

Hi marboe,

ja, das haste recht, sechs Fragen auf einen Schlag sind tatsächlich etwas viel, sorry! Muß wohl an meinem hohen Motivationslevel liegen! 😌

Danke für Deine sehr guten Hinweise bezüglich WhatsApp- und Telefon-Links für die Smartphone-Version, hat super geklappt!

Jetzt habe ich alles auf 96 DPI optimiert (und nötigenfalls, bzw. so weit möglich, von PNG zu JPEG konvertiert), aber ehrlich gesagt scheine ich von einer schnell und flüssig geladenen Website noch weit entfernt zu sein. Egal welche Variante ich betrachte, es dauert einfach ewig, bis sich alles aufbaut. Habe ich da was falsch gemacht oder sollte ich mich einfach von dem Gedanken der One-Page-Website verabschieden und doch wieder die klassische Einzelseitenstruktur verwenden? Nur, was machen die Betreiber anderer One-Pagers denn bloss besser als ich? Oder sind 11 Bilder einfach zu viel für eine One-Page-Website?

LG

Chris

marboe schrieb am 08.06.2020 um 11:45 Uhr

Elf Bilder sind nicht zu viel.

Was ladeintensiv ist, dass ist der Einbau von Effekten aller Art. Und natürlich ist es ein erheblicher Unterschied, ob eine einzige Seite geladen wird, oder alle auf einmal.

Was andere Programmierer hier anders machen, müsste man analysieren. Vermutlich sparsam designen. Das fängt beim Nutzen weniger Formatvorlagen an und hört bei Bildern auf.
Die Bilder als jpg zu nutzen, ist auf jeden Fall klug. Sollte dir der WD aber bei Kreuz bei "automatisch" die Bilder selbst als png speichern, dann hast du was zusätzlich eingestellt (was auch wieder Ladezeit kostet). Das kann ein Schatten sein, eine Transparenz, eine Animation usw. Machst du das nicht, wird es von Hause aus als jpg gespeichert. Hier könntest du also auch nochmal genauer schauen.

Möglicherweise ist die Ladezeit aber nur bei dir schlecht? Das müsstest du dann mal testen. Du kannst auch gern den fertigen Link hier mal einstellen. Gruß Marboe

marboe schrieb am 08.06.2020 um 11:49 Uhr

Ich ergänze: ich hab den Link gefunden.

Rufe ich die Seite mit meinem 15´er Bildschirm auf, dann werde ich erschlagen. Nutzerfreundlich wäre ein ruhigeres Bild mit angepassten Größen der Bilder und Texte. Also mit anderen Worten: Varianten.

So sehe ich die Seite bei Aufruf.

Du verwendest vier Schriftarten. Das könnte man sicher noch lese- und ladefreundlicher machen.

Hier eine Laufzeitanalyse bei ausgeschaltetem Chache. Deine Seite brauchte bei mir 57 ms; das ist nicht exorbitant viel.
Allerdings fehlt noch ein Favicon; zu sehen am 404er Hinweis. Gruß Marboe

BeRo schrieb am 08.06.2020 um 13:12 Uhr

[...] ehrlich gesagt scheine ich von einer schnell und flüssig geladenen Website noch weit entfernt zu sein [...]

Das siehst Du richtig...
Wenn man dem Chrome Browser glauben darf, der offenbar eine noch bessere Analyse der Ladezeit anbietet als der Firefox, dann benötigt Deine Site über eine schnelle DSL Verbindung 4,38 Sekunden für den Download von ca. 23 MB Seiteninhalt.
Mobil, also bei einer 2-3G Verbindung wird das deutlich schlechter aussehen.

Auffällig ist hier (immer noch) der ca. 10MB große Anteil an Bildern im PNG Format...

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

ChrisMusic schrieb am 09.06.2020 um 21:27 Uhr

Hi BeRo,

ehrlich gesagt blicke ich beim WD echt nicht mehr durch.

Wie kann das sein? - Ich importiere ein GIF von 400x384px (Größe: 64,8 KB), baue es in die größte Variante ein (ohne es zu vergrößern), teile es mit den anderen, kleineren Varianten (jeweils entsprechend verkleinert natürlich), veröffentliche alles, und am Ende finde ich im Ordner index_htm_files das GIF als PNG in der Größe 474x462px und einer Größe von gut 200 KB wieder (hier)! Das ist mehr als dreimal so groß wie die Ursprungsgrafik!

Also jetzt wundert es mich nicht, daß die Seite so lange lädt!

Inzwischen habe ich zwar mühevoll alle reinen Fotos wieder in JPEGs zurückverwandelt (weiß der Teufel, weshalb der WD diese überhaupt - und auch nur einige davon! - in PNGs umgewandelt hat...), aber die Grafiken werden allesamt vom WD stur in PNGs umgewandelt, aber nicht so, daß sie von der Dateigröße her kleiner werden, sondern größer.

Wie ist das eigentlich, akzeptiert der WD immer nur PNGs als Webgrafiken? GIFs sind doch meist viel "schlanker" und eignen sich doch prima zum Einbinden in Webseiten, oder?

LG

Chris

PS: Ach ja, habe die Seite jetzt auch hier eingestellt.

marboe schrieb am 09.06.2020 um 22:43 Uhr

8.6. 10:45 Uhr
Die Bilder als jpg zu nutzen, ist auf jeden Fall klug. Sollte dir der WD aber bei Kreuz bei "automatisch" die Bilder selbst als png speichern, dann hast du was zusätzlich eingestellt (was auch wieder Ladezeit kostet). Das kann ein Schatten sein, eine Transparenz, eine Animation usw. Machst du das nicht, wird es von Hause aus als jpg gespeichert. Hier könntest du also auch nochmal genauer schauen.

Das ist doch schon erörtert worden. Doppelt muss man das nicht erklären.

Gif ist sicher auch möglich, jpg hat aber die größere Kompression. Deswegen wandelt der WD dieses Format auch um.

Was du vll noch nutzen kannst, ist das importieren als svg. Gruß Marboe

 

BeRo schrieb am 09.06.2020 um 23:33 Uhr

Das Ergebnis Deiner Bemühungen ist deutlich sichtbar... 👍

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

ChrisMusic schrieb am 10.06.2020 um 18:01 Uhr

@marboe: Danke für den erneuten Hinweis. Beim ersten Durchlesen hatte ich das gar nicht verstanden (war wahrscheinlich wieder mal spät am Abend 😞).
Bist Du sicher, daß es nur eines Schattens oder einer Transparenz bedarf, damit der WD ein ansonsten als JPEG zu exportierendes Bild trotzdem als PNG exportiert? (Wow, dann habe ich ein Problem. Ich liebe Schatten und Transparenzen im Design...)
Wenn ja: kann ich das durch Anhaken der Option "JPEG" in "Dateityp für Webbilder" in "Webeigenschaften" sicher ausschließen oder macht der WD dann trotzdem ein PNG draus?

Wie ist das eigentlich grundsätzlich mit dem "Webeigenschaften"-Dialog? Auf den ersten Blick kommt er ja wie ein Dialog für "allgemeine Einstellungen" daher, d.h. die dort angehakten Optionen scheinen für alle Seiten, alle Varianten usw. im aktuellen Webprojekt zu gelten. Andererseits ist gerade der "Bild"-Reiter komplett ausgegraut, wenn man ihn aufruft, ohne ein Bild vorher markiert zu haben. Was dann wieder eher darauf hinweist, daß die dort gemachten Einstellungen sich nur auf ein konkret markiertes Objekt beziehen. Wie ist es denn nun?

Weiterhin ratlos bin ich bei der Frage, weshalb der WD aus relativ kleinen Grafik-Importen (GIF, PNG oder was auch immer) teilweise viel größere Grafiken produziert. Irgendeine Idee diesbezüglich? Vielleicht irgendeine grundlegende Einstellung im Programm, die ich übersehen habe?


@BeRo: Danke, ich versuche mein Bestes... 😊
Ich muß aber zugeben, daß ich am Ende manchmal selber nicht mehr weiß, was ich eigentlich alles gemacht habe, um dahin zu kommen wo ich bin. Man versucht so vieles und merkt sich nicht immer den beschrittenen Lösungsweg im Detail.
Ich wäre aber in jedem Fall nicht annähernd soweit gekommen ohne Deine bzw. Eure diversen guten Ratschläge!

Ganz allgemein muß ich aber konstatieren, daß man sich als Nicht-Profi (wie ich), der den WD nur als praktisches Tool zum möglichst einfachen, schnellen Erstellen einer schlichten Website nutzt und der sich nicht so in die Materie einarbeiten will wie Ihr das offenbar (und bewundernswerterweise) begeistert tut, leicht einem grundsätzlichen Irrtum unterliegen kann. Nämlich daß der WD im Hintergrund alles perfekt optimiert und man sich um rein gar nichts kümmern braucht, was "unter der Haube" passiert. Ein Irrtum, dem man leicht unterliegen kann, denn die Werbung und auch vieles im Handbuch stellt es so dar. Magix kann man hier keinen größeren Vorwurf machen, immerhin bleibt der WD trotz allem ein günstiges, prima Programm, mit dem man viel machen kann, und man darf auch nicht vergessen, wie komplex diese Materie nun mal ist. Nicht ohne Grund verlangen professionelle Webdesigner einen Haufen Kohle für ihre Arbeit...
Ich will damit nur sagen (gerichtet vor allem an Anfänger, die das hier vielleicht lesen), daß man gut daran tut, eine mittels des WD gestaltete Seite - unter anderem mithilfe der Tipps in diesem Forum - auf bestimmte technische Parameter abzuklopfen, bevor man sie der Öffentlichkeit darbietet.

Die Schnelligkeit des Seitenaufbaus ist hier ein wichtiges Thema. Ich habe durch dieses Forum viel gelernt, nochmals Dankeschön dafür an alle Beteiligten!!!

Schließlich noch eine grundsätzliche Frage in die illustre Runde zum Thema One-Pager:

Denkt Ihr, es macht überhaupt Sinn, eine Website als One-Pager zu gestalten? Diese Designart hat ja in der letzten Zeit große Verbreitung gefunden, und sie scheint sich gerade für Websites wie meine, bei der nicht besonders viel Information vermittelt werden muß, anzubieten.
Andererseits scheint es schwer zu sein, sowas mit halbwegs akzeptablen Ladezeiten hinzubekommen. Ich schwitze nun schon tagelang an diesem Problem, und sie scheint mir immer noch viel zu lahm zu sein. Ich las mal irgendwo, daß 80% aller Nutzer abspringen, wenn eine Seite mehr als 4 oder 5 Sekunden lädt. Na dann gute Nacht bei einer Seite wie meiner...

Oder gibt es vielleicht irgendeinen genialen Trick (Script o. Ä.), mit dem man den Brwoser anweisen kann, das oberste Bild und die damit verbundenen Elemente zuerst zu laden und erst dann gemütlich die restlichen Bilder und Objekte? Dann wäre zumindest der schlimmste Druck raus...

LG

Chris

marboe schrieb am 10.06.2020 um 19:45 Uhr

Für die Darstellung von Transparenzen ist ein Alphakanal nötig. Das kann innerhalb des WD nur das png Format. Deswegen muss der WD ein solches Bild als png abspeichern.

Gruß Marboe

BeRo schrieb am 10.06.2020 um 23:43 Uhr

[...] Denkt Ihr, es macht überhaupt Sinn, eine Website als One-Pager zu gestalten? [...]

Ja, das macht Sinn, wenn Dir der optische Effekt wichtig ist... 🙃
Bei Licht besehen hat das Format ja auch Nachteile, die Du teilweise schon entdeckt hast. 😊

[...] gibt es vielleicht irgendeinen genialen Trick (Script o. Ä.), mit dem man den Brwoser anweisen kann, das oberste Bild und die damit verbundenen Elemente zuerst zu laden [...]

Das könntest Du realisieren, wenn Du die Website mit einem echten HTML Editor aufbauen würdest, weil Du dann direkten Einfluss auf den HTML Code- und damit auf die Struktur der Site hättest.
Mit dem WD, der ja ein echter WYSIWYG Editor ist, geht das leider nicht.

Du könntest aber eine Lösung schaffen, die mit 2 separaten Projekten erstellt wird.
Mit dem ersten Projekt erstellst Du eine Startseite, die mit der normalen URL geöffnet- und blitzschnell geladen wird. Die Seite stellt ihrerseits einen Link auf die umfangreichere one page site aus dem 2. Projekt zur Verfügung.
Jeder Besucher Deiner Site hat dann sofort ein Erfolgserlebnis, bevor er die Hauptseite öffnet, was ein paar Sekunden dauern darf...

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓

ChrisMusic schrieb am 11.06.2020 um 23:04 Uhr

Puh, jetzt habe ich die Seite so weit optimiert wie ich das konnte. Zumindest die allergrößten Speicherfresser scheinen nun gebändigt zu sein. Trotzdem ist die Seite noch sehr lahm, wie ich finde. Wobei die Desktop-Seite schneller zu laden scheint als die Smartphone-Seite... 😦

Könntet Ihr Euch die Seite (jetzt dauerhaft hier) bitte nochmal anschauen und Euer - von mir sehr geschätztes - Urteil abgeben?

@marboe: OK, der WD will also nur mit JPEG und PNG arbeiten. Schade, dabei könnte ich laut WebSite Speed Test teilweise bis über 80% Speicherplatz sparen, wenn ich PNGs ins WebP-Format umwandelte. Aber mir graust vor der Arbeit, das "händisch" machen zu müssen, außerdem traue ich mir nicht so recht zu, im HTML herumzudoktern, um das neue Bildformat überall einzubinden. Naja. Dann muß es wohl halt so gehen...

@BeRo: Danke für die Anregung, das klingt sehr interessant. Ist aber wohl eher was für Profis oder hochambitionierte Bastler und weniger was für Halblaien wie mich, die nur schnell und ohne großen Aufwand eine Seite fertigbekommen wollen. Vielleicht sollte ich ja doch mal eine grafisch weniger aufwendige Variante der Seite erstellen (weniger und kleinere Bilder, keine Schatten und Transparenzen mehr, usw.) und mich damit begnügen...

BeRo schrieb am 11.06.2020 um 23:26 Uhr

[...] Könntet Ihr Euch die Seite (jetzt dauerhaft hier) bitte nochmal anschauen [...]

Kein Problem...

Auf den Tag genau gehen heute, am 14.08.2021, 10 Jahre online Support für die Community zu Ende.
Ich freue mich auf eine neue, berufliche Herausforderung, die sich gerade ergeben hat. Leider bleibt dann keine Zeit mehr für die Community übrig, aber Ihr seid bei den aktiven Mitgliedern in besten Händen.
Sicher schaue ich auch ab und zu nochmal rein... 🤓