Posts mit dem Label HTML5 werden angezeigt. Alle Posts anzeigen
Posts mit dem Label HTML5 werden angezeigt. Alle Posts anzeigen

Mittwoch, 4. Februar 2015

Achtung, die Mobilen kommen

Der Anteil an Nutzern, die mit Smartphone und Tablets auf Webseiten zugreifen, ist inzwischen so groß, dass es höchste Zeit ist, sich als Webseitenbetreiber mit dem Thema gerätegerechte Webseitendarstellung zu befassen. Andernfalls verprellt man wegen der nicht optimalen Nutzererfahrung beim Seitenbesuch seine Besucher und Kunden, rutscht in den Suchmaschinenergebnissen nach hinten und verschlechtert mit der Zeit seine Reichweite und alles, was daran hängt. Eine Lösung für das Problem heißt Responsive Webdesign. Aber wie geht man bei der Umstellung eines Konglomerats aus über Jahrzehnte entstandenen Webseiten und Blogs vor?

Nachtrag zum "Mobilegeddon": Google hat inzwischen in seinem Entwicklerblog veröffentlicht, dass die Mobile Friendliness (Nutzerfreundlichkeit für Mobilgeräte) ab dem 21. April 2015 als Ranking-Signal für die Suchergebnisse für Smartphones berücksichtigt wird.

Anzeige


Lange schien mir der Aufwand, mein Webangebot so umzustellen, dass die Webseiten sowohl mit einem Desktop-Computer als auch mit mobilen Endgeräten optimal dargestellt werden angesichts der sehr niedrigen Besucherzahlen mit mobilen Geräten wie Smartphone und Tablet zu hoch. Als mir vor ein paar Tagen das Google-Webmaster-Team schrieb: Beheben Sie Probleme der mobilen Nutzerfreundlichkeit auf www.tinto.de/, war das für mich Anlass, mich mal wieder genauer mit meinem Webseiten- und Blog-Traffic zu befassen.

In den letzten 12 Monaten (Kreisdiagramm oben) nutzten etwa 35 Prozent der tinto-Besucher ein Smartphone (rot) oder ein Tablet (blau). 65 Prozent nutzten einen Desktop-Computer. Im Jahr davor waren es noch wesentlich weniger Mobile (Kreisdiagramm unten).
Seit 1998 erstelle ich für tinto Webseiten und Blogs zu allem, wozu ich glaube, Wissen oder Erfahrungen beitragen zu können. Ich realisierte meine Vorstellungen mit Tools und Programmierkenntnissen, die ich zur jeweiligen Zeit hatte. Die Zahl meiner Seiten und der Besucher wuchs über die Jahre zu einem kleinen Imperium. Aber waren es bis vor wenigen Jahren fast ausschließlich Desktop-Nutzer, die meine Angebote nutzten, zeigt der jüngste Blick in mein Trafficanalyse-Tool Google Analytics, dass in den letzten 12 Monaten 35 Prozent der Besucher mit mobilen Endgeräten wie Smartphone und Tablet kamen. Im Jahr davor waren es noch knapp 23 %. Laut Statista surfen sogar 54 Prozent der Deutschen mobil.

Dabei sind meine Besucher keine "Digital Hipsters", sondern ganz normale Verbraucher aller Altersklassen, die sich für Garten-, Gesundheits- und andere Verbraucherthemen interessieren. Je nach Zielgruppe, wird bei anderen der Anteil der mobilen Nutzer auf ihren Webseiten noch wesentlich höher sein.

Infografik: 54% der Deutschen surfen mobil | Statista
Mehr Statistiken finden Sie bei Statista

Trafficanalyse, responsive Webdesign und Prioritätensetzung stehen jetzt auf meinem Stundenplan

Bei einem Responsive Webdesign passt sich die Darstellung der aufgerufenen Webseite oder des Blogartikels automatisch an den Nutzer, beziehungsweise an sein Gerät oder seine Bildschirm-/Fenstergröße, an. So werden beispielsweise Elemente auf einem Desktop mit seinem großen Bildschirm und entsprechend großen Fenstern nebeneinander gezeigt, auf einem Smartphone dagegen untereinander. Auch Schriftgrößen und Menüs können für verschiedene Besuchergeräte, deren Auflösung oder Fenstergröße unterschiedlich konfiguriert werden. Technisch wird das durch die Programmierung nach den neuen Möglicheiten und Standards von Hyper Text Markup Language (HTML5), Cascading Style Sheets (CSS3, Media Queries) und JavaScript umgesetzt.

