selfhtml.de - Alles für den Webmaster!

 

Empfehlung:

wix.com

Kostenlose Homepage

Besuchen Sie auch:

Jobs:

Traffic vermindern

Autor: Manya
Datum: 19.04.2013 18:59:30

Hallo,

Nachdem das vertikale Zentrieren in meinem vorigen Thread nicht geklappt hat, verzichte ich darauf, und setze den Text an den oberen Rand.
Jetzt habe ich aber ein neues Anliegen.
Auf meiner Seiten habe ich ziemlich viele große Bilder, die skalierbar sein sollen.
Um übertriebenen Traffic zu vermeiden, möchte ich bei kleinem Bildschirm statt dem großen Bild, die kleine Version davon laden.

http://manya.ma.funpic.de/forum/traffic/test-1.html
Der Quellcode ist natürlich traffic-mäßig totaler Unsinn,
ich wollte nur zeigen, wie es im Browser aussehen soll. ;-)
Das Problem ist jetzt nur, dass ich nicht weiß, wie ich das mit mediaqueries realisieren kann.
Hat jemand eine Idee?

Gruß,
Manya



Re: Traffic vermindern

Autor: Freddy
Datum: 19.04.2013 21:44:14

Hallo,

> Das Problem ist jetzt nur, dass ich nicht weiß,
> wie ich das mit mediaqueries realisieren kann.

AFAIK kann man mit Media Queries "nur" CSS "manipulieren". Ich habe nicht recherchiert, aber ich kann mir nicht vorstellen, dass man Attribute von HTML-Elementen verändern kann.
Mit JavaScript geht das natürlich. Wenn Du mit Hintergrundbildern arbeiten würdest (was dann natürlich eigentlich nicht semantisch korrekt wäre), kannst Du es mit Media Queries versuchen.


Gruß,
Freddy



Re: Traffic vermindern

Autor: Manya
Datum: 19.04.2013 23:26:25

Vielen Dank für deinen Vorschlag, Freddy :-)

> AFAIK kann man mit Media Queries "nur" CSS
> "manipulieren".

So ist auch mein Kenntnisstand.
Das will aber nichts heißen, denn in CSS3 kenne ich mich nur oberflächlich aus.

> Wenn Du mit
> Hintergrundbildern arbeiten würdest (was dann
> natürlich eigentlich nicht semantisch korrekt
> wäre), kannst Du es mit Media Queries versuchen.

Manchmal heiligt der Zweck die Mittel.
Bei meinem letzten Problem, habe ich zum Schluß sogar mit Tabellenlayout experimentiert, und wenn das wirklich so geklappt hätte, wie es hätte sein sollen, dann hätte ich dieses Tabellenlayout auch verwendet.
Jetzt bin ich sicher hier unten durch? ;-)

An Hintergrundbilder habe ich auch schon gedacht, aber dann hätte ich kein gleichmäßiges Skalieren der Biulder, sondern "Stufen", wenn ich mit Media Queries die Hintergrundbilder auswechsele.

Gruß,
Manya



Re: Traffic vermindern

Autor: Manya
Datum: 19.04.2013 23:26:25

Vielen Dank für deinen Vorschlag, Freddy :-)

> AFAIK kann man mit Media Queries "nur" CSS
> "manipulieren".

So ist auch mein Kenntnisstand.
Das will aber nichts heißen, denn in CSS3 kenne ich mich nur oberflächlich aus.

> Wenn Du mit
> Hintergrundbildern arbeiten würdest (was dann
> natürlich eigentlich nicht semantisch korrekt
> wäre), kannst Du es mit Media Queries versuchen.

Manchmal heiligt der Zweck die Mittel.
Bei meinem letzten Problem, habe ich zum Schluß sogar mit Tabellenlayout experimentiert, und wenn das wirklich so geklappt hätte, wie es hätte sein sollen, dann hätte ich dieses Tabellenlayout auch verwendet.
Jetzt bin ich sicher hier unten durch? ;-)

An Hintergrundbilder habe ich auch schon gedacht, aber dann hätte ich kein gleichmäßiges Skalieren der Biulder, sondern "Stufen", wenn ich mit Media Queries die Hintergrundbilder auswechsele.

Gruß,
Manya



Re: Traffic vermindern

Autor: T.Jung
Datum: 20.04.2013 15:43:46

