Sprung zum Inhalt [/] Tastaturkürzel / Accesskeys [0]

Webdesign nach Maß von webdesign weisshart

Mein Blog

RSS Feed AbonnementRSS 2.0 Feed

zur Liste der Kategorien | zum Archiv

Speed - die Zweite

Donnerstag, 24. Juli 2014

Wie in meinem Blogpost Speed angekündigt, beschreibe ich heute kurz die Verwendung des picture-Elements in Verbindung mit picturefill.js, eine Alternative zu Adaptive Images
Eine der beiden Methoden (gibt es weitere?) sind im Zeitalter der mobilen Internetnutzung unverzichtbar. Es sei denn, man will die Mobilfunkanbieter auf Kosten der Nutzer bereichern, durch Generierung von unnötigem / unsinnigem Traffic.

Zuerst eine kurze Gegenüberstellung der beiden Methoden

Adaptive Images

Das picture-Element in Verbindung mit picturefill.js

  • Das picture-Element ist zukünfiger Bestandteil von HTML 5.1, und wird natürlich heute noch von keinem Browser unterstützt.
    Dennoch kann man es bereits verwenden. picturefill.js does the trick.
  • Es müssen mehrere Größen des jeweiligen Bildes erzeugt und auf den Server geladen werden. Dies bedeutet zwar zusätzlichen Aufwand, aber es ermöglicht auch eine weitgehende Optimierung der jeweiligen Alternativbilder.
  • Browser, die weder das picture-Element, noch picturefill.js verstehen, erhalten ein Alternativbild, das individuell festgelegt werden kann.
    Ich verwende als Alternativbild ein relativ kleines Bild, da ich davon ausgehe, dass ich es in diesem Fall mit einem alten, schwachbrüstigen System zu tun habe.

Und hier eine Demo

Um die Funktion zu testen, einfach die Fenstergröße des Browsers verkleinern / vergrößern.

PS: Beide Methoden funktionieren in allen modernen Browsern. Alte IE-Versionen zu unterstützen habe ich zunehmend weniger Lust.


Adblock Plus der Speicherfresser

Dienstag, 22. Juli 2014

Adblock Plus war für mich lange Zeit eines der wichtigsten Firefox Add-ons. Weil viele Werbetreibende es einfach übertreiben. Da hüpft und springt auf jeder zweiten Site irgend ein Banner. Entspanntes Lesen, den Inhalt der Seiten aufnehmen, wird zur Konzentrationsübung.
Adblock Plus macht damit ganz einfach Schluss.
Aber es macht Firefox kaputt. Zumindest den aktuellen Firefox Version 30. Der Speicherbedarf springt beim Aktivieren von Adblock Plus erst einmal um mindestens 100 MB nach oben. Schlimmer noch: Jede geöffnete Seite erhöht den Speicherbedarf weiter, und der Speicher wird auch beim Schließen der Seiten / Tabs nicht wieder freigegeben. Nach einiger Zeit belegt Firefox über 1 GB, und irgendwann wird Firefox unbenutzbar.
Anmerkung.: Ich verwende Firefox 64bit auf Mac OS X

In diesem Artikel wird das Problem genau beschrieben.

Nein, so geht das nicht. Adblock Plus deaktiviert.

Und jetzt? Was ist die Adblock-Alternative?

Mit etwas Handarbeit kann man auf häufig besuchten Seiten die schlimmsten Auswüchse auch ohne Adblock eliminieren. Mit dem Stylish-Add-on, und am besten einigen CSS-Kenntnissen. Zwei Beispiele habe ich in meinem Blog beschrieben. Auch die Twitter-Webseite habe ich mit Stylish entrümpelt. “Who to follow” und “Trends” ausgeblendet, und auch sonst einige Details nach meiner Vorstellung aufgehübscht.

Hier mein Stylish Stylesheet für Twitter:

