Eine mobile Webseite erstellen

So erstellen Sie kostenlos eine mobile Webseite!

Eine mobile Website zu erstellen muss nicht schwer sein!

Erstellt am Donnerstag, 06. Oktober 2016 01:00 Uhr

Ihnen gefällt der Artikel? Dann würde ich mich sehr über eine Empfehlung/Link auf Ihrer Website freuen!

Eine mobile Webseite bietet viele Vorteile!

Vor einigen Monaten gab Google offiziell bekannt, dass auch das Thema mobile-friendly eine entscheidende Rolle im Ranking spielt. Der Grund ist simpel: Das Browsen einer Website sollte auch für mobile Nutzer ohne Nachteile gewährleistet werden. Eine Benachteiligung liegt zum Beispiel bei einer hohen Auflösung von Inhalten, beim Zoomen von kleiner Schrift oder bei langen Ladezeiten vor.

Quelle: psdgraphics.com

Eine mobil-optimierte Website kann das Nutzererlebnis deutlich verbessern, denn zum einen werden Bildschirminhalte gut lesbar dargestellt und zum anderen kann von kurzen Ladezeiten profitiert werden. (optimal beim Zugriff via GPS oder EDGE) Da die mobile Benutzerfreundlichkeit mittlerweile auch vom Google Algorithmus mehr denje in Augenschein genommen wird, möchte ich in diesem Beitrag konkret auf das Thema "mobile friendly" eingehen.

Mobile Webseite oder Responsive Design?

Es gibt für Webseiteninhaber zwei Möglichkeiten, eine Webseite für mobile Endgeräte zu gestalten:

Eine Website in Responsive Design programmieren.
Eine (zweite) mobile - responsive - Website anbieten.

Ich persönlich habe den Eindruck, dass es sehr viele (vor allem statische) Webseiten gibt, welche nicht responsive programmiert worden. Somit entstehen für Smartphone - und auch Tablet Nutzer häufig Nachteile. Beim Thema Wordpress sieht dies schon wieder anders aus, denn hier wird häufig auf responsive Themes zurückgegriffen.

Wenn Sie bereits über eine Website verfügen und den Code nicht nochmals umprogrammieren möchten, empfehle ich Ihnen mein mobiles Webseiten-Template (Responsive Design!) zu nutzen! Der Zeitaufwand ist hierfür deutlich geringer und die Umsetzung ist auch ohne fortgeschrittene HTML Kenntnisse möglich. Außerdem entstehen dadurch keine Kosten für einen Programmierer.

Die mobile Webseite ist HTML/CSS valide und responsive programmiert worden, sodass Sie hier eine professionelle Lösung kostenlos nutzen können.

Im nachfolgenden Abschnitt besteht für Sie die Möglichkeit mein mobiles Template (Demo - komplette Anpassung via CSS möglich!) herunterzuladen und für Ihre Website einzusetzen.

Eine mobile Website erstellen - Kostenloses Tutorial!

Erstellen Sie zunächst ein Verzeichnis mit dem Namen m oder mobil.
Laden Sie diese Datei herunter. Die zip-Datei beinhaltet das mobile Template sowie das Stylesheet und die javascript-Dateien. Eine Demo meiner mobilen Webseite können Sie hier anschauen! Natürlich können Sie die Farben und die Textformatierungen nach Ihren Wünschen über das Stylesheet (css/main.css) anpassen.
Entpacken Sie alle Dateien aus mobile-webseite-erstellen.zip und laden diese in das entsprechende Verzeichnis (m oder mobil) auf Ihrem Host hoch. Die Verzeichnisstruktur muss erhalten bleiben.
Weiterleitung via Javascript oder PHP

Vorab: Fügen Sie in die Desktop-Version Ihrer Seite zwischen <head> und </head> diese Zeile ein: <link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.ihre-webseite.de/m/ueber_uns.html" />

Ersetzen Sie "http://www.ihre-webseite.de/m/ueber_uns.html" durch die zukünftige mobile URL.

4.1 Javascript Weiterleitung

In meinem Beispiel möchte ich eine Weiterleitung von der Desktop Version "ueber_uns.html" auf die Mobile Version "m/ueber_uns.html" erstellen. Dafür ist es notwendig, den nachfolgenden Code zwischen <head> und </head> einzufügen:

