Mobile Webseiten oder Responsives Webdesign?

Wie Ihre Homepage auch auf Smartphone und Tablet perfekt funktioniert

Ob responsive oder mobile Webseite: Ein Webauftritt muss heute auf allen Ausgabegeräten funktionieren.

Wissen Sie, von wo und wie Ihre Kunden Ihre Website aufrufen? Wird Ihre Website auf einem Smartphone oder Tablet-Computer genauso gut und übersichtlich dargestellt, wie auf einem Laptop oder PC? Beide Fragen sollten Sie auch als mittelständischer Unternehmer künftig mit „Ja“ beantworten können. Denn die Internet-Nutzer sind so mobil und flexibel wie nie zuvor:
Rund 40,4 Millionen Smartphone-Nutzer gab es Anfang 2014 in Deutschland. Die Zahl der Tablet-Nutzer wird sich Jahr 2015 auf rund 30 Millionen belaufen (Quelle Statista).

Mobile Kunden wollen funktionierende Webseiten auf allen Bildschirmen

Die Mobilität Ihrer Kunden stellt Ihre Webeite vor eine völlig neue Herausforderung. Wurde bisher ein Webauftritt zumeist für die Bildschirmauflösung von maximal 1000 px Breite auf dem Computer-Desktop optimiert, gibt es jetzt eine Vielzahl von Größen für Smartphones, Tablets, Laptops etc. Und ständig kommen neue Endgeräte dazu.

Aber nicht nur die extrem unterschiedlichen Bildschirmgrößen erschweren die Darstellung, auch einige Techniken sind nicht mit allen mobilen Endgeräten kompatibel, so werden beispielsweise Flash-Animationen nicht auf dem iPhone oder iPad dargestellt.

Um Ihre Webseite für alle mobilen Besucher gleichermaßen gut aussehen zu lassen, stellen wir Ihnen hier zwei verschiedene Möglichkeiten vor:

1. Firmen-Webseite wird ergänzt durch mobile Webseite

Damit Ihr Internetauftritt vor allem auf Smartphones gut funktioniert, können Sie zusätzlich eine mobile Webseite anbieten. Diese zeigt reduziert und übersichtlich die wichtigsten Infos zu Ihrem Unternehmen, wie Leistungen, Öffnungszeiten, Kontaktdaten, Anfahrtsbeschreibung etc.

Vorteil:
– Eine mobile Webseite ist schnell und kostengünstig umsetzbar.

Nachteile:
– Es besteht ein doppelter Pflegeaufwand bei der Aktualisierung von Texten und Bildern.
– Für Tablets ist die Darstellung der mobilen Webseite meist nicht optimal. Entweder benötigt man dann eine zusätzliche Variante in einer Zwischengröße, oder die herkömmliche Desktop-Version der Webseite muss für Tablets optimiert werden.

2. Firmen-Webseite wird erstellt im responsiven Webdesign

Responsives Webdesign ist die technische Umsetzung eines anpassungsfähigen Website-Layouts. Gemeint ist damit, dass Ihre Webseite so gestaltet und programmiert wird, dass sie automatisch „reagiert“, d.h. Design, Navigation und Inhalte passen sich der Bildschirmauflösung des Endgerätes an. Ziel ist es, die komplette Website auf einem Smartphone genauso benutzerfreundlich und gut lesbar darzustellen, wie auf einem großen Bildschirm.

Vorteile:
– Eine responsives Webseite ist einfacher zu pflegen, als die Kombination von „normaler“ Webseite und mobilen Versionen. Denn alle Inhalte, Texte und Bilder werden nur einmalig angelegt und aktualisiert.
– Responsives Webdesign wird mittlerweile auch von Google zur Erstellung mobiler Webseiten empfohlen, da nur eine Sitemap übermittelt werden muss, doppelter Content vermieden wird, Google Crawler können die Seite leichter korrekt indexieren und Besucher die Inhalte schneller im Netz teilen. All dies wirkt sich positiv auf das Suchmaschinen-Ranking aus.

Nachteile:
– Das responsive Webdesign erfordert eine komplette Neu-Gestaltung und -Programmierung der bestehenden Webseite.
– Eine responsive Gestaltung und Programmierung ist komplexer als bei herkömmlichen Webseiten. Dieser Mehraufwand amortisiert sich aber schnell durch den geringeren Pflegeaufwand.