Vorab: Eine gute Lösung habe ich auch nicht gefunden.
Aber der Reihe nach...


> > AFAIK kann man mit Media Queries "nur" CSS
> > "manipulieren".
>
> So ist auch mein Kenntnisstand.

Ist auch richtig.

Zudem bringt es nichts, die media queries so wie Du einzusetzen: Bei einer bestimmten Viewport-Size 'display:block' und bei einer anderen 'display:none:' zu setzen.
Der Browser lädt nämlich trotzdem _alle_ Größen, siehe in den »Seiteninformationen« von Firefox:
http://www.tobiasjung.net/storage/firefox-seiteninformationen.jpg



> > Wenn Du mit
> > Hintergrundbildern arbeiten würdest (was dann
> > natürlich eigentlich nicht semantisch korrekt
> > wäre), kannst Du es mit Media Queries
> > versuchen.
>
> Manchmal heiligt der Zweck die Mittel.

Richtig.
Zudem finde ich: Ein Bild ist ein dekoratives Element, und ob ich das jetzt als img-Element oder Hintergrundbild einfüge, ist _mir_ ziemlich schnuppe.


> An Hintergrundbilder habe ich auch schon gedacht,
> aber dann hätte ich kein gleichmäßiges Skalieren
> der Biulder, sondern "Stufen", wenn ich mit Media
> Queries die Hintergrundbilder auswechsele.

Du kannst ja beides miteinander verbinden, da zumindest die CSS_3_-Syntax auch das Skalieren von Hintergrundbildern erlaubt.
Aber wie gesagt, eine perfekte Lösung habe auch ich nicht gefunden.

Schritt 1:
http://www.tobiasjung.net/storage/manya-picscale-1.html
Hier skalieren sich die Bildboxen zwar schön in der Breite, aber in der Höhe bleiben sie gleich, nämlich zu klein. Weil ihnen eine height-Angabe fehlt UND sie auch keinen Inhalt haben, anhand dessen sie sich skalieren könnten. Zudem wird die Größenänderung in meinem Firefox 19 super-langsam, öffensichtlich bereitet ihm das 'background-size:contain;' in Verbindung mit der fehlenden Höhenangabe echte Probleme. (Im Safari hingegen tritt dieses Problem nicht auf.)

Schritt 2, nur testweise:
http://www.tobiasjung.net/storage/manya-picscale-2.html
... der gleiche Code, aber diesmal mit fester Höhenangabe. Hier kann ich das Firefox-Fenster in gewohnter Geschwindigkeit skalieren, aber die feste Höhe ist ja nun mal nicht der gewünschte Effekt.

Wie kann ich den Browser also dazu bringen, die Box sowohl in der Breite, als auch in der Höhe korrekt anzupassen?
Tja, da ist mir leider nur etwas wirklich schmutziges eingefallen:

Schritt 3:
http://www.tobiasjung.net/storage/manya-picscale-3.html
Hier habe ich nun ein transparentes GIF eingefügt, welches in der Größe der größten Grafik aus Deinem Beispiel entspricht: Somit hat die Bildbox einen Inhalt und wird auch in der Höhe angepasst. Das ist natürlich, wie schon gesagt, nun wirklich nicht sauber.
Zudem funktioniert das »so richtig« auch nur dann, wenn das mittlere und das kleine Bild wenigstens die gleichen Seitenverhältnisse haben wie das große -- und das ist in Deinem Beispiel schon mal nicht der Fall.

Vielleicht fällt irgendjemanden ja etwas ein, wie man dieses Weg noch verbessern könnte...

Gruß,
Tobias



Re: Traffic vermindern

Autor: Manya
Datum: 20.04.2013 18:04:59

Hallo Tobias,

> Zudem bringt es nichts, die media queries so wie
> Du einzusetzen: Bei einer bestimmten
> Viewport-Size 'display:block' und bei einer
> anderen 'display:none:' zu setzen.
> Der Browser lädt nämlich trotzdem _alle_ Größen,

Ich weiß.
Um zu vermeiden, dass mich jemand drauf hinweist, und ich dann dumm dastehe, habe ich diesen Umstand gleich in meinem 1. Posting deutlich gemacht: ;-)
"Der Quellcode ist natürlich traffic-mäßig totaler Unsinn,
ich wollte nur zeigen, wie es im Browser aussehen soll. ;-)

