Erfahrungen & Bewertungen zu Grazioli - Agentur für Kommunikation

Posts in Responsive Webdesign

Accelerated Mobile Pages Project

Was bedeutet Accelerated Mobile Pages (AMP)?

Juni 21st, 2016 Posted by Accelerated Mobile Pages, Responsive Webdesign, Web Design No Comment yet

Mit jedem Jahr gewinnt die mobile Internetnutzung zunehmend an Bedeutung, das Smartphone wird zum wichtigsten Gerät für das Aufrufen von Webseiten. Selbst wenn in der Programmierung hierauf durch ein responsives Design eingegangen wird, sind unerwünschte Nebeneffekte wie eine lange Ladezeit von Bildern keine Seltenheit. Um einen noch besseren Nutzungskomfort für mobile Webseiten zuzusichern, hat sich das Open-Source-Projekt Accelerated Mobile Pages, kurz AMP, gegründet. Nach einer längeren Beta-Phase ist die neue Technologie seit dem Frühjahr 2016 weltweit etabliert und wird von Google genauso wie Content-Management-Systemen wie WordPress berücksichtigt.
 

Wie funktionieren Accelerated Mobile Pages genau?

Zielsetzung des Projektes ist die größtmögliche Reduktion der Ladezeit von Webseiten auf mobilen Geräten. Zu diesem Zweck wird der HTML-Code der Webseiten angepasst, um eine schlanke und übersichtliche Ansicht der Webseiten ohne großen Datenaufwand zu generieren. Technisch wird die Optimierung unter AMP durch eine Reduktion von CSS und Javascript realisiert, außerdem wird für die Inhaltsverwaltung ein spezielles Content Delivery Network verwendet. Lange Wartezeiten für den Aufbau der Webseiten, der selbst auf responsiven Pages keine Seltenheit war, sollen über die schnelle Verfügbarkeit der Inhalte der Vergangenheit angehören.

Zwar handelt es sich bei AMP um ein Open-Source-Projekt, das von freien Entwicklern weltweit getragen und zukünftig noch weiterentwickelt wird. Hinter der grundlegenden Idee steckt jedoch Google, der frühzeitig auf diese spezielle Form der Webseitengestaltung eingegangen ist und diese bereits gesondert bei Suchanfragen aufführt. Viele namhafte Plattformen und Webseiten wie Twitter stehen ebenfalls hinter dem Projekt und wünschen sich für ihre Dienste eine schnelle Anzeige auf allen tragbaren Geräten. Verschiedene Technologien wie das Vorladen von Webseiteninhalten sind keine echte Innovation und bereits von klassischen Webseiten bekannt. Dennoch wird für die beschleunigten, mobilen Webseiten eine intelligentere Verwaltung der Inhalte vorgenommen, die das Nutzungserlebnis auf Smartphones erkennbar verbessert.
 

Auswirkungen auf die Googlesuche

Wie stark Google im Vorantreiben der Accelerated Mobile Pages beteiligt sein dürfte, zeigt sich schon heute bei diversen Suchanfragen. Auf der Ergebnisseite zeigt die Suchmaschine speziell für mobile Nutzer eine Zusammenstellung der besten Suchergebnisse an, die sich in einer Kleinansicht betrachten und mittels Wischen durchblättern lassen.

Noch bevor sich der Nutzer entschließt, ein angezeigtes Suchergebnis aufzurufen, werden grundlegende Inhalte der Seite bereits vorgeladen. Der Aufruf selbst lässt sich hierdurch erheblich beschleunigen, wobei eine Bewertung der Relevanz der einzelnen Inhalte vorgenommen wird. Das Vorladen gilt demnach vorrangig für die Grundstruktur der Seiten und Text, mediale Elemente werden nach Erfahrungen der Suchmaschine mit dem jeweiligen Nutzerverhalten nach Wahrscheinlichkeit nachgeladen.

