Mobile Homepage planen
Die mobile Internetnutzung ist für viele selbstverständlich geworden. Mehr als die Hälfte der deutschen Internetnutzer surft zumindest gelegentlich online. Allerdings sind viele Webseiten noch nicht für eine mobile Nutzung optimiert.
Hast du dich zum Beispiel mal darüber geärgert, dass du einen Text auf deinem Smartphone nicht richtig lesen kannst oder Buttons nicht mehr klickbar sind? Dann bist du auf einer Seite gelandet, die nicht für die mobile Nutzung optimiert ist. Damit sich die Besucher einer Seite nicht ärgern müssen, sollte die Homepage für die mobile Nutzung optimiert sein. Eine Webseite, die nur auf einem großen PC-Bildschirm funktioniert, ist nicht mehr zeitgemäß.
Generell gibt es zwei verschiedene Möglichkeiten, Internetseiten für die Nutzung auf Smartphones und Tablets zu optimieren. Die erste Möglichkeit ist es, eine sogenannte responsive Seite zu erstellen, die sich automatisch an verschiedene Bildschirmgrößen anpasst. Die zweite Option ist es, eine zusätzliche mobil optimierte Internetseite anzulegen und somit zwei Seiten für unterschiedliche Bildschirmgrößen zu haben. Also parallel zur Homepage, die ideal auf PC-Bildschirmen funktioniert, wird eine zusätzliche Version erstellt, die für mobile Geräte wie Smartphones oder Tablets optimal geeignet ist.
Dieser Ratgeber vermittelt die wichtigsten Informationen für das Erstellen einer mobil optimierten Homepage. Neben einer kurzen Erklärung, worum es sich bei einer mobilen Website handelt, werden Vorteile aufgelistet, die eine solche Seite mit sich bringt. Zudem wird erklärt, worauf bei der Auswahl und Gestaltung geachtet werden muss. Ein Fokus wird dabei auf den Einsatz von Homepage-Baukästen gelegt.
Was ist eine mobil optimierte Homepage?
Eine mobil optimierte Homepage ist eine schlankere Version der für PC-Bildschirme gemachten Internetseite, die Nutzer sehen, wenn sie auf Smartphones oder Tablets surfen. Es werden nur Inhalte angezeigt, die Nutzer auf diesen mobilen Geräten benötigen. Diese Reduzierung und Anpassung ist notwendig, da der Bildschirm von mobilen Endgeräten im Vergleich zu PC-Bildschirmen nur einen begrenzten Platz bietet. Eine mobile Seite ermöglicht also eine ansprechende Darstellung und eine nutzerfreundliche Bedienung der Homepage auf Smartphones und Tablets.
Vorteile einer mobil optimierten Homepage
Das Erstellen einer mobil optimierten Seite bringt zahlreiche Vorteile mit sich. Zum einen ermöglicht es den Nutzern von Smartphones und Tablets eine komfortablere Bedienung und zum anderen verleiht es der Website ein professionelles Erscheinungsbild.
Ansprechende Darstellung
Ein entscheidender Vorteil einer mobil optimierten Seite ist die Entscheidungsfreiheit bei der Gestaltung. Man kann selbst bestimmen, wie die mobile Version aussehen soll und wie die Elemente angeordnet werden. So kann ein ansprechendes Design unabhängig von der Version für PC-Bildschirme, auch Desktop-Version genannt, erstellt werden.
Komfortable Nutzung
Eine mobile Website ermöglicht eine komfortable Nutzung für mobile Besucher, da die Funktionen speziell für mobile Geräte optimiert sind. Zum Beispiel kann das Kontaktformular so gestaltet werden, dass ein problemloses Ausfüllen über den Touchscreen eines Tablets oder Smartphones möglich ist. Hinterlegte Telefonnummern können automatisch angewählt werden, ohne sie Abtippen zu müssen.
Individuelle Anpassung von Desktop und Mobile Website
Die Versionen für PC-Bildschirme und mobile Websites lassen sich getrennt voneinander bearbeiten. Das heißt man kann frei entscheiden, ob man Änderungen auf beiden Seiten oder nur für die PC bzw. nur für die mobile Variante vornimmt. Dies könnte sinnvoll sein, wenn man zum Beispiel ein Gewinnspiel für Smartphone Nutzer machen möchte. In diesem Fall kann man nur auf der mobilen Seite darauf hinweisen.
Wissenswertes zu mobil optimierten Homepages
Auswahl der mobilen Elemente
Die Auswahl der passenden Elemente ist einer der wichtigsten Schritte, mit denen man sich bei beim Erstellen der mobil optimierten Website beschäftigen muss. Als Faustregel gilt: Weniger ist mehr.
Es sollten nur Informationen integriert werden, die für mobile Nutzer unbedingt notwendig sind. Man kann zum Beispiel Animationen weglassen, Bilder in einer niedrigeren Auflösung hochladen und auf unwichtige Nebenseiten verzichten.
Inhalte, die mobil verfügbar sein sollen, müssen angepasst werden. Zum Beispiel sind bei einem Kontaktformular oftmals nicht alle Felder für mobile Nutzer relevant und können weggelassen werden.
Automatische Weiterleitung der Nutzer
Ein Punkt, der häufige für Verwirrung sorgt, ist das Anlegen von zwei unterschiedlichen Internet-Adressen. Die mobile Version wird über eine separate Internet-Adresse betrieben, die zusätzlich zur Desktop Version angelegt wird. So wird die Desktop Version zum Beispiel unter zahnarzt-meier.de betrieben und die mobile Version unter "m.zahnarzt-meier.de" oder "mobile.zahnarzt-meier.de".
Ruft ein Nutzer die Webseite nun auf einem mobilen Gerät auf, wird er zur mobilen Website weitergeleitet. Man nennt dieses Prinzip auch User-Agent-Weiterleitung. Diese Weiterleitung erfolgt automatisch, sodass von Betreiberseite keine weiteren Einstellungen erforderlich sind.
Unterschied zu einer responsiven Website
Bei der Recherche zum Thema mobile Optimierung stößt man schnell auch auf das Thema responsive Webseiten. Der Unterschied ist schnell erklärt: Bei einer mobil optimierten Website werden zwei unterschiedliche Seiten erstellt – eine Seite für Desktopnutzer und eine Seite für mobile Besucher. Bei einer responsiven Seite erstellt man hingegen nur eine einzige Version, die sich automatisch an verschiedene Displaygrößen anpassen kann. Eine responsive Webseite ist also eine weitere Möglichkeit der mobilen Gestaltung einer Internetseite.
Sowohl mobile optimierte Seiten als auch responsive Seiten sind gut geeignet, um eine komfortable Bedienung auf Endgeräten, wie Tablets und Smartphones, zu garantieren. Generell eignet sich die responsive Lösung vor allem für einfache Seiten wie Blogs oder Onlinebewerbungen. Komplexere Seiten mit Funktionen, wie einem Buchungskalender oder einem Mitgliederbereich können dagegen besser als mobile Website erstellt werden.
Mobile Homepage mit CSS
Beim Erstellen einer mobilen Seite spielt in erster Linie die Web Programmiersprache CSS eine Rolle.
Die Abkürzung CSS steht für Cascading Stylesheets. Wie man dem Wort „Stylesheets“ entnehmen kann, ist CSS für den Style, also das Aussehen einer Homepage zuständig.
Bei moderner Web Programmierung achtet man auf die möglichst strikte Trennung von Form und Inhalt. Der Inhalt einer Homepage wird durch HTML strukturiert. Dies geschieht, indem verschiedene Inhaltsarten mit ihnen zugewiesenen Tags versehen werden. So heißt beispielsweise der Tag für eine Hauptüberschrift in HTML <h1>. In einem HTML 5 Dokument würde man also eine Hauptüberschrift mit <h1>Meine Überschrift</h1> kennzeichnen. Dadurch wissen Suchmaschinen wie Google und Browser wie der Internet Explorer, dass es sich um eine Hauptüberschrift und nicht etwa um Fließtext handelt.
Das Aussehen einer Homepage wird über CSS gesteuert. Wenn wir bei dem Inhaltstyp Hauptüberschrift bleiben, dann lässt sich zum Beispiel über den CSS Code h1 {font-size: 20px;} die Schriftgröße aller Hauptüberschriften der Homepage auf 20 Pixel festlegen. Schließlich werden über CSS alle Dinge wie Größen, Abstände oder Farben gesteuert. Für die Ausgabe am Monitor kann also per CSS die Schriftgröße, der Abstand und die Schriftstärke für Überschriften und Fließtext individuell eingestellt werden.
CSS und Responsives Design
Die Grundlage für die Erstellung von CSS Dateien sind dementsprechend HTML Dokumente, mit denen sie verknüpft sind. Und über diese CSS Dateien wird auch das responsive Verhalten einer Homepage gesteuert. Hierzu wird unter anderem über den CSS Code @media screen and (max-width: 320px) gesteuert, wie die Darstellung und Anordnung der einzelnen Elemente auf einem Display, das maximal 320 Pixel breit ist, aussehen soll. Über beispielsweise @media screen and (max-width: 320px) {h1 {font-size: 8px;}} lässt sich also die Schriftgröße von Hauptüberschriften für die Darstellung auf einem maximal 320 Pixel breitem Display auf 8 Pixel festlegen. So lassen sich mit unterschiedlichen Pixel-Werten unterschiedliche Design-Vorgaben für die gängigsten Displaybreiten machen. Die CSS Datei, die für das responsive Verhalten der Homepage zuständig ist, enthält dann mehrere solcher @media screen-Einträge, und der je nach Displaygröße zutreffende wird ausgeführt.
Mobile Homepage mit HTML
Wer sich neu mit dem Thema „Eigene Homepage erstellen“ beschäftigt, wird mit vielen bisher unbekannten Fachbegriffen konfrontiert. Einerseits hört man vieles von den unterschiedlichen Programmiersprachen, die für Web Design eingesetzt werden, zumindest deren Namen. HTML ist eine davon.
Die Abkürzung HTML steht für Hypertext Markup Language, zu deutsch in etwa „Auszeichnungssprache für Hyper-Text“. Damit ist auch bereits der erste wichtige Punkt genannt: HTML ist keine Programmiersprache, sondern eine Auszeichnungssprache. Doch was genau ist der Unterschied?
Mit Hilfe einer Programmiersprache kann man dem Computer oder einzelnen Programmen Logik und gewissermaßen das Denken beibringen. Das Programm, in unserem Fall eine Homepage, kann auf unterschiedliche Benutzereingaben unterschiedlich reagieren. So kann, bei entsprechender Programmierung, eine ungültige E-Mail-Adresse erkannt werden, die in ein Kontakt-Formular eingegeben wurde. Das Programm erkennt also gegebenenfalls nicht nur ungültige Eingaben anhand bestimmter Muster, sondern reagiert auch entsprechend auf richtige und ungültige Eingaben. Im Falle ungültiger Eingaben wird dem Nutzer ein entsprechender Hinweis angezeigt, andernfalls wird das Kontaktformular anstandslos weiter bearbeitet und eine E-Mail an den Betreiber der Homepage verschickt.
Mit einer Auszeichnungssprache hingegen lassen sich keine solchen logischen Konstrukte erzeugen. HTML dient vereinfacht ausgedrückt dazu, die Struktur des eigentlichen Textes, der auf der Homepage erscheint, auch für Suchmaschinen und Browser, wie zum Beispiel den Internet Explorer, verständlich zu machen. Versetzt man sich hierfür in die Rolle eines Blinden, so hat man eine ganz gute Vorstellung davon, wie das funktioniert. Bekommt ein Blinder eine Zeitung vorgelesen, so muss man ihm mitteilen, dass es sich bei einer Überschrift um eine Überschrift handelt, man betont Zitate anders und weist auf diese hin und beschreibt Bilder. Für den Sehenden sind Überschriften und Zwischenüberschriften sofort an ihrer Größe, dem Fettdruck und dem Abstand zum Fließtext erkennbar. Direkte Zitate werden durch Anführungszeichen kenntlich gemacht, besonders wichtige Passagen und Wörter durch Kursivdruck oder eine farbliche Hervorhebung.
Und genau diese Kenntlichmachung erledigt HTML. Dabei werden die einzelnen Inhalte durch sogenannte Tags markiert. Eine Hauptüberschrift zum Beispiel wird mit <h1> gekennzeichnet. Dadurch wissen Browser, aber auch Suchmaschinen wie Google, dass es sich hierbei eben um eine Hauptüberschrift handelt und können diese entsprechend darstellen und gewichten. Und es ermöglicht die barrierefreie Nutzung des Internet durch zum Beispiel Sehbehinderte und Blinde, die über Browser mit Sprachausgabe oder Ausgabegeräte via Braille-Schrift verfügen.
HTML und mobile Homepages
Wer bisher aufmerksam gefolgt ist, dem wird sich nun zu Recht die Frage stellen, ob HTML denn etwas mit mobilen Websites und Responsivem Design zu tun hat. Die Antwort lautet dann auch tatsächlich: Nein. Der reine HTML-Code einer Website mit und ohne Berücksichtigung von Responsivem Design ist im Prinzip gleich. Eine Überschrift bleibt eine Überschrift und ein Absatz ein Absatz, ganz gleich, auf welchem Display und in welcher Größe sie angezeigt werden. Die Aufgabe, eine Homepage auch auf mobilen Geräten optimal darzustellen, übernehmen andere Programmiersprachen.
Homepage-Baukästen und Responsives Design
Während sich Menschen, die sich ihre Homepage von Hand selbst programmieren, mit HTML, CSS und den Aspekten Responsiven Designs im Detail beschäftigen müssen, ist dies für Nutzer eines Homepage-Baukastens nicht erforderlich. Homepage-Baukästen verwenden sogenannte Templates, manchmal auch Themes genannt. Dies sind Design Vorlagen, die bereits vorprogrammiert sind, jedoch im Baukasten an die eigenen Wünsche und Bedürfnisse angepasst und individualisiert werden können. Diese Templates wurden bereits unter der Berücksichtigung von Responsivem Design programmiert. Seitens des Nutzers ist hier überhaupt kein Eingreifen notwendig.
Außerdem gibt es für fortgeschrittene Nutzer, die bereits HTML-Kenntnisse mitbringen, auch HTML-Bausteine, die innerhalb des Baukastens eingesetzt werden können. So lassen sich zum Beispiel externe Video- und Audio-Player von YouTube oder Soundcloud in die eigene Homepage einbinden.
Im Baukasten selbst gibt es immer die Möglichkeit für eine Vorschau. Mit dieser kann man vor der eigentlichen Veröffentlichung der Homepage, also bevor die Änderungen für alle Internet-Nutzer sichtbar werden sehen, wie sich die Änderungen auf das Design auswirken. Die Vorschau bietet neben der Monitor-Darstellung auch stets eine Vorschau auf einem Smartphone-Display.
Erstellt von:
„Homepage-Ratgeber.de“-Redaktion
Homepage Experten