Oft verwendete Inhalte resourcensparend darstellen

[dreamy_betty]

Hi, ich stehe im Moment vor der Frage, wie ich sehr oft wiederkehrende Inhalte so einfach wie möglich darstellen kann. Konkret handelt es sich dabei um eine Wertung von 1 bis 5, die auf einer Seite bis zu 500 Mal vorkommen kann.

Bisher verwende ich Bilder von schönen hübschen Sternen (je 5 einzelne in grauer oder goldener Farbe), allerdings macht die Seite sowohl auf meinem Blackberry als auch auf einem älteren Samsung Android Telefon so seine Probleme (Stichpunkt: Ladezeit, Reaktionsfreudigkeit des Browsers).

Nun habe ich mir überlegt entweder von den aufwändigen Bildern Abstand zu nehmen und den minimalistischen Weg zu gehen (siehe Bild im Anhang als Beispiel), oder das ganze mit HTML & CSS nachzubauen. Für den Browser zu Hause ist das natürlich kein größeres Problem, aber die Seiten sollen auch auf einem (nicht aktuellen) Smartphone oder anderen mobilen Gerät keine Speicher- oder Reaktionsprobleme hervorrufen.

Meine Frage lautet also, welche Methode am sparsamsten mit den Resourcen umgeht. Hat jemand Erfahrung mit der Erstellung von Inhalten für mobile Geräte? Gibt es bei den am häufigsten verwendeten Browsern irgendwelche Schwachstellen auf die man unbedingt achten sollte? Beispielsweise läuft der Opera Mini auf derselben Hardware bedeutend besser als der integrierte Blackberry Browser.

Danke für eure Hilfe,
Bettina

 

[Daaron]

CSS Sprites sind immer eine gute Idee. Solange du den Hintergrund nur in Y-Richtung verschieben willst klappt alles wunderbar.

 

[Suxxess]

Die Grafik eventuell einfach herunterkonvertieren? Und du verwendest auch immer die selbe Grafikdatei bei jeder Wertung? Ansonsten wirklich nur 5 einzelne Sterne nehmen und die dann entsprechend anzeigen lassen. Sprich <img>stern1.png</img><img>stern1.png</img>
Und schon hast du eine Zweisterne-Wertung. Wenn du nur eine einzelne kleine Datei nimmst für alle Wertungen, dann sollte das kein Problem sein.

 

[Ruheliebhaber]

Wie wäre der Einsatz von SVG (Scaleable Vector Graphics)? Ein moderner Webbrowser beherrscht das. Die Frameverlaufdiagramme auf CB sind mit SVG gelöst. Beispiel

Ansonsten stimme ich Suxxess in Post #3 zu.

Die Frage ist, was das Rendering Deiner Seite auf dem Smartphone langsam macht. Ist es der Download der Seite, also die Seitengröße? Oder ist es das Rendering der Seite? Der Quellcode der Webseite sollte so einfach wie möglich sein.

 

[Rossie]

Mit einem Tool wie PageSpeed kann man die Seite analysieren und sukzessive optimieren.

 

[Daaron]

Wie wäre der Einsatz von SVG (Scaleable Vector Graphics)? Ein moderner Webbrowser beherrscht das. Die Frameverlaufdiagramme auf CB sind mit SVG gelöst. Beispiel

Jaja, die "modernen Browser".
Ich frag mich, wie CB das Problem des IE<9 gelöst haben... denn erst der 9er kann überhaupt was mit SVG anfangen, und ich glaube er kann noch keine SVG-Backgrounds, nur Inline-SVG und SVG im Image-Tag. Bei dem extremen Marktanteilen, die IE7&8 noch schieben muss man sich immer überlegen, wie man solch kritische Elemente löst.

 

[Ruheliebhaber]

Dann eben so, wie Suxxess gesagt hat. Zwei Bilddateien, grau und golden, möglichst gut komprimiert. Dann ist der Download klein. Für weitere "Geschwindigkeit" muß anschließend der HTML-Code optimiert werden.

 

[kling1]

das sollte das seinw as du suchst http://www.smart-webentwicklung.de/2012/05/star-rating-mit-css-ohne-zusaetzliche-grafiken/

 

[mambokurt]