<script type="text/javascript" src="js/redirection-mobile.js"></script><script type="text/javascript">// <![CDATA[ SA.redirection_mobile ({ mobile_url : "knothemedia.de/m/ueber_uns.html", tablet_redirection: "true", }); // ]]></script>
Für Ihre Seite: Ändern Sie die URL "knothemedia.de/m/ueber_uns.html" nach Ihren Angaben. (Wichtig: Die URL bitte OHNE http und OHNE www angeben.) Über die Variable "tablet_redirection" können Sie festlegen, ob die mobile Version auch für Tablets (z.B. iPads) geladen werden soll. (true=Ja, false=Nein)

Laden Sie die Datei redirection-mobile.js hier herunter.

Erstellen Sie das Verzeichnis js und laden in dieses die Datei redirection-mobile.js hoch. Die Datei redirection-mobile.js stammt übrigens von github.com. (Direkter Link)

4.2 PHP Weiterleitung

Bei der Weiterleitung via PHP ist es notwendig, eine sogenannte Browserweiche für jede Seite zu erstellen. In meinem Beispiel erstellen wir für die fiktive Seite "ueber_uns.php" eine Browserweiche mit dem Dateinamen "browserweiche-ueber_uns.php". Die Datei "browserweiche-ueber_uns.php" beinhaltet den folgenden Code:

<?php if(strstr($_SERVER['HTTP_USER_AGENT'], 'iPhone') || strstr($_SERVER['HTTP_USER_AGENT'], 'Android') || strstr($_SERVER['HTTP_USER_AGENT'], 'BlackBerry') || strstr($_SERVER['HTTP_USER_AGENT'], 'alcatel') || strstr($_SERVER['HTTP_USER_AGENT'], 'amoi') || strstr($_SERVER['HTTP_USER_AGENT'], 'avantgo') || strstr($_SERVER['HTTP_USER_AGENT'], 'benq') || strstr($_SERVER['HTTP_USER_AGENT'], 'cell') || strstr($_SERVER['HTTP_USER_AGENT'], 'cricket') || strstr($_SERVER['HTTP_USER_AGENT'], 'docomo') || strstr($_SERVER['HTTP_USER_AGENT'], 'elaine') || strstr($_SERVER['HTTP_USER_AGENT'], 'htc') || strstr($_SERVER['HTTP_USER_AGENT'], 'iemobile') || strstr($_SERVER['HTTP_USER_AGENT'], 'ipad') || strstr($_SERVER['HTTP_USER_AGENT'], 'ipaq') || strstr($_SERVER['HTTP_USER_AGENT'], 'ipod') || strstr($_SERVER['HTTP_USER_AGENT'], 'j2me') || strstr($_SERVER['HTTP_USER_AGENT'], 'java') || strstr($_SERVER['HTTP_USER_AGENT'], 'midp') || strstr($_SERVER['HTTP_USER_AGENT'], 'mini') || strstr($_SERVER['HTTP_USER_AGENT'], 'mmp') || strstr($_SERVER['HTTP_USER_AGENT'], 'mobi') || strstr($_SERVER['HTTP_USER_AGENT'], 'motorola') || strstr($_SERVER['HTTP_USER_AGENT'], 'nec-') || strstr($_SERVER['HTTP_USER_AGENT'], 'nokia') || strstr($_SERVER['HTTP_USER_AGENT'], 'palm') || strstr($_SERVER['HTTP_USER_AGENT'], 'panasonic') || strstr($_SERVER['HTTP_USER_AGENT'], 'philips') || strstr($_SERVER['HTTP_USER_AGENT'], 'phone') || strstr($_SERVER['HTTP_USER_AGENT'], 'playbook') || strstr($_SERVER['HTTP_USER_AGENT'], 'sagem') || strstr($_SERVER['HTTP_USER_AGENT'], 'sharp') || strstr($_SERVER['HTTP_USER_AGENT'], 'sie-') || strstr($_SERVER['HTTP_USER_AGENT'], 'silk') || strstr($_SERVER['HTTP_USER_AGENT'], 'smartphone') || strstr($_SERVER['HTTP_USER_AGENT'], 'sony') || strstr($_SERVER['HTTP_USER_AGENT'], 'symbian') || strstr($_SERVER['HTTP_USER_AGENT'], 't-mobile') || strstr($_SERVER['HTTP_USER_AGENT'], 'telus') || strstr($_SERVER['HTTP_USER_AGENT'], 'up\.browser') || strstr($_SERVER['HTTP_USER_AGENT'], 'up\.link') || strstr($_SERVER['HTTP_USER_AGENT'], 'vodafone') || strstr($_SERVER['HTTP_USER_AGENT'], 'wap') || strstr($_SERVER['HTTP_USER_AGENT'], 'webos') || strstr($_SERVER['HTTP_USER_AGENT'], 'wireless') || strstr($_SERVER['HTTP_USER_AGENT'], 'xda') || strstr($_SERVER['HTTP_USER_AGENT'], 'xoom') || strstr($_SERVER['HTTP_USER_AGENT'], 'Kindle') || strstr($_SERVER['HTTP_USER_AGENT'], 'Windows Phone') || strstr($_SERVER['HTTP_USER_AGENT'], 'zte')) { header('Location: m/ueber_uns.html'); exit(); } ?>
In dem Beispiel verweist die URL "m/ueber_uns.html" auf die mobile Zielseite.