@namespace url(http://www.w3.org/1999/xhtml);
 @-moz-document domain("twitter.com") {
 body {overflow-x:hidden; max-width:70em;}
 #page-outer {margin-left: 200px;}
 .roaming-module,
.WhoToFollow,
#trends-dialog,
.promo,
.trends-inner,
.user-rec-component,
.component-spacer,
.user-rec-dropdown.profile-actions,
.js-wtf-module,
.trends
    {display:none !important;}
 p {font-size:1em !important;
    line-height:1.4em !important;}
}

Speed

Samstag, 19. Juli 2014

Ich bin ein Speed-Freak. So lange ich „Web“ denken kann.
Aus den Zeiten von 56 kB Modems stammt mein Streben, zumindest die Startseite jeden Webauftritts so klein wie möglich zu gestalten. Ursprünglich war meine Zielmarke 50 kB.
Aus dieser Zeit stammt auch die Aussage

Wenn sich eine Seite nicht in 8 Sekunden aufbaut, klicken 30% der Besucher wieder weg.

Aus dieser Zeit stammt auch mein eigener Webauftritt. Mit gerade mal 64 kB für die Startseite. Ich gebe ja zu: Die Seite wirkt nicht sehr „modern“. Aber sie lädt verdammt schnell. In ca. 0,5 Sekunden.
Damit bin ich recht nahe am Ideal.

Wie nimmt ein User die Geschwindigkeit wahr
Quelle: radware
Legende:
0 - 100 ms Sofort
100 - 300 ms: Kurze, gerade eben wahrnehmbare Verzögerung
300 - 1000 ms: Die Maschine arbeitet
1000+ ms Die Gedanken (des Besuchers) wandern anderswohin.
10.000+ ms Die Aufgabe wird abgebrochen.

Es hat sich also nichts geändert. 8 bzw. 10 Sekunden Ladezeit werden vom User nicht akzeptiert. Anzustreben ist weniger als 1 (eine!) Sekunde.

Sehr wohl geändert haben sich aber die durchschnittlichen Seitengrößen:

Durchschnittliche Seitengrößen von 1995 bis 2014
Quelle: websiteoptimization.com
2003: 93 kB - 2014: 1,6 MB

Nein, ich rede nicht der Technik von 2003 das Wort. Moderne Seiten machen richtig Spaß. Aber nicht, wenn Sie 2 oder 3 MB schwer sind, und ich sie unterwegs im Mobilfunknetz aufrufe. Dabei sind viele Seiten Ihre MB gar nicht wert. Häufig ist es einfach Schlamperei (oder fehlendes Können?) der Seitenschreiberlinge. Man kann nämlich sehr gut grafisch ansprechende, ja sogar interaktive Seiten mit weniger als 1 MB erstellen. Und es gibt sie tatsächlich: Seiten, die in weniger als 1 Sekunde laden.

Selbstverständlich sollte heutzutage sein, dass Vorsorge getroffen wird für mobile Geräte und Menschen „on the road“.

So, genug des Grundsatzgeschwafels. Fakten her!

weiterlesen…


Entfernungen messen mit Google Maps

Mittwoch, 9. Juli 2014

Ein Feature, das im “alten” Google Maps leicht erreichbar war, im “neuen” Google Maps aber gut versteckt ist: Entfernungen messen. Nicht Staßenkilometer, sondern Luftlinie.

Dabei ist es ganz ganz einfach:

  1. Google Maps öffnen
  2. Klick mit der rechten Maustaste auf den Startpunkt
  3. “Entfernung messen” auswählen
  4. Klick an eine beliebige Stelle auf der Karte, um die zu messende Strecke zu markieren. Mit weiteren Klicks bei Bedarf zusätzliche Messpunkte hinzufügen.
  5. [Optional] Einen Punkt ziehen, um ihn zu verschieben, oder auf einen Punkt klicken, um ihn zu entfernen.
Screenshot 1
Google Maps mit dem Popup nach dem Rechtsklick. Dort die Option: “Entfernung messen” auswählen.
Screenshot 2
Nach dem Anklicken des Zielpunkts wird ein Lineal mit der Entfernung eingeblendet.

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.


WIR sind ISS

Freitag, 30. Mai 2014

Nach langer Zeit ist mal wieder ein deutscher Astronaut auf der Internationalen Raumstation ISS.
Alexander Gerst twittert live aus der Raumstation als @Astro_Alex.

Anlass genug, den Blick zum Himmel zu richten, und nach der ISS Ausschau zu halten. Die ISS ist wegen Ihrer Größe ganz leicht zu sehen - etwa so hell wie Venus, der Abend- bzw. Morgenstern (Magnitude ca. - 3). Ihre scheinbare Geschwindigkeit entspricht etwa einem hochfliegenden Flugzeug.
Allerdings ist die Raumstation nur an einigen Tagen im Monat, und dann immer nur für wenige Minuten sichtbar. Das ist der Grund, warum viele Menschen sie noch nie gesehen haben.

Eine genaue Zeitangabe ist daher unumgänglich, sowie eine Angabe der Flugbahn (Himmelsrichtung, Höhe über dem Horizont). Eine gute Seite, um Beobachtungen zu planen, ist iss.de.astroviewer.net

Ich werde außerdem mal wieder die geniale iOS-App Redshift aktivieren. Preis derzeit 9,99 €

Screenshot
Redshift zeigt die Position der ISS am 31. Mai 2014, 00:59 Uhr vor dem Sternenhintergrund mit Angabe von Azimuth und Altitude.

Das Pfiffige an der genialen App ist, dass mit Hilfe der Lagesensoren und des Kompass das iPhone/iPad zielgerichtet zum aktuellen Standort führt.

Nachtrag: Zusätzlich erforderlich: Eine Wetter-App. :-)