Zwar habe ich meine neuesten "von Hand" programmierten, kleinen Projekte wie tinto-Horoskop gleich responsive umgesetzt oder sie nachträglich auf responsive umgestellt (beispielsweise Gartenblogs, Mein Pflanzenarchiv und Mein Outfitarchiv), sodass die Seiten bei Aufruf durch ein Smartphone anders angezeigt werden als bei Aufruf per Desktop. Dabei passt sich die Darstellung an die Fenstergröße an - man kann das ausprobieren, indem man die Seite aufruft und das Browserfenster verkleinert.

Auch meine Blogs ließen sich recht einfach so konfigurieren, dass Besucher mit einem mobilen Gerät eine andere Version der Seite gezeigt bekommen - sowohl mein tinto bloggt-Blog, den ich mit Wordpress (php und MySQL) erstellt habe, als auch die verschiedenen Blogger-Blogs wie dieser. Dank passender Vorlage (Theme) waren nur ein paar Klicks nötig, um das Feature zu aktivieren. Allerdings steckt hier der Teufel im Detail: Bei der Überprüfung mit einem Mobile-Phone-Emulator stellt man fest, dass das Ergebnis nicht auf jedem Endgerät optimal ist.

In welcher Reihenfolge auf Responsive Webdesign umstellen

Im Gegensatz zu Blogs oder anderen Content-Management-Systemen (CMS) lassen sich alte statische Webseiten, die oft mit proprietären Webdesign-Programmen erstellt wurden, nur aufwendig umstellen. Doch die Zeit drängt - so scheint mir -, wenn man nicht ausschließlich Desktop-Nutzer als Zielgruppe hat und seine mobilen Besucher nicht verlieren möchte.

Hilfreich: Der Emulator und der Punkt Nutzerfreundlichkeit
unter dem Reiter Mobile von Google PageSpeed Insights
Gerade wegen meiner über Jahre gewachsenen, nicht homogenen Projekte und wegen des hohen Aufwands muss ich eine sinnvolle Reihenfolge finden, wie ich bei der Umstellung vorgehe. Im Grunde geht es darum, Webprojekte/-seiten mit dem größten potenziellen Effekt zu identifizieren. Doch welcher Effekt ist mir überhaupt der wichtigste: Reichweitenverbesserung für bestimmte Botschaften, Erhöhung meines Bekanntheitsgrades, Erreichen potenzieller Auftragskunden (Werbekunden, Textaufträge-Kunden), sonstige Selbstvermarktungseffekte und/oder Affiliate-Werbeeinnahmen? Am liebsten natürlich alles.

Es gibt viele Möglichkeiten, eine Reihenfolge zu finden, beispielsweise:
  • entlang der hierarchischen Struktur
  • Webprojekte/-seiten nach Traffic-Kennzahlen sortieren und bei denen mit den höchsten Werten für alle Geräte beginnen. (Das kann allerdings davon beeinflusst sein, wie gut die Seiten bereits für die Ansprüche mobiler Geräte "versehentlich" optimiert sind). 
  • Webprojekte/-seiten nach Werbeeinnahmen-Kennzahlen sortieren und bei denen mit den höchsten Werten für alle Geräte beginnen. (Das kann auch davon beeinflusst sein wie gut die Seiten oder zumindest die Werbung darauf bereits für die Ansprüche mobiler Geräte optimiert sind). 
  • Webprojekte/-seiten danach sortieren, wie oft auf sie mit mobilen Geräten zugegriffen wird. (Es ist allerdings möglich, dass Suchmaschinen wie Google mobilen Geräten bevorzugt bereits "versehentlich" optimierte Seiten in den Suchergebnissen zeigt) 
  • Webprojekte/-seiten danach sortieren, wie oft sie von mobilen Geräten ohne Verweildauer verlassen werden 
  • Planen, welche Themen und Webseiten als nächstes gefeatured werden sollen und diese umstellen und updaten 