Hi, ich stehe im Moment vor der Frage, wie ich sehr oft wiederkehrende Inhalte so einfach wie möglich darstellen kann. Konkret handelt es sich dabei um eine Wertung von 1 bis 5, die auf einer Seite bis zu 500 Mal vorkommen kann.

Bisher verwende ich Bilder von schönen hübschen Sternen (je 5 einzelne in grauer oder goldener Farbe), allerdings macht die Seite sowohl auf meinem Blackberry als auch auf einem älteren Samsung Android Telefon so seine Probleme (Stichpunkt: Ladezeit, Reaktionsfreudigkeit des Browsers).

Ich an deiner Stelle würde die Sterne mal weglassen und dann probieren, ob das das Problem auch wirklich löst. Vielleicht versuchst du hier an der völlig falschen Stelle zu optimieren? Falls du auf den Sternen noch Javascripts hängen hast, könnten die auch die Ursache sein für die Verzögerung. Solange der Browser cached sollte er eigentlich sowohl den goldenen als auch den silbernen Stern nur einmal laden, soll heißen das Problem wird wohl eher beim Rendern liegen. Zeigst du die Sterne in Originalgröße an oder skalierst du die Grafiken nochmal im Broser? Bei 500x5 Sternen könnte das Skalieren schon ziemlich Zeit fressen?

 

[dreamy_betty]

Vielen Dank für eure Hilfe und vielfältigen Tipps und Lösungswege.

Die Geschwindigkeit des Seitenaufbaus der betreffenden Seiten ist auch über eine WLAN-Verbindung zu einem Server im lokalen Netzwerk nicht (viel) besser als über das Internet. Da die Webseite bereits gzip komprimiert ausgeliefert wird, ist das Downloadvolumen ausserdem ein vernachlässigbares Problem. Der HTML-Code ist zudem selbst getippt und wurde nicht von einem WYSIWYG-Editor aufgeblasen.

Die Dateigröße der beiden Sterne spielt beim Seitenaufbau keine merkbare Rolle, mal ausgenommen von der etwas kürzeren Ladezeit der kleineren Dateien. Obwohl der Browser die gerenderten Bilder unkomprimiert speichert, wirkt sich ein deutlich kleineres Bild (ich spreche dabei von weniger als 500 Byte pro Bild) positiv auf die Zoom-Funktion aus. Meine hübschen Sterne werden dann natürlich nicht mehr wie gewollt dargestellt.

Den besten merkbaren Performancegewinn hat der Schritt von den bisher verwendeten 5 Bildern auf nur 1 Bild pro Wertung gebracht. In Kombination mit einer einfacheren Wertungsdarstellung, ähnlich wie im Anhang des ersten Beitrages, konnten alle fünf Grafiken nun auf ~1KB geschrumpft werden.


Das größte Problem des zu langsamen Renderns beim Laden der Seite ist glücklicherweise kaum noch zu bemerken. Nun muss ich es nur noch irgendwie hinbekommen, dass auch der Pinch-Zoom ruckelfrei funktioniert.

Daaron: CSS Sprites werde ich mal testen, soweit ich weiß liegt der einzige Vorteil aber in der Reduktion der HTTP Requests. Der Kompromiss dieser Lösung ist aber ein höherer Speicherverbrauch des Browsers. Mal sehen wie sich das auf mobilen Browsern auswirkt.

klomann83: Vielen Dank für diesen Lösungsvorschlag. Zwar habe ich das noch nicht testen können, ich bin aber sehr gespannt, ob ich mit einer angepassten Version (ich benötige nämlich kein Mouseover) auch das Zoom-Problem aus der Welt schaffen kann.

 

[Daaron]

Was du auch probieren kannst (im Hinblick aufs Star Rating): Nutz die Stern.png als "Maske". Angenommen deine Seite ist weiß, dann baust du eine weiße PNG mit 5 sternförmige Löchern und bindest sie als <img> ein. Jetzt legst du hinter das <img> noch ein <div>, das du hinter das <img> verschiebst (paar px nach oben und im z-index runter) und dem du einen hübschen Goldton als Hintergrund-Farbe gibst. Die prozentuale Breite des <div> entspricht dem Anteil der ausgefüllten Sterne. Damit sind dann auch Wertungen wie 4.5 darstellbar.