Überall wird zurzeit darüber gesprochen, den Internet Explorer 6 abzuschaffen. Etliche Website blenden mittlerweile Warnungen bzw Update-Empfehlungen ein.

Sogar Microsoft hat für diesen Monat September eine Aktion lanciert, um Internet Explorer-Benutzer zum Upgrade zu bewegen: für jeden Nutzer, der von IE6 auf IE8 upgradet, spendet Microsoft 16 Mahlzeiten an hungernde Menschen in Amerika:

Bitte Upgraden Meldung einbauen
Wer auf seiner Website eine “Bitte-Upgraden”-Meldung einblenden will, findet auf der Website IE6nomore unter dem Link “Samples” etliche Code Snippets (für verschiedene Sprachen), die eine ganz hübsche Meldung einblenden für Besucher, die mit IE6 unterwegs sind.

Und wer dieses Script eingebaut hat und ohne vorhandener IE6 testen will, kann das via folgender Website tun: IE NetRenderer. Habt ihr ein solches Script schon auf euren Websites eingebaut?

Noch immer werden 51% der verkaufen Smartphones mit dem Nokia-System Symbian verkauft. Die folgende Grafik von Gartner zeigt auch: es werden zurzeit mehr iPhones verkauft als Windows Mobile Smartphones insgesamt.

Mittlerweile sind schon diverse Android-Geräte erhältlich, hierzulande hauptsächlich HTC Magic, HTC Hero und das Samsung Galaxy. Trotzdem werden mit 2% des Kuchens noch sehr wenig Android-Geräte verkauft. Diese tiefe Zahl erklärt sich dadurch, dass das neue Android-Flaggschiff HTC Hero erst Ende Juli vorgestellt wurde und das Samsung-Gerät auch erst kürzlich erhältlich wurde.

Was passiert als Nächstes?
Rund um das iPhone sollte es in nächster Zeit eher ruhig bleiben – allenfalls könnte eine Low-Budget-Version des iPhone 3GS veröffentlicht werden mit 8GB Speicherplatz. Im Bereich Android sollten wir in den nächsten Monaten diverse neue Geräte von verschiedenen Herstellern erblicken und im Windows Mobile-Lager wartet man auf die Version 6.5 mit einer für eine Bedienung ohne Stylus optimierten Oberfläche. Somit also auch erste Windows-Smartphones mit capacitive Touchscreens wie beim iPhone.

Quelle: Gartner, August 2009 via AdMob Mobile Metrics

Wer eine Blog-Website erstellen möchte, bedient sich an bewährter Open-Source-Software. WordPress ist da eine beliebte Basis. Darauf basierend ergänzt man das System mit einem eigenen Design, den wichtigsten Plugins, Optimierungen und ist bald startklar. Will man aus Entwickler-Sicht Blog-Funktionalitäten in ein bestehendes System integrieren, muss man mehr darüber wissen, was hinter den Kulissen abläuft.

Ein solches Szenario kann – obwohl aufwändig – durchaus Sinn machen. Beispielsweise will ein News-Verlag Multi-User-Blogging-Funktionen in ihr bestehendes News-Portal integrieren. Oder es besteht schon ein Community-Portal, das nun auch Blogfunktionen bereitstellen soll.

Wir schauen WordPress als Vorbild an. Die Software (von Wordpress.org) kann auf dem eigenen Server installiert werden oder in einer Multi-User-Version auf Wordpress.com direkt online verwendet werden. Es ergeben sich folgende notwendige Funktionen für ein ausgereiftes Blog-System:

System-Funktionen

• XML-API fürs Erfassen von Artikeln mit Blog-Clients (auch offline)
• Trackback- und Pingback-Funktionalität (ausgehend/eingehend)
• Kommentarspam-Schutz (zB Akismet)
• Versionierung von Artikeln
• evtl Erweiterbarkeit durch Plugins (zB für Twitter-Publikation)

Redaktioneller Teil (Artikelerfassung)

• Felder für Titel, Haupttext, Auszug
• Bearbeitungsmöglichkeit des Permalinks (zB zu SEO-Zwecken)
• Editieren in HTML-Ansicht (Embedding von YouTube-Snippets etc)
• Benutzerdefinierte Felder (falls beispielsweise vom Theme erfordert)
• Publikationsworkflow (Draft, Review, Public)
• Sichtbarkeit (Public, Private, Password Protected)
• Zeitgesteuertes Publizieren (inkl. korrektem Versenden von Trackbacks)
• Tags und hierarchische Kategorien

Web Frontend