Beim Hosting der angezeigten Inhalte kommt der Internetriese den Seitenbetreibern entgegen. Zwar müssen die Inhalte für die beschleunigte Seitenanzeige genauso auf dem Server abgelegt werden wie die regulären Inhalte der Webseite. Ergänzend hält die Suchmaschine eigene Server weltweit bereit, um die vorgeladenen Inhalte in einem Cache bereitzustellen. Auch das Cachen beschleunigt den Aufruf noch einmal zusätzlich, gerade wenn die Inhalte unverändert sind und bei früheren Suchanfragen anderer Nutzer schon einmal aufgerufen wurden. Ähnlich wie bei medialen Inhalten und ihrer Anzeige nach Wahrscheinlichkeit werden Prioritäten gesetzt, welche Webseiten und ihre Inhalte im Cache landen.
 

Die Folgen der Umstellung für Programmierer

Ähnlich wie bei der Umstellung von gängigen Webseiten auf responsiven Inhalt muss die Beschleunigung der mobilen Webseitenanzeige in den Quellcode einfließen. Wesentlicher Teil des Projekts war die Weiterentwicklung von HTML, um die Anforderungen von Smartphone-Nutzern angemessen einfließen zu lassen. Das Ergebnis ist AMP HTML, das aufgrund der quelloffenen Eigenschaft des Projekts jedem Programmierer von Webseiten offensteht. Die genauen Spezifikationen werden von Github kostenlos verfügbar gemacht und lassen sich mit etwas Erfahrung mit der HTML-Programmierung schnell für eigene Webseiten übernehmen.

Auch Bilder oder Audiodateien erhalten spezielle Tags, mit denen sie gesondert gekennzeichnet und beispielsweise in ihrer Anzeigengröße vorformatiert werden. Dies erscheint zunächst wie ein Rückschritt gegenüber dem responiven Design der letzten Jahre, bei dem bewusst auf Pixelangaben für vorgeschriebene Größen einzelner Seitenelemente verzichtet wurde. Die Einbindung dieser Angaben ist dennoch sinnvoll, für den Fall, dass Bilder und sonstige Medien nachrangig nach Seitengerüst und Text geladen werden. Durch die Angabe der jeweiligen Größenordnung lässt sich verhindern, dass bereits angezeigte Inhalte in ihrer Position verrutschen, nur weil ein Bild oder Video nachgeladen wurde. Nach einer kurzen Auseinandersetzung mit dem Thema dürfte die Umstellung mühelos gelingen, die für sämtliche Smartphone-Formate sinnvoll und nachvollziehbar ist.
 

Spezielles Plug-in unter WordPress verfügbar

An einer Reduktion der Ladezeit von mobilen Inhalten war auch WordPress interessiert, weshalb es zu einer schnellen Beteiligung an diesem Projekt kam. Nach Beendigung der Beta-Phase stellt WordPress ein Plug-in bereit, um Webseiten in diesem CMS fit für die schnelle und mobile Webseitendarstellung zu machen. Wird bei einer Googlesuche die eigene Webseite gefunden und angezeigt, erfährt der Nutzer sofort, dass es eine AMP-optimierte Ansicht gibt. Die optimierte Anzeige bezieht sich dabei auf einzelne Beiträge, die unter WordPress angelegt wurden, nicht auf Archive oder ganze Seiten unter diesem CMS. Durch Einbindung des Plug-ins wählen Nutzer von WordPress den einfachsten Weg, sich für den nächsten Schritt der mobilen Internetnutzung fit zu machen.

Responsive Webdesign - Mobilefreundliche Programmierung

Wichtige Faktoren für ein gutes Google-Ranking

April 28th, 2016 Posted by Responsive Webdesign, WordPress No Comment yet

Responsive Webdesign und mobilfreundliche Gestaltung

Bereits 2013 empfahl Google die mobilfreundliche Gestaltung von Websites, seit 2015 zählt die Mobilfreundlichkeit eines Onlineauftritts als Faktor, der das Ranking beeinflusst. Ein wichtiges Mittel auf dem Weg zur mobilfreundlichen Gestaltung ist das sogenannte responsive Design. Warum nicht allein der Faktor Ranking dafür spricht, dass Sie sich eine responsive Homepage erstellen lassen, erläutert der folgende Beitrag.