Während eine Vorgehensweise anhand der Struktur nur bei einem geschlossenen Projekt, das als Ganzes neu veröffentlicht wird, Sinn macht, muss man meiner Meinung nach zum Priorisieren von Projekten oder Einzelseiten, die alleine geupdated werden sollen, letztendlich (fast) all die anderen Möglichkeiten berücksichtigen - gewichtet entsprechend den persönlichen Prioritäten, um den größtmöglichen Effekt zu erzielen.

Da wartet ein riesiger Berg Arbeit. Packen wir es an.

Hilfsmittel 

Während der Umprogrammierung hilfreich:

Weitere Informationen
Anzeige


Dienstag, 15. Mai 2012

Ist die Zeit reif für HTML 5?

Interview mit Stefan Münz, Initiator von SELFHTML, Technischer Redakteur, Programmierer und Autor

Fragt man einen Nichtprogrammierer, woraus eine Internetseite besteht, dann wird er wohl antworten: aus Textblöcken, Links und Bildern. Denn das ist das, was uns der Browser zeigt, wenn wir eine Webseite aufrufen.

Doch unter der Haube enthält eine Webseite zusätzlich Meta-Informationen in Form von HTML-Code, mit dem die Seiteninhalte strukturiert werden - so dass der Browser sie überhaupt wie gewünscht darstellen kann.

Diese Auszeichnungssprache HTML (Hypertext Markup Language) wird derzeit von einer Arbeitsgruppe namens WHATWG (whatwg.org) weiterentwickelt und mit dem für die Standardisierung von Webtechnologien zuständigen World Wide Web Consortium (W3C - w3.org) abgestimmt. Die offizielle aktuelle Version ist zwar HTML4.01, doch HTML5 mit vielen neuen Funktionen steht längst in den Startlöchern.

HTML5 soll HTML endlich von SGML (Standard Generalized Markup Language) mit ihren DTDs (Dokumenttypdefinitionen) loslösen, aber trotzdem rückwärtskompatibel sein.

Zu den Vorteilen von HTML5 gehören neue Elemente wie z. B. section, nav und article, die eine bessere Strukturierung bei gleichzeitiger Auszeichnung ermöglichen. Auch soll HTML5 Plugins wie Adobe Flash überflüssig machen.

HTML5 Strukturbeispiel


Stefan Münz, Technischer Redakteur, Programmierer und Autor hat diese ganze Entwicklung von HTML mitgemacht. Sein Name ist jedem Webdesigner ein Begriff, denn er hat in den 1990ern SELFHTML initiiert und aufgebaut - das HTML-Online-Nachschlagewerk, das seit vielen Jahren fast jeder nutzt, der Internetseiten professionell oder als Hobby erstellt. 2007 ist Stefan Münz zwar aus dem Projekt ausgestiegen, doch HTML gehört weiterhin zu seinen Themen. So erschien von ihm und Clemens Gull Ende 2010 das HTML 5 Handbuch.

Ich durfte Stefan Münz ein paar Fragen stellen:

Wie verbreitet ist HTML5 inzwischen im Netz? Welche großen Marken nutzen schon HTML5?

Die Frage nach der Verbreitung lässt sich sehr unterschiedlich beantworten, je nachdem, mit welchem Maß man misst. Man kann zum Beispiel versuchen herauszufinden, wie viel Prozent aller Webseiten den post-SGML-typischen HTML-Doctype verwenden. Namics Weblog hat das neulich getan und kam zu einem eher nüchternen Ergebnis: 5,4% aller schweizer Webseiten nutzen den neuen Doctype (Quelle). Man kann aber auch mal einen Blick in die Quellcodes der meist besuchtesten Sites werfen: die Google-Suche verwendet den neuen Doctype, Facebook verwendet ihn, YouTube verwendet ihn, Yahoo verwendet ihn, und Baidu verwendet ihn - also die fünf meistbesuchtesten Webangebote weltweit (Quelle). Erst Platz sechs, die Wikipedia, setzt noch auf XHTML1.0 transitional. Auch die Mehrzahl neuerer Wordpress-Themes ist HTML5-basiert. Man ist also in guter Gesellschaft, wenn man sich für HTML5 entscheidet.

Kann man kleinen Website-Betreibern schon HTML5 empfehlen - sprich: wird HTML5 schon von den wichtigsten Browsern unterstützt?

