mobile Web Performance Optimization mit Chromiums 38 Responsive Design View

Der Titel ist ein ziemlicher Buzzword Dump, hält aber was er verspricht.

TL;DR

Mit Hilfe der Responsive Design View im Chromium((Responsive Design Mode – Ein Werkzeug welches verschiedene Geräteprofile und Netzverbindungen simulieren kann)) 38, konnte ich schnell Flaschenhälse auf einer Seite erkennen und mit kleinen Handgriffen beheben.

Neben einer kleinen Theorie-Runde gibt es weiter unten die Messwerte vor und nach der Optimierung, Verbesserungen um 66% sind drin!

und los…

Bis gestern habe ich immer das Firefox Responsive Design View genutzt. Das äquivalente Tool im Chromium war mir bekannt, aber ich fand es nicht so intuitiv wie beim Firefox.

Der Ansatz im Firefox war einfach direkter, allerdings muss man als Anwender das Device Pixel Ratio((Device Pixel Ratio – Hierbei weicht die native Auflösung eines Displays, zum Beispiel Full HD (1920×1080), von der im Gerätebrowser verfügbaren um einen bestimmten Faktor ab)) Konzept verstanden haben und die meta name="viewport" Angabe nicht vergessen.
Weiterlesen

simple Javascript HTML5 jQuery Form Validation

Formular Validierung hat noch nie Spaß gemacht und meistens beschränke ich die Validierung auf die Server-Seite. Doch bevor man ein Formular per AJAX abschicken will, ist es immer besser auch auf der Client-Seite die Eingaben zu validieren und dem Benutzer ggf. noch darauf hinzuweisen dass nicht alle notwendigen Informationen eingegeben sind, das erspart Frustration.

HTML5 ist dabei eine große Hilfe. Mit dem erweiterten Formularfeld Attribut type, sowie dem pattern und required Attribut übernimmt der Browser die Validierung. Per Javascript reicht dann die Suche nach Formular Elementen die required sind aber einen invalid Status haben:

var $form = $("#emailForm");
if ($form.find(":required:invalid").length === 0) {
  // alle Pflichtfelder validieren

} else {
  // Nicht alle Pflichtfelder validieren
}

Über CSS kann man die Formularfelder auch noch stylen je nachdem ob sie valid oder invalid sind. Wer noch „Nicht-HTML5-Browser“ unterstützten muss, könnte per Modernizr((Modernizr  – the feature detection library for HTML5/CSS3)) eine Weiche schalten und ein Javascript Plugin zur Valdierung nutzen, oder per Progressive Enhancement((Progressive Enhancement – Wikipedia Artikel)) das Formular einfach über die serverseitige Parameter Validierung überprüfen und ausgeben lassen – um die serverseitige Validierung kommt man auch mit der jQuery Zeile von oben nicht drumherum. Frontend Formular Validierung ist und bleibt ein UX-Enrichment((UX Enrichment – Die Bereicherung des Benutzer Erlebnis)).

HTML5 Video als Flashfallback

Tja, das Web wäre soweit, aber die User noch nicht. Daher gibt es doch relativ oft die Anforderung einen bestehenden Flashplayer bei Geräten zu ersetzen die kein Flash installiert haben.

Dabei gibt es zwei Dinge zu beachten: Kann der Browser ohne Flash überhaupt HTML5 Video und liefert man die richtigen Codecs aus – sonst schaut der User ja auch wieder in die Röhre.

Wenn zum Beispiel ein IE8 kein Flash installiert hat und man einfach als Fallback den <video>-Tag eingebunden hat ist dem User nicht geholfen.

Weiterlesen

scrollto infinite (mit jquery)

Ob der Begriff „inifinte scroll“ wirklich Sinn ergibt, sei mal dahin gestellt, aber bei Bings oder Googles Bildersuche hat man schon das Gefühl das es unendlich weitergehen wird.

Es geht darum, dass, sobald der Besucher einen bestimmten Seitenbereich erreicht (erscrollt) hat, automatisch weitere Inhalte geladen und in die Seite eingefügt werden – eine Art „Paginierung 2.0“.

Weiterlesen

Find As You Type / Autocomplete im Eigenbau (jQuery & yii)

Wir sind uns wohl alle einig: Ein Textfeld auf der eigenen Homepage das nach jedem Buchstaben, der eingegeben worden ist, eine aktualisierte Ausgabe erzeugt ist schön!
Google nennt sowas „Google Instant“, wir nennen es jetzt mal „Finde beim tippen“-Funktion oder so.

Als Ausgangssituation nehmen wir an, wir haben eine Datenbank mit beliebigen Inhalt (zB Blog Beiträge) und nun soll mit einem Textfeld der Titel der Blogeinträge durchsucht werden. Weiterlesen

