Sprung zum Inhalt

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zum Archiv und den Kategorien

Testet denn keiner

Donnerstag, 19. Juni 2014

… seine neue Website auch auf Smartphones, und auch in der freien Wildbahn, d. h. außerhalb von W-LAN, LTE und UMTS?
Anscheinend nicht. Wie sonst könnten Entwickler stolz auf ihr modernes Responsive Design verweisen, und dann eine 1,5 MB schwere Startseite anbieten?
Wozu brauch' ich ein für Smartphones optimiertes Design, wenn ich die Site unterwegs nicht öffnen kann, weil ich gar nicht so lange Zeit habe, wie die Startseite zum Laden braucht, wohl aber mein Datenvolumen schon einmal durch den vergeblichen Versuch mit 1 MB belastet wird.

So, genug Dampf abgelassen.
Kommen wir zu praktischen Empfehlungen.
Bilder sind der Bösewicht Nr. 1, wenn es um Seitengröße geht. Dabei gibt es wirklich genügend Tools, um Bilder optimal zu verschlanken, ohne die Qualität zu opfern. Ich zähle nur mal auf:

  • Bilder vor der Verwendung im Web auf passende Größe bringen, und nicht den Browser dazu missbrauchen. (Das sollte eigentlich selbstverständlich sein.)
  • Wahl des passenden Dateiformats (.png oder .jpg je nach Motiv)
  • Wahl der Optimalen Kompressionsstufe. Hier hilft nur Probieren, Beurteilen und Optimieren.
  • Alle Metadaten raus! (Das kann z. B. Photoshop beim „Abspeichern für Web“)
  • Kompressionstools verwenden. Z. B. ImageOptim für .jpg, oder ImageAlpha für .png
  • Adaptive Images einsetzen

Und jetzt ein ganz heißer Tipp speziell für Smartphones:

Bilder werden normalerweise beim Aufruf einer Seite heruntergeladen, und kosten damit Ladezeit und Transfervolumen, auch wenn Sie „above the fold“ auf dem kleinen Bildschirm gar nicht angezeigt werden, sondern erst beim Herunterscrollen.

Dagegen gibt es ein geniales jQuery-Addon: Lazyload

Lazyload wird mit einer Zeile Code aufgerufen:
$("img.lazy").lazyload({effect : "fadeIn"});
ist minified und gzipped gerade mal 1 kB groß, und es tut wirklich, was es verspricht. Bilder werden erst geladen, wenn Sie gebraucht werden, d. h. durch Scrollen in den sichtbaren Bereich geraten.
Letzteres ist wörtlich zu nehmen, und offenbart eine Schwäche von Lazyload. Um Bilder anzuzeigen, die bereits auf dem Startbildschirm liegen, muss gescrollt werden, und wenn es auch nur ein Tick ist.
Aber auch dagegen gibt es ein Mittel: Eine Zeile JavaScript, wie hier auf stackoverflow beschrieben.
$('body,html').scroll();

Ich hab's getestet, und es funktioniert. Warum nur wird so eine geniale Technik nicht allgemein eingesetzt? Es gibt doch auch Menschen, die auf ihrem Desktop dankbar sind für jedes kB, das sie nicht unnötig laden müssen.


Fotos für Webseiten

Dienstag, 17. Juni 2014

Nein, heute soll das Thema einmal nicht die Verwendung von Bildern sein, die man „im Internet gefunden“ hat. Dass diese Vorgehensweise ganz schnell ganz teuer werden kann, sollte inzwischen hinreichend bekannt sein.
Selbst die Verwendung von Bildern aus Stockarchiven kann problematisch sein, wie dieses Urteil zeigt.
Heute geht es mir um die Qualität. Nicht die in Megapixeln gemessene Qualität. Sondern um die — sichtbare — Qualität, die das geschulte Auge eines Profis erzeugt.
Wenn Sie die Homepage eines Kaninchenzüchtervereins pflegen, dann spricht nichts gegen die Verwendung von Fotos aus dem Smartphone. Womit ich nichts gegen Kaninchenzüchter gesagt haben will.
Wenn Sie aber einen professionellen Webauftritt betreiben, dann sollten die dort verwendeten Fotos vom Profi stammen, z. B. diesem Fotostudio in Berlin. Egal, ob es sich dabei um Außenaufnahmen oder Innenräume handelt, oder auch Fotos von Mitarbeitern.

Im Beitrag Webworking: Full Service versus Spezialisierung
habe ich dieses Thema schon einmal behandelt:

Fotos und Videos in einer fürs Web passenden Qualität lassen sich in vielen Fällen auch mit relativ einfacher Ausrüstung erstellen, also auch „aus meiner Hand“. Nur bei sehr hohen Ansprüchen und speziellen Anforderungen muss man auf die Ausrüstung und das Know-how des Spezialisten zurück greifen.

Ich weiß, Fotografen haben ihren Preis. Und die Kosten für professionelle Fotos können schnell einen erheblichen Anteil an den Kosten Ihres Webauftritts ausmachen. Aber sie machen auch einen ganz wesentlichen Teil des — hoffentlich guten — wichtigen ersten Eindrucks aus, der Besucher auf Ihrer Website fesselt, oder sie wegklicken lässt.


Archiv:

Kategorien:

Creative Commons Lizenzvertrag
Alle Texte (nicht Bilder!) Creative Commons CC BY-NC-SA 3.0 DE