Responsive Webseiten für Smartphones: Physikalische vs. logische Auflösung

29/11/201704/04/2018 ohoess Knowledge Android, HTML, Mobile Anwendungen, Mobile Web, Responsive, Samsung, SEO, W3C, Web, Web-Design, Web-Development, Web-Entwicklung

Link auf Original-Artikel kann gerne geteilt werden !

Webseiten sollten sich heutzutage aus Nutzer- und SEO-Sicht an die Bildschirmgröße und –auflösung der verwendeten Geräte anpassen (sog. Responsive Webseiten / Responsive Webdesign, siehe älterer Artikel).

Während „alte“ Geräte, z.B. das Samsung Galaxy S1 noch relativ niedrige Auflösungen hatten (480 x 800 Pixel), haben moderne Geräte viel höhere Auflösungen bei ähnlicher Display-Größe, was eine höhere Pixeldichte ergibt. Beispielsweise haben aktuelle Geräte wie das Samsung Galaxy Note 8 eine Auflösung von 1440 x 2960 Pixel, mehr als der eine oder andere Laptop bzw. Desktop-Monitor.

Wie kann nun ein Webentwickler mit diesen unterschiedlichen Auflösungen umgehen, um optimal benutzbare Seiten bereit zu stellen ?

Weiterlesen →

AMP (Accelerated Mobile Pages) und Google’s Umsetzung – Fluch oder Segen ?

09/09/201706/04/2018 ohoess Knowledge, Opinion Google, HTML 5, Internet, Javascript, Mobile Web, Responsive, Web, Web-Analytics, Web-Design, Web-Development, Web-Entwicklung, Web-Technologien, Web-Tracking, WordPress

Link auf Original-Artikel kann gerne weitergegeben werden !

AMP-Seiten: Darstellung in der Google-Suche

Mit AMP-konformen Webseiten (Accelerated Mobile Pages) kann die Anzeige von Webseiten auf Mobil-Geräten, insbesondere aus der Google-Suche heraus, stark beschleunigt werden.

Ärgerlich und eigentlich schon unverschämt ist, dass Google, als weltweit wichtigste Suchmaschine und wesentlicher Treiber des AMP-Projekts, die AMP-Seiten zur „Reduktion der Anzeigedauer“ aus seinem eigenen Cache ausliefert und somit die Betrachter der Seite gar nicht auf die ursprüngliche Seite beim eigentlichen Betreiber kommen (erst nach Klick eines Links).

UPDATE: Die SEO-Profis von SEMrush haben eine Studie zum Thema AMP-Seiten mit interessanten Infos veröffentlicht. Laut SEMrush ist AMP ein „Muss“, aber nur ca 30% der großen Publisher nutzen es und dort sind die AMP-Seiten oftmals fehlerhaft umgesetzt.

Um keine News mehr zu verpassen, am Besten dem Blog per Mail folgen (siehe unten) oder den monatlichen Newsletter abonnieren.

Weiterlesen →

HFT Stuttgart goes mobile – jetzt mit mobiloptimierten Webseiten

02/03/201614/04/2016 ohoess News Google, HFT Stuttgart, Mobile, Mobile Web, Responsive, Web, Web-Design, Web-Optimierung

HFT Stuttgart - Jetzt auch mit mobiler Webseite — HFT Stuttgart – Jetzt auch mit mobiler Webseite

Seit dem 1. März 2016 ist die Homepage der HFT Stuttgart auch als mobile Version verfügbar und wird auf unterschiedlichen mobilen Endgeräten optimiert angezeigt.

Weiterlesen →

Google Mobile-Friendly: Webseiten auf Mobil-Optimierung testen – Deadline 21.4.2015

23/03/201504/05/2015 ohoess Knowledge, News Google, Mobile, Mobile Web, Responsive, SEO, Web, Web-Design, Web-Development, Web-Entwicklung, Web-Optimierung

Als Nachtrag zu diesem Artikel bzgl. responsiven / mobiloptimierten Webseiten möchte ich aus aktuellem Anlass auch noch auf den ohne Login verfügbaren Google Mobile-Friendly-Test hinweisen !!

Ab dem 21. April 2015 werden mobil-optimierte Webseiten bei Google besser positioniert !!!

Google Mobile-Friendly: Webseiten auf Mobil-Opimierung testen

Weiterlesen →

Responsive / Mobile Webseiten – Interessante Tools

02/01/201523/03/2015 ohoess Knowledge AmIResponsive, App, Mobile, Mobile Web, Responsive, SEO, W3C, Web, Web-Design, Web-Development, Web-Entwicklung, Web-Optimierung

Die Bereitstellung von optimiertem Webcontent für mobile Geräte bzw. unterschiedliche Displaygrößen (sog. Responsive Design) wird immer wichtiger bzw. ist heute eigentlich schon ein „Muss“.

In diesem Zusammenhang habe ich den Blog auch auf ein „responsives“ Template umgestellt … geht ja mit WordPress ganz einfach …

Ein nettes Tool in diesem Zusammenhang ist AmIResponsive? (siehe Abbildung). Damit kann man einfach prüfen, wie die Webseite auf unterschiedlichen Bildschirmgrößen aussieht (man kann die jeweilige Seite in der Miniaturansicht sogar benutzen).