> > An Hintergrundbilder habe ich auch schon
> gedacht,
> > aber dann hätte ich kein gleichmäßiges
> Skalieren
> > der Biulder, sondern "Stufen", wenn ich mit
> Media
> > Queries die Hintergrundbilder auswechsele.
>
> Du kannst ja beides miteinander verbinden, da
> zumindest die CSS_3_-Syntax auch das Skalieren
> von Hintergrundbildern erlaubt.

Das habe ich probiert.
Es ist mir aber nicht gelungen, das Hintergrundbild so zu skalieren, dass die Proportionen erhalten blieben. Aus dem Grund hatte ich schon begonnen, Freddys Vorschlag mit Javascript aufzugreifen. Eine CSS-Lösung ist mir aber nach wie vor lieber.

> Wie kann ich den Browser also dazu bringen, die
> Box sowohl in der Breite, als auch in der Höhe
> korrekt anzupassen?

Genau DAS war es, was mir immer wieder Schwierigkeiten bereitet hatte.

> Tja, da ist mir leider nur etwas wirklich
> schmutziges eingefallen:
>
> Schritt 3:
>
> http://www.tobiasjung.net/storage/manya-picscale-3.html
> Hier habe ich nun ein transparentes GIF
> eingefügt, welches in der Größe der größten
> Grafik aus Deinem Beispiel entspricht: Somit hat
> die Bildbox einen Inhalt und wird auch in der
> Höhe angepasst. Das ist natürlich, wie schon
> gesagt, nun wirklich nicht sauber.

Egal, egal, egal !!! :-)))
Da wäre ich nie drauf gekommen!

> Zudem funktioniert das »so richtig« auch nur
> dann, wenn das mittlere und das kleine Bild
> wenigstens die gleichen Seitenverhältnisse haben
> wie das große -- und das ist in Deinem Beispiel
> schon mal nicht der Fall.

Das ist kein Problem.
Da die Bilder ja gleich sind, und nur unterschiedlich groß, werden sie natürlich auch die gleichen Seitenverhältnisse haben.

Vielen vielen  Dank für die Mühe, die Du Dir gemacht hast! :-)

> Vielleicht fällt irgendjemanden ja etwas ein, wie
> man dieses Weg noch verbessern könnte...

Gruß
Manya



Re: Traffic vermindern

Autor: T.Jung
Datum: 20.04.2013 18:29:45

> Um zu vermeiden, dass mich jemand drauf hinweist,
> und ich dann dumm dastehe, habe ich diesen
> Umstand gleich in meinem 1. Posting deutlich
> gemacht: ;-)
> "Der Quellcode ist natürlich traffic-mäßig
> totaler Unsinn (...)

Wie Du siehst, hat das nichts genützt, denn das habe ich doch direkt mal überlesen. ;-)


> Aus dem Grund
> hatte ich schon begonnen, Freddys Vorschlag mit
> Javascript aufzugreifen. Eine CSS-Lösung ist mir
> aber nach wie vor lieber.

Okay, wobei ein bisschen Javascript für diesen Zweck vermutlich auch nicht schaden würde.
Dann sollte man per Default allerdings die kleinen Bilder laden, um die großen (bei entsprechender Viewportgröße) per JS nachzuladen. Denn wer JS abschaltet, macht das ja möglicherweise, weil er Bandbreite und Rechenzeit sparen will; und wenn man so einem dann die großen Bilder reinknallt und sie einfach per Browser runterskalieren lässt, erreicht man ja den gegenteiligen Effekt.


> > Tja, da ist mir leider nur etwas wirklich
> > schmutziges eingefallen: (...)
>
> Egal, egal, egal !!! :-)))
> Da wäre ich nie drauf gekommen!

So etwas fällt einem ja auch nicht ein, wenn man immer möglichst sauber arbeiten will.
Auf solche Ideen kommt man nur nach jahrelanger Erfahrung mit Kunden, die einen mit ihrem »Ich will das aber SO und nicht anders!« quasi zu schmutzigen Lösungen _zwingen_.
;-)


> Vielen vielen  Dank für die Mühe, die Du
> Dir gemacht hast! :-)

Bitte, gern geschehen!
Gruß,
Tobias



Re: Traffic vermindern

Autor: Manya
Datum: 20.04.2013 20:49:01