Ich würde nichts anderes mehr empfehlen, wenn nicht besondere, eher seltene Gründe dagegen sprechen. Ein solcher Grund könnte sein, dass ein Anbieter Webseiten-Code im Rahmen einer existierenden XML-Infrastruktur verarbeiten möchte und deswegen "echtes" XHTML benötigt. Aber Browser sind kein Argument mehr gegen HTML5, nachdem ja mittlerweile Konsens ist, dass der IE6 kein geeignetes Mittel mehr ist, um im Web unterwegs zu sein. Für alle übrigen Browser wird man je nachdem, welche Features von HTML5 man überhaupt verwenden möchte, mehr oder weniger viele Workarounds benötigen. Da heute aber auch weitgehend Konsens ist, dass man JavaScript für einen normalen Website-Betrieb als aktiviert voraussetzen darf, wird einem diesbezüglich mittlerweile viel Arbeit abgenommen, vor allem durch Lösungen wie JQuery und seine zahlreichen Plugins. Wenn man vor der Aufgabe steht, ein völlig neues Webprojekt ground up neu zu gestalten, würde ich als Framework die HTML5-Boilerplate empfehlen - eine robuste Basis für zeitgemäße Webseiten, mit allem, was man heute so benötigt - von JQuery über Modernizr für HTML5/CSS3-Workarounds, CSS-Reset bis hin zu Vorlagen für eine robots.txt oder die XML-Datei für Adobe-Cross-Domain-Policy.

Funktioniert HTML5 auch mit Web Application Engines, falls jemand große Projekte aufziehen will?

Da kann ich nur für FastCGI sprechen (für andere Application Engines entwickele ich selber nicht). Die meisten heute genutzten HTML5-Features haben für Web Application Engines gar keine Relevanz, weil sie rein client-seitig verarbeitet werden. Anders ist das bei Technologien wie den Web Sockets, einem wichtigen neuen Verbindungsprotokolltyp im Dunstkreis von HTML5, der HTTP ergänzt und Präsenzserverfunktionalität für Chats, Multi-User-Spiele und dergleichen ermöglicht. Web Sockets erfordern sowohl client-seitig (Browser) als auch webserver-seitig entsprechende Unterstützung. Mittlerweile gibt es serverseitige Plugin- oder Modul-Lösungen für Apache, Tomcat, LightHTTP und andere.

Muss oder sollte man alte Websites auf HTML5 umstellen? Schon jetzt oder später bzw. ab welcher Version?

"Historische" Seiten sollte man, finde ich, ruhig mal lassen, wie sie sind, und Feedback abwarten. Sicherlich werden viele alte Seiten im Laufe der Zeit immer fehlerhafter - besonders wenn sie proprietäre HTML-Elemente enthalten, beim CSS auf das veraltete Microsoft-Box-Modell setzen oder seinerzeit coole, heute aber nicht mehr unterstützte oder verpönte Technologien wie etwa ActiveX-Controls nutzen. Leiden alte Projekte zunehmend unter solchen Erosionserscheinungen, muss ein sinnvoller Kompromiss gefunden werden zwischen heutiger Bedeutung/Reichweite und Änderungsaufwand.

Bei allen Websites dagegen, die noch aktiv gepflegt werden, und die hin und wieder ohnehin einen kräftigen Relaunch spendiert bekommen, sollte die HTML5-Umstellung auf der Todo-Liste stehen. Da gilt eigentlich das Gleiche wie bei Neuprojekten. Da die meisten Webseiten heute dynamisch generiert und die Inhalte via CMS gepflegt werden, genügt es in vielen Fällen, Templates zu ändern. Natürlich kann es in der Praxis darüber hinaus zu Problemen kommen wie Konflikten zwischen HTML5-typischem JQuery und bestehenden JavaScripts. Solche Probleme zu lösen, erfordert mitunter einigen Aufwand. Doch insgesamt sind die Probleme bei der Umstellung auf HTML5, glaube ich, kleiner als befürchtet. Der Teufel steckt da eher im Detail, und den Teufel im Detail wird man so oder so niemals los.

Vielen Dank für die Informationen und Tipps und weiterhin alles Gute!


Buchtipp

HTML5 Handbuch*
Die neuen Features von HTML5
Stefan Münz, Clemens Gull
Franzis Verlag GmbH
744 Seiten
ISBN-13: 978-3-6456-0284-6

* Werbepartnerlink


Mehr von Stefan Münz und HTML5