• RSS-Feed (Gesamt, pro Kategorie, für Kommentare)
• Möglichkeit für RSS-Redirect zu FeedBurner-URL (für Statistiken und E-Mail-Subscriptions)
• Vermeidung von Double Content (Hauptpage/Detailansicht)
• Darstellung von Kommentaren und Trackbacks
• Darstellung Tag-Cloud und Kategoriebaum
• Gravatar-Integration
• Benachrichtigung des Autors bei Kommentaren
• Optionale Benachrichtigung der Diskussionsteilnehmer bei Antworten
• Social Bookmarking Funktionen

Wie man sieht, reicht es bei Weitem nicht aus, einfach Newsartikel chronologisch aneinander zu reihen, die neusten zuoberst, und dazu ein RSS-Feed anzubieten. Beachten müsste man bei dieser Auflistung zudem, dass in einem “Standard-System” wie WordPress noch tausende von zusätzlichen Funktionen durch kostenlose Plugins ergänzt werden können.

Usability misst den Grad des Usererlebnisses und kann damit umschrieben werden, wie einfach es ist eine bestimmte Aufgabe zu erfüllen. Usability Guru Jakob Nielson umschreibt dies folgendermassen:

“Usability is a quality attribute that assesses how easy user interfaces are to use. The word “usability” also refers to methods for improving ease–of–use during the design process.”

Wenn ein Websitebesucher zu lange warten muss, oder unerklärliche Fehlermeldungen auftreten, wenn ein Checkoutprozess nicht intuitiv ist, oder wenn man sich unnötigerweise mühsam für etwas registrieren muss, wird das Erlebnis auf der Website geschmälert und der Besucher entwickelt ein negatives Bild gegenüber dem Präsentierer.

Vielfach genügt nur schon eine grössere Schrift um das grundlegende Bedürfnis nach klarer Lesbarkeit zu erfüllen. Oft wird vergessen, dass eine Internetseite nicht nur am Desktopbildschirm von 20-Jährigen angesurft wird, sondern auch von Senioren auf einem iPhone. Die Kombination von kleinen Schriften und schlechten Kontrasten schliesst eine potentielle Zielgruppe aus, die immer grösser wird.

Es gibt auch einige Regeln, die beim Design und der Umsetzung beachtet werden sollten. Wie z.B. die Limitierung der Hauptnavigationseinträge auf sieben, da das Kurzzeit-Gedächtnis nicht mehr speichern kann. Oder die 3-Klick-Regel, die besagt, dass ein User mit maximal drei Klicks zu seinem Ergebnis gelangen sollte (Wenn auch dies schwierig ist so universal zu definieren, da gewisse Prozesse wie eine Bestellung in einem Onlineshop durchaus sechs und mehr Klicks beinhalten kann.).
Weitere interessante Aspekte betreffen die Psychologie. Da gibt es z.B. das Baby-Duck-Syndrom, das besagt, dass Besucher sich an das erste Design gewöhnen und danach alle anderen basierend auf dem ersten beurteilen. Dabei zeigt sich oft, dass User eher Designs bevorzugen, die dem ersten ähnlich sind und andere für schlecht befinden. Oder Banner-Blindheit, eine Fähigkeit, die es ermöglicht, unwichtige Elemente wie Bannerwerbung oder Inserate unbewusst auszublenden.
Desweiteren gibt es bezüglich Logodesign und Anordnung von Elementen eine ganze Liste mit psychologischen Erkenntnissen, die das Surfverhalten massgeblich beeinflussen.

Nachfolgend eine Checkliste, die bei der Umsetzung für eine Webseite herangezogen werden kann:

1. Aktive Navigation: Inklusive Hover-Effekte und Anzeige des aktiven Navigationsbaumes
2. Klickbare Labels in Formularen: Auch im Hinblick auf Accessibility für alternative Devices
3. Möglichst grosse Klickflächen: zur Verbesserung der Bedienerfreundlichkeit
4. Geführte Prozesse: wie z.B. bei einem Checkoutprozess mit einem Progress-/Prozessbar
5. Call-To-Action Links und leicht auffindbare Kontaktlinks: Da viele Leute immer noch den konventionellen Weg über das Telefon u.a. suchen
6. Strikte Trennung von Layout und Inhalten: Im Hinblick auf ein Redesign oder Portierung auf alternative Devices wie Screenreader

Webseiten sind heute nicht mehr nur Informationsträger, sondern sollen im Gegensatz zu statischen Medien einen Mehrwert für den Besucher bieten. Das Einbinden von sich dynamisch oder interaktiv ändernden Inhalten gehört zum Standardkönnen eines Webentwicklers.

Crossbrowser-Problematik
Früher mussten HTML-Programmierer ihren JavaScript-Code, der für eben solche Interaktionen gedacht war, mühselig auf allen gängigen Browsern und Plattformen testen, da die Unterschiede gerade im Bereich von JavaScript-Interpretation und CSS-Umsetzung extrem unterschiedlich waren und immer noch sind. In den letzten Jahren kamen JavaScripts-Frameworks auf, die einerseits die Crossbrowser-Problematik aufgriffen und andererseits das Einbinden von interaktiven Elementen erleichterten. Wegbereiter waren Prototype in Verbindung mit Script.aculo.us und YUI von Yahoo!. Es folgten Dojo, MooTools und ExtJS, Google brachte GWT raus, und die Liste wurde immer länger.