Ihre Aufgabe: Erstellen Sie in Abhängigkeit zu der Anzahl Ihrer Seiten, jeweils eine PHP Datei mit dem oben genannten Code.

Nun ist es notwendig, in die erste Zeile jeder (Desktop)-Seite diesen Code einzufügen:

<?php include( 'browserweiche-ueber_uns.php' ); ?>
Dieser Code dient als Weiterleitung auf die Browserweiche (browserweiche-ueber_uns.php).

Was passiert genau?
Sobald ein Smartphone Nutzer die Desktop Version der Seite "ueber_uns.php" aufruft, wird dieser auf die Browserweiche "browserweiche-ueber_uns.php" umgeleitet. Die Browserweiche sorgt wiederum für die korrekte Weiterleitung auf die mobile Seite "m/ueber_uns.html".
Bearbeiten Sie das Template (template.html) für die jeweiligen Seiten. (Texte, Formatierungen) Das Stylesheet für die mobile Webseite finden Sie in der Datei css/main.css.
Wichtig: Ändern Sie die Canonical URL in der Datei template.html (Zeile 16: <link rel="canonical" href="http://www.ihre-webseite.de/seite-fuer-desktop-version.html" />). Unter "href" muss der Link zur jeweiligen Desktop Version einer Seite angegeben werden.
Fertig!

Mobile-Friendly durch Google überprüfen!