Korrektur kleiner Fehler

Mittwoch, 21. Mai 2014

Meine Bank bietet auch eine eigene iOS-App für das mobile Onlinebanking. Nett, um z. B. im Urlaub mal schnell den Kontostand zu überprüfen.
Ein Update Anfang Mai hat die App leider kaputt gemacht. Der Kontostand und die Kontobewegungen konnten nicht mehr aktualisiert werden. Von den Entwicklern bekam ich auf meine Fehlermeldung hin folgende Antwort:

Bei Umsatzaktualisierungen mit installierter S-App-Version 2.4.0 ("Sparkasse"/ “Sparkasse+") kann es zu temporären Funktionseinschränkungen kommen.

Na gut, die „temporären Funktionseinschränkungen“ dauerten zu diesem Zeitpunkt immerhin bereits 13 Tage an.
Heute nun kam das Update hereingeschneit. Ich hoffte natürlich auf eine Wiederherstellung der Funktionalität, und hab‘ mir die Versionshinweise angeschaut.

Screenshot iPhone
Änderungen in Version 2.4.1:
- Korrektur kleinerer Fehler der App

Ich muss wohl noch dazulernen, was das Kommunizieren von Bugs betrifft.


Google und Keyword-Spamming

Freitag, 25. April 2014

Es ist schon erstaunlich, was Google so alles durchgehen lässt, ohne eine Site abzustrafen. Weiße Flagge auf weißem Grund, aka Negerboxkampf im Tunnel, eine beliebte Technik, um möglichst viele, für den Seitenbesucher unsichtbare Keywords unterzubringen, dürfte wohl von Google definitiv nicht goutiert werden.
Aber so etwas geht anscheinend noch durch:

Screenshot 1
Die ganze Breite und Höhe der Webseite wird hier für eine Textwüste mit möglichst vielen Keywords verwendet - ohne jegliche Strukturierung, dafür in extrem kontrastarmer Minischrift.
Screenshot 2
Ein Ausschnitt aus obigem Screenshot in Originalgröße, wie im Browser angezeigt

Hier wird nicht einmal der Versuch unternommen, den Text für den Besucher lesbar zu machen. Für mich eindeutig Suchmaschinen Spamming; für Google anscheinend nicht.
Ach ja, am Rande bemerkt: Wieso der Verfasser eine Seite mit dem Titel „Webdesigner Bernau am Chiemsee“ online stellt, erschließt sich mir auch nicht. Der Firmensitz ist laut Impressum jedenfalls Hunderte von Kilometern vom Chiemsee entfernt. Offensichtlich handelt es sich ohnehin nur um eine Landing Page.


Zählerstand melden im 21. Jahrhundert

Donnerstag, 17. April 2014

Alle Jahre wieder: Die Ablesung des Zählerstands Strom.

Die Stromversorger haben diese Arbeit seit langem an Ihre Kunden delegiert. Das macht sicher auch Sinn. Und im Jahr 2014 macht es auch Sinn, dass die abgelesenen Werte nicht mit der Schneckenpost, sondern per E-Mail gemeldet werden. Das ist sicher auch gut für die Versorger, denn die maschinelle, d.h. kostensparende Auswertung ist auf diesem Weg sicher einfacher, als Postkarten einzuscannen, und möglicherweise auch noch meine Handschrift entziffern zu müssen.

Aber dass ich zu diesem Zweck nicht nur meine persönlichen Daten, sondern auch noch 41 (einundvierzig!) Ziffern abschreiben und in das Webformular eintippen muss, ist so gar nicht 21. Jahrhundert. Mein Stromversorger sieht wohl selbst, dass hier ein hohes Fehlerrisiko besteht, und fordert mich per Bestätigungs-E-Mail auf:

Sind die Angaben richtig? Bitte prüfen Sie sie noch einmal. Vielen Dank.

Man könnte das Verfahren auch für alle Beteiligten sicher und komfortabel gestalten:
Ein QR-Code auf der Benachrichtigungskarte führt direkt auf die Webseite des Versorgers. Alle meine Daten, einschließlich der 41 Ziffern (der richtigen Ziffern) werden mit dem Seitenaufruf übergeben, und sind im Formular bereits ausgefüllt.

Eine entsprechende Mail ist an meinen Versorger gegangen. Ich bin schon neugierig auf die Antwort. Ob es dafür wohl bereits einen fertigen Textbaustein gibt?


Ältere Beitäge:

Kategorien:

Tastaturkürzel

zum Seitenanfang