Das jQuery-Framework
Dabei hat sich aber jQuery als das Framework herauskristallisiert, das von Anfang an in der Community am besten ankam und seither eine exponentiell wachsende Liste von Erweiterungen anbietet. Die einfache Einbindung, das modulare System von Core und Plugins und die Performance erleichtern die Entscheidung bei der Wahl des passenden Frameworks zugunsten von jQuery.

Einsatz bei Kundenprojekten
INM hat diesen Trend auch erkannt und die Vorteile von jQuery bereits bei mehreren Kundenprojekten genutzt. So wird z.B. bei Nagra ein speziell designter Tooltip eingeblendet, bei Migros Do-It & Garden kommt ein Akkordeonmenu zum Einsatz und bei Crowne Plaza wird ein Verfügbarkeitsformular animiert eingeblendet. In laufenden Kundenprojekten, die aktuell in der Umsetzung sind, werden weitere jQuery-Elemente eingesetzt, die dem Websitebesucher einen deutlichen Mehrwert bieten werden.

Weitere Links:

• jQuery Tools bietet eine kleine aber feine Übersicht über die gängigsten Effekte
• jQuery UI: Showcase von Interfaceelementen, die mit kleinen Zusatzskripts realisiert werden können
• Tips & Tricks: Eine von zahlreichen Hilfeseiten zu den gängigsten Best Practices bei der Programmierung
• 15 Websites die sich ausschliesslich mit Lösungen befassen, die mit Hilfe von jQuery umgesetzt worden sind

Google lebt Software-Entwicklung nach dem Motto “Release early, release often”. Das kennen wir von all ihren Produkten mit “BETA” Flags längst.

Halten kann man davon, was man will, die Enttäuschung bei einigen über den Stand der aktuellen Entwicklungsversion von Google Wave lässt durchblicken, dass man manchmal lieber erst später Einblick in gewisse Produkte kriegen würde.

Google Chrome 3 BETA veröffentlicht
Wie dem auch sei, Google hat nun ihren Browser in der Version 3.0 BETA veröffentlicht. Schon die Version 2.0 scheint mir (gefühlt) 10x schneller als Firefox. Das Versprechen von Google, die dritte Version sei nochmal 30% schneller weckte mein Interesse. Nach der Installation kann ich – ohne konkrete Speed-Tests – aus Benutzersicht sagen: es fühlt sich in der Tat nochmal schneller an.

Erweiterbarkeit beschränkt sich auf Theming
Was mir in Google Chrome fehlt, sind nützliche Plugins wie Firebug etc. Immerhin hat Google jetzt Themes eingeführt. Man kann also “Tweak the chrome of Google Chrome”. Die eingebaute Funktion “Inspect Element” bietet etwas “Firebug-Funktionalität” – ersetzt aber nicht eine erwünschenswerte Erweiterbarkeit des Browsers durch Plugins.

Der frappante Geschwindigkeitsunterschied im Vergleich zu Firefox ist Hauptgrund für meinen Wechsel (auf Windows-Maschinen). Diese scheinbar noch schnellere Version wird es mir ein Stück einfacher machen, den Firefox nur noch gezielt für Firebug-Einsätze zu starten.

Google Chrome Beta herunterladen

Für .NET-Entwickler bietet sich mit MonoTouch eine gute Möglichkeit zum Einstieg in die Applikationsentwicklung für das iPhone. Aktuell läuft noch eine geschlossene Beta-Phase, für die man sich noch anmelden kann. Im September soll die erste Version dieser Plattform, die auf Mono basiert, veröffentlicht werden.

(via: Golem)

Dass Seitenlayouts nicht mit Tabellen und unsichtbaren GIF’s aufgebaut werden sollen, ist ja nix Neues, auch wenn dies von führenden Firmen und deren Webagenturen auch noch im Jahre 2009 praktiziert wird. 8 der 20 an der SMI kotierten Grosskonzerne schwören immer noch auf die veraltete Technik -> hier, hier, hier, hier, hier, hier, hier, hier. Die Nachteile liegen auf der Hand: Mehr Code, der zu längeren Ladezeiten führt und der nur schwer zu unterhalten oder umzugestalten ist, Plattformunabhängigkeit die nicht gegeben ist, Probleme beim Drucken, schlechte Indexierung bei Suchmaschinen, usw.

Die INM setzt Layouts für ihre Kunden schon seit langem nur noch mittels CSS um und verwendet nur den neusten Dokumenttyp-Standard XHTML 1.0.