Abschließend können Sie unter diesem Link (Test auf Optimierung für Mobilgeräte) kontrollieren, ob Ihre Website von Google tatsächlich als mobile-friendly erkannt wird. Es spielt hierbei keine Rolle, ob die mobile Webseite unter einer Subdomain (http://mobile.website.de) oder unter einem Verzeichnis (http://www.website.de/mobile) erreichbar ist. Das nachfolgende Screenshot ist ausschlaggebend:

google-optimierung-mobile-friendly

Sie haben Fragen oder benötigen Hilfe bei der Umsetzung? Gerne stehe ich Ihnen hierfür zur Verfügung! Bitte nutzen Sie das Kontaktformular!

6 wichtige Fragen und Antworten!

Kann es zu einer Penalty durch das Kopieren der Texte kommen?
Der Inhalt kann 1:1 von der Desktop Version übernommen werden. Es besteht keine Gefahr, dass Ihre Domain durch "Duplicate Content" abgestraft wird. Hierzu hat sich Google bereits mehrfach geäußert.

Sollte ich eine Subdomain oder ein Verzeichnis nutzen?
Es spielt absolut keine Rolle, unter welcher URL die mobile Webseite erreichbar ist. Sie können also entscheiden, ob Sie eher eine Subdomain (http://mobile.website.de) oder ein Verzeichnis (http://www.website.de/mobile) nutzen möchten. Wichtig ist lediglich die korrekte Weiterleitung der mobilen Endgeräte. Nutzen Sie für die Überprüfung diese Google Seite.

Wie können Bilder optimal auf der mobilen Website dargestellt werden?
Fügen Sie einfach den nachfolgenden Code an die entsprechende Stelle ein:

<div class="amensic-image-wrapper">
<img src="ihr-bild.png" alt="Ihr Bild"></img>
</div>

Dieser Code sorgt dafür, dass Bilder (in diesem Fall "ihr-bild.png") optimal auf die Bildschirmgröße von mobilen Endgeräten angepasst werden - ohne Qualitätsverlust. Die CSS-Klasse "amensic-image-wrapper" befindet sich in dem Stylesheet meines Templates.

Auf welche Zielseite (Desktop oder Mobil) sollten die internen Links verweisen?
Bei der internen Verlinkung - innerhalb der mobilen Webseite - sollten Sie darauf achten, dass die Links auf die jeweilige mobile Version der entsprechende Seite verweisen. Dies wird ausdrücklich von Google empfohlen. Bei der Desktop-Webseite sollten die Links natürlich weiterhin unter der Original-URL erreichbar sein.

Indexiert der Google Crawler auch den Content von der mobilen Webseite?
Google indexiert nach eigenen Angaben lediglich die Desktop Version einer Webseite. Es ist also theoretisch möglich, dass auf der mobilen Webseite komplett andere Inhalte zur Verfügung gestellt werden. Allerdings ist dies sicher weder im Sinne von Websitebetreibern, noch von Besuchern oder potentiellen Kunden. Schließlich möchte ein Nutzer auch die Informationen finden, die er sucht - sowohl auf der Desktop Seite, als auch auf der mobilen Seite. Update: Gary Illyes (Googles Webmaster-Trend-Analyst) hat am 13.10.16 auf der Marketing-Konferenz Pubcon bekannt gegeben, dass es zukünftig auch einen "Mobile-Index" geben wird. Somit kann davon ausgegangen werden, dass in den kommenden Monaten auch die Inhalte auf einer mobilen Website indexiert werden.

Was sollte ich noch beachten?
Punkt 1: Die Canonical URL (<link rel="canonical" href="http://www.ihre-webseite.de/ueber_uns.html" />) sollte stets korrekt sein. Die Canonical URL definiert den Link zur Desktop-Version der entsprechenden Seite. Diese Angabe wird immer in der mobilen Seite definiert.

Punkt 2: Auch die Alternate URL (<link rel="alternate" media="only screen and (max-width: 640px)" href="http://www.ihre-webseite.de/m/ueber_uns.html" />) muss korrekt angegeben werden. Hierbei handelt es sich um den Link zur Mobile-Version der entsprechenden Seite. Diese Angabe wird immer in der Desktop Version einer Seite definiert.

Mein Angebot!

Mittlerweile sollte, neben starken Backlinks und semantischen Content, ebenso viel Wert auf das Thema mobile-friendly gelegt werden, denn in den letzten Jahren sind die Nutzerzahlen von Smartphones und Tablets stetig gestiegen. Es wird mit Sicherheit auch zukünftig eine steigende Zahl von mobilen Nutzern geben, wodurch das Thema mobile-friendly auch für den Google Algorithmus (zwangsläufig) mehr und mehr in den Fokus geraten wird.

Mein Angebot: Gerne erstelle ich für Ihre Webseite eine mobile Version! Der Preis beträgt einmalig 799 € inkl. Mwst. und umfasst alle hier aufgeführten Arbeiten. Nutzen Sie für eine unverbindliche Kontaktaufnahme das Kontaktformular!

Anregungen, Fragen & Kritik

Knothe Media News

12.04.2023: Referenzen aktualisiert
01.03.2023: Erste Buchveröffentlichung
21.02.2023: Referenzen aktualisiert
01.12.2022: Referenzen aktualisiert
27.10.2022: Referenzen aktualisiert
15.06.2022: Responsive Formulare
13.05.2021: Privates Blog Netzwerk aufbauen
12.09.2020: Referenzen aktualisiert
20.05.2020: Referenzen aktualisiert
16.07.2019: Referenzen aktualisiert
16.01.2018: SEO Stammtisch Bremen
07.01.2018: SEO im Jahr 2018
04.08.2017: Gastartikel veröffentlichen
19.06.2017: SEO Tool: Wise SEO Suite
05.04.2017: Wichtige SEO Maßnahmen
06.10.2016: Mobile Webseite erstellen
23.08.2016: Presse aktualisiert
14.07.2016: Wird SEO überbewertet?
15.03.2016: Referenzen aktualisiert
24.10.2015: Knothe Media goes mobile!

Google Updates

23.09.2016: Penguin Update 4.0 (Real-time)
12.05.2016: Mobile-friendly 2 Update
08.01.2016: Google Core Update
26.10.2015: RankBrain Update 1.0
17.07.2015: Panda Update 4.2
13.05.2015: Google Phantom Update
17.10.2014: Penguin Update 3.0
25.09.2014: Panda Update 4.1
20.05.2014: Panda Update 4.0

Knothe Media

So erstellen Sie kostenlos eine mobile Webseite!

Eine mobile Website zu erstellen muss nicht schwer sein!

Eine mobile Webseite bietet viele Vorteile!

Mobile Webseite oder Responsive Design?

Eine mobile Website erstellen - Kostenloses Tutorial!

Mobile-Friendly durch Google überprüfen!

6 wichtige Fragen und Antworten!

Mein Angebot!

Anregungen, Fragen & Kritik

Knothe Media News

Google Updates

Kategorien

SEO Themen

Webmaster Themen

Community

Gastartikel