Tipp: Nutzen Sie einen geplanten Relaunch Ihrer bestehenden Webseite für den Umstieg auf ein responsives Webdesign.
Wie responsives Webdesign funktioniert

Drei Gestaltungsrichtlinien bestimmen das responsive Webdesign :
1. Form follows function: Die Darstellung von Design und Inhalt der Webseite folgt der Bildschirmauf-lösung des verwendeten Smartphones, Tablets oder Desktops. Das responsive Webdesign orientiert sich damit absolut am Nutzer.
2. Mobile First: Die Entwicklung geht immer von der kleinsten Bildschirmauflösung aus, d.h. dem Smartphone. Dies betrifft sowohl die Gestaltung einzelner Elemente als auch der Datenmenge.
3. Beschränkung auf das Wesentliche: Kleine Bildschirmgrößen zwingen zu einer Reduktion auf das Wesentliche. Ziel ist eine schnelle und intuitive Bedienung durch den Nutzer. Programmiert wird das responsive Webdesign mit HTML5 und CSS3. „Media Queries“ fragen ab, mit welchem Endgerät der Besucher auf die Website zugreift. Geprüft werden u.a. Display-größe, Auflösung, Bildschirmformat, Sprache und welche Eingabemöglichkeiten zur Verfügung stehen (Maus, Tastatur, Finger). Je nach Ergebnis passt sich dann das Layout der Website sowie die Größe von Schriften und Bildern automatisch an.

Was bei welcher Auflösung und an welcher Stelle angezeigt wird, ist Teil des Webseiten-Konzeptes, welches vor der Gestaltung und Programmierung erstellt wird. So werden auf Smartphones die Inhalte oft untereinander angezeigt, Tablets im Hochformat verzichten bei der Darstellung meist auf ein bis zwei Spalten, Tablets im Querformat und große Monitore präsentieren die Webseite in voller Breite.

Praxis-Tipp: Wann sollten Sie eine responsive Webseite einsetzen?
– Wenn Ihre Website nicht optimal auf Smartphones und Tablets dargestellt wird. Dies können Sie ganz einfach testen, indem Sie mit der Maus das Browserfenster entsprechend kleiner ziehen.

– Wenn Ihre Webseite viele Zugriffe von Smartphones und Tablets hat. Dies erfahren Sie über Analyse-Tools, die Sie kostenlos in Ihre Webseite einbinden können, wie Piwik oder Google-Analytics.

Bildrechte: © delightsoft99 – Fotolia.com Bildquelle:© delightsoft99 – Fotolia.com

Die Mattheis Werbeagentur aus Berlin: Full-Service von Corporate Design bis zu Tablet Publishing und Webseiten

Die Mattheis Werbeagentur Berlin macht Werbung für den Mittelstand bundesweit, u.a. für Investitionsgüter, Dienstleister, Gastronomie, Hotels, Nahrungs – und Genussmittel. Wir gestalten für Ihr Unternehmen das Corporate Design inkl. Logo, Broschüre, Flyer, Prospekt, Imagebroschüre und Werbetext. Für Ihre Produkte entwickeln wir die verkaufsstarke Verpackung. Im Corporate Publishing übernehmen wir Grafik, Redaktion und Text für Ihr Kundenmagazin oder die Mitarbeiterzeitung. Im Tablet-Publishing bringt die Mattheis Werbeagentur Berlin Ihre Magazine, Handbücher & Gebrauchsanweisungen als iPad-App und/oder Android-App heraus. Wir bieten Ihnen wirkungsvolle Pressearbeit sowie Online PR und schreiben für Sie Pressetext und Pressemitteilung. Ihre Werbekampagne oder Imagekampagne setzen wir als Printwerbung in Anzeigen und als Onlinewerbung um. Für Ihr Direktmarketing gestalten und texten wir Mailing sowie Newsletter. Wir realisieren Ihre funktionale Website inkl. Webdesign, Webprogrammierung, Online-Shop, Facebook Werbung und Suchmaschinenoptimierung.

mattheis werbeagentur gmbh
Claudia Mattheis
kastanienallee 4
10435 berlin
030-34806330
cm@mattheis-berlin.de
http://www.mattheis-berlin.de