Andere Tools, wie z.B. mobiReady und der W3C mobileOK Checker gehen noch einen Schritt weiter und überprüfen eine Vielzahl von Guidelines für die Erstellung von mobilen Webseiten. Aber Achtung: nicht erschrecken, wenn es eine Vielzahl von Fehlermeldungen und Warnungen gibt. Die Tools sind recht „hart“ eingestellt, so dass die Seiten auch auf älteren, leistungsschwacheren Geräten und langsamen Verbindungen gut laufen. Interessant ist auch, dass z.B. die W3C-Seite bei ihrem eigenenen Test nur unzureichend abschneidet 🙂 In jedem Fall geben die Tools interessante Hinweise.

Ausschlaggeben ist am Ende der Test von Google … über die Google Webmaster-Tools -> Crawling -> Abruf wie bei Google kann man durch Google die Mobil-Eignung testen lassen und bei Erfolg zur Indizierung weiterleiten. Die Innovative-Trends-Seiten wurden trotz Warnungen in den Mobil-Index aufgenommen (sichtbar am Vermerk „Für Mobilgeräte“ in den Google-Suchergebnissen auf Mobilgeräten). Ziel erreicht !

Weitere interessante Tools in diesem Kontext können gerne per Kommentar genannt werden …

Am I responsive ? Wie sehen Webseiten auf unterschiedlichen Displaygrößen aus ? — Am I Responsive ? Wie sehen Webseiten auf unterschiedlichen Displaygrößen aus ?

Oliver Höß

BuiltWith.com: Mehr über Webseiten herausfinden …

06/10/201414/01/2015 ohoess Knowledge Web, Web 2.0, Web-Analytics, Web-Design, Web-Framework, Web-Tracking

Wenn man wissen möchte, welche Technologien und Frameworks eine Webseite verwendet, kann man sich den ausgelieferten HTML/JavaScript-Seitencode anschauen.

Aber es geht auch einfacher … mit BuiltWith.com, kann man auf eine komfortable Art und Weise durch Eingabe der URL Informationen über eine Seite herausfinden

Beispielhafte gelieferte Daten sind: Webserver, Webframeworks (z.B. PHP, ASP.NET, …), JavaScript Libraries, Widgets, Tracker, uvm.

Die Funktionalität kann auch als PlugIn in den Browser installiert werden … habe ich aber nicht ausprobiert …

Außerdem gibt es auch noch seitenübergreifende Statistiken, die zeigen, welche Technologie wie häufig verwendet wird.

Für tiefergehende Analysen muss natürlich trotzdem der Code analysiert werden … und natürlich sind auch von „außen“ nicht alle Aspekte sichtbar …

BuiltWith.com: Mehr über Webseiten erfahren ... — BuiltWith.com: Mehr über Webseiten erfahren …

Oliver Höß

Web-Optimierung durch minimal-invasive A/B-Tests – Beispiel Optimizely

30/04/201401/05/2014 ohoess Knowledge A/B-Test, eBusiness, eCommerce, HCI, HMI, Optimizely, Usability, Web-Design, Web-Optimierung

A/B-Tests werden in der Werbung genutzt, um die Wirkung von unterschiedlichen Varianten eines Werbemittels in der Zielgruppe zu testen. Auch im Web-Umfeld kann diese Methode eingesetzt werden, um den Einfluss von unterschiedlichen Varianten einer Webseite auf das Besucherverhalten (z.B. hinsichtlich der Conversion-Rate) zu ermitteln.

Ein interessantes Tool in diesem Umfeld ist Optimizely.com. Durch einen ausgefeilten WYSIWYG-Editor kann die bestehende Webseite design- und layout-technisch relativ einfach und minimal-invasiv, d.h. ohne Veränderung des zugrunde liegenden Programm- bzw. HTML-Codes, verändert werden.

Durch eine anschließende Einbindung eines JavaScript-Codes wird dann der Besucher im Betrieb per Zufall auf die unterschiedlichen Varianten der Seite umgeleitet und es kann die unterschiedliche Wirkung neutral gemessen werden. Anschließend sollte natürlich die erfolgversprechendste Variante gewählt und als Ausgangspunkt für weitere Optimierungen verwendet werden (siehe Abbildung).

Leider ist das Tool nicht kostenlos, es kann jedoch 30 Tage lang getestet werden …

A/B-Testing mit Optimizely (Quelle: Optimizely.com)

Weiterlesen →

Kostenlose Profi-Bilder für Blogs und nicht-kommerzielle Webseiten von Getty Images

12/03/2014 ohoess Knowledge, News Bilder, Creative Commons, Getty Images, Lizenzmodelle, Web, Web 2.0, Web-Design

Für Webseiten und Blogs ist eine ansprechende graphische Gestaltung mit entsprechendem Bildmaterial von großer Bedeutung. Der Betreiber bzw. Autor der Webseite muss natürlich darauf achten, dass die Lizenzbestimmungen bei der Verwendung von Bildern eingehalten werden. Neben kostenlosen Lizenzmodellen, z.B. den Creative Commons, existieren auch eine Reihe von Bildarchiven, bei denen kostenpflichtige Bilder bezogen bzw. lizensiert werden können.

Das bekannte Bildarchiv Getty Images bietet nun eine Vielzahl der verfügbaren Bilder zur kostenlosen Einbettung in nicht-kommerziellen Webseiten und Blogs an. Dabei muss nur ein kleines HTML-Snippet (iFrame-Mechanismus) eingebunden werden (siehe unten). Dadurch werden immer die Informationen von Getty Images sowie ein Link dorthin integriert.

Der Bezug von höherauflösenden Bildversionen bzw. eine Nutzung der Bilder in kommerziellen Publikationen ist leider weiterhin kostenpflichtig (was aber auch verständlich ist, da professionelle Fotographen auch von etwas leben müssen).

Embed from Getty Images