„lazy load“ vom facebook cdn

Obwohl Facebook ein CDN bietet, wartet man (der Browser) häufig lange auf Facebook Javascripts oder CSS Dateien… Manchmal bis zu 10 Sekunden oder länger und in dieser Zeit denkt der Seitenbesucher das die Seite „langsam“ ist, also langsam ausgeliefert wird.

Wenn wir Yahoos und Googles Seiten Optmierungen vollendet haben, haben wir zwar alle <script>-tags vor Ende des </body>-tags gesetzt, aber wenn Facebook nur langsam seine Daten ausliefert, dreht sich oben im Browser noch die Spinner Grafik und manchmal verzögern sich dadurch massiv weitere JavaScript Ausführungen.

Weiterlesen

jQuery && IE(6/7) && parsererror && utf8 && utf-8…

Heute hatte ich einen interessanten Fehler zu finden. Das Problem war ganz einfach, es sollte per ajax etwas nachgeladen werden. Genau genommen etwas validiert. Im Erfolgsfall kam die Antwort "1" ansonsten "0" zurück.

Und dann kam der IE6 und IE7 und gaben einen „parsererror“ aus. In Fiddler und Co konnte ich die ajax calls verfolgen und sehen das der richtige Wert zurückgeliefert wird, aber trotzdem wurde immer der „error“ Handler aufgerufen…

Weiterlesen

YII Ajax Paginierung Controller

Bei meinem letzten Projekt habe ich mit dem großartigen Yii Framework eine Seite erstellt, die einerseits den aktuellen Trends folgen sollte, mir persönlich aber auch wichtig war, dass eine „No-Script“ Variante weitestgehend funktioniert.

Viele Inhalte der Seite sollten blätterbar sein und häufig wurde per Tab Navigationen Inhalt ausgespielt. Spontan fallen einem folgende Möglichkeiten ein: Weiterlesen

Minigolf Portal Updated Again

Die Saison nähert sich dem Ende, doch hier ist noch lange nicht Schluss.
Mit dem neusten Update kann das Portal zwischen Saisons unterscheiden und die Administration hat einen großen Schritt Richtung Benutzerfreundlichkeit getan, wie folgender Screenshot beweisen soll.

Außerdem ist ein weiteres Feature vorbereitet worden und ein weiteres wartet nur noch auf seine Implementierung.

Vielleicht stell ich es sobald es Feature Complete ist zum download.

Anderseits steht bei dem Images2Move Projekt ein Update noch an…

Zuviel Ideen für zu wenig Zeit…

Minigolf Scoreboard UPDATE!

Hallo Freunde,

ich habe den gestrigen Tag genutzt um das Minigolf Scoreboard gründlich zu überarbeiten. Da mein nächstes Projekt höchstwahrscheinlich auch mit dem großartigen Yii Framework umgesetzt wird, wollte ich nochmal mein Wissen auffrischen und habe die Arbeit am Portal wirklich genossen.

Aber was hat sich denn alles geändert?

Aber der Reihe nach. Für die erste Version des Minigolf Scoreboard hatte ich ein Design Namens „Red Music“ gewählt, das auf den ersten Blick ganz niedlich war, mich aber bei jeder Erweiterung zu sehr einschränkte. Daher musste der Anstrich der Seite geändert werden um mehr gestalterische Möglichkeiten zu haben.

Das nun gewählte Thema gefällt mir sehr gut, ich muss lediglich noch ein paar Grafiken erstellen damit es mehr „minigolfiger“ ist.

Das positive an einem neuen Anstrich ist auch, das man Seitenteile wegfallen lassen kann ohne das es jedem direkt auffällt. Ich wollte eigentlich mittels jquery.flot auf der Startseite eine interaktive Grafik erzeugen, aber habe schon Stunden in die Datenaufbereitung gesteckt ohne ein befriedigendes Ergebnis zu erhalten. Das hab ich jetzt wegfallen lassen. Dafür wird immer direkt der letzte Spieltag ausgespielt mit Verlinkungen zu allem und jedem. Die interaktive Tabelle ist natürlich geblieben.

Neben zahlreichen Änderungen unter der Haube sind mir während der Arbeit auch noch weitere Fakten eingefallen die es wert sind ausgespielt zu werden.

So wurde die Auflistung der Spieler wahrlich bereichert als mir die Idee kam alle Asse und Glocken zu zählen und die Spieltage hervorzuheben an denen ein Spieler die meisten Asse oder die meisten Glocken gespielt hat! Das hebt den Wettkampf auf eine völlig neue Stufe ;)

In den nächsten Ausbaustufen will ich mich noch um eine spezielle mobil Version der Seite kümmern, damit sie auf meinem Handy auch schneller und optimaler angezeigt wird. Die Möglichkeiten von CSS3 werden mir dort helfen.