Was leistet eine responsive Website?

Die Forderung, mobilfreundliche Seiten einzurichten, kommt einem veränderten Nutzerverhalten entgegen – denn die Zahl der Menschen, die per Smartphone oder Tablet online gehen, nimmt kontinuierlich zu. Als Webseitenbetreiber haben Sie zwei Möglichkeiten darauf zu reagieren: Sie legen für die mobilfreundliche Variante Ihrer Website eine eigene Unterseite an. Was bedeutet, dass Sie doppelte Arbeit haben und Vorkehrungen treffen müssen, damit Google Haupt- und Unterseiten nicht als „Duplicate Content“ bewertet.

Alternativ können Sie sich eine responsive Homepage erstellen lassen. Diese bringt den Vorteil mit sich, dass der HTML-Code für alle Geräte derselbe ist, die Darstellung der aufgerufenen Seite aber automatisch an die Bildschirmgröße des jeweiligen Gerätes angepasst wird.


Welche Vorteile bietet das responsive Webdesign?

Responsive Design

Durch die Verwendung eines responsiven Webdesigns kommen Sie nicht allein dem Suchmaschinenbetreiber entgegen, der Ihre Seite nun leichter crawlen und indexieren kann. Sie tun auch sich selbst einen Gefallen, weil Sie Fehler in der Weiterleitung von Seiten ausschließen und sich den Aufwand für eine zweifache Programmierung ersparen.

Zugute kommt das den Nutzern, die mobil auf Ihre Website zugreifen möchten. Diese freuen sich über raschere Ladezeiten, eine automatisch angepasste Darstellung und damit einen komfortableren Zugriff auf Inhalte und Navigation. Auch das Teilen und Verlinken Ihrer Seite wird für Nutzer mobiler Endgeräte auf diese Weise deutlich vereinfacht.


Was ist zu beachten, wenn Sie sich eine responsive Homepage erstellen lassen?

Die Inhalte und die Gestaltung Ihres Onlineauftritts lassen sich nicht im Verhältnis 1:1 auf eine responsive Website übertragen. Schließlich bedeutet „anpassen“ ja nicht einfach nur „verkleinern“. Daher erfordert die Programmierung einer responsiven Webpräsenz das entsprechende technologische Know-how – so müssen beispielsweise bestimmte Skripte verlagert oder einige Anwendungen wie etwa Flash vermieden werden.

Im Ergebnis präsentiert sich eine mobilfreundliche Website als präzise angepasst an die jeweilige Bildschirmgröße, sodass das leidige Zoomen und horizontale Scrollen sich erübrigt. Ein weiteres Kriterium betrifft die Darstellung von Links: Diese sollen groß genug und – falls mehrere Links in kurzer Abfolge gesetzt werden – weit genug voneinander entfernt stehen, damit die Nutzer sie problemlos anklicken können.


Mobilfreundlichkeit und responsive Design

Webaffine Leser haben es bemerkt: Die Begriffe „mobilfreundlich“ und „responsive webdesign“ werden oft synonym verwendet, meinen aber nicht dasselbe. Planen Sie also, Ihre Website in einer mobilfreundlichen Variante zu relaunchen oder Ihr CMS entsprechend anzupassen, achten Sie darauf, dass nicht allein das Design verändert wird. Auch die grundlegenden Kriterien zur Mobilfreundlichkeit, die Google formuliert hat, müssen berücksichtigt werden.

Gern sind wir Ihnen bei der Umsetzung Ihres responsiven, mobilfreundlichen Designs von Website oder Blog behilflich.

TYPO3 Agentur Grazioli bei Frankfurt und Gießen
WordPess Agentur
Grazioli - Agentur für Kommunikation hat 4,85 von 5 Sternen | 33 Bewertungen auf ProvenExpert.com