Nachfolgend eine Auflistung mit kurzen Tutorials zu immer wiederkehrenden Problemen und best Practices im Zusammenhang mit CSS und HTML:

• Sticky Footer: Ein Seitenfooter, der immer zuunterst auf der Seite stehen soll. Wenn der Inhalt kürzer als das Browserfenster ist, dann soll der Footer am Rande des Fensters sein.
• Vertikale Zentrierung: 5 Möglichkeiten, eine vertikale Zentrierung hinzubringen. Eine Thematik, die seit eh und je bei Webdesigner für Kopfzerbrechen sorgt.
  
• Layout mit immer gleich hohen Spalten: Auch diese Problematik taucht immer wieder auf und kann nicht einfach so gelöst werden.
  
• Effiziente Print Stylesheets: Ein paar Tips, die beim Erstellen eines Stylesheets für die Druckausgabe berücksichtigt werden sollten.
• iPhone CSS: Mit der CSS-Klasse @media only screen and (max-device-width: 480px) { } können Elemente gezielt für den iPhone angesprochen werden.
• 10 weitere herausfordernde CSS-Techniken wie z.B. interessante Menüeffekte, erweiterte typographische Möglichkeiten mit CSS, CSS Charts oder dynamische CSS Variablen.
  

Viele verstehen SharePoint als eine browserbasierende (bis nächstes Jahr noch IE-basierende) Collaboration-Plattform. Natürlich stimmt das teilweise – die meisten SharePoint-Benutzer werden auch mit der Browser-Applikation zu tun haben. Dahinter steckt aber eine Entwicklungsplattform. Unter Anderem lassen sich sehr viele Ereignisse abfangen, um mittels Code die betreffenden Daten zu verarbeiten oder andere Prozesse auszulösen.

Beispiel aus der Praxis – saubere Projekt-Sites mit Site-Verzeichnis
Der Kunde schlägt vor, die Masken zur Erstellung von neuen Teamsites komplett zu verändern. Statt auf der Folgeseite sollen die Berechtigungen zusammen mit den Basiseinstellungen zur neuen Site zusammen auf einer Seite zu finden sein. Der Benutzer soll nur aus speziellen Projekt-Site-Vorlagen wählen können. Zudem soll die Site Directory Funktionalität verbessert werden.

Dem SharePoint-unkundigen Leser sei versichert: diese Änderungen sind kompliziert und nicht so vorgesehen in SharePoint (d.h. sie führen zu Problemen bei SharePoint-Updates).

Das Ziel ist aber das Wichtige und relativ einfach
Der Benutzer soll in einem einzigen Formular seine Angaben zur neuen Projekt-Site machen. Template, Berechtigungen darauf sowie ein Eintrag in einem Verzeichnis sollen damit gesetzt sein.

Lösung: auf das Ziel fokussieren und einen besseren, effizienteren Vorschlag anbieten. Mittels einer SharePoint-Liste “Projektliste” mit benutzerdefinierten Spalten ist es kein Problem, alle erforderlichen Inputs des Benutzers abzuholen. Beim Ereignis (Event) “Speichern” wird dann im Hintergrund die Projekt-Site anhand dem vom Benutzer gewählten Template erstellt und die Berechtigungen darauf gesetzt. Diese Projektliste dient zugleich dann als “Site Directory”.

Ausschnitt aus dem Code

Fazit:
Viel schnellere, flexiblere und direkt durch den Kunden erweiterbare Lösung ohne Rumgefummel in Funktionen, die beim nächsten Service Pack wieder überschrieben werden. Da wir die ganzen Projektdaten nun in der Projektliste haben, kann dieses bequem – zum Beispiel mittels Data View Web Part – als kleine Custom-Siteverzeichnis ins Portal integriert werden.

Die Einbindung von Google Analytics fürs Tracking von Website-Besuchern ist leicht gemacht: den zur Verfügung gestellen Tracking-Code einbauen. Was viele nicht wissen: mit Google Analytics lassen sich auch ausgehende Links (oder Download-Links und Flash-Events) messen.

Die _trackPageview-Funktion
Mit der _trackPageview-Funktion werden zusätzliche Events wie Flash-Events, JavaScripts-Events, File-Downloads, externe Links usw. auf der Website getrackt. Dabei kann ein „Dummy-Filenamen“ mitgegeben werden, unter dem der Event dann in der Statistik auftaucht.

Beispiel: Externer Link
<a href="http://www.example.com" onClick="javascript: pageTracker._trackPageview('/outgoing/example.com');">

Viel Spass beim Tracken von Downloads, JavaScript-Events, externen Links und alle möglichen anderen Dingen. Leider ist diese Methode noch nicht fürs schnelle Aufspüren des verlegten Autoschlüssels nützlich – wegen der Verzögerung der Berichte.