Webseiten für die Nutzung mit Smartphones und Tablets optimieren
Da immer mehr User über ihr Smartphone und über ihr Tablet ins Internet gehen und Webseiten ansurfen, wird es immer wichtiger, die eigene Homepage für die Nutzung mit Smartphone und Tablet zu optimieren. Wir geben Ihnen einige Informationen und Links, die Ihnen bei der Anpassung Ihrer bestehenden Seite (falls diese nicht schon für die mobile Nutzung optimiert ist) helfen kann. Zudem gibt es Tipps für Neueinsteiger in diesem Thema.
Die Umsetzung einer Homepage sowohl für Desktop-PCs als auch für Smartphones und Tablets ist mit einigen Schwierigkeiten verbunden:
- Flash läuft nicht auf iPhone, iPad und iPod - damit ist ein Großteil der Besucher mit Apple-Geräten nicht in der Lage, Flash-Inhalte auf Webseiten anzusehen. Somit sollte zukünftig die Nutzung von Flash möglichst unterbleiben - egal wie tolle Effekte und Dinge sich damit realisieren lassen...
- Bilder sollten sich automatisch der Bildschirmgröße anpassen und die Dateigröße der Bilddateien sollte im Rahmen bleiben
- Die Schrift sollte auch auf Smartphones nicht zu klein und damit lesbar bleiben, gleichzeitig auf Desktop-PCs oder Tablets nicht riesengroß sein.
- Die Navigation auf dem Smartphone ist eine ganz andere als auf dem Desktop-PC
- Verschachtelte Menüs und umständliche Dropdown-Listen sind für Smartphone & Co schwer nutzbar
- Hoover-Effekte funktionieren auf Touchscreen-Geräten nicht wirklich, da ein Überfahren mit der Maus (wie beim Desktop-PC) bei der Fingerbedienung auf dem Touchscreen eines Handys nicht möglich ist.
- Die Datenverbindungen von Smartphones und Tablets besonders in den Handynetzen sind oftmals schlechter als DSL-Verbindungen. Von daher sollten die Webseiten nicht mit ausufernden Datenmengen bestückt sein, die das Laden verzögern.
- Da die Nutzung über mobile Geräte rasant zunimmt und der Desktop-PC immer weniger zum Surfen genutzt wird, sollte für eine zukünftig erfolgreiche Webseite die Optimierung für mobile Geräte absolute Priorität haben.
- Jeder Schnickschnack, der hinter einer dicken DSL-Leitung ganz lustig sein mag (z.B. Hintergrundmusik, Java-Animationen, Tunnelwebseiten etc.) sollte bei Webseiten für Handys und Tablets unterbleiben!
- Möglichst ein einspaltiges Layout insbesondere für Smartphones. Klassische 3-Spalten-Layouts sind insbesondere für die Nutzung mit Smartphones nicht so ideal.
Wenn Sie testen wollen, wie Ihre Webseite aktuell auf einem mobilen Gerät aussieht, können Sie dies auf der Webseite von Opera Mini tun. Hier gibt es eine Testumgebung, die auch auf dem Desktop-PC funktioniert:
www.opera.com/de/developer/opera-mini-simulator
Nachfolgend zeigen wir Ihnen verschiedene Lösungsansätze für die Optimierung von Webseiten für mobile Geräte:
Nutzung eines Homepage-Baukastens, der auch für mobile Geräte optimiert ist
Die einfachste Erstellung einer für Smartphones, Tablets und Desktop-PC optimierten Webseite ist sicherlich die Nutzung eines Homepage-Baukastens, der diese Optimierung von Haus aus mitbringt. Die Inhalte der Webseite pflegen Sie bequem z.B. am Desktop-PC im Browser, die Nutzer können mit Smartphone, Tablet und Desktop-PC immer alle Inhalte gut und leicht erreichen. Eine solche Plattform bietet z.B. 1&1 mit der DO-IT-YOURSELF-Homepage:
1&1 DO-IT-YOURSELF - die 1&1 DO-IT-YOURSELF Homepage ist ein fertig gehostetes CMS inkl. Domain, eMail-Adresse, Gästebuch, Besucherzähler und vielem mehr. Sie können unter verschiedenen Designs auswählen, z.B. für die private Variante zur Geburt Ihres Kindes, zur Hochzeit etc... Bei der Firmenvariante finden Sie viele Branchenvorlagen. Die DO-IT-YOURSELF-Homepage ist auch für Smartphones und Tablets optimiert!
Ein Homepage-Baukasten ist aber nicht jedermanns Sache. Deshalb nachfolgend weitere Möglichkeiten.
Nutzung einer Dreamweaver-Erweiterung
Wir standen selbst vor der Aufgabe, für die Baumschule Helmers eine Webseite zu erstellen, die überwiegend für Smartphones optimiert ist. Mit der Einführung von Pflanzen-Bildetiketten mit QR-Codes im Verkauf mussten auch die dazu passenden Informationen übers mobile Internet abrufbar sein. Da die Pflanzen im Gartencenter verkauft und dort der Kunde sein Smartphone zum Lesen des QR-Codes nutzen soll, mussten auch hierfür die Webseiten optimal gestaltet sein.
Da wir ausschließlich Dreamweaver zum Erstellen unserer Webseiten nutzen und schon positive Erfahrungen mit Project Seven als Lieferant für gute Dreamweaver Erweiterungen hatten, kam bei der Umsetzung des Projekts wieder eine Erweiterung von www.projectseven.com in Frage.
www.projectseven.com/products/templates/pagepacks/cssbuilder/index.htm - CSS Page Builder Magic - diese Dreamweaver-Erweiterung baut Ihnen automatisch eine Webseite, die für die Nutzung über Desktop-PCs und mobile Geräte optimiert ist. Unser fertiges Projekt Pflanzenmanufaktur können Sie sich hier als Beispiel ansehen: www.pflanzenmanufaktur.de.- www.projectseven.com/products/templates/pagepacks/css-builder2/index.htm - CSS Page Builder Magic 2 mit 16 responsive, mobile-ready Webseiten-Vorlagen
- www.projectseven.com/products/templates/pagepacks/adaptations - PVII Adaptations - Responsive Design for Dreamweaver Making Layouts that always fit. Diese Dreamweaver-Erweiterung liefert 5 Seitenvorlagen, die optimiert sind für die Anzeige auf allen Endgeräten - sogenanntes responsive Webdesign. Die Erweiterung von PVII kann z.B. mit der vorhandenen Tree Menü Magic Erweiterung kombiniert werden. Weitere Features: Automatische Erstellung der Seiten via Interface, suchmaschinenfreundlich, valide und barrierefrei, funktioniert auf allen aktuellen Browsern und kostenloser Support. Die Erweiterung ist kostenpflichtig und macht nur Sinn, wenn auch Dreamweaver als Webdesign-Editor vorhanden ist bzw. zusätzlich erworben wird.
- www.projectseven.com/products/templates/pagepacks/dmm/affinity/affinity-themes/garnet/index.htm - Garnet Theme Pack Add-On for CSS Affinity - diese Dreamweaver-Erweiterung bietet komplett fertige Webseiten-Vorlagen, die auf allen Geräten angezeigt werden. Zudem gibt es neu das Drop Menü Magic - ein vollkommen Smartphone taugliches neues horizontales oder vertikales Ausklappmenü!
Nutzung eines PHP-Scripts
Um Ihre Webseite an die Welt des mobilen Internets anzupassen, gibt es einen Anbieter, der ein passendes PHP-Script bereit stellt:
- www.ads-content.de - ein PHP-Script zum Erstellen einer Homepage-Version für das mobile Internet
Weitere Webseiten mit Informationen zur Optimierung von Webseiten für die Nutzung auf mobilen Geräten:
- aktuell.de.selfhtml.org/artikel/css/mobile-endgeraete - Informationen bei Selfhtml zu via CSS angepassten Inhalten für mobile Geräte
- cm-marketing.de/blog-smartphone-optimierte-websites-erstellen.html - In diesem Blogbeitrag erklärt CM-Marketing.de, wie eine für Smartphones optimierte Webseite erstellt wird.
- www.drweb.de/magazin/webinhalte-fur-smartphones-und-pocket-pcs-aufbereiten - Informationen bei Dr. Web (Archiv) zum Thema Webinhalte für Smartphones und Pocket-PCs aufbereiten
- www.homepage-faqs.de/index.php?site=hp-html-wml-wap-seiten-fuer-mobiltelefon
- www.imeister.de/blog/apple-ipad/webseiten-fur-iphones-und-ipads-optimieren
- klickkomplizen.de/blog/online-marketing/tipps-fur-das-optimieren-von-mobile-websites
- www.labnol.org/internet/google-adsense-responsive-design/25252/ - hier finden Sie eine Anleitung, wie Sie Google Adsense Anzeigen so optimieren können, dass diese auch bei responsive Webdesign vernünftig angezeigt werden.
- mattkersley.com/responsive - auf der Webseite von Matt Kersley können Sie testen, wie Ihre Webseite bei verschiedenen Bildschirmgrößen (z.B. Handy, Tablet, Desktop-PC) dargestellt wird. Sie können dabei zum Testen entweder die Bildschirmbreiten oder verschiedenen Display-Größen wählen.
- www.mobil-durchstarten.de - bei mobil-durchstarten.de finden Sie einen Webseiten-Generator speziell für die Erstellung einer für mobile Geräte optimierten Webseite. Features u.a. eine eigene Domain, ein Kontaktformular, Integration von sozialen Netzwerken, eigene Fotos hochladen und vieles mehr!
- www.proctic.de/de/business_apps/mobile_website_erstellen - Mobile Website Generator- es gibt 3 verschiedene, kostenpflichtige Pakete. Das Angebot kann kostenlos getestet werden.
- www.responsive-webtemplates.com - Vorlagen zum Gestalten individueller Homepages für Handy, Tablet und Desktop, Livedemo der Templates sowie lizenzfreie Fotos und kostenlose Tools für das eigene Design von Webseiten.
- www.startmobile.de - auf startmobile.de (gehört übrigens zu Google) geht es darum, ob Ihre Webseite bereits fit für das mobile Internet ist. Sie können Ihre bestehende Webseite einem mobilen Fitnesstest unterstellen. Sie erhalten eine mobile Vorschau Ihrer Webseite, ordnen Ihre Webseite in eine passende Kategorie ein und beantworten einige Fragen zur Webseite. Am Ende bekommen Sie einen Bericht angezeigt oder auf Wunsch auch zugemailt. Der Bericht enthält Tipps speziell zu Ihrer Webseite, aber auch Best Practices für mobile Webseiten, d.h. wichtige Tipps und Anforderungen an Webseiten bei der Anzeige auf Smartphone & Co. Unter der Rubrik Webseite erstellen finden Sie Anbieter speziell für die Erstellung mobiler Webseiten.
- www.toolboks.de/professionelle-websites/webseite-fuer-ipad-optimieren.html
- t3n.de/news/responsive-webdesign-html5-css3-grundlagen-335305 - Responsive Webdesign mit HTML5 und CSS3 – Grundlagen.
- validator.w3.org/mobile - hier gibt es den W3C mobileOK Checker - der Checker prüft, ob Ihre Webseite für die Nutzung mit mobilen Geräten optimiert ist. Als Ergebnis erhalten Sie einen Prozentwert, in wie weit Ihre Seite schon optimiert ist und Hinweise, wo es noch Probleme gibt. meine-erste-homepage.com erreicht z.B. 0% - die von uns optimierte Webseite pflanzenmanufaktur.de erreicht immerhin 74%...
- www.youtube.com/watch?v=NoHe8feMDv0 - hier gibt es ein Video-Tutorial von HTMLworld bei dem der Autor wesentliche Dinge zur Erstellung von Webseiten für Smartphones erläutert.
- www.zuellich.de/tutorials/css-fuer-smartphones - CSS für Smartphones
Wir wissen, dass wir gerade bei der Optimierung von Webseiten für Smartphones und Tablets am Anfang der Entwicklung stehen. Wir bitte daher alle Leser, die Links und Tipps für uns haben, uns diese zukommen zu lassen, zum Beispiel im folgenden Kommentarfeld etwas weiter unten. Alternativ können Sie uns die Informationen auch über unsere Rubrik Seite anmelden zukommen lassen.
Vielen Dank für Ihre Mitarbeit!
| Twittern |
Weitere interessante Rubriken / Webseiten zu diesem Themenbereich:
- QR-Code-Generator für die eigene Homepage - lassen Sie Ihre Homepage-Besucher die praktischen quadratischen QR-Codes auf Ihrer Webseite selbst erstellen!
Newsbox
Nachfolgend die 5 neuesten Nachrichten, Links und Tools für Webmaster:Responsive Webtemplates
www.responsive-webtemplates.com - Vorlagen zum Gestalten individueller Homepages für Handy, Tablet und Desktop, Livedemo der Templates sowie lizenzfreie Fotos und kostenlose Tools für das eigene Design von Webseiten.
Geschrieben am 13 May 2013 von meine-erste-homepage.com
Homepage Service Peukert
www.homepage-service-peukert.de - Homepageservice von A bis Z - Erstellung von Webseiten, Bannern, Logos, Header und Verkauf von Software. Von der Idee, der Erstellung, den Eintrag in Suchmaschinen, der Werbung und der Betreuung einer Webseite bietet mein Homepage Service alles aus einer Hand. Ideal für Privatpersonen, Vereine, Kleinunternehmen und Vermieter von Ferienobjekten.
Geschrieben am 13 May 2013 von meine-erste-homepage.com
Kostenlose Subdomains bei Seite24.tk
seite24.tk - kostenloser Kurz-URL Dienst mit den Domains seite24.tk, forum123.tk und te4ms.tk.
Geschrieben am 12 May 2013 von meine-erste-homepage.com
Von Behren Mediendesign
www.vb-mediendesign.net - Von Behren Mediendesign ist eine kreative Agentur aus Petershagen-Friedewalde mit dem Fokus auf maßgeschneiderten Gestaltungslösungen nicht nur für kleine und mittelständische Unternehmen, sondern auch für Privatpersonen und Vereine. Sowohl im Bereich der digitalen Medien als auch der Printmedien bieten wir Ihnen individuelle Lösungen aus einer Hand.
Geschrieben am 12 May 2013 von meine-erste-homepage.com
Art und Werk - Online Marketing und Webdesign
www.art-und-werk.de - Art und Werk Online Marketing und Webdesign mit Sitz in Bad Fallingbostel hat sich auf Beratung und Begleitung von Unternehmen im Online Marketing und Webdesignspezialisiert. Insbesondere betreut Art und Werk Online Marketing Bereiche wie: Suchmaschinenoptimierung, Suchmaschinenmarketing-Google Adwords, Social Media und benutzerfreundliches Webdesign.
Geschrieben am 12 May 2013 von meine-erste-homepage.com
Mehr Nachrichten in unserer Rubrik "Updates und News für Webmaster"
Die Webseite sollte auf jeden Fall responsive sein. Ich baue mir nur noch Webseiten, welche dieses Kriterium erfüllen. Das testen geht eigentlich ganz einfach: Einfach Browser-Fenster verkleinern oder vergrößern. Wer alle Standard-Größen prüfen will, dem empfehle ich http://mattkersley.com/responsive/ . Hier kann man eine URL eingeben, die anschließend in den gängigen Smartphone und Tablet Auflösungen angezeigt wird.
Greets,
Stephan
Hier kann man ganz einfach seine Website in wenigen Klicks auf eine mobile Version umwandeln.
http://cm-marketing.de/blog-smartphone-optimierte-websites-erstellen.html
Selbst Adobe stellt die Etnwicklung und Unterstützung für das mobile Flash ein und seit HTML 5 ist Flash obsolet. Diese Tatsache hat die Firma mit dem Apfel erkannt und, auch im Sinne der Baterielaufzeiten, bereits Flash nicht mehr umgesetzt.
Daraus abzuleiten das man Flash nicht einsetzen soll weil die mobilen Geräte von Apple dieses nicht untestützen ist genau so unproffesionell wie die Nutzung von Dreamweaver. Wer nicht im Quellcode arbeiten kann sollte es lassen.
Dreamweaver ist zwar eine nette IDE, aber um wirklich zu verstehen was man tut sollte, nein, darf man Dreamviewer nicht nutzen. Der code der von Dreamweaver ausgespuckt wird ist sogar für anfänger von der strucktur her grausam. Unnötige CSS Klassen sind da das geringste übel.
Das beste um seine Webseit für Mobile geräte (und ich rede von Geräten von unter 7 Zoll display größe) zu optimieren ist die gute alte handarbeit per (vernünftiger) IDE wie Eclipse, Notepad++ und co oder ganz Klassisch per Texteditor mit unterstützung von google, selfhtml, css4you usw...
mfg
ist nicht kostenlos!
es gibt auch die Möglichkeit die Webseite erkennen zu lassen ob ein Mobiles Gerät oder ein Desktop PC die Seite anguckt.
Demnach kann man Mobile Geräte auf eine "kleine" Seite weiterleiten und die "große", teilweise vielleicht sogar über Jahre bewährte Seite, weiterhin bestehen lassen.
Man kennt das vielleicht, wenn man mit einem Mobilen Gerät surft, Beispiel Google, so findet man eine "sparsame" Version der Suchmaschiene und eine Möglichkeit auf die "Klassische Seite" zu wechseln, sprich, der Webseite mitzuteilen "Ich bin ein mobiles Gerät, möchte aber trotzdem die Klassische Seite sehen." Nutzer, die freiwillig solch einen Link benutzen, sind auch dazu bereit eventuell eine längere Wartezeit in Anspruch zu nehmen.
Hier also mein Tipp, fragt eure Besucher nach dem Gerät, das sie nutzen.
Hierzu ein kleines KOSTENLOSES TOOL http://detectmobilebrowsers.mobi/
Anschließend schickt sie, je nachdem wie das Ergebniss ausfällt, auf eine andere Webseite.
Viele mobile Browser haben die Möglichkeit die Funktion auszuschalten, quasie der Webseite mitzuteilen "nein, ich bin ein Desktop PC" hierzu auch ein Tipp.
Bietet einfach unten im Footer eurer Webseite die Möglichkeit an zu switchen. Also einfach einen Link auf die jeweils andere Seite.
Ich hoffe ich konnte Helfen.