> > Aus dem Grund
> > hatte ich schon begonnen, Freddys Vorschlag
> mit
> > Javascript aufzugreifen. Eine CSS-Lösung ist
> mir
> > aber nach wie vor lieber.
>
> Okay, wobei ein bisschen Javascript für diesen
> Zweck vermutlich auch nicht schaden würde.

Das sehe ich auch so.
Wer kein Javascript hat, hätte die Bilder mittlerer Größe bekommen. Die ganz kleinen wollte ich als Defaultbild nicht nehmen, denn von 200px auf 600px hochskalieren, hätte furchtbar ausgesehen.

> So etwas fällt einem ja auch nicht ein, wenn man
> immer möglichst sauber arbeiten will.
> Auf solche Ideen kommt man nur nach jahrelanger
> Erfahrung mit Kunden, die einen mit ihrem »Ich
> will das aber SO und nicht anders!« quasi zu
> schmutzigen Lösungen _zwingen_.
> ;-)

A propos "Kunden":
Meiner ist bei t-online und benutzt DESHALB den T e l e k o m-Brower als Standardbrowser. Das konnte ich natürlich nicht ahnen, und habe den Quellcode auf _moderne_ Browser ausgerichtet. Seine Frau benutzt GoogleChrome und hat ihren Mann neulich drauf aufmerksam gemacht, dass die Website bei ihr ganz anders funktioniert als bei ihm.
Nun möchte er die ganzen tollen Sachen natürlich auch für seinen Lieblingsbrowser. :-((
Ich stehe jedesmal dumm da, wenn ich erklären muss, dass das nicht geht. So langsam habe ich den Eindruck, dass er das nicht mehr glaubt. Ich weiss gar nicht, was ich da noch an Argumenten oder Beweisen bringen kann.
Hat jemand schon ähnliche Erfahrungen gemacht, und wie habt ihr dann euren Kunden überzeugt?

Gruß,
Manya



Re: Traffic vermindern

Autor: Netinja
Datum: 23.04.2013 18:19:10


> Hat jemand schon ähnliche Erfahrungen gemacht,
> und wie habt ihr dann euren Kunden überzeugt?

Hi,
Zum Glück habe ich so eine Erfahrung noch nicht gemacht.
Ich bin auch nicht scharf drauf. :-D
Von einem Telekom-Browser höre ich jetzt zum ersten mal.
Welchen Grund kann es geben, diesen seltsamen Browser zu benutzen?

LG
Netinja



Re: Traffic vermindern

Autor: Freddy
Datum: 23.04.2013 18:24:18

Hallo,

> Von einem Telekom-Browser höre ich jetzt zum
> ersten mal.

Ich habe gelesen, dass der die Trident-Engine des Internet-Explorers verwendet. Ich weiß es aber nicht genau. Wenn es stimmt, sollten natürlich alle Hacks, die im IE greifen, auch für diesen Browser passen.


> Welchen Grund kann es geben, diesen seltsamen
> Browser zu benutzen?

Unerfahrenheit oder Unwissenheit vielleicht, was anderes kann ich mir beim besten Willen nicht vorstellen. ;-)


Gruß,
Freddy



OT

Autor: Manya
Datum: 24.04.2013 08:27:18

> > Welchen Grund kann es geben, diesen
> seltsamen
> > Browser zu benutzen?
>
> Unerfahrenheit oder Unwissenheit vielleicht, was
> anderes kann ich mir beim besten Willen nicht
> vorstellen. ;-)

Hallo,
Da liegst Du richtig. ;-)
Der Kunde hat Vista oder Windows7, genau weiss ich das nicht mehr, jedenfalls gibt es da kein OutlookExpress mehr.
Er hat die Telekom als Provider, und die bietet ein fix-und-fetig Installierpaket, Browser plus Mailprogramm, in dem die Kundendaten und alle Postein- und ausgangsdaten schon drin sind.
Und natürlich legt sich dieser Browser ungefragt sofort als Standartbrowser fest. ;-)
Ganz schön geschäftstüchtig, der rosa Riese.

Gruß,
Manya

PS
Kann bitte jemand in die Vorpostings bei "t e l e k o m-browser" noch ein oder 2 blanks hineinsetzen? Ich möchte nicht, dass der Kunde unter diesem Stichwort den Thread findet.;-)
Danke.